diff --git a/docs-site/src/components/Examples/examples.scss b/docs-site/src/components/Examples/examples.scss index db1e2cdad..4b17846ae 100644 --- a/docs-site/src/components/Examples/examples.scss +++ b/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; } diff --git a/docs-site/src/examples/ts/customCalendarClassName.tsx b/docs-site/src/examples/ts/customCalendarClassName.tsx index ae99a0b43..c5e55a6b2 100644 --- a/docs-site/src/examples/ts/customCalendarClassName.tsx +++ b/docs-site/src/examples/ts/customCalendarClassName.tsx @@ -5,7 +5,7 @@ const CustomCalendarClassName = () => { ); }; diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss index a8dac0e5a..a2f0f21d7 100644 --- a/src/stylesheets/datepicker.scss +++ b/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; } diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss index 69be2e1a3..53866477f 100644 --- a/src/stylesheets/variables.scss +++ b/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;