jingrow/air-datepicker
1
0
Fork 0
mirror of https://github.com/frappe/air-datepicker.git synced 2026-01-14 11:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

change text colors, padding, add description

Browse Source
This commit is contained in:
t1m0n 2015-11-27 17:53:01 +03:00
parent 3311a1f5a1
commit 03e2105231
14 changed files with 214 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
dist/css/datepicker.css vendored
View File

@ -1,9 +1,12 @@
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
color: #ddd;
font-size: .9em; }
color: #dedede; }
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
color: #c5c5c5; }
.-disabled-.datepicker--cell-day.-other-month-:hover, .-disabled-.datepicker--cell-year.-other-decade-:hover {
color: #dedede; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
background: #def2fa; }
background: #a2ddf6; }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }
@ -20,7 +23,7 @@
flex-wrap: wrap; }
.datepicker--cell {
border-radius: 2px;
border-radius: 4px;
cursor: pointer;
display: -webkit-flex;
display: -ms-flexbox;
@ -37,19 +40,19 @@
.datepicker--cell:hover {
background: #eee; }
.datepicker--cell.-current- {
color: #60C4F5; }
color: #4EB5E6; }
.datepicker--cell.-current-:hover {
background: rgba(96, 196, 245, 0.05); }
color: #4a4a4a; }
.datepicker--cell.-disabled- {
cursor: default;
color: #ddd;
color: #aeaeae;
background: none; }
.datepicker--cell.-selected- {
color: #fff;
background: skyblue; }
background: #5cc4ef; }
.datepicker--cell.-selected-.-current- {
color: #fff;
background: skyblue; }
background: #5cc4ef; }
.datepicker--days-names {
display: -webkit-flex;
@ -57,10 +60,11 @@
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
flex-wrap: wrap;
margin: 8px 0 3px; }
.datepicker--day-name {
color: #f5a33a;
color: #FF9A19;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
@ -73,13 +77,11 @@
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
height: 32px;
text-align: center;
text-transform: uppercase;
font-size: 13px; }
font-size: .8em; }
.datepicker--cell-day {
border-radius: 50%;
width: 14.28571%; }
.datepicker--cells-months {
@ -100,11 +102,14 @@
height: 33.33%; }
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
color: #ddd;
font-size: .9em; }
color: #dedede; }
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
color: #c5c5c5; }
.-disabled-.datepicker--cell-day.-other-month-:hover, .-disabled-.datepicker--cell-year.-other-decade-:hover {
color: #dedede; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
background: #def2fa; }
background: #a2ddf6; }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }
@ -119,13 +124,14 @@
.datepicker {
background: #fff;
border: 1px solid #ddd;
border-radius: 2px;
border: 1px solid #cccccc;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
border-radius: 4px;
box-sizing: content-box;
font-family: Tahoma, sans-serif;
font-size: 14px;
color: #4a4a4a;
width: 232px;
width: 250px;
position: absolute;
left: -100000px;
opacity: 0;
@ -153,6 +159,8 @@
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; }
.datepicker-inline .datepicker {
border-color: #d7d7d7;
box-shadow: none;
position: static;
left: auto;
right: auto;
@ -164,13 +172,14 @@
display: none; }
.datepicker--content {
padding: 2px; }
box-sizing: content-box;
padding: 4px; }
.datepicker--pointer {
position: absolute;
background: #fff;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #cccccc;
border-right: 1px solid #cccccc;
width: 10px;
height: 10px;
z-index: -1; }
@ -191,15 +200,15 @@
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer {
left: 8px; }
left: 10px; }
.-top-right- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
right: 8px; }
right: 10px; }
.-top-center- .datepicker--pointer, .-bottom-center- .datepicker--pointer {
left: calc(50% - 10px / 2); }
.-left-top- .datepicker--pointer, .-right-top- .datepicker--pointer {
top: 8px; }
top: 10px; }
.-left-bottom- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
bottom: 8px; }
bottom: 10px; }
.-left-center- .datepicker--pointer, .-right-center- .datepicker--pointer {
top: calc(50% - 10px / 2); }
@ -209,11 +218,14 @@
display: block; }
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
color: #ddd;
font-size: .9em; }
color: #dedede; }
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
color: #c5c5c5; }
.-disabled-.datepicker--cell-day.-other-month-:hover, .-disabled-.datepicker--cell-year.-other-decade-:hover {
color: #dedede; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
background: #def2fa; }
background: #a2ddf6; }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }
@ -228,8 +240,9 @@
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 2px;
height: 32px; }
border-bottom: 1px solid #f4f4f4;
min-height: 32px;
padding: 4px; }
.datepicker--nav-title,
.datepicker--nav-action {
@ -246,7 +259,7 @@
.datepicker--nav-action {
width: 32px;
border-radius: 2px;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@ -260,12 +273,16 @@
height: 32px; }
.datepicker--nav-action path {
fill: none;
stroke: #bdbdbd;
stroke: #9c9c9c;
stroke-width: 2px; }
.datepicker--nav-title {
border-radius: 2px;
border-radius: 4px;
padding: 0 8px; }
.datepicker--nav-title i {
font-style: normal;
color: #9c9c9c;
margin-left: 5px; }
.datepicker--nav-title:hover {
background: #eee; }
.datepicker--nav-title.-disabled- {
@ -276,13 +293,13 @@
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 1px 2px; }
padding: 4px;
border-top: 1px solid #f4f4f4; }
.datepicker--button {
background: #f2f2f2;
color: #4EB5E6;
cursor: pointer;
border-radius: 2px;
margin: 0 1px;
border-radius: 4px;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
@ -295,16 +312,20 @@
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 24px; }
height: 32px; }
.datepicker--button:hover {
background: #eaeaea; }
color: #4a4a4a;
background: #eee; }
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
color: #ddd;
font-size: .9em; }
color: #dedede; }
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
color: #c5c5c5; }
.-disabled-.datepicker--cell-day.-other-month-:hover, .-disabled-.datepicker--cell-year.-other-decade-:hover {
color: #dedede; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
background: #def2fa; }
background: #a2ddf6; }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }

2
dist/css/datepicker.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
dist/js/datepicker.js vendored
View File

@ -48,10 +48,11 @@ var Datepicker;
autoClose: false,
// navigation
monthsFiled: 'monthsShort',
prevHtml: '<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>',
nextHtml: '<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>',
navTitles: {
days: 'MM, yyyy',
days: 'MM, <i>yyyy</i>',
months: 'yyyy',
years: 'yyyy1 - yyyy2'
},
@ -148,7 +149,7 @@ var Datepicker;
this.loc = $.extend(true, {}, Datepicker.language.ru)
}
this.loc = $.extend(true, {}, Datepicker.language[lang], Datepicker.language.ru)
this.loc = $.extend(true, {}, Datepicker.language.ru, Datepicker.language[lang])
} else {
this.loc = $.extend(true, {}, Datepicker.language.ru, lang)
}
@ -179,7 +180,7 @@ var Datepicker;
$appendTarget = $inline.insertAfter(this.$el)
}
} else {
$appendTarget = $inline.insertAfter(this.$el)
$appendTarget = $inline.appendTo(this.$el)
}
this.$datepicker = $(baseTemplate).appendTo($appendTarget);
@ -866,7 +867,7 @@ var Datepicker;
d = Datepicker.getParsedDate(date),
currentDate = new Date(),
loc = this.d.loc,
html = loc.months[d.month],
html = loc[this.opts.monthsFiled][d.month],
render = {};
if (this.opts.onRenderCell) {

2
dist/js/datepicker.min.js vendored
View File

File diff suppressed because one or more lines are too long

26
index-ru.html
View File

File diff suppressed because one or more lines are too long

2
page/css/style.css
View File

@ -1 +1 @@
.-text-center-,.promo-header{text-align:center}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,header,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0}body,html{width:100%;height:100%}*,:after,:before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}b,strong{font-weight:700}i{font-style:italic}a{outline:0;color:#47A6EC}textarea{overflow:auto}html{color:#333;font-family:Tahoma,sans-serif;font-size:14px}p{line-height:1.3;margin-bottom:14px}h1,h2,h3,h4{font-family:'Fira Sans',sans-serif;line-height:1}h2{font-weight:100;font-size:32px;margin:48px 0 8px}h3{font-weight:500;font-size:18px;margin:24px 0 8px}h4{font-weight:400;color:#939393;font-size:16px;margin:24px 0 0}.container{width:960px;margin:0 auto;padding:1px 0}.container article{margin:60px 0 30px}input[type=text]{border-radius:4px;outline:0;height:32px;border:1px solid silver;padding:0 8px;margin:0 0 14px;color:#444;font-family:Tahoma,sans-serif;transition:all .2s;width:250px}.hljs,.param-inline{font-family:Consolas,monospace}input[type=text]:focus{border-color:gold;box-shadow:0 0 8px rgba(0,0,0,.1)}ul{margin:0 0 16px}ul li{list-style:none;margin-bottom:8px}.example--label{background:#f4f4f4;border-radius:0 0 4px 4px;position:absolute;padding:4px 12px;right:8px;top:0}.hljs{line-height:1.2;-moz-tab-size:4;tab-size:4}.example{border:1px solid #ddd;border-radius:4px;position:relative;margin:16px 0}.example .example-code{border:none;border-radius:0 0 4px 4px;border-top:1px solid #eee;margin:0}.example-inline{background:red;display:inline-block;vertical-align:middle;margin:0 4px}.example-inline .hljs{padding:0 4px}.example-content{padding:32px}.example-content h1:first-child,.example-content h2:first-child,.example-content h3:first-child{margin-top:0}.example-content>:last-child{margin-bottom:0!important}a:hover{color:#1373ba}.example-code{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin:16px 0;font-size:13px}.param-inline i,.param-inline strong{display:inline-block;margin-right:4px;vertical-align:middle}.example-code code{padding:16px 32px}.param-inline strong{background:#efefef;color:#333;border-radius:4px;font-weight:400;padding:3px 6px 4px}.param-inline i{color:#838383;font-size:.95em;font-style:normal;font-weight:100;font-family:'Fira Sans',sans-serif}.promo-header{font-size:48px;font-weight:100}.promo-header span{display:block;font-size:.5em}.promo-input{height:40px;margin:26px 0;width:300px}.range-example input[type=text]{width:150px}.range-example span{display:inline-block;margin:0 8px}.param-header{margin-bottom:8px}.param-header h3{margin-bottom:2px}.param-header p{margin:0;font-size:13px}.param{margin-bottom:32px}.param-header--label{color:#707070;display:inline-block;vertical-align:middle}
.-text-center-,.datepicker-promo,.promo-header{text-align:center}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,header,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0}body,html{width:100%;height:100%}*,:after,:before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}b,strong{font-weight:700}i{font-style:italic}a{outline:0;color:#47A6EC}textarea{overflow:auto}html{color:#333;font-family:Tahoma,sans-serif;font-size:14px}p{line-height:1.3;margin-bottom:14px}h1,h2,h3,h4{font-family:'Fira Sans',sans-serif;line-height:1}h2{font-weight:100;font-size:32px;margin:48px 0 8px}h3{font-weight:500;font-size:18px;margin:24px 0 8px}h4{font-weight:400;color:#939393;font-size:16px;margin:24px 0 0}.container{width:960px;margin:0 auto;padding:1px 0}.container article{margin:60px 0 30px}input[type=text]{outline:0;height:32px;border:1px solid #979797;padding:0 8px;margin:0 0 14px;color:#444;font-family:Tahoma,sans-serif;transition:all .2s;width:250px}.hljs,.param-inline{font-family:Consolas,monospace}input[type=text]:focus{border-color:#ffd75c}ul{margin:0 0 16px}ul li{list-style:none;margin-bottom:8px}.example--label{background:#ececec;border-radius:0 0 4px 4px;position:absolute;padding:4px 12px;right:8px;top:0}.hljs{line-height:1.2;-moz-tab-size:4;tab-size:4}.example{border:1px solid #ececec;border-radius:4px;position:relative;margin:16px 0}.example .example-code{border:none;border-radius:0 0 4px 4px;border-top:1px solid #ececec;margin:0}.example-inline{background:red;display:inline-block;vertical-align:middle;margin:0 4px}.example-inline .hljs{padding:0 4px}.example-content{padding:32px}.example-content h1:first-child,.example-content h2:first-child,.example-content h3:first-child{margin-top:0}.example-content>:last-child{margin-bottom:0!important}a:hover{color:#1373ba}.example-code{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin:16px 0;font-size:13px}.param-inline i,.param-inline strong{display:inline-block;margin-right:4px;vertical-align:middle}.example-code code{padding:16px 32px}.param-inline strong{background:#efefef;color:#333;border-radius:4px;font-weight:400;padding:3px 6px 4px}.param-inline i{color:#838383;font-size:.95em;font-style:normal;font-weight:100;font-family:'Fira Sans',sans-serif}.promo-header{font-size:48px;font-weight:100}.promo-header span{display:block;font-size:.5em}.datepicker-promo .datepicker-inline,.param-header--label,.range-example span{display:inline-block}.range-example input[type=text]{width:150px}.range-example span{margin:0 8px}.param-header{margin-bottom:8px}.param-header h3{margin-bottom:2px}.param-header p{margin:0;font-size:13px}.param{margin-bottom:32px}.param-header--label{color:#707070;vertical-align:middle}

55
page/jade/pages/index-ru.jade
View File

@ -3,16 +3,40 @@ extends ../layout
block content
h1.promo-header
| AIR DATEPICKER
span легкий соврменный jQuery календарь
span легкий современный jQuery календарь
p.-text-center-
input.promo-input.datepicker-here(type='text' id='example-promo' data-position='bottom center')
.datepicker-here.datepicker-promo
script.
var $promo = $('.datepicker-promo');
$promo.datepicker()
h2 Описание
p
|Легкий кроссбраузерный календарь, написан с использованием
+example-inline('flexbox')
|. Работает во всех современных браузерах:
| <strong>IE 10+</strong>, <strong>Chrome</strong>, <strong>Firefox</strong>, <strong>Safari 8+</strong>, <strong>Opera 17+</strong>.
h2 Установка
+example-code('html') bower i --save air-datepicker
p Либо можно скачать файлы напрямую с <a href="">GitHub</a>
h2 Использование
p
|Подключите стили и скрипты из папки
+example-inline('/dist')
| :
+example-code('html')
:code
<html>
<head>
<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
<script src="dist/js/datepicker.min.js"></script>
</head>
</html>
p
| Календарь автоматически проинициализируется на элементах с классом
+example-inline('.datepicker-here', 'css')
@ -48,13 +72,14 @@ block content
| .
+example
+example-content
input(type='text' data-multiple-dates='3' data-multiple-dates-separator=', ').datepicker-here
input(type='text' data-multiple-dates='3' data-multiple-dates-separator=', ', data-position='right top').datepicker-here
+example-code('html')
:code
<input type="text"
class="datepicker-here"
data-multiple-dates="3"
data-multiple-dates-separator=", " />
data-multiple-dates-separator=", "
data-position='right top'/>
h3 Постоянно видимый календарь
p
@ -372,12 +397,13 @@ block content
.param
+param-header('navTitles', 'object')
+example-code('js').
navTitles = {
days: 'MM, yyyy',
months: 'yyyy',
years: 'yyyy1 - yyyy2'
};
+example-code('js')
:code
navTitles = {
days: 'MM, <i>yyyy</i>',
months: 'yyyy',
years: 'yyyy1 - yyyy2'
};
p
| Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозночения что и в
+example-inline('dateFormat', 'js')
@ -389,6 +415,9 @@ block content
days: '<h3>Выберете дату заезда</h3> MM, yyyy'
}
})
.param
+param-header('monthsField','string','"monthsShort"')
p Какое поле из объекта локализации использовать в качестве названий месяцев, когда каледнарь отображает год.
h2 События
.param
@ -566,8 +595,4 @@ block content
+example-inline('Date()')
+example-code('js').
datepicker.date = new Date();
.datepicker-here#from
.datepicker-here#to
datepicker.date = new Date();

