From d4b45dc255181fddc23e179e9552cfcd84a8530e Mon Sep 17 00:00:00 2001 From: kolaente Date: Tue, 23 Nov 2021 22:56:57 +0100 Subject: [PATCH] fix(dark mode): flatpickr colors --- src/styles/theme/_index.scss | 3 +- src/styles/theme/flatpickr.scss | 221 ++++++++++++++++++++++++++++++++ 2 files changed, 223 insertions(+), 1 deletion(-) create mode 100644 src/styles/theme/flatpickr.scss diff --git a/src/styles/theme/_index.scss b/src/styles/theme/_index.scss index 2c1a5b44..ef071916 100644 --- a/src/styles/theme/_index.scss +++ b/src/styles/theme/_index.scss @@ -7,4 +7,5 @@ @import "form"; @import "link-share"; @import "loading"; -@import "notification"; \ No newline at end of file +@import "notification"; +@import "flatpickr"; \ No newline at end of file diff --git a/src/styles/theme/flatpickr.scss b/src/styles/theme/flatpickr.scss new file mode 100644 index 00000000..1a21ca1f --- /dev/null +++ b/src/styles/theme/flatpickr.scss @@ -0,0 +1,221 @@ +// Flatpickr overrides to use css custom properties and enable styling it + +.flatpickr-calendar { + background: var(--white); + box-shadow: 1px 0 0 var(--grey-200), -1px 0 0 var(--grey-200), 0 1px 0 var(--grey-200), 0 -1px 0 var(--grey-200), 0 3px 13px rgba(0, 0, 0, 0.08); +} + +.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { + box-shadow: -2px 0 0 var(--grey-200), 5px 0 0 var(--grey-200); +} + +.flatpickr-calendar.hasTime .flatpickr-time { + border-top: 1px solid var(--grey-200); +} + +.flatpickr-calendar.arrowTop:before { + border-bottom-color: var(--grey-200); +} + +.flatpickr-calendar.arrowTop:after { + border-bottom-color: var(--white); +} + +.flatpickr-calendar.arrowBottom:before { + border-top-color: var(--grey-200); +} + +.flatpickr-calendar.arrowBottom:after { + border-top-color: var(--white); +} + +.flatpickr-months .flatpickr-month, +.flatpickr-months .flatpickr-prev-month, +.flatpickr-months .flatpickr-next-month { + color: var(--text); + fill: var(--grey-900); +} + +.flatpickr-months .flatpickr-prev-month:hover, +.flatpickr-months .flatpickr-next-month:hover { + color: var(--grey-400); +} + +.flatpickr-months .flatpickr-prev-month:hover svg, +.flatpickr-months .flatpickr-next-month:hover svg { + fill: var(--primary); +} + +.numInputWrapper span { + border: 1px solid var(--grey-200); +} + +.numInputWrapper span:hover { + background: var(--grey-800); +} + +.numInputWrapper span:active { + background: var(--grey-800); +} + +.numInputWrapper span.arrowUp:after { + border-bottom: 4px solid var(--grey-200); +} + +.numInputWrapper span.arrowDown:after { + border-top: 4px solid var(--grey-200); + top: 40%; +} + +.numInputWrapper span svg path { + fill: var(--grey-800); +} + +.numInputWrapper:hover { + background: var(--grey-100); +} + +.flatpickr-current-month span.cur-month:hover { + background: var(--grey-100); +} + +.flatpickr-current-month .numInputWrapper span.arrowUp:after { + border-bottom-color: var(--grey-900); +} + +.flatpickr-current-month .numInputWrapper span.arrowDown:after { + border-top-color: var(--grey-900); +} + +.flatpickr-current-month input.cur-year[disabled], +.flatpickr-current-month input.cur-year[disabled]:hover { + color: var(--grey-800); +} + +.flatpickr-current-month .flatpickr-monthDropdown-months:hover { + background: var(--grey-100); +} + +span.flatpickr-weekday { + color: var(--grey-600); +} + +.dayContainer + .dayContainer { + box-shadow: -1px 0 0 var(--grey-200); +} + +.flatpickr-day { + color: var(--grey-500); +} + +.flatpickr-day.inRange, +.flatpickr-day.prevMonthDay.inRange, +.flatpickr-day.nextMonthDay.inRange, +.flatpickr-day.today.inRange, +.flatpickr-day.prevMonthDay.today.inRange, +.flatpickr-day.nextMonthDay.today.inRange, +.flatpickr-day:hover, +.flatpickr-day.prevMonthDay:hover, +.flatpickr-day.nextMonthDay:hover, +.flatpickr-day:focus, +.flatpickr-day.prevMonthDay:focus, +.flatpickr-day.nextMonthDay:focus { + background: var(--grey-200); + border-color: var(--grey-200); +} + +.flatpickr-day.today { + border-color: var(--grey-400); +} + +.flatpickr-day.today:hover, +.flatpickr-day.today:focus { + border-color: var(--grey-400); + background: var(--grey-400); + color: var(--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: var(--primary); + color: var(--white); + border-color: var(--primary); +} + +.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 var(--primary); +} + +.flatpickr-day.inRange { + box-shadow: -5px 0 0 var(--grey-200), 5px 0 0 var(--grey-200); +} + +.flatpickr-day.flatpickr-disabled, +.flatpickr-day.flatpickr-disabled:hover, +.flatpickr-day.prevMonthDay, +.flatpickr-day.nextMonthDay, +.flatpickr-day.notAllowed, +.flatpickr-day.notAllowed.prevMonthDay, +.flatpickr-day.notAllowed.nextMonthDay { + color: var(--grey-300); +} + +.flatpickr-day.flatpickr-disabled, +.flatpickr-day.flatpickr-disabled:hover { + color: var(--grey-800); +} + +.flatpickr-day.week.selected { + box-shadow: -5px 0 0 var(--primary), 5px 0 0 var(--primary); +} + +.flatpickr-weekwrapper .flatpickr-weeks { + box-shadow: 1px 0 0 var(--grey-200); +} + +.flatpickr-weekwrapper span.flatpickr-day, +.flatpickr-weekwrapper span.flatpickr-day:hover { + color: var(--grey-300); +} + +.flatpickr-time .numInputWrapper span.arrowUp:after { + border-bottom-color: var(--grey-500); +} + +.flatpickr-time .numInputWrapper span.arrowDown:after { + border-top-color: var(--grey-500); +} + +.flatpickr-time input { + color: var(--grey-500); +} + +.flatpickr-time .flatpickr-time-separator, +.flatpickr-time .flatpickr-am-pm { + color: var(--grey-500); +} + +.flatpickr-time input:hover, +.flatpickr-time .flatpickr-am-pm:hover, +.flatpickr-time input:focus, +.flatpickr-time .flatpickr-am-pm:focus { + background: var(--grey-100); +}