Merge pull request #3998 from Recras/master

Replace all `rem` units with `em` units

Author: martijnrusschen

src/stylesheets/datepicker.scss

@@ -30,8 +30,8 @@
 
   .react-datepicker__time,
   .react-datepicker__time-box {
-    border-bottom-left-radius: 0.3rem;
-    border-bottom-right-radius: 0.3rem;
+    border-bottom-left-radius: 0.3em;
+    border-bottom-right-radius: 0.3em;
   }
 }
 
@@ -231,7 +231,7 @@
 
   .react-datepicker__year-text {
     display: inline-block;
-    width: 4rem;
+    width: 4em;
     margin: 2px;
   }
 }
@@ -243,7 +243,7 @@
   .react-datepicker__month-text,
   .react-datepicker__quarter-text {
     display: inline-block;
-    width: 4rem;
+    width: 4em;
     margin: 2px;
   }
 }
@@ -296,7 +296,7 @@
   &--with-today-button {
     display: inline;
     border: 1px solid #aeaeae;
-    border-radius: 0.3rem;
+    border-radius: 0.3em;
     position: absolute;
     right: -87px;
     top: 0;
@@ -305,14 +305,14 @@
   .react-datepicker__time {
     position: relative;
     background: white;
-    border-bottom-right-radius: 0.3rem;
+    border-bottom-right-radius: 0.3em;
 
     .react-datepicker__time-box {
       width: 85px;
       overflow-x: hidden;
       margin: 0 auto;
       text-align: center;
-      border-bottom-right-radius: 0.3rem;
+      border-bottom-right-radius: 0.3em;
 
       ul.react-datepicker__time-list {
         list-style: none;
@@ -479,7 +479,7 @@
 
   .react-datepicker__calendar-icon {
     position: absolute;
-    padding: 0.5rem;
+    padding: 0.5em;
   }
 }
 
@@ -633,16 +633,16 @@
   .react-datepicker__day-name,
   .react-datepicker__day,
   .react-datepicker__time-name {
-    width: 3rem;
-    line-height: 3rem;
+    width: 3em;
+    line-height: 3em;
   }
 
   @media (max-width: 400px), (max-height: 550px) {
     .react-datepicker__day-name,
     .react-datepicker__day,
     .react-datepicker__time-name {
-      width: 2rem;
-      line-height: 2rem;
+      width: 2em;
+      line-height: 2em;
     }
   }
 
@@ -653,10 +653,10 @@
 }
 
 .react-datepicker__children-container {
-  width: 13.8rem;
-  margin: 0.4rem;
-  padding-right: 0.2rem;
-  padding-left: 0.2rem;
+  width: 13.8em;
+  margin: 0.4em;
+  padding-right: 0.2em;
+  padding-left: 0.2em;
   height: auto;
 }
 

src/stylesheets/variables.scss

@@ -10,11 +10,11 @@ $datepicker__navigation-disabled-color: lighten(
   10%
 ) !default;
 
-$datepicker__border-radius: 0.3rem !default;
-$datepicker__day-margin: 0.166rem !default;
-$datepicker__font-size: 0.8rem !default;
+$datepicker__border-radius: 0.3em !default;
+$datepicker__day-margin: 0.166em !default;
+$datepicker__font-size: 0.8em !default;
 $datepicker__font-family: "Helvetica Neue", helvetica, arial, sans-serif !default;
-$datepicker__item-size: 1.7rem !default;
-$datepicker__margin: 0.4rem !default;
+$datepicker__item-size: 1.7em !default;
+$datepicker__margin: 0.4em !default;
 $datepicker__navigation-button-size: 32px !default;
 $datepicker__triangle-size: 8px !default;