// =================
|
// Imports
|
// =================
|
|
@import '../../base/base'; // Base Variables
|
|
.flatpickr-calendar {
|
width: 336.875px;
|
padding: 15px;
|
-webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
|
border: 1px solid $m-color_12;
|
background: $m-color_12;
|
|
&.open {
|
display: inline-block;
|
z-index: 900;
|
}
|
|
&.arrowTop:before {
|
border-bottom-color: $m-color_12;
|
}
|
|
&.arrowBottom:before {
|
border-top-color: $m-color_12;
|
}
|
|
&:before {
|
border-width: 9px;
|
}
|
|
&:after {
|
border-width: 0px;
|
}
|
}
|
|
.flatpickr-months {
|
.flatpickr-prev-month, .flatpickr-next-month {
|
top: 8%;
|
padding: 5px 13px;
|
background: $m-color_12;
|
border-radius: 4px;
|
height: 40px;
|
}
|
|
.flatpickr-prev-month svg, .flatpickr-next-month svg {
|
fill: $m-color_4;
|
}
|
|
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg {
|
fill: $m-color_14;
|
}
|
}
|
|
.flatpickr-current-month .numInputWrapper span {
|
&.arrowUp:after {
|
border-bottom-color: $m-color_4;
|
}
|
|
&.arrowDown:after {
|
border-top-color: $m-color_4;
|
}
|
}
|
|
.flatpickr-day.today {
|
border-color: $m-color_14;
|
color: $m-color_14;
|
font-weight: 700;
|
}
|
|
.flatpickr-current-month {
|
.flatpickr-monthDropdown-months {
|
height: auto;
|
border: 1px solid $dark;
|
color: $m-color_4;
|
font-size: 15px;
|
padding: 12px 16px;
|
letter-spacing: 1px;
|
font-weight: 700;
|
|
.flatpickr-monthDropdown-month {
|
background-color: $m-color_12;
|
}
|
}
|
|
input.cur-year {
|
height: auto;
|
border: 1px solid $dark;
|
border-left: none;
|
color: $m-color_4;
|
font-size: 15px;
|
padding: 13px 12px;
|
letter-spacing: 1px;
|
font-weight: 700;
|
}
|
}
|
|
.flatpickr-months .flatpickr-month {
|
height: 76px;
|
}
|
|
.flatpickr-day.flatpickr-disabled {
|
cursor: not-allowed;
|
color: $m-color_3;
|
|
&:hover {
|
cursor: not-allowed;
|
color: $m-color_3;
|
}
|
}
|
|
span.flatpickr-weekday {
|
color: $m-color_6;
|
}
|
|
.flatpickr-day {
|
color: $m-color_6;
|
font-weight: 500;
|
|
&.flatpickr-disabled {
|
color: rgba(136, 142, 168, 0.22);
|
|
&:hover {
|
color: rgba(136, 142, 168, 0.22);
|
}
|
}
|
|
&.prevMonthDay, &.nextMonthDay {
|
color: rgba(136, 142, 168, 0.22);
|
}
|
|
&.notAllowed {
|
color: rgba(136, 142, 168, 0.22);
|
|
&.prevMonthDay, &.nextMonthDay {
|
color: rgba(136, 142, 168, 0.22);
|
}
|
}
|
|
&.inRange, &.prevMonthDay.inRange, &.nextMonthDay.inRange, &.today.inRange, &.prevMonthDay.today.inRange, &.nextMonthDay.today.inRange, &:hover, &.prevMonthDay:hover, &.nextMonthDay:hover, &:focus, &.prevMonthDay:focus, &.nextMonthDay:focus {
|
background: $m-color_18;
|
border-color: $m-color_18;
|
}
|
|
&.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: $m-color_14;
|
color: $m-color_10;
|
border-color: $m-color_14;
|
font-weight: 700;
|
}
|
}
|
|
.flatpickr-time {
|
input {
|
color: $m-color_4;
|
|
&:hover {
|
background: $m-color_10;
|
}
|
}
|
|
.flatpickr-am-pm:hover, input:focus, .flatpickr-am-pm:focus {
|
background: $m-color_10;
|
}
|
|
.flatpickr-time-separator, .flatpickr-am-pm {
|
color: $m-color_4;
|
}
|
|
.numInputWrapper span {
|
&.arrowUp:after {
|
border-bottom-color: $m-color_14;
|
}
|
|
&.arrowDown:after {
|
border-top-color: $m-color_14;
|
}
|
}
|
}
|
|
@supports (-webkit-overflow-scrolling: touch) {
|
.form-control {
|
height: auto;
|
}
|
}
|
