71 lines
1.9 KiB
SCSS
71 lines
1.9 KiB
SCSS
@import '../../../styles/variables';
|
|
@import '../../../../node_modules/react-datepicker/dist/react-datepicker-cssmodules.css';
|
|
|
|
//
|
|
// Date picker
|
|
//
|
|
:global .react-datepicker {
|
|
font-family: inherit;
|
|
color: inherit;
|
|
border-color: $brand-black;
|
|
}
|
|
|
|
:global .react-datepicker__header {
|
|
background: $brand-black;
|
|
border-radius: 0;
|
|
|
|
.react-datepicker__day-name,
|
|
.react-datepicker__day,
|
|
.react-datepicker__time-name,
|
|
.react-datepicker__current-month,
|
|
.react-datepicker-time__header,
|
|
.react-datepicker-year-header {
|
|
color: $brand-white;
|
|
}
|
|
}
|
|
|
|
:global .react-datepicker__current-month,
|
|
:global .react-datepicker-time__header,
|
|
:global .react-datepicker-year-header,
|
|
:global .react-datepicker__day-name {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
:global .react-datepicker__month-container {
|
|
float: none;
|
|
}
|
|
|
|
:global .react-datepicker-popper {
|
|
max-width: 16rem;
|
|
}
|
|
|
|
:global .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle:before,
|
|
:global .react-datepicker__year-read-view--down-arrow:before,
|
|
:global .react-datepicker__month-read-view--down-arrow:before,
|
|
:global .react-datepicker__month-year-read-view--down-arrow:before {
|
|
border-top-color: $brand-black;
|
|
}
|
|
|
|
:global .react-datepicker__day--selected,
|
|
:global .react-datepicker__day--in-selecting-range,
|
|
:global .react-datepicker__day--in-range,
|
|
:global .react-datepicker__month-text--selected,
|
|
:global .react-datepicker__month-text--in-selecting-range,
|
|
:global .react-datepicker__month-text--in-range {
|
|
background-color: $brand-black;
|
|
border-radius: 50%;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
:global .react-datepicker__day:hover,
|
|
:global .react-datepicker__month-text:hover {
|
|
background-color: $brand-pink;
|
|
border-radius: 50%;
|
|
font-weight: $font-weight-bold;
|
|
color: $brand-white;
|
|
}
|
|
|
|
:global .react-datepicker__day--outside-month {
|
|
color: $brand-grey-light;
|
|
}
|