164 lines
3.5 KiB
SCSS
Executable File
164 lines
3.5 KiB
SCSS
Executable File
|
|
//
|
|
// Datepicker
|
|
//
|
|
// flatpickr
|
|
|
|
.flatpickr-input{
|
|
&[readonly]{
|
|
background-color: $input-bg;
|
|
}
|
|
}
|
|
|
|
.input{
|
|
&[readonly]{
|
|
background-color: $input-bg;
|
|
}
|
|
}
|
|
|
|
.flatpickr-months, .flatpickr-weekdays{
|
|
background-color: $primary;
|
|
}
|
|
|
|
span.flatpickr-weekday{
|
|
color: $white;
|
|
font-weight: $font-weight-medium;
|
|
}
|
|
|
|
.flatpickr-current-month{
|
|
.flatpickr-monthDropdown-months{
|
|
&:hover{
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.flatpickr-am-pm, .numInput, .numInputWrapper{
|
|
&:focus, &:hover{
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
|
|
.flatpickr-weekdays{
|
|
height: 36px !important;
|
|
border-bottom: 1px solid var(--#{$prefix}border-color);
|
|
}
|
|
|
|
.flatpickr-day{
|
|
color: var(--#{$prefix}body-color) !important;
|
|
&:hover, &:focus{
|
|
background-color: var(--#{$prefix}tertiary-bg) !important;
|
|
}
|
|
&.today{
|
|
border-color: $primary !important;
|
|
background-color: rgba($primary, 0.1);
|
|
&:hover, &:focus{
|
|
color: var(--#{$prefix}body-color) !important;
|
|
background-color: rgba($primary, 0.15) !important;
|
|
}
|
|
}
|
|
&.selected{
|
|
background-color: $primary !important;
|
|
border-color: $primary !important;
|
|
color: $white !important;
|
|
}
|
|
|
|
&.flatpickr-disabled,
|
|
&.flatpickr-disabled:hover,
|
|
&.prevMonthDay,
|
|
&.nextMonthDay,
|
|
&.notAllowed,
|
|
&.notAllowed.prevMonthDay,
|
|
&.notAllowed.nextMonthDay{
|
|
color: var(--#{$prefix}body-color) !important;
|
|
}
|
|
|
|
&.inRange,
|
|
&.prevMonthDay.inRange,
|
|
&.nextMonthDay.inRange,
|
|
&.today.inRange,
|
|
&.prevMonthDay.today.inRange,
|
|
&.nextMonthDay.today.inRange,
|
|
&:hover,
|
|
&.prevMonthDay:hover,
|
|
&.nextMonthDay:hover,
|
|
&:focus,
|
|
&.prevMonthDay:focus,
|
|
&.nextMonthDay:focus{
|
|
background-color: var(--#{$prefix}tertiary-bg);
|
|
border-color: var(--#{$prefix}border-color);
|
|
}
|
|
&.inRange{
|
|
box-shadow: -5px 0 0 var(--#{$prefix}box-shadow), 5px 0 0 var(--#{$prefix}box-shadow);
|
|
}
|
|
&.selected,
|
|
&.startRange,
|
|
&.endRange,
|
|
&.selected.inRange,
|
|
&.startRange.inRange,
|
|
&.endRange.inRange,
|
|
&.selected:focus,
|
|
&.startRange:focus,
|
|
&.endRange:focus,
|
|
&.selected:hover,
|
|
&.startRange:hover,
|
|
&.endRange:hover,
|
|
&.selected.prevMonthDay,
|
|
&.startRange.prevMonthDay,
|
|
&.endRange.prevMonthDay,
|
|
&.selected.nextMonthDay,
|
|
&.startRange.nextMonthDay,
|
|
&.endRange.nextMonthDay{
|
|
background-color: $primary !important;
|
|
border-color: $primary !important;
|
|
color: $white !important;
|
|
}
|
|
}
|
|
|
|
.flatpickr-months{
|
|
.flatpickr-prev-month, .flatpickr-next-month, .flatpickr-month{
|
|
color: rgba($white,0.9) !important;
|
|
fill: rgba($white,0.9) !important;
|
|
}
|
|
}
|
|
|
|
.flatpickr-monthDropdown-month{
|
|
color: rgba($black, 0.8);
|
|
}
|
|
.flatpickr-current-month{
|
|
input.cur-year{
|
|
&[disabled], &[disabled]:hover{
|
|
color: rgba($white,0.9) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.flatpickr-time {
|
|
input, .flatpickr-time-separator, .flatpickr-am-pm{
|
|
color: var(--#{$prefix}body-color) !important;
|
|
}
|
|
}
|
|
|
|
.flatpickr-calendar{
|
|
background-color: $dropdown-bg !important;
|
|
box-shadow: 1px 0 0 var(--#{$prefix}border-color), -1px 0 0 var(--#{$prefix}border-color), 0 1px 0 var(--#{$prefix}border-color), 0 -1px 0 var(--#{$prefix}border-color), 0 3px 13px rgba(0, 0, 0 , 0.08) !important;
|
|
&.hasTime{
|
|
.flatpickr-time{
|
|
border-top: 1px solid var(--#{$prefix}border-color) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.flatpickr-months{
|
|
border-radius: 5px 5px 0px 0px;
|
|
.flatpickr-prev-month, .flatpickr-next-month{
|
|
&:hover{
|
|
svg{
|
|
fill: rgba($white,0.9) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|