$THEME_NAME: 'default' !default; $FIELD_BORDER_COLOR: gray !default; $ICON_COLOR: gray !default; $ICON_COLOR_HOVER: darken($ICON_COLOR, 20%); $DAY_SIZE: 40px !default; $DAY_COLOR_DISABLED: #D8D8D8 !default; $DAY_COLOR_HOVER: #D8EDFF !default; $VIEW_BORDER_COLOR: gray !default; $ACTIVE_COLOR: rgb(52, 154, 239) !default; $ACTIVE_IN_RANGE_COLOR: lighten($ACTIVE_COLOR, 20%) !default; $ACTIVE_IN_HOVER_RANGE_COLOR: lighten($ACTIVE_IN_RANGE_COLOR, 15%) !default; $ACTIVE_RANGE_LIMITS_COLOR: lighten($ACTIVE_COLOR, 10%) !default; $OTHER_MONTH_DAY_COLOR: lighten(gray, 20%) !default; $WEEKEND_HIGHLIGHT_COLOR: red !default; $TODAY_HIGHLIGHT_COLOR: magenta !default; $WEEKEND_OTHER_MONTH_HIGHLIGHT_COLOR: lighten(#BB4343, 20%) !default; $TODAY_OTHER_MONTH_HIGHLIGHT_COLOR: lighten(magenta, 20%) !default; $FOOTER_BUTTON_FONT_SIZE: 0.9em !default; $WEEK_NUMBER_COLOR: #B1B1B1 !default; $WEEK_NUMBER_FONT_SIZE: 0.8em !default; $WEEK_DAY_NAMES_TEXT_TRANSFORM: uppercase !default; $NAV_BAR_ARROW_COLOR: darken(gray, 10%) !default; $NAV_BAR_ARROW_COLOR_HOVER: lighten(gray, 10%) !default; $NAV_BAR_ARROW_COLOR_DISABLED: #C5C5C5; $CALENDAR_ICON_COLOR: $ICON_COLOR !default; $CALENDAR_ICON_COLOR_ACTIVE: $ACTIVE_COLOR !default; $CLEAR_ICON_COLOR: $ICON_COLOR !default; $CLEAR_ICON_COLOR_ACTIVE: $ACTIVE_COLOR !default; $CALENDAR_ICON_COLOR_HOVER: $ICON_COLOR_HOVER !default; $CLEAR_ICON_COLOR_HOVER: $ICON_COLOR_HOVER !default; @import './field.scss'; @import './clock.scss'; @import './footer.scss'; @import './spinner.scss'; @import './year-view.scss'; @import './decade-view.scss'; @import './history-view.scss'; @import './navbar.scss'; $base: 'react-date-picker__month-view'; @import './picker.scss'; .react-date-picker__calendar--theme-#{$THEME_NAME}, .react-date-picker__month-view--theme-#{$THEME_NAME}, .react-date-picker__date-field--theme-#{$THEME_NAME}, .react-date-picker__transition-month-view--theme-#{$THEME_NAME} { font-size: 16px; font-size: 1em; } .react-date-picker__transition-month-view--theme-#{$THEME_NAME} { border: 1px solid $VIEW_BORDER_COLOR; .#{$base}--theme-#{$THEME_NAME}, .react-date-picker__multi-month-view--theme-#{$THEME_NAME}, .react-date-picker__calendar--theme-#{$THEME_NAME} { border: none; } } .react-date-picker__navigation-view--theme-#{$THEME_NAME} { border: 1px solid $VIEW_BORDER_COLOR; .react-date-picker__month-view, .react-date-picker__multi-month-view { border: none; } } .#{$base}--theme-#{$THEME_NAME} { background: white; position: relative; border: 1px solid $VIEW_BORDER_COLOR; overflow: hidden; .#{$base}-week-day-names { text-transform: $WEEK_DAY_NAMES_TEXT_TRANSFORM; } .#{$base}-week-number { color: $WEEK_NUMBER_COLOR; font-size: $WEEK_NUMBER_FONT_SIZE; } .#{$base}-day-text { } .#{$base}-cell { min-width: $DAY_SIZE; } .#{$base}-day { z-index: 10; .#{$base}-day-text { border: 2px solid transparent; border-radius: 50%; cursor: pointer; text-align: center; min-width: $DAY_SIZE; min-height: $DAY_SIZE; max-width: $DAY_SIZE; max-height: $DAY_SIZE; display: flex; align-items: center; justify-content: center; &:hover { background: $DAY_COLOR_HOVER padding-box; } } &--in-hover-range, &--in-range { overflow: hidden; .#{$base}-day-text { position: relative; &:after, &:before { position: absolute; height: 100%; top: 0px; bottom: 0px; width: 500%; background: $ACTIVE_COLOR; z-index: -1; content: ''; } &:before { right: 50%; } &:after { left: 50%; } } &.#{$base}-day--hover-range-start, &.#{$base}-day--range-start:not(.#{$base}-day--in-hover-range) { .#{$base}-day-text { &:before { display: none; } } } &.#{$base}-day--hover-range-end, &.#{$base}-day--range-end:not(.#{$base}-day--in-hover-range) { .#{$base}-day-text { &:after { display: none; } } } &.#{$base}-day--hover-range-start:not(.#{$base}-day--hover-range-end) { .#{$base}-day-text { &:after { display: inherit; } } } &.#{$base}-day--hover-range-end:not(.#{$base}-day--hover-range-start) { .#{$base}-day-text { &:before { display: inherit; } } } &.#{$base}-day--active:not(.#{$base}-day--range-start):not(.#{$base}-day--range-end):not(.#{$base}-day--hover-range-start):not(.#{$base}-day--hover-range-end) { .#{$base}-day-text { background: $ACTIVE_IN_RANGE_COLOR padding-box; &:hover { background: $ACTIVE_IN_RANGE_COLOR padding-box; } } } } &--in-hover-range, &--in-range, &--value { .#{$base}-day-text { border: 2px solid transparent; background: $ACTIVE_COLOR padding-box; color: white; &:hover { background: $ACTIVE_COLOR padding-box; } } &.#{$base}-day--today-highlight { .#{$base}-day-text { color: lighten($TODAY_HIGHLIGHT_COLOR, 40%); } } } &--in-hover-range { .#{$base}-day-text { background: $ACTIVE_IN_HOVER_RANGE_COLOR padding-box; &:after, &:before { background: $ACTIVE_IN_HOVER_RANGE_COLOR; } } } &--hover-range-start, &--hover-range-end, &--range-start, &--range-end { .#{$base}-day-text { background: $ACTIVE_RANGE_LIMITS_COLOR padding-box; &:hover { background: $ACTIVE_RANGE_LIMITS_COLOR padding-box; } } } &--active { .#{$base}-day-text { border: 2px solid $ACTIVE_COLOR; } } } .#{$base}-day--prev-month, .#{$base}-day--next-month { color: $OTHER_MONTH_DAY_COLOR; } .#{$base}-day--weekend-highlight { color: $WEEKEND_HIGHLIGHT_COLOR; &.#{$base}-day--prev-month, &.#{$base}-day--next-month { color: $WEEKEND_OTHER_MONTH_HIGHLIGHT_COLOR; } } .#{$base}-day--today-highlight { color: $TODAY_HIGHLIGHT_COLOR; &.#{$base}-day--prev-month, &.#{$base}-day--next-month { color: $TODAY_OTHER_MONTH_HIGHLIGHT_COLOR; } } .#{$base}-day--disabled { color: $DAY_COLOR_DISABLED; .#{$base}-day-text { cursor: default; &:hover { background: none; } } &.#{$base}-day--prev-month, &.#{$base}-day--next-month { color: $DAY_COLOR_DISABLED; } } } .react-date-picker__multi-month-view { border: 1px solid $VIEW_BORDER_COLOR; .#{$base} { border: none; } }