add padding to datepicker container

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%;

sass/datepicker/_cell.scss

@@ -55,6 +55,7 @@
 
 .datepicker--cell-day {
   border-radius: 50%;
+  width: (100/7)#{'%'};
 
   &.-other-month- {
     @extend %otherMonth;

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;

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 {

sass/datepicker/datepicker-config.scss

@@ -6,7 +6,7 @@ $yearsPerRow: 4;
 $textColor: #333;
 
 $navigationHeight: 32px;
-$navigationButtonsOffset: 2px;
+$navigationButtonsOffset: 1px;
 
 // Colors
 $colorGrey: #ddd;