1 @import "flatpickr_vars";
3 @-webkit-keyframes fpFadeInDown {
6 transform: translate3d(0, -20px, 0);
11 transform: translate3d(0, 0, 0);
15 @-moz-keyframes fpFadeInDown {
18 transform: translate3d(0, -20px, 0);
23 transform: translate3d(0, 0, 0);
27 @-ms-keyframes fpFadeInDown {
30 transform: translate3d(0, -20px, 0);
35 transform: translate3d(0, 0, 0);
39 @-o-keyframes fpFadeInDown {
42 transform: translate3d(0, -20px, 0);
47 transform: translate3d(0, 0, 0);
51 @keyframes fpFadeInDown {
54 transform: translate3d(0, -20px, 0);
59 transform: translate3d(0, 0, 0);
65 background: transparent;
68 box-sizing: border-box;
78 touch-action: manipulation;
80 width: $calendarWidth;
82 @if variable-exists( "noCalendarBorder" ) {
83 box-shadow: 0 3px 13px rgba(black, 0.08);
88 background: $calendarBackground;
89 box-shadow: 1px 1px 3px 0 #666;
100 display: inline-block;
105 animation: fpFadeInDown 300ms $bezier;
116 top: calc(100% + 2px);
125 .flatpickr-days .dayContainer:nth-child(n+1) {
126 & .flatpickr-day.inRange:nth-child(7n+7) {
127 box-shadow: none !important;
131 .flatpickr-days .dayContainer:nth-child(n+2) {
132 & .flatpickr-day.inRange:nth-child(7n+1) {
133 box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
142 border-bottom-right-radius: 0;
143 border-bottom-left-radius: 0;
147 @if variable-exists( "noCalendarBorder" ) {
148 .hasWeeks .dayContainer {
156 border-top: 1px solid $calendarBorderColor;
159 @if variable-exists( "noCalendarBorder" ) {
160 .flatpickr-innerContainer {
165 border: 1px solid $calendarBorderColor;
170 &.noCalendar.hasTime {
180 pointer-events: none;
181 border: solid transparent;
225 border-bottom-color: $calendarBorderColor;
229 @if variable-exists( "noCalendarBorder" ) {
230 border-bottom-color: $monthBackground;
234 border-bottom-color: $calendarBackground;
247 border-top-color: $calendarBorderColor;
251 @if variable-exists( "noCalendarBorder" ) {
252 border-top-color: $monthBackground;
256 border-top-color: $calendarBackground;
268 display: inline-block;
275 @if variable-exists( "noCalendarBorder" ) {
276 border-radius: 5px 5px 0 0;
279 background: $monthBackground;
280 color: $monthForeground;
281 fill: $monthForeground;
282 height: $monthNavHeight;
291 .flatpickr-prev-month,
292 .flatpickr-next-month {
293 text-decoration: none;
297 height: $monthNavHeight;
300 color: $monthForeground;
301 fill: $monthForeground;
303 &.flatpickr-disabled {
311 &.flatpickr-prev-month {
323 &.flatpickr-next-month {
339 @if variable-exists( "arrow_hover_color" ){
340 fill: $arrow_hover_color;
355 transition: fill 0.1s;
368 display: inline-block;
378 &::-webkit-outer-spin-button,
379 &::-webkit-inner-spin-button {
381 -webkit-appearance: none;
388 width: $timecontrols;
389 padding: 0 4px 0 2px;
394 border: 1px solid rgba($dayForeground, 0.15);
395 box-sizing: border-box;
398 background: rgba($invertedBg, 0.1);
402 background: rgba($invertedBg, 0.2);
416 border-left: 4px solid transparent;
417 border-right: 4px solid transparent;
418 border-bottom: 4px solid rgba($dayForeground, 0.6);
427 border-left: 4px solid transparent;
428 border-right: 4px solid transparent;
429 border-top: 4px solid rgba($dayForeground, 0.6);
439 fill: rgba($monthForeground, 0.5);
445 background: rgba($invertedBg, 0.05);
453 .flatpickr-current-month {
455 line-height: inherit;
461 padding: 0.22 * $monthNavHeight 0 0 0;
463 height: $monthNavHeight;
464 display: inline-block;
466 transform: translate3d(0px, 0px, 0px);
469 font-family: inherit;
472 display: inline-block;
477 background: rgba($invertedBg, 0.05);
483 display: inline-block;
486 border-bottom-color: $monthForeground;
489 span.arrowDown:after {
490 border-top-color: $monthForeground;
495 background: transparent;
496 box-sizing: border-box;
499 padding: 0 0 0 0.5ch;
501 display: inline-block;
503 font-family: inherit;
505 line-height: inherit;
509 vertical-align: initial;
510 -webkit-appearance: textfield;
511 -moz-appearance: textfield;
512 appearance: textfield;
521 color: rgba($monthForeground, 0.5);
522 background: transparent;
523 pointer-events: none;
527 .flatpickr-monthDropdown-months {
529 background-image: url('data:image/svg+xml;charset=utf8,%3csvg fill="%23000000" fill-opacity="0.54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M7 10l5 5 5-5z"/%3e%3cpath d="M0 0h24v24H0z" fill="none"/%3e%3c/svg%3e');
530 background-position: 100% 50%;
531 background-repeat: no-repeat;
532 background-size: 24px 24px;
535 box-sizing: border-box;
539 font-family: inherit;
545 padding: 4px 28px 4px 4px;
547 vertical-align: initial;
555 .flatpickr-monthDropdown-month {
556 background-color: $monthBackground;
563 .flatpickr-weekdays {
564 background: $weekdaysBackground;
570 height: $weekdaysHeight;
572 .flatpickr-weekdaycontainer {
580 span.flatpickr-weekday {
583 background: $monthBackground;
584 color: $weekdaysForeground;
602 align-items: flex-start;
609 @if variable-exists( "noCalendarBorder" ) {
610 border-left: 1px solid $calendarBorderColor;
611 border-right: 1px solid $calendarBorderColor;
620 min-width: $daysWidth;
621 max-width: $daysWidth;
622 box-sizing: border-box;
623 display: inline-block;
624 display: -ms-flexbox;
628 -ms-flex-pack: justify;
629 justify-content: space-around;
630 transform: translate3d(0px, 0px, 0px);
634 box-shadow: -1px 0 0 $calendarBorderColor;
640 border: 1px solid transparent;
641 border-radius: 150px;
642 box-sizing: border-box;
643 color: $dayForeground;
648 flex-basis: 14.2857143%;
651 line-height: $daySize;
654 display: inline-block;
656 justify-content: center;
669 background: $dayHoverBackground;
670 border-color: $dayHoverBackground;
675 border-color: $todayColor;
679 border-color: $todayColor;
680 background: $todayColor;
682 @if variable-exists( "today_fg_color" ){
683 color: $today_fg_color;
702 background: $selectedDayBackground;
705 @if variable-exists( "selectedDayForeground" ){
706 color: $selectedDayForeground;
713 border-color: $selectedDayBackground;
717 border-radius: 50px 0 0 50px;
721 border-radius: 0 50px 50px 0;
724 &.startRange+.endRange:not(:nth-child(7n+1)) {
725 box-shadow: -5 * $dayMargin 0 0 $selectedDayBackground;
728 &.startRange.endRange {
735 box-shadow: -2.5 * $dayMargin 0 0 $dayHoverBackground, 2.5 * $dayMargin 0 0 $dayHoverBackground;
738 &.flatpickr-disabled,
739 &.flatpickr-disabled:hover,
743 &.notAllowed.prevMonthDay,
744 &.notAllowed.nextMonthDay {
745 color: rgba($dayForeground, 0.3);
746 background: transparent;
748 @if variable-exists( "disabled_border_color" ){
749 border-color: $disabled_border_color;
754 border-color: transparent;
760 &.flatpickr-disabled,
761 &.flatpickr-disabled:hover {
763 color: rgba($dayForeground, 0.1);
768 box-shadow: -2.5 * $dayMargin 0 0 $selectedDayBackground, 2.5 * $dayMargin 0 0 $selectedDayBackground;
776 .rangeMode .flatpickr-day {
780 .flatpickr-weekwrapper {
786 @if variable-exists( "noCalendarBorder" ) {
787 border-left: 1px solid $calendarBorderColor;
791 box-shadow: 1px 0 0 $calendarBorderColor;
798 line-height: $weekdaysHeight;
808 color: rgba($dayForeground, 0.3);
809 background: transparent;
816 .flatpickr-innerContainer {
819 box-sizing: border-box;
822 @if variable-exists( "noCalendarBorder" ) {
823 background: $calendarBackground;
824 border-bottom: 1px solid $calendarBorderColor;
828 .flatpickr-rContainer {
829 display: inline-block;
831 box-sizing: border-box;
839 line-height: $timeHeight;
840 max-height: $timeHeight;
841 box-sizing: border-box;
845 @if variable-exists( "noCalendarBorder" ) {
846 background: $calendarBackground;
847 border-radius: 0 0 5px 5px;
863 border-bottom-color: $dayForeground;
866 span.arrowDown:after {
867 border-top-color: $dayForeground;
871 &.hasSeconds .numInputWrapper {
875 &.time24hr .numInputWrapper {
880 background: transparent;
888 line-height: inherit;
889 color: $dayForeground;
892 box-sizing: border-box;
893 -webkit-appearance: textfield;
894 -moz-appearance: textfield;
895 appearance: textfield;
912 .flatpickr-time-separator,
916 line-height: inherit;
917 color: $dayForeground;
937 background: lighten($dayHoverBackground, 3);
943 background-repeat: no-repeat;
944 background-position: 3px;
945 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23369' class='bi bi-calendar3'%3E%3Cg stroke-width='1.333'%3E%3Cpath d='M10.5 0h-9A1.5 1.5 0 0 0 0 1.5v9A1.5 1.5 0 0 0 1.5 12h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 10.5 0zM.75 2.893c0-.355.336-.643.75-.643h9c.414 0 .75.288.75.643v7.714c0 .355-.336.643-.75.643h-9c-.414 0-.75-.288-.75-.643z'/%3E%3Cpath d='M4.875 5.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zM2.625 7.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm-6.75 2.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z'/%3E%3C/g%3E%3C/svg%3E");
948 padding: 3px 3px 3px 20px;
972 /* Shortcut buttons plugin */
974 .shortcut-buttons-flatpickr-wrapper {
976 justify-content: center;
979 .shortcut-buttons-flatpickr-label {
980 align-content: center;
982 justify-content: center;
983 flex-direction: column;
987 .shortcut-buttons-flatpickr-buttons {
991 .shortcut-buttons-flatpickr-button {
992 background: transparent none;
1011 text-decoration: underline;