Files
openfoodnetwork/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss
2023-09-15 10:47:44 +02:00

90 lines
2.6 KiB
SCSS

$background-grey: $lighter-grey;
$background-blue: $color-3;
// scss-lint:disable SelectorFormat
.flatpickr-calendar {
border-radius: 0;
// Disable animation
&.animate.open {
animation: none;
}
&.arrowBottom::after {
border-top-color: $background-grey;
}
&.arrowTop::after {
border-bottom-color: $background-blue;
}
.flatpickr-months .flatpickr-month {
border-radius: 0;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
background: $background-blue;
}
.flatpickr-weekdays {
background: $background-blue;
.flatpickr-weekday {
background: $background-blue;
color: white;
}
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
background: $background-blue;
border-color: $background-blue;
}
}
// scss-lint:enable SelectorFormat
// customization for shortcut-buttons
.shortcut-buttons-flatpickr-wrapper > .shortcut-buttons-flatpickr-buttons {
justify-content: space-between;
flex-grow: 1;
}
// material-ui colors customization ("~flatpickr/dist/themes/material_blue")
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
box-shadow: -10px 0 0 #e2e2e2;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months #admin-menu ul li.selected a.flatpickr-prev-month svg,
#admin-menu ul li.selected .flatpickr-months a.flatpickr-prev-month svg,
.flatpickr-months #sub-menu ul li.selected a.flatpickr-prev-month svg,
#sub-menu ul li.selected .flatpickr-months a.flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month:hover svg,
.flatpickr-months #admin-menu ul li.selected a.flatpickr-next-month svg,
#admin-menu ul li.selected .flatpickr-months a.flatpickr-next-month svg,
.flatpickr-months #sub-menu ul li.selected a.flatpickr-next-month svg,
#sub-menu ul li.selected .flatpickr-months a.flatpickr-next-month svg {
fill: white;
}