22
page/sass/_page.scss
View File

@ -55,10 +55,9 @@ h4 {
}
input[type='text'] {
border-radius: 4px;
outline: none;
height: 32px;
border: 1px solid #c0c0c0;
border: 1px solid #979797;
padding: 0 8px;
margin: 0 0 14px;
color: #444;
@ -67,8 +66,7 @@ input[type='text'] {
width: 250px;
&:focus {
border-color: gold;
box-shadow: 0 0 8px rgba(0, 0, 0, .1);
border-color: #ffd75c;
}
}
@ -84,7 +82,7 @@ ul {
------------------------------------------------- */
%example-label {
background: #f4f4f4;
background: #ececec;
border-radius: 0 0 4px 4px;
position: absolute;
padding: 4px 12px;
@ -101,7 +99,7 @@ $exampleBorderRadius: 4px;
}
.example {
border: 1px solid #ddd;
border: 1px solid #ececec;
border-radius: $exampleBorderRadius;
position: relative;
margin: 16px 0;
@ -109,7 +107,7 @@ $exampleBorderRadius: 4px;
.example-code {
border: none;
border-radius: 0 0 $exampleBorderRadius $exampleBorderRadius;
border-top: 1px solid #eee;
border-top: 1px solid #ececec;
margin: 0;
}
}
@ -206,10 +204,12 @@ a {
}
}
.promo-input {
height: 40px;
margin: 26px 0;
width: 300px;
.datepicker-promo {
text-align: center;
.datepicker-inline {
display: inline-block;
}
}
// Range example

2
src/js/body.js
View File

@ -141,7 +141,7 @@
d = Datepicker.getParsedDate(date),
currentDate = new Date(),
loc = this.d.loc,
html = loc.months[d.month],
html = loc[this.opts.monthsFiled][d.month],
render = {};
if (this.opts.onRenderCell) {

7
src/js/datepicker.js
View File

@ -48,10 +48,11 @@ var Datepicker;
autoClose: false,
// navigation
monthsFiled: 'monthsShort',
prevHtml: '<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>',
nextHtml: '<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>',
navTitles: {
days: 'MM, yyyy',
days: 'MM, <i>yyyy</i>',
months: 'yyyy',
years: 'yyyy1 - yyyy2'
},
@ -148,7 +149,7 @@ var Datepicker;
this.loc = $.extend(true, {}, Datepicker.language.ru)
}
this.loc = $.extend(true, {}, Datepicker.language[lang], Datepicker.language.ru)
this.loc = $.extend(true, {}, Datepicker.language.ru, Datepicker.language[lang])
} else {
this.loc = $.extend(true, {}, Datepicker.language.ru, lang)
}
@ -179,7 +180,7 @@ var Datepicker;
$appendTarget = $inline.insertAfter(this.$el)
}
} else {
$appendTarget = $inline.insertAfter(this.$el)
$appendTarget = $inline.appendTo(this.$el)
}
this.$datepicker = $(baseTemplate).appendTo($appendTarget);

