change text colors, padding, add description

dist/css/datepicker.css

@@ -1,9 +1,12 @@
 .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
-  color: #ddd;
+  color: #dedede; }
-  font-size: .9em; }
+  .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;
+  color: #dedede; }
-  font-size: .9em; }
+  .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: 1px solid #cccccc;
-  border-radius: 2px;
+  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-top: 1px solid #cccccc;
-  border-right: 1px solid #ddd;
+  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;
+  color: #dedede; }
-  font-size: .9em; }
+  .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;
+  border-bottom: 1px solid #f4f4f4;
-  height: 32px; }
+  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;
+  border-radius: 4px;
-  margin: 0 1px;
   -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;
+  color: #dedede; }
-  font-size: .9em; }
+  .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; }

dist/js/datepicker.js

@@ -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) {

page/css/style.css

@@ -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}

page/jade/pages/index-ru.jade

@@ -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').
+					+example-code('js')
-						navTitles = {
+						:code
-							days: 'MM, yyyy',
+							navTitles = {
-							months: 'yyyy',
+								days: 'MM, <i>yyyy</i>',
-							years: 'yyyy1 - yyyy2'
+								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.date = new Date();
-
-
-			.datepicker-here#from
-			.datepicker-here#to

page/sass/_page.scss

@@ -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;
+    border-color: #ffd75c;
-    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
   }
 }
 
@@ -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 {
+.datepicker-promo {
-  height: 40px;
+  text-align: center;
-  margin: 26px 0;
+
-  width: 300px;
+  .datepicker-inline {
+    display: inline-block;
+  }
 }
 
 //  Range example

src/js/body.js

@@ -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) {

src/js/datepicker.js

@@ -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);

src/sass/_datepicker-config.scss

@@ -1,34 +1,40 @@
 $dayCellSize: 32px;
-$datepickerWidth: 232px;
+$datepickerWidth: 250px;
 $datepickerMinBodyHeight: 170px;
-$datepickerBorderRadius: 2px;
+$datepickerBorderRadius: 4px;
-$datepickerPadding: 2px;
+$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;
+$pointerOffset: 10px;
-
-// Colors
-$colorGrey: #ddd;
-$colorAnotherMonth: #ddd;
-$colorCellHover: #eee;
-$colorCellCurrent: #60C4F5;
-$colorCellSelected: skyblue;
-$colorCellWeekend: '';
-$borderColor: $colorGrey;
-$bgButton: #f2f2f2;
-$bgButtonHover: darken($bgButton, 3);
 
 // Transitions
 $transitionSpeed: .3s;
@@ -37,12 +43,21 @@ $transitionOffset: 8px;
 
 // Objects
 %otherMonth {
-  color: $colorAnotherMonth;
+  color: map_get($textColor, otherMonth);
-  font-size: .9em;
+
+  &: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 {

src/sass/cell.scss

@@ -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- {

src/sass/datepicker.scss

@@ -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-top: 1px solid map-get($borderColor, default);
-  border-right: 1px solid $borderColor;
+  border-right: 1px solid map-get($borderColor, default);
   width: $pointerSize;
   height: $pointerSize;
   z-index: -1;

src/sass/navigation.scss

@@ -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);
   }
 }