From e0ddfbe56b827279c557c06fb26591708261399d Mon Sep 17 00:00:00 2001
From: t1m0n <t1m0n.TR@gmail.com>
Date: Fri, 13 Nov 2015 11:47:06 +0300
Subject: [PATCH] add padding to datepicker container

---
 dist/css/datepicker.css                | 20 +++++++++++++-------
 sass/datepicker/_cell.scss             |  1 +
 sass/datepicker/_datepicker.scss       |  6 ++++++
 sass/datepicker/_navigation.scss       |  7 ++++---
 sass/datepicker/datepicker-config.scss |  2 +-
 5 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css
index 62ef3b7..4fdf46f 100644
--- a/dist/css/datepicker.css
+++ b/dist/css/datepicker.css
@@ -17,6 +17,9 @@
   box-sizing: content-box;
   width: 224px; }
 
+.datepicker--content {
+  padding: 2px; }
+
 .datepicker--body {
   display: none; }
   .datepicker--body.active {
@@ -30,6 +33,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: 1;
   width: 32px;
   height: 32px;
   text-align: center; }
@@ -51,6 +55,7 @@
   border-bottom: 1px solid #ddd;
   display: flex;
   justify-content: space-between;
+  padding: 2px;
   height: 32px; }
 
 .datepicker--nav-title,
@@ -61,16 +66,16 @@
   justify-content: center; }
 
 .datepicker--nav-action {
-  width: 32px; }
+  width: 32px;
+  border-radius: 2px; }
   .datepicker--nav-action:hover {
     background: #eee; }
   .datepicker--nav-action.-disabled- {
     visibility: hidden; }
 
 .datepicker--nav-title {
-  align-self: center;
-  padding: 4px;
-  border-radius: 2px; }
+  border-radius: 2px;
+  padding: 0 8px; }
   .datepicker--nav-title:hover {
     background: #eee; }
   .datepicker--nav-title.-disabled- {
@@ -79,13 +84,13 @@
 
 .datepicker--buttons {
   display: flex;
-  margin: 4px 2px; }
+  margin: 0 1px 2px; }
 
 .datepicker--button {
   background: #f2f2f2;
   cursor: pointer;
   border-radius: 2px;
-  margin: 0 2px;
+  margin: 0 1px;
   flex: 1;
   display: inline-flex;
   justify-content: center;
@@ -140,7 +145,8 @@
       background: skyblue; }
 
 .datepicker--cell-day {
-  border-radius: 50%; }
+  border-radius: 50%;
+  width: 14.28571%; }
 
 .datepicker--cell-month {
   width: 33.33%;
diff --git a/sass/datepicker/_cell.scss b/sass/datepicker/_cell.scss
index a8d7d07..489e87f 100644
--- a/sass/datepicker/_cell.scss
+++ b/sass/datepicker/_cell.scss
@@ -55,6 +55,7 @@
 
 .datepicker--cell-day {
   border-radius: 50%;
+  width: (100/7)#{'%'};
 
   &.-other-month- {
     @extend %otherMonth;
diff --git a/sass/datepicker/_datepicker.scss b/sass/datepicker/_datepicker.scss
index 5a9f079..6240ac3 100644
--- a/sass/datepicker/_datepicker.scss
+++ b/sass/datepicker/_datepicker.scss
@@ -11,6 +11,10 @@
   width: $datepickerWidth;
 }
 
+.datepicker--content {
+  padding: $datepickerPadding;
+}
+
 //  Body
 // -------------------------------------------------
 
@@ -30,10 +34,12 @@
   display: flex;
   flex-wrap: wrap;
 }
+
 .datepicker--day-name {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: 1;
   width: $dayCellSize;
   height: $dayCellSize;
   text-align: center;
diff --git a/sass/datepicker/_navigation.scss b/sass/datepicker/_navigation.scss
index 2f57596..e0b1d15 100644
--- a/sass/datepicker/_navigation.scss
+++ b/sass/datepicker/_navigation.scss
@@ -8,6 +8,7 @@
   border-bottom: 1px solid $colorGrey;
   display: flex;
   justify-content: space-between;
+  padding: $datepickerPadding;
   height: $navigationHeight;
 }
 
@@ -21,6 +22,7 @@
 
 .datepicker--nav-action {
   width: $dayCellSize;
+  border-radius: $datepickerBorderRadius;
 
   &:hover {
     background: $colorCellHover;
@@ -32,9 +34,8 @@
 }
 
 .datepicker--nav-title {
-  align-self: center;
-  padding: 4px;
   border-radius: $datepickerBorderRadius;
+  padding: 0 8px;
 
   &:hover {
     background: $colorCellHover;
@@ -51,7 +52,7 @@
 
 .datepicker--buttons {
   display: flex;
-  margin: $navigationButtonsOffset*2 $navigationButtonsOffset;
+  margin: 0 $navigationButtonsOffset $datepickerPadding;
 }
 
 .datepicker--button {
diff --git a/sass/datepicker/datepicker-config.scss b/sass/datepicker/datepicker-config.scss
index b618d44..bcbf19b 100644
--- a/sass/datepicker/datepicker-config.scss
+++ b/sass/datepicker/datepicker-config.scss
@@ -6,7 +6,7 @@ $yearsPerRow: 4;
 $textColor: #333;
 
 $navigationHeight: 32px;
-$navigationButtonsOffset: 2px;
+$navigationButtonsOffset: 1px;
 
 // Colors
 $colorGrey: #ddd;