diff options
Diffstat (limited to 'asset/css/vendor/flatpickr.vars.less')
| -rw-r--r-- | asset/css/vendor/flatpickr.vars.less | 327 |
1 files changed, 327 insertions, 0 deletions
diff --git a/asset/css/vendor/flatpickr.vars.less b/asset/css/vendor/flatpickr.vars.less new file mode 100644 index 0000000..2409667 --- /dev/null +++ b/asset/css/vendor/flatpickr.vars.less @@ -0,0 +1,327 @@ +/** + * This file's only purpose is to make the flatpickr themeable. DO NOT add ANY custom style here! + * Also, DO NOT re-arrange the CSS blocks to make them more LESS like. They're based off of the + * pre-compiled flatpickr.css file and so can easily identified when updating to a new version. + * + * Non-standard LESS variables were added to allow usage of CSS variables. All of them hold a + * value calculated by LESS functions. If not temporarily stored in another LESS variable, + * they wouldn't be available to CSS variable usage. + * + * Latest state from version: v4.6.9 + */ + +@fp-calendarBackground: #ffffff; +@fp-calendarBorderColor: #e6e6e6; + +@fp-arrowColor: fadeout(@fp-dayForeground, 40%); // Non-standard variable +@fp-arrow_hover_color: #f64747; + +@fp-monthForeground: fadeout(black, 10%); +@fp-monthBackground: transparent; + +@fp-weekdaysBackground: transparent; +@fp-weekdaysForeground: fadeout(black, 46%); +@fp-weekNumberForeground: fadeout(@fp-dayForeground, 70%); // Non-standard variable + +@fp-dayForeground: #393939; +@fp-dayHoverBackground: #e6e6e6; +@fp-disabledDayForeground: fadeout(@fp-dayForeground, 90%); // Non-standard variable +@fp-outsideRangeDayForeground: @fp-weekNumberForeground; // Non-standard variable +@fp-selectedDayBackground: #569FF7; +@fp-todayColor: #959ea9; + +@fp-timeHoverBg: lighten(@fp-dayHoverBackground, 3); // Non-standard variable + +@fp-invertedBg: black; +@fp-hoverInvertedBg: fadeout(@fp-invertedBg, 95%); // Non-standard variable + +@fp-numChooserSvgFillColor: fadeout(@fp-monthForeground, 50%); // Non-standard variable +@fp-hoverNumChooserBg: fadeout(@fp-invertedBg, 90%); // Non-standard variable +@fp-numChooserBorderColor: fadeout(@fp-dayForeground, 85%); // Non-standard variable + +.icinga-datetime-picker { + &.flatpickr-calendar { + background: @fp-calendarBackground; + background: var(--fp-calendarBackground, @fp-calendarBackground); + box-shadow: 1px 0 0 @fp-calendarBorderColor, + -1px 0 0 @fp-calendarBorderColor, + 0 1px 0 @fp-calendarBorderColor, + 0 -1px 0 @fp-calendarBorderColor, + 0 3px 13px fadeout(black, 92%); + box-shadow: 1px 0 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor), + -1px 0 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor), + 0 1px 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor), + 0 -1px 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor), + 0 3px 13px fadeout(black, 92%); + } + + &.flatpickr-calendar.arrowTop:before { + border-bottom-color: @fp-calendarBorderColor; + border-bottom-color: var(--fp-calendarBorderColor, @fp-calendarBorderColor); + } + &.flatpickr-calendar.arrowTop:after { + border-bottom-color: @fp-calendarBackground; + border-bottom-color: var(--fp-calendarBackground, @fp-calendarBackground); + } + &.flatpickr-calendar.arrowBottom:before { + border-top-color: @fp-calendarBorderColor; + border-top-color: var(--fp-calendarBorderColor, @fp-calendarBorderColor); + } + &.flatpickr-calendar.arrowBottom:after { + border-top-color: @fp-calendarBackground; + border-top-color: var(--fp-calendarBackground, @fp-calendarBackground); + } + + &.flatpickr-calendar.hasTime .flatpickr-time { + border-top-color: @fp-calendarBorderColor; + border-top-color: var(--fp-calendarBorderColor, @fp-calendarBorderColor); + } + + .dayContainer + .dayContainer { + -webkit-box-shadow: -1px 0 0 @fp-calendarBorderColor; + -webkit-box-shadow: -1px 0 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor); + box-shadow: -1px 0 0 @fp-calendarBorderColor; + box-shadow: -1px 0 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor); + } + + .flatpickr-day { + color: @fp-dayForeground; + color: var(--fp-dayForeground, @fp-dayForeground); + } + .flatpickr-day.today { + border-color: @fp-todayColor; + border-color: var(--fp-todayColor, @fp-todayColor); + } + .flatpickr-day.today:hover, + .flatpickr-day.today:focus { + border-color: @fp-todayColor; + border-color: var(--fp-todayColor, @fp-todayColor); + background: @fp-todayColor; + background: var(--fp-todayColor, @fp-todayColor); + color: @fp-calendarBackground; + color: var(--fp-calendarBackground, @fp-calendarBackground); + } + .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 { + color: @fp-calendarBackground; + color: var(--fp-calendarBackground, @fp-calendarBackground); + } + .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.nextMonthDay:focus { + background: @fp-dayHoverBackground; + background: var(--fp-dayHoverBackground, @fp-dayHoverBackground); + border-color: @fp-dayHoverBackground; + border-color: var(--fp-dayHoverBackground, @fp-dayHoverBackground); + } + .flatpickr-day.inRange { + -webkit-box-shadow: -5px 0 0 @fp-dayHoverBackground, 5px 0 0 @fp-dayHoverBackground; + -webkit-box-shadow: -5px 0 0 var(--fp-dayHoverBackground, @fp-dayHoverBackground), + 5px 0 0 var(--fp-dayHoverBackground, @fp-dayHoverBackground); + box-shadow: -5px 0 0 @fp-dayHoverBackground, 5px 0 0 @fp-dayHoverBackground; + box-shadow: -5px 0 0 var(--fp-dayHoverBackground, @fp-dayHoverBackground), + 5px 0 0 var(--fp-dayHoverBackground, @fp-dayHoverBackground); + } + .flatpickr-day.prevMonthDay, + .flatpickr-day.nextMonthDay, + .flatpickr-day.notAllowed, + .flatpickr-day.notAllowed.prevMonthDay, + .flatpickr-day.notAllowed.nextMonthDay { + color: @fp-outsideRangeDayForeground; + color: var(--fp-outsideRangeDayForeground, @fp-outsideRangeDayForeground); + } + .flatpickr-day.flatpickr-disabled, + .flatpickr-day.flatpickr-disabled:hover { + color: @fp-disabledDayForeground; + color: var(--fp-disabledDayForeground, @fp-disabledDayForeground); + } + .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: @fp-selectedDayBackground; + background: var(--fp-selectedDayBackground, @fp-selectedDayBackground); + border-color: @fp-selectedDayBackground; + border-color: var(--fp-selectedDayBackground, @fp-selectedDayBackground); + } + .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)) { + -webkit-box-shadow: -10px 0 0 @fp-selectedDayBackground; + -webkit-box-shadow: -10px 0 0 var(--fp-selectedDayBackground, @fp-selectedDayBackground); + box-shadow: -10px 0 0 @fp-selectedDayBackground; + box-shadow: -10px 0 0 var(--fp-selectedDayBackground, @fp-selectedDayBackground); + } + .flatpickr-day.week.selected { + -webkit-box-shadow: -5px 0 0 @fp-selectedDayBackground, 5px 0 0 @fp-selectedDayBackground; + -webkit-box-shadow: -5px 0 0 var(--fp-selectedDayBackground, @fp-selectedDayBackground), + 5px 0 0 var(--fp-selectedDayBackground, @fp-selectedDayBackground); + box-shadow: -5px 0 0 @fp-selectedDayBackground, 5px 0 0 @fp-selectedDayBackground; + box-shadow: -5px 0 0 var(--fp-selectedDayBackground, @fp-selectedDayBackground), + 5px 0 0 var(--fp-selectedDayBackground, @fp-selectedDayBackground); + } + + .flatpickr-weekwrapper .flatpickr-weeks { + -webkit-box-shadow: 1px 0 0 @fp-calendarBorderColor; + -webkit-box-shadow: 1px 0 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor); + box-shadow: 1px 0 0 @fp-calendarBorderColor; + box-shadow: 1px 0 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor); + } + .flatpickr-weekwrapper span.flatpickr-day, + .flatpickr-weekwrapper span.flatpickr-day:hover { + color: @fp-weekNumberForeground; + color: var(--fp-weekNumberForeground, @fp-weekNumberForeground); + } + .flatpickr-weekdays { + background: @fp-weekdaysBackground; + background: var(--fp-weekdaysBackground, @fp-weekdaysBackground); + } + span.flatpickr-weekday { + background: @fp-monthBackground; + background: var(--fp-monthBackground, @fp-monthBackground); + color: @fp-weekdaysForeground; + color: var(--fp-weekdaysForeground, @fp-weekdaysForeground); + } + + .flatpickr-months .flatpickr-month { + background: @fp-monthBackground; + background: var(--fp-monthBackground, @fp-monthBackground); + color: @fp-monthForeground; + color: var(--fp-monthForeground, @fp-monthForeground); + fill: @fp-monthForeground; + fill: var(--fp-monthForeground, @fp-monthForeground); + } + .flatpickr-months .flatpickr-prev-month, + .flatpickr-months .flatpickr-next-month { + color: @fp-monthForeground; + color: var(--fp-monthForeground, @fp-monthForeground); + fill: @fp-monthForeground; + fill: var(--fp-monthForeground, @fp-monthForeground); + } + .flatpickr-months .flatpickr-prev-month:hover, + .flatpickr-months .flatpickr-next-month:hover { + color: @fp-todayColor; + color: var(--fp-todayColor, @fp-todayColor); + } + .flatpickr-months .flatpickr-prev-month:hover svg, + .flatpickr-months .flatpickr-next-month:hover svg { + fill: @fp-arrow_hover_color; + fill: var(--fp-arrow_hover_color, @fp-arrow_hover_color); + } + .flatpickr-current-month .flatpickr-monthDropdown-months { + background: @fp-monthBackground; + background: var(--fp-monthBackground, @fp-monthBackground); + } + .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { + background-color: @fp-monthBackground; + background-color: var(--fp-monthBackground, @fp-monthBackground); + } + .flatpickr-current-month .numInputWrapper span.arrowUp:after { + border-bottom-color: @fp-monthForeground; + border-bottom-color: var(--fp-monthForeground, @fp-monthForeground); + } + .flatpickr-current-month .numInputWrapper span.arrowDown:after { + border-top-color: @fp-monthForeground; + border-top-color: var(--fp-monthForeground, @fp-monthForeground); + } + + .numInputWrapper span { + border-color: @fp-numChooserBorderColor; + border-color: var(--fp-numChooserBorderColor, @fp-numChooserBorderColor); + } + .numInputWrapper span:hover { + background: @fp-hoverNumChooserBg; + background: var(--fp-hoverNumChooserBg, @fp-hoverNumChooserBg); + } + .numInputWrapper span:active { + background: @fp-hoverNumChooserBg; + background: var(--fp-hoverNumChooserBg, @fp-hoverNumChooserBg); + } + .numInputWrapper span svg path { + fill: @fp-numChooserSvgFillColor; + fill: var(--fp-numChooserSvgFillColor, @fp-numChooserSvgFillColor); + } + .numInputWrapper span.arrowUp:after { + border-bottom-color: @fp-arrowColor; + border-bottom-color: var(--fp-arrowColor, @fp-arrowColor); + } + .numInputWrapper span.arrowDown:after { + border-top-color: @fp-arrowColor; + border-top-color: var(--fp-arrowColor, @fp-arrowColor); + } + .numInputWrapper:hover { + background: @fp-hoverInvertedBg; + background: var(--fp-hoverInvertedBg, @fp-hoverInvertedBg); + } + .flatpickr-current-month span.cur-month:hover { + background: @fp-hoverInvertedBg; + background: var(--fp-hoverInvertedBg, @fp-hoverInvertedBg); + } + .flatpickr-current-month .flatpickr-monthDropdown-months:hover { + background: @fp-hoverInvertedBg; + background: var(--fp-hoverInvertedBg, @fp-hoverInvertedBg); + } + + .flatpickr-time input:hover, + .flatpickr-time .flatpickr-am-pm:hover, + .flatpickr-time input:focus, + .flatpickr-time .flatpickr-am-pm:focus { + background: @fp-timeHoverBg; + background: var(--fp-timeHoverBg, @fp-timeHoverBg); + } + .flatpickr-time .numInputWrapper span.arrowUp:after { + border-bottom-color: @fp-dayForeground; + border-bottom-color: var(--fp-dayForeground, @fp-dayForeground); + } + .flatpickr-time .numInputWrapper span.arrowDown:after { + border-top-color: @fp-dayForeground; + border-top-color: var(--fp-dayForeground, @fp-dayForeground); + } + .flatpickr-time input { + color: @fp-dayForeground; + color: var(--fp-dayForeground, @fp-dayForeground); + } + .flatpickr-time .flatpickr-time-separator, + .flatpickr-time .flatpickr-am-pm { + color: @fp-dayForeground; + color: var(--fp-dayForeground, @fp-dayForeground); + } +} |