@public-ui/themes 1.6.0-rc.5 → 1.6.0-rc.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -390,1540 +390,6 @@ const KoliBri = new Theme("kol", KeyEnum, TagEnum);
390
390
 
391
391
  const BAMF = KoliBri.createTheme("bamf", {});
392
392
 
393
- const BPA = KoliBri.createTheme("bpa", {
394
- GLOBAL: `:host {
395
- --font-family-sans: BundesSans Web, Arial, Helvetica, sans-serif;
396
- --font-family-serif: BundesSerif Web, var(--kolibri-font-family-sans);
397
- --font-family: var(--kolibri-font-family-sans), Helvetica, sans-serif;
398
- --font-weight: 400;
399
- --font-weight-bold: bold;
400
- --color-white: white;
401
- --color-black: #111314;
402
- --color-blue: #0077b6;
403
- --color-darkblue: #004b76;
404
- --color-darkgray: #576164;
405
- --color-lightgray: #bec5c9;
406
- --color-lightgray-40: #e5e8e9;
407
- --color-red: #c0003c;
408
- --color-lightorange: #f7bb3d;
409
- --color-orange: #e19688;
410
- --color-green: #00854a;
411
- --color-cyan: #00818b;
412
- --color-violet-40: #bfadbc;
413
- --color-violet-20: #dfd6de;
414
- }
415
- @keyframes blinker {
416
- 50% {
417
- opacity: 0.25;
418
- }
419
- }
420
- :host {
421
- font-family: var(--font-family-sans);
422
- color: var(--color-black);
423
- }
424
- h1,
425
- h2,
426
- h3,
427
- h4,
428
- h5,
429
- h6 {
430
- font-weight: var(--font-weight-bold);
431
- line-height: var(--line-height-heading);
432
- margin: 0;
433
- padding: 0;
434
- }
435
- a,
436
- button {
437
- font-size: var(--font-size);
438
- outline: none;
439
- }
440
- p {
441
- font-size: 1.5rem;
442
- }
443
- kol-span-wc,
444
- kol-span-wc > span {
445
- gap: 0.5em;
446
- }
447
- kol-tooltip #arrow {
448
- display: none;
449
- }
450
- kol-tooltip .area {
451
- background-color: var(--color-lightgray-40);
452
- }
453
- kol-tooltip kol-span-wc {
454
- padding: 0.25rem 0.5rem;
455
- font-size: 0.875rem;
456
- line-height: 1.25rem;
457
- border-radius: 2px;
458
- border: 1px solid var(--color-lightgray);
459
- margin: 0.25rem;
460
- }
461
- @media only screen and (min-width: 600px) {
462
- kol-tooltip kol-span-wc {
463
- font-size: 1rem;
464
- line-height: 1.375rem;
465
- }
466
- }`,
467
- "KOL-HEADING": `/* https://styleguide.bundesregierung.de/sg-de/medien/digitale-medien/webanwendungen/komponenten/atome/heading */
468
- h1,
469
- h2,
470
- h3,
471
- h4,
472
- h5,
473
- h6 {
474
- font-family: var(--font-family-heading);
475
- }
476
- h1 {
477
- margin-bottom: 1.5rem;
478
- font-size: 2rem;
479
- font-weight: 400;
480
- line-height: 2.5rem;
481
- }
482
- @media (min-width: 64rem) {
483
- h1 {
484
- font-size: 2.875rem;
485
- line-height: 3.125rem;
486
- }
487
- }
488
- @media (min-width: 85.375rem) {
489
- h1 {
490
- font-size: 3.5rem;
491
- line-height: 4.5rem;
492
- }
493
- }
494
- h2 {
495
- margin-bottom: 1.5rem;
496
- font-size: 1.75rem;
497
- font-weight: 400;
498
- line-height: 2rem;
499
- color: var(--color-blue);
500
- }
501
- @media (min-width: 64rem) {
502
- h2 {
503
- font-size: 2.5rem;
504
- line-height: 3rem;
505
- }
506
- }
507
- @media (min-width: 85.375rem) {
508
- h2 {
509
- font-size: 2.875rem;
510
- line-height: 3.125rem;
511
- }
512
- }
513
- h3 {
514
- margin-bottom: 1.5rem;
515
- font-size: 1.625rem;
516
- font-weight: 400;
517
- line-height: 2rem;
518
- }
519
- @media (min-width: 64rem) {
520
- h3 {
521
- font-size: 1.75rem;
522
- line-height: 2.25rem;
523
- }
524
- }
525
- @media (min-width: 85.375rem) {
526
- h3 {
527
- font-size: 2rem;
528
- line-height: 2.625rem;
529
- }
530
- }
531
- h4 {
532
- margin-bottom: 1.5rem;
533
- font-size: 1.5rem;
534
- font-weight: 700;
535
- line-height: 1.75rem;
536
- }
537
- @media (min-width: 64rem) {
538
- h4 {
539
- font-size: 1.625rem;
540
- line-height: 1.875rem;
541
- }
542
- }
543
- @media (min-width: 85.375rem) {
544
- h4 {
545
- font-size: 1.75rem;
546
- line-height: 2.25rem;
547
- }
548
- }
549
- h5 {
550
- margin-bottom: 1.5rem;
551
- font-size: 1.1875rem;
552
- font-weight: 700;
553
- line-height: 1.75rem;
554
- }
555
- @media (min-width: 64rem) {
556
- h5 {
557
- font-size: 1.375rem;
558
- line-height: 1.875rem;
559
- }
560
- }
561
- @media (min-width: 85.375rem) {
562
- h5 {
563
- font-size: 1.5rem;
564
- line-height: 2.125rem;
565
- }
566
- }
567
- h6 {
568
- color: #f0f;
569
- animation: blinker 0.25s linear infinite;
570
- }`,
571
- "KOL-BADGE": `:host > span {
572
- border-radius: 2px;
573
- }
574
- :host > span > kol-span-wc {
575
- font-family: var(--font-family-heading);
576
- padding: 0.25rem 0.5rem;
577
- }
578
- :host > span > kol-span-wc > span {
579
- gap: 0.5rem;
580
- }`,
581
- "KOL-BUTTON": `button > kol-span-wc {
582
- padding: 0.625rem 1.125rem;
583
- font-family: var(--font);
584
- font-size: 1rem;
585
- line-height: 1.125rem;
586
- border: 1px solid var(--color-darkgray);
587
- border-radius: 0.125rem;
588
- transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease;
589
- }
590
- button.ghost > kol-span-wc {
591
- border: none;
592
- }
593
- button > kol-span-wc > span {
594
- gap: 0.625rem;
595
- }
596
- button > kol-span-wc {
597
- background-color: var(--color-white);
598
- color: var(--color-black);
599
- }
600
- button > kol-span-wc kol-icon {
601
- color: var(--color-blue);
602
- }
603
- button:not(:disabled):is(:hover, :focus) > kol-span-wc kol-icon {
604
- color: var(--color-white);
605
- }
606
- button:not(:disabled):is(:hover, :focus) > kol-span-wc {
607
- background-color: var(--color-blue);
608
- color: var(--color-white);
609
- }
610
- button:focus > kol-span-wc {
611
- outline: 1px dotted var(--color-black);
612
- border: none;
613
- }
614
- button:focus {
615
- outline: none;
616
- }`,
617
- "KOL-ALERT": `:host .success {
618
- color: var(--color-green);
619
- }
620
- :host .warning {
621
- color: var(--color-orange);
622
- }
623
- :host .error {
624
- color: var(--color-red);
625
- }
626
- :host .info {
627
- color: var(--color-cyan);
628
- }
629
- :host > div {
630
- border: none;
631
- background-color: var(--color-white);
632
- }
633
- @media only screen and (min-width: 600px) {
634
- :host > div {
635
- font-size: 1.125rem;
636
- }
637
- }
638
- .heading .heading-icon {
639
- height: 100%;
640
- width: 2em;
641
- }
642
- .success .heading-icon {
643
- color: var(--color-green);
644
- }
645
- .warning .heading-icon {
646
- color: var(--color-orange);
647
- }
648
- .error .heading-icon {
649
- color: var(--color-red);
650
- }
651
- .info .heading-icon {
652
- color: var(--color-cyan);
653
- }
654
- .default .heading-icon {
655
- color: var(--color-black);
656
- }
657
- .close {
658
- align-self: start;
659
- }
660
- .card.success {
661
- border: 1px solid var(--color-green);
662
- }
663
- .card.warning {
664
- border: 1px solid var(--color-orange);
665
- }
666
- .card.error {
667
- border: 1px solid var(--color-red);
668
- }
669
- .card.info {
670
- border: 1px solid var(--color-cyan);
671
- }
672
- .card.default {
673
- border: 1px solid var(--color-black);
674
- }
675
- .card .heading {
676
- padding: 0.5rem;
677
- }
678
- .card .content {
679
- padding: 0.5rem;
680
- }`,
681
- "KOL-INDENTED-TEXT": `:host > div {
682
- border-left: none;
683
- box-shadow: -4px 0px 0px var(--color-blue);
684
- padding: 0.25em 0.5em;
685
- width: 100%;
686
- }`,
687
- "KOL-CARD": `:host {
688
- color: var(--color-white);
689
- background-color: var(--color-darkblue);
690
- padding: 4.5454545455%;
691
- }
692
- :host .headline {
693
- font-size: 1.375rem;
694
- line-height: 1.5rem;
695
- margin: 1rem 0;
696
- }
697
- @media only screen and (min-width: 600px) and (max-width: 1023px) {
698
- :host .headline {
699
- font-size: 1.5rem;
700
- line-height: 1.75rem;
701
- }
702
- }
703
- @media only screen and (min-width: 1024px) {
704
- :host .headline {
705
- font-size: 2rem;
706
- line-height: 2.25rem;
707
- }
708
- }
709
- :host .content {
710
- font-size: 1.1875rem;
711
- line-height: 1.6875rem;
712
- }
713
- @media only screen and (min-width: 600px) and (max-width: 1023px) {
714
- :host .content {
715
- font-size: 1.375rem;
716
- line-height: 2rem;
717
- }
718
- }
719
- @media only screen and (min-width: 1024px) {
720
- :host.content {
721
- font-size: 1.5rem;
722
- line-height: 2.125rem;
723
- }
724
- }
725
- :host .footer {
726
- margin: 1rem 0;
727
- }
728
- :is(h1, h2, h3, h4, h5, h6) {
729
- font-weight: 400;
730
- }`,
731
- "KOL-INPUT-CHECKBOX": `kol-input {
732
- gap: 0.1rem 0.75rem;
733
- font-size: 1.375rem;
734
- }
735
- input[type="checkbox"]:focus {
736
- outline: var(--color-black) dotted 1px;
737
- outline-offset: 0.15rem;
738
- }
739
- .hint {
740
- font-size: 1.125rem;
741
- }
742
- .default input[type="checkbox"] {
743
- border-width: 1px;
744
- padding: 0.125rem;
745
- width: 1.375rem;
746
- height: 1.375rem;
747
- }
748
- .default input[type="checkbox"]:checked {
749
- color: var(--color-white);
750
- background-color: var(--color-blue);
751
- border-color: var(--color-blue);
752
- padding: 0;
753
- }
754
- .default input[type="checkbox"]:checked:before {
755
- left: 0.35rem;
756
- top: 45%;
757
- height: 0.6rem;
758
- width: 0.25rem;
759
- transform: rotate(45deg) translate(-50%, -50%);
760
- border-width: 0px 2px 2px 0px;
761
- }
762
- .default input[type="checkbox"]:indeterminate:before {
763
- background-color: var(--color-blue);
764
- top: 0;
765
- left: 0;
766
- width: 100%;
767
- height: 100%;
768
- }
769
- kol-input > kol-alert {
770
- order: 3;
771
- }
772
- .switch input[type="checkbox"] {
773
- border-width: 1px;
774
- }
775
- .switch input[type="checkbox"]:before {
776
- background-color: var(--color-blue);
777
- height: 1.3em;
778
- width: 1.3em;
779
- }
780
- kol-input.button {
781
- font-family: var(----font-family);
782
- font-size: 1rem;
783
- line-height: 1.125rem;
784
- padding: 0.625rem 1.125rem;
785
- border: 1px solid var(--color-darkgray);
786
- border-radius: 0.125rem;
787
- transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease;
788
- gap: 0.625rem;
789
- }
790
- kol-input.button {
791
- background-color: var(--color-white);
792
- color: var(--color-black);
793
- }
794
- kol-input.button kol-icon {
795
- color: var(--color-blue);
796
- }
797
- kol-input.button:is(:hover, :focus) kol-icon {
798
- color: var(--color-white);
799
- }
800
- kol-input.button:is(:hover, :focus) {
801
- cursor: pointer;
802
- background-color: var(--color-blue);
803
- color: var(--color-white);
804
- }
805
- kol-input.button:is(:hover, :focus) {
806
- outline: 1px dotted var(--color-black);
807
- border: 1px solid var(--color-blue);
808
- }`,
809
- "KOL-ICON": `/* https: //styleguide.bundesregierung.de/sg-de/medien/digitale-medien/webanwendungen/komponenten/atome/icon */`,
810
- "KOL-ABBR": `:host abbr {
811
- text-decoration: none;
812
- border-bottom: 1px dotted currentColor;
813
- }`,
814
- "KOL-LINK-BUTTON": `.button a kol-span-wc {
815
- font-family: var(----font-family);
816
- font-size: 1rem;
817
- line-height: 1.125rem;
818
- padding: 0.625rem 1.125rem;
819
- border: 1px solid var(--color-darkgray);
820
- border-radius: 0.125rem;
821
- transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease;
822
- }
823
- .hide-label > kol-span-wc {
824
- padding: 0.625rem;
825
- }
826
- .button.ghost a kol-span-wc {
827
- border: none;
828
- }
829
- .button a kol-span-wc > span {
830
- gap: 0.625rem;
831
- }
832
- .button a kol-span-wc {
833
- background-color: var(--color-white);
834
- color: var(--color-black);
835
- }
836
- .button a kol-span-wc kol-icon {
837
- color: var(--color-blue);
838
- }
839
- a:is(:hover, :focus) kol-span-wc kol-icon {
840
- color: var(--color-white);
841
- }
842
- a:is(:hover, :focus) kol-span-wc {
843
- cursor: pointer;
844
- background-color: var(--color-blue);
845
- color: var(--color-white);
846
- }
847
- a:is(:hover, :focus) kol-span-wc {
848
- outline: 1px dotted var(--color-black);
849
- border: 1px solid var(--color-blue);
850
- }
851
- a:is(:hover, :focus) {
852
- outline: none;
853
- }`,
854
- "KOL-INPUT-TEXT": `:host label {
855
- color: var(--color-darkblue);
856
- font-size: 0.9375rem;
857
- }
858
- @media (min-width: 37.5rem) {
859
- :host label {
860
- font-size: 1.125rem;
861
- }
862
- } /* Move label over input as placeholder */
863
- :host label {
864
- transition: all 0.3s ease-in-out 0ms;
865
- transform-origin: 0;
866
- }
867
- :host(:not(.has-value)) kol-input:not(:focus-within) label {
868
- transform: translateY(1.9375rem) scale(1.3333333333);
869
- cursor: text;
870
- }
871
- :host(:not(.has-value)) kol-input:not(:focus-within):has(div.icon-left) label {
872
- transform: translateX(2.5rem) translateY(1.9375rem) scale(1.3333333333);
873
- }
874
- :host(:not(.has-value)) kol-input:not(:focus-within) label,
875
- input::placeholder {
876
- color: var(--color-darkgray);
877
- }
878
- :host([_error]:not(.has-value)) kol-input:not(:focus-within) label {
879
- color: var(--color-red);
880
- } /* Move hint under input */
881
- span.hint {
882
- order: 1;
883
- }
884
- span.hint::before {
885
- font-family: codicon;
886
- font-size: 1rem;
887
- content: "\\ea74";
888
- }
889
- kol-alert {
890
- order: 2;
891
- }
892
- :host([_error]) label {
893
- color: var(--color-red);
894
- }
895
- div.input {
896
- border-bottom: 1px solid var(--color-lightgray);
897
- }
898
- div.input:focus-within {
899
- border-bottom: 1px solid var(--color-darkgray);
900
- }
901
- div.input input {
902
- border: none;
903
- background-color: var(--color-white);
904
- outline: none;
905
- height: 2.5rem;
906
- font-size: 1.5rem;
907
- padding: 0;
908
- }
909
- kol-input:has(label:not([hidden])) div.input input::placeholder {
910
- color: transparent;
911
- }
912
- kol-alert {
913
- margin-top: 1.5rem;
914
- }
915
- kol-button-wc > button > kol-span-wc {
916
- padding: 0.625rem 1.125rem;
917
- font-family: var(--font);
918
- font-size: 1rem;
919
- line-height: 1.125rem;
920
- border: none;
921
- border-radius: 0.125rem;
922
- transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease;
923
- }
924
- kol-button-wc > button > kol-span-wc > span {
925
- gap: 0.625rem;
926
- }
927
- kol-button-wc > button > kol-span-wc {
928
- background-color: var(--color-white);
929
- color: var(--color-black);
930
- }
931
- kol-button-wc > button > kol-span-wc kol-icon {
932
- color: var(--color-blue);
933
- }
934
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc kol-icon {
935
- color: var(--color-white);
936
- }
937
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc {
938
- cursor: pointer;
939
- background-color: var(--color-blue);
940
- color: var(--color-white);
941
- }
942
- kol-button-wc > button:focus > kol-span-wc {
943
- outline: 1px dotted var(--color-black);
944
- border: none;
945
- }
946
- kol-button-wc > button:focus {
947
- outline: none;
948
- }`,
949
- "KOL-INPUT-EMAIL": `:host label {
950
- color: var(--color-darkblue);
951
- font-size: 0.9375rem;
952
- }
953
- @media (min-width: 37.5rem) {
954
- :host label {
955
- font-size: 1.125rem;
956
- }
957
- } /* Move label over input as placeholder */
958
- :host label {
959
- transition: all 0.3s ease-in-out 0ms;
960
- transform-origin: 0;
961
- }
962
- :host(:not(.has-value)) kol-input:not(:focus-within) label {
963
- transform: translateY(1.9375rem) scale(1.3333333333);
964
- cursor: text;
965
- }
966
- :host(:not(.has-value)) kol-input:not(:focus-within):has(div.icon-left) label {
967
- transform: translateX(2.5rem) translateY(1.9375rem) scale(1.3333333333);
968
- }
969
- :host(:not(.has-value)) kol-input:not(:focus-within) label,
970
- input::placeholder {
971
- color: var(--color-darkgray);
972
- }
973
- :host([_error]) kol-input:not(:focus-within) label {
974
- color: var(--color-red);
975
- } /* Move hint under input */
976
- span.hint {
977
- order: 1;
978
- }
979
- kol-alert {
980
- order: 2;
981
- }
982
- :host([_error]) label {
983
- color: var(--color-red);
984
- }
985
- div.input {
986
- border-bottom: 1px solid var(--color-lightgray);
987
- }
988
- div.input:focus-within {
989
- border-bottom: 1px solid var(--color-darkgray);
990
- }
991
- div.input input {
992
- border: none;
993
- background-color: var(--color-white);
994
- outline: none;
995
- height: 2.5rem;
996
- font-size: 1.5rem;
997
- padding: 0;
998
- }
999
- kol-input:has(label:not([hidden])) div.input input::placeholder {
1000
- color: transparent;
1001
- }
1002
- kol-alert {
1003
- margin-top: 1.5rem;
1004
- }
1005
- kol-button-wc > button > kol-span-wc {
1006
- padding: 0.625rem 1.125rem;
1007
- font-family: var(--font);
1008
- font-size: 1rem;
1009
- line-height: 1.125rem;
1010
- border: none;
1011
- border-radius: 0.125rem;
1012
- transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease;
1013
- }
1014
- kol-button-wc > button > kol-span-wc > span {
1015
- gap: 0.625rem;
1016
- }
1017
- kol-button-wc > button > kol-span-wc {
1018
- background-color: var(--color-white);
1019
- color: var(--color-black);
1020
- }
1021
- kol-button-wc > button > kol-span-wc kol-icon {
1022
- color: var(--color-blue);
1023
- }
1024
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc kol-icon {
1025
- color: var(--color-white);
1026
- }
1027
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc {
1028
- cursor: pointer;
1029
- background-color: var(--color-blue);
1030
- color: var(--color-white);
1031
- }
1032
- kol-button-wc > button:focus > kol-span-wc {
1033
- outline: 1px dotted var(--color-black);
1034
- border: none;
1035
- }
1036
- kol-button-wc > button:focus {
1037
- outline: none;
1038
- }`,
1039
- "KOL-INPUT-NUMBER": `:host label {
1040
- color: var(--color-darkblue);
1041
- font-size: 0.9375rem;
1042
- }
1043
- @media (min-width: 37.5rem) {
1044
- :host label {
1045
- font-size: 1.125rem;
1046
- }
1047
- } /* Move label over input as placeholder */
1048
- :host(:not(.has-value)) kol-input:has(input[type="number"]) label {
1049
- transition: all 0.3s ease-in-out 0ms;
1050
- transform-origin: 0;
1051
- }
1052
- :host(:not(.has-value)) kol-input:has(input[type="number"]):not(:focus-within) label {
1053
- transform: translateY(1.9375rem) scale(1.3333333333);
1054
- cursor: text;
1055
- }
1056
- :host(:not(.has-value)) kol-input:has(input[type="number"]):not(:focus-within):has(div.icon-left) label {
1057
- transform: translateX(2.5rem) translateY(1.9375rem) scale(1.3333333333);
1058
- }
1059
- :host(:not(.has-value)) kol-input:not(:focus-within) label,
1060
- input::placeholder {
1061
- color: var(--color-darkgray);
1062
- }
1063
- :host([_error]) kol-input:not(:focus-within) label {
1064
- color: var(--color-red);
1065
- }
1066
- span.hint {
1067
- order: 1;
1068
- }
1069
- kol-alert {
1070
- order: 2;
1071
- }
1072
- :host([_error]) label {
1073
- color: var(--color-red);
1074
- }
1075
- div.input {
1076
- border-bottom: 1px solid var(--color-lightgray);
1077
- }
1078
- div.input:focus-within {
1079
- border-bottom: 1px solid var(--color-darkgray);
1080
- }
1081
- div.input input {
1082
- border: none;
1083
- background-color: var(--color-white);
1084
- outline: none;
1085
- height: 2.5rem;
1086
- font-size: 1.5rem;
1087
- padding: 0;
1088
- }
1089
- kol-input:has(label:not([hidden])) div.input input::placeholder {
1090
- color: transparent;
1091
- }
1092
- kol-alert {
1093
- margin-top: 1.5rem;
1094
- }
1095
- kol-button-wc > button > kol-span-wc {
1096
- padding: 0.625rem 1.125rem;
1097
- font-family: var(--font);
1098
- font-size: 1rem;
1099
- line-height: 1.125rem;
1100
- border: none;
1101
- border-radius: 0.125rem;
1102
- transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease;
1103
- }
1104
- kol-button-wc > button > kol-span-wc > span {
1105
- gap: 0.625rem;
1106
- }
1107
- kol-button-wc > button > kol-span-wc {
1108
- background-color: var(--color-white);
1109
- color: var(--color-black);
1110
- }
1111
- kol-button-wc > button > kol-span-wc kol-icon {
1112
- color: var(--color-blue);
1113
- }
1114
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc kol-icon {
1115
- color: var(--color-white);
1116
- }
1117
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc {
1118
- cursor: pointer;
1119
- background-color: var(--color-blue);
1120
- color: var(--color-white);
1121
- }
1122
- kol-button-wc > button:focus > kol-span-wc {
1123
- outline: 1px dotted var(--color-black);
1124
- border: none;
1125
- }
1126
- kol-button-wc > button:focus {
1127
- outline: none;
1128
- }`,
1129
- "KOL-INPUT-DATE": `:host label {
1130
- color: var(--color-darkblue);
1131
- font-size: 0.9375rem;
1132
- }
1133
- @media (min-width: 37.5rem) {
1134
- :host label {
1135
- font-size: 1.125rem;
1136
- }
1137
- } /* Move label over input as placeholder */
1138
- :host(:not(.has-value)) kol-input:has(input[type="number"]) label {
1139
- transition: all 0.3s ease-in-out 0ms;
1140
- transform-origin: 0;
1141
- }
1142
- :host(:not(.has-value)) kol-input:has(input[type="number"]):not(:focus-within) label {
1143
- transform: translateY(1.9375rem) scale(1.3333333333);
1144
- cursor: text;
1145
- }
1146
- :host(:not(.has-value)) kol-input:has(input[type="number"]):not(:focus-within):has(div.icon-left) label {
1147
- transform: translateX(2.5rem) translateY(1.9375rem) scale(1.3333333333);
1148
- }
1149
- :host(:not(.has-value)) kol-input:not(:focus-within) label,
1150
- input::placeholder {
1151
- color: var(--color-darkgray);
1152
- }
1153
- :host([_error]) kol-input:not(:focus-within) label {
1154
- color: var(--color-red);
1155
- }
1156
- span.hint {
1157
- order: 1;
1158
- }
1159
- kol-alert {
1160
- order: 2;
1161
- }
1162
- :host([_error]) label {
1163
- color: var(--color-red);
1164
- }
1165
- div.input {
1166
- border-bottom: 1px solid var(--color-lightgray);
1167
- }
1168
- div.input:focus-within {
1169
- border-bottom: 1px solid var(--color-darkgray);
1170
- }
1171
- div.input input {
1172
- border: none;
1173
- background-color: var(--color-white);
1174
- outline: none;
1175
- height: 2.5rem;
1176
- font-size: 1.5rem;
1177
- padding: 0;
1178
- }
1179
- kol-input:has(label:not([hidden])) div.input input::placeholder {
1180
- color: transparent;
1181
- }
1182
- kol-alert {
1183
- margin-top: 1.5rem;
1184
- }
1185
- kol-button-wc > button > kol-span-wc {
1186
- padding: 0.625rem 1.125rem;
1187
- font-family: var(--font);
1188
- font-size: 1rem;
1189
- line-height: 1.125rem;
1190
- border: none;
1191
- border-radius: 0.125rem;
1192
- transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease;
1193
- }
1194
- kol-button-wc > button > kol-span-wc > span {
1195
- gap: 0.625rem;
1196
- }
1197
- kol-button-wc > button > kol-span-wc {
1198
- background-color: var(--color-white);
1199
- color: var(--color-black);
1200
- }
1201
- kol-button-wc > button > kol-span-wc kol-icon {
1202
- color: var(--color-blue);
1203
- }
1204
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc kol-icon {
1205
- color: var(--color-white);
1206
- }
1207
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc {
1208
- cursor: pointer;
1209
- background-color: var(--color-blue);
1210
- color: var(--color-white);
1211
- }
1212
- kol-button-wc > button:focus > kol-span-wc {
1213
- outline: 1px dotted var(--color-black);
1214
- border: none;
1215
- }
1216
- kol-button-wc > button:focus {
1217
- outline: none;
1218
- }`,
1219
- "KOL-INPUT-COLOR": `:host label {
1220
- color: var(--color-darkblue);
1221
- font-size: 0.9375rem;
1222
- }
1223
- @media (min-width: 37.5rem) {
1224
- :host label {
1225
- font-size: 1.125rem;
1226
- }
1227
- } /* Move hint under input */
1228
- span.hint {
1229
- order: 1;
1230
- }
1231
- kol-alert {
1232
- order: 2;
1233
- }
1234
- :host([_error]) label {
1235
- color: var(--color-red);
1236
- }
1237
- div.input {
1238
- border-bottom: 1px solid var(--color-lightgray);
1239
- }
1240
- div.input:focus-within {
1241
- border-bottom: 1px solid var(--color-darkgray);
1242
- }
1243
- div.input input {
1244
- border: none;
1245
- background-color: var(--color-white);
1246
- outline: none;
1247
- height: 2.5rem;
1248
- font-size: 1.5rem;
1249
- padding: 0;
1250
- }
1251
- kol-input:has(label:not([hidden])) div.input input::placeholder {
1252
- color: transparent;
1253
- }
1254
- kol-alert {
1255
- margin-top: 1.5rem;
1256
- }
1257
- kol-button-wc > button > kol-span-wc {
1258
- padding: 0.625rem 1.125rem;
1259
- font-family: var(--font);
1260
- font-size: 1rem;
1261
- line-height: 1.125rem;
1262
- border: none;
1263
- border-radius: 0.125rem;
1264
- transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease;
1265
- }
1266
- kol-button-wc > button > kol-span-wc > span {
1267
- gap: 0.625rem;
1268
- }
1269
- kol-button-wc > button > kol-span-wc {
1270
- background-color: var(--color-white);
1271
- color: var(--color-black);
1272
- }
1273
- kol-button-wc > button > kol-span-wc kol-icon {
1274
- color: var(--color-blue);
1275
- }
1276
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc kol-icon {
1277
- color: var(--color-white);
1278
- }
1279
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc {
1280
- cursor: pointer;
1281
- background-color: var(--color-blue);
1282
- color: var(--color-white);
1283
- }
1284
- kol-button-wc > button:focus > kol-span-wc {
1285
- outline: 1px dotted var(--color-black);
1286
- border: none;
1287
- }
1288
- kol-button-wc > button:focus {
1289
- outline: none;
1290
- }`,
1291
- "KOL-INPUT-FILE": `:host label {
1292
- color: var(--color-darkblue);
1293
- font-size: 0.9375rem;
1294
- }
1295
- @media (min-width: 37.5rem) {
1296
- :host label {
1297
- font-size: 1.125rem;
1298
- }
1299
- } /* Move hint under input */
1300
- span.hint {
1301
- order: 1;
1302
- }
1303
- kol-alert {
1304
- order: 2;
1305
- }
1306
- :host([_error]) label {
1307
- color: var(--color-red);
1308
- }
1309
- div.input {
1310
- align-items: baseline;
1311
- border-bottom: 1px solid var(--color-lightgray);
1312
- }
1313
- div.input:focus-within {
1314
- border-bottom: 1px solid var(--color-darkgray);
1315
- }
1316
- div.input input {
1317
- border: none;
1318
- background-color: var(--color-white);
1319
- outline: none;
1320
- height: 3.2rem;
1321
- font-size: 1.5rem;
1322
- padding: 0;
1323
- }
1324
- kol-input:has(label:not([hidden])) div.input input::placeholder {
1325
- color: transparent;
1326
- }
1327
- kol-alert {
1328
- margin-top: 1.5rem;
1329
- }
1330
- kol-button-wc > button > kol-span-wc {
1331
- padding: 0.625rem 1.125rem;
1332
- font-family: var(--font);
1333
- font-size: 1rem;
1334
- line-height: 1.125rem;
1335
- border: none;
1336
- border-radius: 0.125rem;
1337
- transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease;
1338
- }
1339
- kol-button-wc > button > kol-span-wc > span {
1340
- gap: 0.625rem;
1341
- }
1342
- kol-button-wc > button > kol-span-wc {
1343
- background-color: var(--color-white);
1344
- color: var(--color-black);
1345
- }
1346
- kol-button-wc > button > kol-span-wc kol-icon {
1347
- color: var(--color-blue);
1348
- }
1349
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc kol-icon {
1350
- color: var(--color-white);
1351
- }
1352
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc {
1353
- cursor: pointer;
1354
- background-color: var(--color-blue);
1355
- color: var(--color-white);
1356
- }
1357
- kol-button-wc > button:focus > kol-span-wc {
1358
- outline: 1px dotted var(--color-black);
1359
- border: none;
1360
- }
1361
- kol-button-wc > button:focus {
1362
- outline: none;
1363
- }`,
1364
- "KOL-INPUT-PASSWORD": `:host label {
1365
- color: var(--color-darkblue);
1366
- font-size: 0.9375rem;
1367
- }
1368
- @media (min-width: 37.5rem) {
1369
- :host label {
1370
- font-size: 1.125rem;
1371
- }
1372
- } /* Move label over input as placeholder */
1373
- :host label {
1374
- transition: all 0.3s ease-in-out 0ms;
1375
- transform-origin: 0;
1376
- }
1377
- :host(:not(.has-value)) kol-input:not(:focus-within) label {
1378
- transform: translateY(1.9375rem) scale(1.3333333333);
1379
- cursor: text;
1380
- }
1381
- :host(:not(.has-value)) kol-input:not(:focus-within):has(div.icon-left) label {
1382
- transform: translateX(2.5rem) translateY(1.9375rem) scale(1.3333333333);
1383
- }
1384
- :host(:not(.has-value)) kol-input:not(:focus-within) label,
1385
- input::placeholder {
1386
- color: var(--color-darkgray);
1387
- }
1388
- :host([_error]) kol-input:not(:focus-within) label {
1389
- color: var(--color-red);
1390
- } /* Move hint under input */
1391
- span.hint {
1392
- order: 1;
1393
- }
1394
- kol-alert {
1395
- order: 2;
1396
- }
1397
- :host([_error]) label {
1398
- color: var(--color-red);
1399
- }
1400
- div.input {
1401
- align-items: baseline;
1402
- border-bottom: 1px solid var(--color-lightgray);
1403
- }
1404
- div.input:focus-within {
1405
- border-bottom: 1px solid var(--color-darkgray);
1406
- }
1407
- div.input input {
1408
- border: none;
1409
- background-color: var(--color-white);
1410
- outline: none;
1411
- height: 2.5rem;
1412
- font-size: 1.5rem;
1413
- padding: 0;
1414
- }
1415
- kol-input:has(label:not([hidden])) div.input input::placeholder {
1416
- color: transparent;
1417
- }
1418
- kol-alert {
1419
- margin-top: 1.5rem;
1420
- }
1421
- kol-button-wc > button > kol-span-wc {
1422
- padding: 0.625rem 1.125rem;
1423
- font-family: var(--font);
1424
- font-size: 1rem;
1425
- line-height: 1.125rem;
1426
- border: none;
1427
- border-radius: 0.125rem;
1428
- transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease;
1429
- }
1430
- kol-button-wc > button > kol-span-wc > span {
1431
- gap: 0.625rem;
1432
- }
1433
- kol-button-wc > button > kol-span-wc {
1434
- background-color: var(--color-white);
1435
- color: var(--color-black);
1436
- }
1437
- kol-button-wc > button > kol-span-wc kol-icon {
1438
- color: var(--color-blue);
1439
- }
1440
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc kol-icon {
1441
- color: var(--color-white);
1442
- }
1443
- kol-button-wc > button:is(:hover, :focus) > kol-span-wc {
1444
- cursor: pointer;
1445
- background-color: var(--color-blue);
1446
- color: var(--color-white);
1447
- }
1448
- kol-button-wc > button:focus > kol-span-wc {
1449
- outline: 1px dotted var(--color-black);
1450
- border: none;
1451
- }
1452
- kol-button-wc > button:focus {
1453
- outline: none;
1454
- }`,
1455
- "KOL-TEXTAREA": `:host label {
1456
- color: var(--color-darkblue);
1457
- font-size: 0.9375rem;
1458
- line-height: 0.9375rem;
1459
- }
1460
- @media (min-width: 37.5rem) {
1461
- :host label {
1462
- font-size: 1.125rem;
1463
- line-height: 1.125rem;
1464
- }
1465
- } /* Move label over input as placeholder */
1466
- :host label {
1467
- transition: all 0.3s ease-in-out 0ms;
1468
- transform-origin: 0;
1469
- }
1470
- :host(:not(.has-value)) kol-input:not(:focus-within) label {
1471
- transform: translateY(1.9375rem) scale(1.3333333333);
1472
- cursor: text;
1473
- }
1474
- :host(:not(.has-value)) kol-input:not(:focus-within):has(div.icon-left) label {
1475
- transform: translateX(2.5rem) translateY(1.9375rem) scale(1.3333333333);
1476
- }
1477
- :host(:not(.has-value)) kol-input:not(:focus-within) label,
1478
- textarea::placeholder {
1479
- color: var(--color-darkgray);
1480
- }
1481
- :host([_error]:not(.has-value)) kol-input:not(:focus-within) label {
1482
- color: var(--color-red);
1483
- } /* Move hint under input */
1484
- span.hint {
1485
- order: 1;
1486
- }
1487
- kol-alert {
1488
- order: 2;
1489
- }
1490
- :host([_error]) label {
1491
- color: var(--color-red);
1492
- }
1493
- div.input textarea:focus {
1494
- border-bottom: 1px solid var(--color-darkgray);
1495
- }
1496
- div.input textarea {
1497
- border: none;
1498
- border-bottom: 1px solid var(--color-lightgray);
1499
- background-color: var(--color-white);
1500
- outline: none;
1501
- height: 2.5rem;
1502
- font-size: 1.5rem;
1503
- padding: 0;
1504
- }
1505
- kol-input:has(label:not([hidden])) div.input textarea::placeholder {
1506
- color: transparent;
1507
- }
1508
- kol-alert {
1509
- margin-top: 1.5rem;
1510
- }`,
1511
- "KOL-INPUT-RANGE": `input[type="range"] {
1512
- height: 3em;
1513
- background-color: transparent;
1514
- outline: none;
1515
- }
1516
- input[type="range"]::-webkit-slider-thumb {
1517
- border: none;
1518
- margin-top: -0.5em;
1519
- height: 1.5em;
1520
- width: 1.5em;
1521
- border-radius: 100%;
1522
- background: var(--color-darkblue);
1523
- cursor: pointer;
1524
- }
1525
- input[type="range"]::-moz-range-thumb {
1526
- border: 1px solid var(--color-darkblue);
1527
- height: 2em;
1528
- width: 1em;
1529
- border-radius: 3px;
1530
- background: var(--color-blue);
1531
- cursor: pointer;
1532
- box-shadow: 1px 1px 1px var(--color-black), 0px 0px 1px var(--color-darkgray);
1533
- }
1534
- input[type="range"]::-webkit-slider-runnable-track {
1535
- width: 100%;
1536
- height: 0.5em;
1537
- cursor: pointer;
1538
- background: var(--color-lightgray);
1539
- border-radius: 0.25em;
1540
- border: none;
1541
- }
1542
- input[type="range"]:focus::-webkit-slider-runnable-track {
1543
- outline: var(--color-black) dotted 1px;
1544
- outline-offset: 0.25em;
1545
- }
1546
- input[type="range"]::-moz-range-track {
1547
- width: 100%;
1548
- height: 0.5em;
1549
- cursor: pointer;
1550
- background: var(--color-lightgray);
1551
- border-radius: 0.25em;
1552
- border: none;
1553
- }`,
1554
- "KOL-PROGRESS": `:host progress,
1555
- :host span {
1556
- display: block;
1557
- height: 0px;
1558
- overflow: hidden;
1559
- width: 0px;
1560
- }
1561
- svg line:first-child,
1562
- svg circle:first-child {
1563
- fill: transparent;
1564
- stroke: var(--color-lightgray);
1565
- }
1566
- svg line:last-child,
1567
- svg circle:last-child {
1568
- stroke: var(--color-darkblue);
1569
- fill: transparent;
1570
- }
1571
- progress {
1572
- display: none;
1573
- }`,
1574
- "KOL-INPUT-RADIO": `:host {
1575
- font-size: 1.375rem;
1576
- line-height: 2rem;
1577
- }
1578
- input {
1579
- border: 1px solid var(--color-blue);
1580
- }
1581
- input:focus {
1582
- border: 1px dashed var(--color-blue);
1583
- outline: none;
1584
- }
1585
- .disabled {
1586
- opacity: 0.5;
1587
- }
1588
- .disabled label,
1589
- .disabled input {
1590
- cursor: not-allowed;
1591
- }
1592
- input:checked::before {
1593
- background-color: var(--color-blue);
1594
- }
1595
- fieldset {
1596
- border: none;
1597
- }
1598
- fieldset.vertical {
1599
- gap: 0.5rem;
1600
- }
1601
- fieldset.horizontal {
1602
- gap: 2.5rem;
1603
- }
1604
- div[slot="input"] {
1605
- gap: 0.5rem;
1606
- }`,
1607
- "KOL-LINK": `a {
1608
- margin-bottom: 0;
1609
- font-weight: 700;
1610
- vertical-align: top;
1611
- text-decoration: none;
1612
- color: var(--color-blue);
1613
- gap: 0.25rem;
1614
- }
1615
- a:focus,
1616
- a:hover {
1617
- color: var(--color-darkblue);
1618
- }
1619
- a:focus {
1620
- outline: var(--color-darkblue) solid 1px;
1621
- outline-offset: 2px;
1622
- border-radius: 2px;
1623
- }
1624
- a:visited {
1625
- text-decoration: underline;
1626
- }
1627
- kol-icon {
1628
- color: var(--color-blue);
1629
- }
1630
- kol-icon:hover {
1631
- color: var(--color-darkblue);
1632
- }
1633
- kol-span-wc > span {
1634
- gap: 0.25rem;
1635
- }`,
1636
- "KOL-BUTTON-LINK": `button {
1637
- margin-bottom: 0;
1638
- font-weight: 700;
1639
- vertical-align: top;
1640
- text-decoration: none;
1641
- color: var(--color-blue);
1642
- }
1643
- button:focus,
1644
- button:hover {
1645
- color: var(--color-darkblue);
1646
- }
1647
- button:focus {
1648
- outline: var(--color-darkblue) solid 1px;
1649
- outline-offset: 2px;
1650
- border-radius: 2px;
1651
- }
1652
- kol-icon {
1653
- color: var(--color-blue);
1654
- }
1655
- kol-icon:hover {
1656
- color: var(--color-darkblue);
1657
- }
1658
- kol-span-wc > span {
1659
- gap: 0.25rem;
1660
- }`,
1661
- "KOL-SELECT": `:host label {
1662
- color: var(--color-darkblue);
1663
- font-size: 0.9375rem;
1664
- }
1665
- @media (min-width: 37.5rem) {
1666
- :host label {
1667
- font-size: 1.125rem;
1668
- }
1669
- }
1670
- span.hint {
1671
- order: 1;
1672
- }
1673
- kol-alert {
1674
- order: 2;
1675
- }
1676
- :host([_error]) label {
1677
- color: var(--color-red);
1678
- }
1679
- div.input {
1680
- border-bottom: 1px solid var(--color-lightgray);
1681
- }
1682
- div.input:focus-within {
1683
- border-bottom: 1px solid var(--color-darkgray);
1684
- }
1685
- div.input select {
1686
- border: none;
1687
- background-color: var(--color-white);
1688
- outline: none;
1689
- font-size: 1.5rem;
1690
- padding: 0;
1691
- }
1692
- div.input select:not([multiple]) {
1693
- height: 2.5rem;
1694
- }
1695
- kol-alert {
1696
- margin-top: 1.5rem;
1697
- }`,
1698
- "KOL-ACCORDION": `.headline button {
1699
- font-size: 1.1875rem;
1700
- line-height: 1.6875rem;
1701
- }
1702
- @media only screen and (min-width: 600px) and (max-width: 1023px) {
1703
- .headline button {
1704
- font-size: 1.375rem;
1705
- line-height: 2rem;
1706
- }
1707
- }
1708
- @media only screen and (min-width: 1024px) {
1709
- .headline button {
1710
- font-size: 1.5rem;
1711
- line-height: 2.125rem;
1712
- }
1713
- }
1714
- .headline {
1715
- margin: 0;
1716
- padding: 0;
1717
- }
1718
- .headline button {
1719
- padding: 1rem 1rem 1rem 3.125rem;
1720
- }
1721
- .headline button:is(:focus, :hover) {
1722
- text-decoration: underline;
1723
- }
1724
- .headline kol-span-wc {
1725
- display: block;
1726
- }
1727
- .headline kol-span-wc > span {
1728
- align-items: flex-start;
1729
- }
1730
- .headline kol-span-wc > span > kol-icon {
1731
- display: block;
1732
- order: 2;
1733
- }
1734
- .headline kol-span-wc > span > span {
1735
- flex-grow: 1;
1736
- order: 1;
1737
- text-align: start;
1738
- }
1739
- :host {
1740
- border-top: 1px solid var(--color-violet-40);
1741
- }
1742
- .content {
1743
- padding: 3.125rem;
1744
- background-color: var(--color-violet-20);
1745
- }
1746
- button {
1747
- outline: none;
1748
- }
1749
- :host > div > kol-heading-wc button kol-icon {
1750
- font-size: 1rem;
1751
- }
1752
- :host > div > kol-heading-wc button kol-icon::part(icon) {
1753
- font-family: "Font Awesome 6 Free";
1754
- font-weight: 900;
1755
- }
1756
- :host > div.open > kol-heading-wc button kol-icon::part(icon)::before {
1757
- content: "\\f077";
1758
- }
1759
- :host > div.close > kol-heading-wc button kol-icon::part(icon)::before {
1760
- content: "\\f078";
1761
- }`,
1762
- "KOL-TABLE": `:host > div {
1763
- overflow-x: auto;
1764
- overflow-y: hidden;
1765
- }
1766
- caption {
1767
- padding: 0.5em;
1768
- }
1769
- :host th {
1770
- font-weight: normal;
1771
- background-color: var(--color-darkblue);
1772
- color: var(--color-white);
1773
- }
1774
- :host table thead tr:first-child th,
1775
- :host table thead tr:first-child td {
1776
- border-width: 0;
1777
- border-top-width: 2px;
1778
- border-style: solid;
1779
- border-color: var(--color-darkgray);
1780
- }
1781
- table {
1782
- width: 100%;
1783
- border-spacing: 0;
1784
- }
1785
- table,
1786
- :host table thead tr:last-child th,
1787
- :host table thead tr:last-child td {
1788
- border-width: 0;
1789
- border-bottom-width: 2px;
1790
- border-style: solid;
1791
- border-color: var(--color-darkgray);
1792
- }
1793
- th {
1794
- background-color: var(--color-white);
1795
- }
1796
- th div {
1797
- width: 100%;
1798
- display: flex;
1799
- gap: 0.5em;
1800
- grid-template-columns: 1fr auto;
1801
- align-items: center;
1802
- }
1803
- th div.center {
1804
- justify-content: center;
1805
- }
1806
- th div.right {
1807
- justify-content: end;
1808
- }
1809
- tbody tr:nth-child(odd) {
1810
- background-color: var(--color-lightgray-40);
1811
- }
1812
- th,
1813
- td {
1814
- padding: 0.5em;
1815
- }
1816
- td.center > div {
1817
- display: flex;
1818
- justify-content: center;
1819
- }
1820
- td.right > div {
1821
- display: flex;
1822
- justify-content: end;
1823
- }
1824
- th[aria-sort="ascending"],
1825
- th[aria-sort="descending"] {
1826
- font-weight: 700;
1827
- }
1828
- :host > div:last-child {
1829
- padding: 0.5em;
1830
- }
1831
- :host > div:last-child,
1832
- :host > div:last-child > div:last-child {
1833
- display: grid;
1834
- align-items: center;
1835
- justify-items: center;
1836
- gap: 1em;
1837
- }
1838
- @media (min-width: 1024px) {
1839
- :host > div:last-child,
1840
- :host > div:last-child > div:last-child {
1841
- grid-auto-flow: column;
1842
- }
1843
- :host > div:last-child kol-pagination {
1844
- display: flex;
1845
- gap: 1rem;
1846
- }
1847
- }`,
1848
- "KOL-TABS": `:host {
1849
- --kolibri-spacing: 0.25rem;
1850
- }
1851
- kol-button-group-wc {
1852
- border-bottom: 1px solid var(--color-lightgray);
1853
- margin-bottom: -1px;
1854
- }
1855
- kol-button-group-wc button {
1856
- border: none;
1857
- margin-bottom: -1px;
1858
- }
1859
- kol-button-group-wc button kol-span-wc {
1860
- padding: 0.5rem;
1861
- min-height: 44px;
1862
- min-width: 44px;
1863
- }
1864
- kol-button-group-wc button.selected kol-span-wc {
1865
- border-color: var(--color-lightgray-40);
1866
- border-style: solid;
1867
- border-width: 1px;
1868
- border-bottom-color: white;
1869
- border-top-color: var(--color-blue);
1870
- box-shadow: 0 -3px var(--color-blue);
1871
- font-weight: var(--font-weight-bold);
1872
- color: var(--color-blue);
1873
- }
1874
- kol-button-group-wc button:hover:not(:disabled) kol-span-wc {
1875
- color: var(--color-darkblue);
1876
- }
1877
- kol-button-group-wc button:focus kol-span-wc {
1878
- outline-color: var(--color-darkblue);
1879
- outline-style: solid;
1880
- outline-width: 2px;
1881
- }`,
1882
- "KOL-BUTTON-GROUP": `kol-button-group-wc {
1883
- gap: 0.5rem;
1884
- }`,
1885
- "KOL-PAGINATION": `:host {
1886
- display: grid;
1887
- gap: var(--spacing-m);
1888
- }
1889
- :host > div {
1890
- display: inline-flex;
1891
- flex-wrap: wrap;
1892
- align-items: center;
1893
- gap: 0.25rem;
1894
- }
1895
- .selected button {
1896
- min-width: 44px;
1897
- min-height: 44px;
1898
- display: grid;
1899
- line-height: 1.5rem;
1900
- font-family: var(--font-family);
1901
- cursor: not-allowed;
1902
- font-weight: 700;
1903
- padding: 10px 12px;
1904
- border: none;
1905
- font-size: 16px;
1906
- font-style: normal;
1907
- text-align: center;
1908
- text-decoration: underline;
1909
- text-transform: uppercase;
1910
- width: inherit;
1911
- color: var(--color-white);
1912
- background-color: var(--color-darkblue);
1913
- border-color: var(--color-darkblue);
1914
- }`,
1915
- "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
1916
- border: 1px solid var(--color-darkgray);
1917
- border-radius: 0.125rem;
1918
- gap: 0.5rem;
1919
- line-height: 1.125rem;
1920
- padding: 0.75rem 1rem;
1921
- background-color: var(--color-blue);
1922
- color: var(--color-white);
1923
- cursor: pointer;
1924
- }`
1925
- });
1926
-
1927
393
  const BZSt = KoliBri.createTheme("bzst", {
1928
394
  GLOBAL: `/* colors */
1929
395
  :root,
@@ -50820,7 +49286,6 @@ const EN = KoliBri.createTranslation("en", {});
50820
49286
 
50821
49287
  exports.BAMF = BAMF;
50822
49288
  exports.BMF = BMF;
50823
- exports.BPA = BPA;
50824
49289
  exports.BZSt = BZSt;
50825
49290
  exports.DE = DE;
50826
49291
  exports.DESYv1 = DESYv1;