Merge pull request #6144 from stropitek/restore-default-styles

fix: restore v8 default styles

Author: martijnrusschen

docs-site/src/components/Examples/examples.scss

@@ -179,7 +179,8 @@
   border-color: #f00;
 }
 
-.rasta-stripes {
+.rasta-stripes-big {
+  font-size: 1rem !important;
   .react-datepicker__week:nth-child(3n + 1) {
     background-color: #215005;
   }

docs-site/src/examples/ts/customCalendarClassName.tsx

@@ -5,7 +5,7 @@ const CustomCalendarClassName = () => {
     <DatePicker
       selected={selectedDate}
       onChange={setSelectedDate}
-      calendarClassName="rasta-stripes"
+      calendarClassName="rasta-stripes-big"
     />
   );
 };

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;
   }
 }
@@ -765,34 +765,13 @@ h2.react-datepicker__current-month {
   align-items: center;
   display: flex;
   z-index: 2147483647;
-
-  .react-datepicker__day-name,
-  .react-datepicker__day,
-  .react-datepicker__time-name {
-    width: 3em;
-    line-height: 3em;
-  }
-
-  @media (max-width: 400px), (max-height: 550px) {
-    .react-datepicker__day-name,
-    .react-datepicker__day,
-    .react-datepicker__time-name {
-      width: 2em;
-      line-height: 2em;
-    }
-  }
-
-  .react-datepicker__current-month,
-  .react-datepicker-time__header {
-    font-size: $datepicker__font-size * 1.8;
-  }
 }
 
 .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;
 }
 

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;