fix: correct react-datepicker children which use em units

Author: stropitek

src/stylesheets/datepicker.scss

@@ -42,8 +42,8 @@
 
   .react-datepicker__time,
   .react-datepicker__time-box {
-    border-bottom-left-radius: 0.3em;
-    border-bottom-right-radius: 0.3em;
+    border-bottom-left-radius: 0.375em;
+    border-bottom-right-radius: 0.375em;
   }
 }
 
@@ -266,7 +266,7 @@ h2.react-datepicker__current-month {
 
   .react-datepicker__year-text {
     display: inline-block;
-    width: 4em;
+    width: 5em;
     margin: 2px;
   }
 }
@@ -278,7 +278,7 @@ h2.react-datepicker__current-month {
   .react-datepicker__month-text,
   .react-datepicker__quarter-text {
     display: inline-block;
-    width: 4em;
+    width: 5em;
     margin: 2px;
   }
 }
@@ -331,7 +331,7 @@ h2.react-datepicker__current-month {
   &--with-today-button {
     display: inline;
     border: 1px solid #aeaeae;
-    border-radius: 0.3em;
+    border-radius: 0.375em;
     position: absolute;
     right: -87px;
     top: 0;
@@ -340,14 +340,14 @@ h2.react-datepicker__current-month {
   .react-datepicker__time {
     position: relative;
     background: white;
-    border-bottom-right-radius: 0.3em;
+    border-bottom-right-radius: 0.375em;
 
     .react-datepicker__time-box {
       width: 85px;
       overflow-x: hidden;
       margin: 0 auto;
       text-align: center;
-      border-bottom-right-radius: 0.3em;
+      border-bottom-right-radius: 0.375em;
 
       ul.react-datepicker__time-list {
         list-style: none;
@@ -596,7 +596,7 @@ h2.react-datepicker__current-month {
 
   .react-datepicker__calendar-icon {
     position: absolute;
-    padding: 0.5em;
+    padding: 0.625em;
     box-sizing: content-box;
   }
 }
@@ -769,16 +769,16 @@ h2.react-datepicker__current-month {
   .react-datepicker__day-name,
   .react-datepicker__day,
   .react-datepicker__time-name {
-    width: 3em;
-    line-height: 3em;
+    width: 3.75em;
+    line-height: 3.75em;
   }
 
   @media (max-width: 400px), (max-height: 550px) {
     .react-datepicker__day-name,
     .react-datepicker__day,
     .react-datepicker__time-name {
-      width: 2em;
-      line-height: 2em;
+      width: 2.5em;
+      line-height: 2.5em;
     }
   }
 
@@ -789,10 +789,10 @@ h2.react-datepicker__current-month {
 }
 
 .react-datepicker__children-container {
-  width: 13.8em;
-  margin: 0.4em;
-  padding-right: 0.2em;
-  padding-left: 0.2em;
+  width: 17.25em;
+  margin: 0.5em;
+  padding-right: 0.25em;
+  padding-left: 0.25em;
   height: auto;
 }
 
@@ -813,7 +813,3 @@ h2.react-datepicker__current-month {
   height: 1em;
   vertical-align: -0.125em;
 }
-
-.react-datepicker-popper-offset {
-  margin-top: -0.7em;
-}

src/stylesheets/variables.scss

@@ -15,11 +15,11 @@ $datepicker__navigation-disabled-color: color.adjust(
 ) !default;
 $datepicker__border: 1px solid $datepicker__border-color;
 $datepicker__border-radius: 0.3rem !default;
-$datepicker__day-margin: 0.166em !default;
+$datepicker__day-margin: 0.208em !default;
 $datepicker__font-size: 0.8rem !default;
 // stylelint-disable-next-line scss/dollar-variable-colon-space-after
 $datepicker__font-family:
   "Helvetica Neue", helvetica, arial, sans-serif !default;
-$datepicker__item-size: 1.7em !default;
-$datepicker__margin: 0.4em !default;
+$datepicker__item-size: 2.125em !default;
+$datepicker__margin: 0.5em !default;
 $datepicker__navigation-button-size: 32px !default;