diff --git a/app/webpacker/css/admin/v2/main.scss b/app/webpacker/css/admin/v2/main.scss index 08f86e3a9b..60260a9bc9 100644 --- a/app/webpacker/css/admin/v2/main.scss +++ b/app/webpacker/css/admin/v2/main.scss @@ -5,6 +5,7 @@ body.admin.admin-v2 { @import "navigation.scss"; @import "plugins/select2.scss"; @import "plugins/powertip.scss"; + @import "plugins/flatpickr-customization.scss"; @import "shared/forms.scss"; @import "components/buttons.scss"; @import "components/tables.scss"; diff --git a/app/webpacker/css/admin/v2/plugins/flatpickr-customization.scss b/app/webpacker/css/admin/v2/plugins/flatpickr-customization.scss new file mode 100644 index 0000000000..7ebd19741c --- /dev/null +++ b/app/webpacker/css/admin/v2/plugins/flatpickr-customization.scss @@ -0,0 +1,46 @@ +/* Override flatpickr styles: app/webpacker/css/admin/plugins/flatpickr-customization.scss */ + +.flatpickr-calendar { + &.arrowTop::after { + border-bottom-color: $v2-blue-light; + } + .flatpickr-months .flatpickr-month, + .flatpickr-current-month .flatpickr-monthDropdown-months { + background: $v2-blue-light; + color: white; + input { + color: white; + } + } + + .flatpickr-weekdays { + background: $v2-blue-light; + + .flatpickr-weekday { + background: $v2-blue-light; + 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: $v2-blue-light; + border-color: $v2-blue-light; + } +}