55
src/sass/_datepicker-config.scss
View File

@ -1,34 +1,40 @@
$dayCellSize: 32px;
$datepickerWidth: 232px;
$datepickerWidth: 250px;
$datepickerMinBodyHeight: 170px;
$datepickerBorderRadius: 2px;
$datepickerPadding: 2px;
$datepickerBorderRadius: 4px;
$datepickerPadding: 4px;
$fontFamily: Tahoma;
$fontSize: 14px;
$yearsPerRow: 4;
$textColor: (
button: #5cc4ef,
otherMonth: #dedede,
disabled: #aeaeae,
currentDate: #4EB5E6,
common: #4a4a4a,
dayNames: #f5a33a,
dayNames: #FF9A19,
navArrows: #9c9c9c
);
$bg: (
selected: #5cc4ef,
hover: #eee
);
$borderColor: (
nav: #f4f4f4,
inline: #d7d7d7,
default: #cccccc
);
$navigationHeight: 32px;
$navigationButtonsOffset: 1px;
$navigationButtonsOffset: 2px;
$pointerSize: 10px;
$pointerOffset: 8px;
// Colors
$colorGrey: #ddd;
$colorAnotherMonth: #ddd;
$colorCellHover: #eee;
$colorCellCurrent: #60C4F5;
$colorCellSelected: skyblue;
$colorCellWeekend: '';
$borderColor: $colorGrey;
$bgButton: #f2f2f2;
$bgButtonHover: darken($bgButton, 3);
$pointerOffset: 10px;
// Transitions
$transitionSpeed: .3s;
@ -37,12 +43,21 @@ $transitionOffset: 8px;
// Objects
%otherMonth {
color: $colorAnotherMonth;
font-size: .9em;
color: map_get($textColor, otherMonth);
&:hover {
color: darken(map_get($textColor, otherMonth), 10);
}
&.-disabled- {
&:hover {
color: map_get($textColor, otherMonth);
}
}
&.-selected- {
color: #fff;
background: lighten($colorCellSelected, 20%);
background: lighten(map_get($bg, selected), 15);
}
&:empty {

18
src/sass/cell.scss
View File

@ -20,30 +20,31 @@
z-index: 1;
&:hover {
background: $colorCellHover;
background: map_get($bg, hover);
}
&.-current- {
color: $colorCellCurrent;
color: map_get($textColor, currentDate);
&:hover {
background: rgba($colorCellCurrent, .05);
color: map_get($textColor, common);
//background: rgba(map_get($textColor, currentDate), .05);
}
}
&.-disabled- {
cursor: default;
color: $colorGrey;
color: map_get($textColor, disabled);
background: none;
}
&.-selected- {
color: #fff;
background: $colorCellSelected;
background: map_get($bg, selected);
&.-current- {
color: #fff;
background: $colorCellSelected;
background: map_get($bg, selected);
}
}
}
@ -54,6 +55,7 @@
.datepicker--days-names {
display: flex;
flex-wrap: wrap;
margin: 8px 0 3px;
}
.datepicker--day-name {
@ -62,17 +64,15 @@
align-items: center;
justify-content: center;
flex: 1;
height: $dayCellSize;
text-align: center;
text-transform: uppercase;
font-size: 13px;
font-size: .8em;
}
// Day cell
// -------------------------------------------------
.datepicker--cell-day {
border-radius: 50%;
width: (100/7)#{'%'};
&.-other-month- {

10
src/sass/datepicker.scss
View File

@ -12,7 +12,8 @@
.datepicker {
background: #fff;
border: 1px solid $borderColor;
border: 1px solid map_get($borderColor, default);
box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
border-radius: $datepickerBorderRadius;
box-sizing: content-box;
font-family: $fontFamily, sans-serif;
@ -47,6 +48,8 @@
.datepicker-inline {
.datepicker {
border-color: map-get($borderColor, inline);
box-shadow: none;
position: static;
left: auto;
right: auto;
@ -60,6 +63,7 @@
}
.datepicker--content {
box-sizing: content-box;
padding: $datepickerPadding;
}
@ -70,8 +74,8 @@ $pointerHalfSize: $pointerSize / 2 - 1;
.datepicker--pointer {
position: absolute;
background: #fff;
border-top: 1px solid $borderColor;
border-right: 1px solid $borderColor;
border-top: 1px solid map-get($borderColor, default);
border-right: 1px solid map-get($borderColor, default);
width: $pointerSize;
height: $pointerSize;
z-index: -1;

26
src/sass/navigation.scss
View File

@ -7,8 +7,9 @@
.datepicker--nav {
display: flex;
justify-content: space-between;
border-bottom: 1px solid map_get($borderColor, nav);
min-height: $navigationHeight;
padding: $datepickerPadding;
height: $navigationHeight;
}
.datepicker--nav-title,
@ -25,7 +26,7 @@
user-select: none;
&:hover {
background: $colorCellHover;
background: map_get($bg, hover);
}
&.-disabled- {
@ -39,7 +40,7 @@
path {
fill: none;
stroke: #bdbdbd;
stroke: map_get($textColor, navArrows);
stroke-width: 2px;
}
}
@ -48,8 +49,14 @@
border-radius: $datepickerBorderRadius;
padding: 0 8px;
i {
font-style: normal;
color: map_get($textColor, navArrows);
margin-left: 5px;
}
&:hover {
background: $colorCellHover;
background: map_get($bg, hover);
}
&.-disabled- {
@ -63,21 +70,22 @@
.datepicker--buttons {
display: flex;
margin: 0 $navigationButtonsOffset $datepickerPadding;
padding: $datepickerPadding;
border-top: 1px solid map_get($borderColor, nav);
}
.datepicker--button {
background: $bgButton;
color: map_get($textColor, currentDate);
cursor: pointer;
border-radius: $datepickerBorderRadius;
margin: 0 $navigationButtonsOffset;
flex: 1;
display: inline-flex;
justify-content: center;
align-items: center;
height: 24px;
height: 32px;
&:hover {
background: $bgButtonHover;
color: map_get($textColor, common);
background: map_get($bg, hover);
}
}