koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr.scss

   1 @import "flatpickr_vars";
   2
   3 @keyframes fpFadeInDown {
   4     from {
   5         opacity: 0;
   6         transform: translate3d( 0, -20px, 0 );
   7     }
   8
   9     to {
  10         opacity: 1;
  11         transform: translate3d( 0, 0, 0 );
  12     }
  13 }
  14
  15 .flatpickr-calendar {
  16     animation: none;
  17     background: transparent;
  18     border: 0;
  19     border-radius: 5px;
  20     box-sizing: border-box;
  21     direction: ltr;
  22     display: none;
  23     font-size: 14px;
  24     gap: 2px;
  25     line-height: 24px;
  26     opacity: 0;
  27     padding: 0;
  28     position: absolute;
  29     text-align: center;
  30     touch-action: manipulation;
  31     visibility: hidden;
  32     width: $calendarWidth;
  33
  34     @if variable-exists( "noCalendarBorder" ) {
  35         box-shadow: 0 3px 13px rgb( #000 .08 );
  36     } @else {
  37         background: $calendarBackground;
  38         box-shadow: 1px 1px 3px 0 #666;
  39     }
  40
  41     &.open,
  42     &.inline {
  43         max-height: 640px;
  44         opacity: 1;
  45         visibility: visible;
  46     }
  47
  48     &.open {
  49         display: inline-block;
  50         z-index: 99999;
  51     }
  52
  53     &.animate.open {
  54         animation: fpFadeInDown 300ms $bezier;
  55     }
  56
  57     &.inline {
  58         display: block;
  59         position: relative;
  60         top: 2px;
  61     }
  62
  63     &.static {
  64         position: absolute;
  65         top: calc( 100% + 2px );
  66
  67         &.open {
  68             display: block;
  69             z-index: 999;
  70         }
  71     }
  72
  73     &.multiMonth {
  74         .flatpickr-days .dayContainer:nth-child( n+1 ) {
  75             & .flatpickr-day.inRange:nth-child( 7n+7 ) {
  76                 box-shadow: none !important;
  77             }
  78         }
  79
  80         .flatpickr-days .dayContainer:nth-child( n+2 ) {
  81             & .flatpickr-day.inRange:nth-child( 7n+1 ) {
  82                 box-shadow: -2px 0 0 #E6E6E6, 5px 0 0 #E6E6E6;
  83             }
  84         }
  85     }
  86
  87     .hasWeeks,
  88     .hasTime {
  89         .dayContainer {
  90             border-bottom: 0;
  91             border-bottom-left-radius: 0;
  92             border-bottom-right-radius: 0;
  93         }
  94     }
  95
  96     @if variable-exists( "noCalendarBorder" ) {
  97         .hasWeeks .dayContainer {
  98             border-left: 0;
  99         }
 100     }
 101
 102     &.hasTime {
 103         .flatpickr-time {
 104             border-top: 1px solid $calendarBorderColor;
 105             height: $timeHeight;
 106         }
 107
 108         @if variable-exists( "noCalendarBorder" ) {
 109             .flatpickr-innerContainer {
 110                 border-bottom: 0;
 111             }
 112
 113             .flatpickr-time {
 114                 border: 1px solid $calendarBorderColor;
 115             }
 116         }
 117     }
 118
 119     &.noCalendar.hasTime {
 120         .flatpickr-time {
 121             height: auto;
 122         }
 123     }
 124
 125     &::before,
 126     &::after {
 127         border: solid transparent;
 128         content: "";
 129         display: block;
 130         height: 0;
 131         left: 22px;
 132         pointer-events: none;
 133         position: absolute;
 134         width: 0;
 135     }
 136
 137     &.rightMost,
 138     &.arrowRight {
 139         &::before,
 140         &::after {
 141             left: auto;
 142             right: 22px;
 143         }
 144     }
 145
 146     &.arrowCenter {
 147         &::before,
 148         &::after {
 149             left: 50%;
 150             right: 50%;
 151         }
 152     }
 153
 154     &::before {
 155         border-width: 5px;
 156         margin: 0 -5px;
 157     }
 158
 159     &::after {
 160         border-width: 4px;
 161         margin: 0 -4px;
 162     }
 163
 164     &.arrowTop {
 165         &::before,
 166         &::after {
 167             bottom: 100%;
 168         }
 169
 170         &::before {
 171             border-bottom-color: $calendarBorderColor;
 172         }
 173
 174         &::after {
 175             @if variable-exists( "noCalendarBorder" ) {
 176                 border-bottom-color: $monthBackground;
 177             } @else {
 178                 border-bottom-color: $calendarBackground;
 179             }
 180         }
 181     }
 182
 183     &.arrowBottom {
 184         &::before,
 185         &::after {
 186             top: 100%;
 187         }
 188
 189         &::before {
 190             border-top-color: $calendarBorderColor;
 191         }
 192
 193         &::after {
 194             @if variable-exists( "noCalendarBorder" ) {
 195                 border-top-color: $monthBackground;
 196             } @else {
 197                 border-top-color: $calendarBackground;
 198             }
 199         }
 200     }
 201
 202     &:focus {
 203         outline: 0;
 204     }
 205 }
 206
 207 .flatpickr-wrapper {
 208     display: inline-block;
 209     position: relative;
 210 }
 211
 212 .flatpickr-months {
 213     display: flex;
 214
 215     .flatpickr-month {
 216         @if variable-exists( "noCalendarBorder" ) {
 217             border-radius: 5px 5px 0 0;
 218         }
 219
 220         background: $monthBackground;
 221         color: $monthForeground;
 222         fill: $monthForeground;
 223         flex: 1;
 224         height: $monthNavHeight;
 225         line-height: 1;
 226         overflow: hidden;
 227         position: relative;
 228         text-align: center;
 229         user-select: none;
 230     }
 231
 232     .flatpickr-prev-month,
 233     .flatpickr-next-month {
 234         color: $monthForeground;
 235         cursor: pointer;
 236         fill: $monthForeground;
 237         height: $monthNavHeight;
 238         padding: 10px;
 239         position: absolute;
 240         text-decoration: none;
 241         top: 0;
 242         z-index: 3;
 243
 244         &.flatpickr-disabled {
 245             display: none;
 246         }
 247
 248         i {
 249             position: relative;
 250         }
 251
 252         &.flatpickr-prev-month {
 253             left: 0;
 254         }
 255
 256         &.flatpickr-next-month {
 257             right: 0;
 258         }
 259
 260         &:hover {
 261             color: $todayColor;
 262
 263             svg {
 264                 @if variable-exists( "arrow_hover_color" ) {
 265                     fill: $arrow_hover_color;
 266                 } @else {
 267                     fill: $todayColor;
 268                 }
 269             }
 270         }
 271
 272         svg {
 273             height: 14px;
 274             width: 14px;
 275
 276             path {
 277                 fill: inherit;
 278                 transition: fill .1s;
 279             }
 280         }
 281     }
 282 }
 283
 284 .numInputWrapper {
 285     height: auto;
 286     position: relative;
 287
 288     input,
 289     span {
 290         display: inline-block;
 291     }
 292
 293     input {
 294         width: 100%;
 295
 296         &::-ms-clear {
 297             display: none;
 298         }
 299
 300         &::-webkit-outer-spin-button,
 301         &::-webkit-inner-spin-button {
 302             appearance: none;
 303             margin: 0;
 304         }
 305     }
 306
 307     span {
 308         border: 1px solid rgba( $dayForeground, .15 );
 309         box-sizing: border-box;
 310         cursor: pointer;
 311         height: 50%;
 312         line-height: 50%;
 313         opacity: 0;
 314         padding: 0 4px 0 2px;
 315         position: absolute;
 316         right: 0;
 317         width: $timecontrols;
 318
 319         &:hover {
 320             background: rgba( $invertedBg, .1 );
 321         }
 322
 323         &:active {
 324             background: rgba( $invertedBg, .2 );
 325         }
 326
 327         &::after {
 328             content: "";
 329             display: block;
 330             position: absolute;
 331         }
 332
 333         &.arrowUp {
 334             border-bottom: 0;
 335             top: 0;
 336
 337             &::after {
 338                 border-bottom: 4px solid rgba( $dayForeground, .6 );
 339                 border-left: 4px solid transparent;
 340                 border-right: 4px solid transparent;
 341                 top: 26%;
 342             }
 343         }
 344
 345         &.arrowDown {
 346             top: 50%;
 347
 348             &::after {
 349                 border-left: 4px solid transparent;
 350                 border-right: 4px solid transparent;
 351                 border-top: 4px solid rgba( $dayForeground, .6 );
 352                 top: 40%;
 353             }
 354         }
 355
 356         svg {
 357             height: auto;
 358             width: inherit;
 359
 360             path {
 361                 fill: rgba( $monthForeground, .5 );
 362             }
 363         }
 364     }
 365
 366     &:hover {
 367         background: rgba( $invertedBg, .05 );
 368
 369         span {
 370             opacity: 1;
 371         }
 372     }
 373 }
 374
 375 .flatpickr-current-month {
 376     color: inherit;
 377     display: inline-block;
 378     font-size: 135%;
 379     font-weight: 300;
 380     height: $monthNavHeight;
 381     left: 12.5%;
 382     line-height: inherit;
 383     line-height: 1;
 384     padding: .22 * $monthNavHeight 0 0 0;
 385     position: absolute;
 386     text-align: center;
 387     transform: translate3d( 0, 0, 0 );
 388     width: 75%;
 389
 390     span.cur-month {
 391         color: inherit;
 392         display: inline-block;
 393         font-family: inherit;
 394         font-weight: 700;
 395         margin-left: .5ch;
 396         padding: 0;
 397
 398         &:hover {
 399             background: rgba( $invertedBg, .05 );
 400         }
 401     }
 402
 403     .numInputWrapper {
 404         display: inline-block;
 405         width: 8ch;
 406
 407         span.arrowUp::after {
 408             border-bottom-color: $monthForeground;
 409         }
 410
 411         span.arrowDown::after {
 412             border-top-color: $monthForeground;
 413         }
 414     }
 415
 416     input.cur-year {
 417         appearance: textfield;
 418         background: transparent;
 419         border: 0;
 420         border-radius: 0;
 421         box-sizing: border-box;
 422         color: inherit;
 423         cursor: text;
 424         display: inline-block;
 425         font-family: inherit;
 426         font-size: inherit;
 427         font-weight: 300;
 428         height: auto;
 429         line-height: inherit;
 430         margin: 0;
 431         padding: 0 0 0 .5ch;
 432         vertical-align: initial;
 433
 434         &:focus {
 435             outline: 0;
 436         }
 437
 438         &[disabled],
 439         &[disabled]:hover {
 440             background: transparent;
 441             color: rgba( $monthForeground, .5 );
 442             font-size: 100%;
 443             pointer-events: none;
 444         }
 445     }
 446
 447     .flatpickr-monthDropdown-months {
 448         appearance: none;
 449         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' );
 450         background-position: 100% 50%;
 451         background-repeat: no-repeat;
 452         background-size: 24px 24px;
 453         border: none;
 454         border-radius: 0;
 455         box-sizing: border-box;
 456         color: inherit;
 457         cursor: pointer;
 458         font-family: inherit;
 459         font-size: 90%;
 460         font-weight: 300;
 461         height: auto;
 462         line-height: 120%;
 463         margin: -1px 0 0 0;
 464         outline: none;
 465         padding: 4px 28px 4px 4px;
 466         position: relative;
 467         vertical-align: initial;
 468         width: auto;
 469
 470         &:focus,
 471         &:active {
 472             outline: none;
 473         }
 474
 475         .flatpickr-monthDropdown-month {
 476             background-color: $monthBackground;
 477             outline: none;
 478             padding: 0;
 479         }
 480     }
 481 }
 482
 483 .flatpickr-weekdays {
 484     align-items: center;
 485     background: $weekdaysBackground;
 486     display: flex;
 487     height: $weekdaysHeight;
 488     overflow: hidden;
 489     text-align: center;
 490     width: 100%;
 491
 492     .flatpickr-weekdaycontainer {
 493         display: flex;
 494         flex: 1;
 495     }
 496 }
 497
 498 span.flatpickr-weekday {
 499     background: $monthBackground;
 500     color: $weekdaysForeground;
 501     cursor: default;
 502     display: block;
 503     flex: 1;
 504     font-size: 90%;
 505     font-weight: bolder;
 506     line-height: 1;
 507     margin: 0;
 508     text-align: center;
 509 }
 510
 511 .dayContainer,
 512 .flatpickr-weeks {
 513     padding: 1px 0 0 0;
 514 }
 515
 516 .flatpickr-days {
 517     align-items: flex-start;
 518     display: flex;
 519     overflow: hidden;
 520     position: relative;
 521     width: $daysWidth;
 522
 523     &:focus {
 524         outline: 0;
 525     }
 526
 527     @if variable-exists( "noCalendarBorder" ) {
 528         border-left: 1px solid $calendarBorderColor;
 529         border-right: 1px solid $calendarBorderColor;
 530     }
 531 }
 532
 533 .dayContainer {
 534     box-sizing: border-box;
 535     display: inline-block;
 536     display: flex;
 537     flex-wrap: wrap;
 538     justify-content: space-around;
 539     max-width: $daysWidth;
 540     min-width: $daysWidth;
 541     opacity: 1;
 542     outline: 0;
 543     padding: 0;
 544     text-align: left;
 545     transform: translate3d( 0, 0, 0 );
 546     width: $daysWidth;
 547
 548     & + .dayContainer {
 549         box-shadow: -1px 0 0 $calendarBorderColor;
 550     }
 551 }
 552
 553 .flatpickr-day {
 554     background: none;
 555     border: 1px solid transparent;
 556     border-radius: 0;
 557     box-sizing: border-box;
 558     color: $dayForeground;
 559     cursor: pointer;
 560     display: inline-block;
 561     flex-basis: 14.2857%;
 562     font-weight: 400;
 563     height: $daySize;
 564     justify-content: center;
 565     line-height: $daySize;
 566     margin: 0;
 567     max-width: $daySize;
 568     position: relative;
 569     text-align: center;
 570     width: 14.2857%;
 571
 572     &,
 573     &.prevMonthDay,
 574     &.nextMonthDay {
 575         &.inRange,
 576         &.today.inRange,
 577         &:hover,
 578         &:focus {
 579             background: $dayHoverBackground;
 580             border-color: $dayHoverBackground;
 581             cursor: pointer;
 582             outline: 0;
 583         }
 584     }
 585
 586     &.today {
 587         border-color: $todayColor;
 588
 589         &:hover,
 590         &:focus {
 591             background: $todayColor;
 592             border-color: $todayColor;
 593
 594             @if variable-exists( "today_fg_color" ) {
 595                 color: $today_fg_color;
 596             } @else {
 597                 color: #FFF;
 598             }
 599         }
 600     }
 601
 602     &.selected,
 603     &.startRange,
 604     &.endRange {
 605         &,
 606         &.inRange,
 607         &:focus,
 608         &:hover,
 609         &.prevMonthDay,
 610         &.nextMonthDay {
 611             background: $selectedDayBackground;
 612             border-color: $selectedDayBackground;
 613             box-shadow: none;
 614
 615             @if variable-exists( "selectedDayForeground" ) {
 616                 color: $selectedDayForeground;
 617             } @else {
 618                 color: #FFF;
 619             }
 620         }
 621
 622         &.startRange {
 623             border-radius: 50px 0 0 50px;
 624         }
 625
 626         &.endRange {
 627             border-radius: 0 50px 50px 0;
 628         }
 629
 630         &.startRange + .endRange:not( :nth-child( 7n+1 ) ) {
 631             box-shadow: -5 * $dayMargin 0 0 $selectedDayBackground;
 632         }
 633
 634         &.startRange.endRange {
 635             border-radius: 50px;
 636         }
 637     }
 638
 639     &.inRange {
 640         border-radius: 0;
 641         box-shadow: -2.5 * $dayMargin 0 0 $dayHoverBackground, 2.5 * $dayMargin 0 0 $dayHoverBackground;
 642     }
 643
 644     &.flatpickr-disabled,
 645     &.flatpickr-disabled:hover,
 646     &.prevMonthDay,
 647     &.nextMonthDay,
 648     &.notAllowed,
 649     &.notAllowed.prevMonthDay,
 650     &.notAllowed.nextMonthDay {
 651         background: transparent;
 652         color: rgba( $dayForeground, .3 );
 653         cursor: default;
 654
 655         @if variable-exists( "disabled_border_color" ) {
 656             border-color: $disabled_border_color;
 657         } @else {
 658             border-color: transparent;
 659         }
 660     }
 661
 662     &.flatpickr-disabled,
 663     &.flatpickr-disabled:hover {
 664         color: rgba( $dayForeground, .1 );
 665         cursor: not-allowed;
 666     }
 667
 668     &.week.selected {
 669         border-radius: 0;
 670         box-shadow: -2.5 * $dayMargin 0 0 $selectedDayBackground, 2.5 * $dayMargin 0 0 $selectedDayBackground;
 671     }
 672
 673     &.hidden {
 674         visibility: hidden;
 675     }
 676 }
 677
 678 .rangeMode .flatpickr-day {
 679     margin-top: 1px;
 680 }
 681
 682 .flatpickr-weekwrapper {
 683     float: left;
 684
 685     .flatpickr-weeks {
 686         padding: 0 12px;
 687
 688         @if variable-exists( "noCalendarBorder" ) {
 689             border-left: 1px solid $calendarBorderColor;
 690         } @else {
 691             box-shadow: 1px 0 0 $calendarBorderColor;
 692         }
 693     }
 694
 695     .flatpickr-weekday {
 696         float: none;
 697         line-height: $weekdaysHeight;
 698         width: 100%;
 699     }
 700
 701     span.flatpickr-day {
 702         &,
 703         &:hover {
 704             background: transparent;
 705             border: none;
 706             color: rgba( $dayForeground, .3 );
 707             cursor: default;
 708             display: block;
 709             max-width: none;
 710             width: 100%;
 711         }
 712     }
 713 }
 714
 715 .flatpickr-innerContainer {
 716     box-sizing: border-box;
 717     display: block;
 718     display: flex;
 719     overflow: hidden;
 720
 721     @if variable-exists( "noCalendarBorder" ) {
 722         background: $calendarBackground;
 723         border-bottom: 1px solid $calendarBorderColor;
 724     }
 725 }
 726
 727 .flatpickr-rContainer {
 728     box-sizing: border-box;
 729     display: inline-block;
 730     padding: 0;
 731 }
 732
 733 .flatpickr-time {
 734     box-sizing: border-box;
 735     display: block;
 736     display: flex;
 737     height: 0;
 738     line-height: $timeHeight;
 739     max-height: $timeHeight;
 740     outline: 0;
 741     overflow: hidden;
 742     text-align: center;
 743
 744     @if variable-exists( "noCalendarBorder" ) {
 745         background: $calendarBackground;
 746         border-radius: 0 0 5px 5px;
 747     }
 748
 749     &::after {
 750         clear: both;
 751         content: "";
 752         display: table;
 753     }
 754
 755     .numInputWrapper {
 756         flex: 1;
 757         float: left;
 758         height: $timeHeight;
 759         width: 40%;
 760
 761         span.arrowUp::after {
 762             border-bottom-color: $dayForeground;
 763         }
 764
 765         span.arrowDown::after {
 766             border-top-color: $dayForeground;
 767         }
 768     }
 769
 770     &.hasSeconds .numInputWrapper {
 771         width: 26%;
 772     }
 773
 774     &.time24hr .numInputWrapper {
 775         width: 49%;
 776     }
 777
 778     input {
 779         appearance: textfield;
 780         background: transparent;
 781         border: 0;
 782         border-radius: 0;
 783         box-shadow: none;
 784         box-sizing: border-box;
 785         color: $dayForeground;
 786         font-size: 14px;
 787         height: inherit;
 788         line-height: inherit;
 789         margin: 0;
 790         padding: 0;
 791         position: relative;
 792         text-align: center;
 793
 794         &.flatpickr-hour {
 795             font-weight: bold;
 796         }
 797
 798         &.flatpickr-minute,
 799         &.flatpickr-second {
 800             font-weight: 400;
 801         }
 802
 803         &:focus {
 804             border: 0;
 805             outline: 0;
 806         }
 807     }
 808
 809     .flatpickr-time-separator,
 810     .flatpickr-am-pm {
 811         align-self: center;
 812         color: $dayForeground;
 813         float: left;
 814         font-weight: bold;
 815         height: inherit;
 816         line-height: inherit;
 817         user-select: none;
 818         width: 2%;
 819     }
 820
 821     .flatpickr-am-pm {
 822         cursor: pointer;
 823         font-weight: 400;
 824         outline: 0;
 825         text-align: center;
 826         width: 18%;
 827     }
 828
 829     input,
 830     .flatpickr-am-pm {
 831         &:hover,
 832         &:focus {
 833             background: lighten( $dayHoverBackground, 3 );
 834         }
 835     }
 836 }
 837
 838 .flatpickr-input {
 839     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" );
 840     background-position: 3px;
 841     background-repeat: no-repeat;
 842     border-style: inset;
 843     border-width: 1px;
 844     padding: 3px 3px 3px 20px;
 845
 846     &.flatpickr-mobile {
 847         height: 2rem;
 848         width: 11rem;
 849     }
 850
 851     &:focus {
 852         border-radius: 0;
 853     }
 854
 855     &[readonly] {
 856         cursor: pointer;
 857     }
 858 }
 859
 860 .flatpickr_wrapper {
 861     white-space: nowrap;
 862 }