@bi-digital/css 0.6.8 → 0.7.0
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/baseline.css +1 -5
- package/dist/components/alert.css +0 -1
- package/dist/components/badge.css +0 -2
- package/dist/components/button.css +19 -35
- package/dist/components/card.css +24 -126
- package/dist/components/chip.css +8 -73
- package/dist/components/details.css +10 -5
- package/dist/components/dialog.css +5 -19
- package/dist/components/drawer.css +4 -19
- package/dist/components/dropdown.css +4 -13
- package/dist/components/field.css +37 -125
- package/dist/components/fieldset.css +2 -6
- package/dist/components/filter-group.css +10 -6
- package/dist/components/footer.css +7 -23
- package/dist/components/input.css +33 -148
- package/dist/components/label.css +1 -12
- package/dist/components/link.css +0 -6
- package/dist/components/logo.css +2 -2
- package/dist/components/navbar.css +1 -1
- package/dist/components/pagination.css +0 -29
- package/dist/components/popover.css +5 -6
- package/dist/components/search.css +0 -4
- package/dist/components/spinner.css +2 -1
- package/dist/components/sticky-header.css +0 -1
- package/dist/components/tabs.css +0 -1
- package/dist/components/validation-message.css +2 -10
- package/dist/components.css +178 -680
- package/dist/index.css +30 -34
- package/dist/salesforce.css +207 -709
- package/dist/tokens.css +29 -29
- package/package.json +7 -8
package/dist/salesforce.css
CHANGED
|
@@ -193,35 +193,35 @@
|
|
|
193
193
|
--bi-font-color-primary-dark-background: var(--bi-basic-white);
|
|
194
194
|
--bi-font-color-accent-dark-background: var(--bi-primary-20);
|
|
195
195
|
--bi-layout-navbar-height: var(--bi-scale-16x);
|
|
196
|
-
--bi-font-display-large: var(--bi-font-weight-regular) 4rem
|
|
197
|
-
--bi-font-display-medium: var(--bi-font-weight-regular) 3rem
|
|
198
|
-
--bi-font-headline-large: var(--bi-font-weight-regular) 2.5rem
|
|
199
|
-
--bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem
|
|
200
|
-
--bi-font-headline-small: var(--bi-font-weight-regular) 1.75rem
|
|
201
|
-
--bi-font-title-bold-xxl: var(--bi-font-weight-bold) 2rem
|
|
202
|
-
--bi-font-title-bold-xl: var(--bi-font-weight-bold) 1.75rem
|
|
203
|
-
--bi-font-title-bold-large: var(--bi-font-weight-bold) 1.5rem
|
|
204
|
-
--bi-font-title-bold-medium: var(--bi-font-weight-bold) 1.25rem
|
|
205
|
-
--bi-font-title-bold-small: var(--bi-font-weight-bold) 1.125rem
|
|
206
|
-
--bi-font-title-bold-xs: var(--bi-font-weight-bold) 1rem
|
|
207
|
-
--bi-font-title-bold-xxs: var(--bi-font-weight-bold) .875rem
|
|
208
|
-
--bi-font-title-regular-xxl: var(--bi-font-weight-regular) 2rem
|
|
209
|
-
--bi-font-title-regular-xl: var(--bi-font-weight-regular) 1.75rem
|
|
210
|
-
--bi-font-title-regular-large: var(--bi-font-weight-regular) 1.5rem
|
|
211
|
-
--bi-font-title-regular-medium: var(--bi-font-weight-regular) 1.25rem
|
|
212
|
-
--bi-font-title-regular-small: var(--bi-font-weight-regular) 1.125rem
|
|
213
|
-
--bi-font-title-regular-xs: var(--bi-font-weight-regular) 1rem
|
|
214
|
-
--bi-font-title-regular-xxs: var(--bi-font-weight-regular) .875rem
|
|
215
|
-
--bi-font-label-xl: var(--bi-font-weight-bold) 1.125rem
|
|
216
|
-
--bi-font-label-large: var(--bi-font-weight-bold) 1rem
|
|
217
|
-
--bi-font-label-medium: var(--bi-font-weight-bold) .875rem
|
|
218
|
-
--bi-font-label-small: var(--bi-font-weight-bold) .8125rem
|
|
219
|
-
--bi-font-label-xs: var(--bi-font-weight-bold) .75rem
|
|
220
|
-
--bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem
|
|
221
|
-
--bi-font-body-large: var(--bi-font-weight-regular) 1rem
|
|
222
|
-
--bi-font-body-medium: var(--bi-font-weight-regular) .875rem
|
|
223
|
-
--bi-font-body-small: var(--bi-font-weight-regular) .8125rem
|
|
224
|
-
--bi-font-body-xs: var(--bi-font-weight-regular) .75rem
|
|
196
|
+
--bi-font-display-large: var(--bi-font-weight-regular) 4rem/4.5rem var(--bi-font-family-brand);
|
|
197
|
+
--bi-font-display-medium: var(--bi-font-weight-regular) 3rem/3.5rem var(--bi-font-family-brand);
|
|
198
|
+
--bi-font-headline-large: var(--bi-font-weight-regular) 2.5rem/2.875rem var(--bi-font-family-brand);
|
|
199
|
+
--bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem/2.5rem var(--bi-font-family-brand);
|
|
200
|
+
--bi-font-headline-small: var(--bi-font-weight-regular) 1.75rem/2rem var(--bi-font-family-brand);
|
|
201
|
+
--bi-font-title-bold-xxl: var(--bi-font-weight-bold) 2rem/2.25rem var(--bi-font-family-plain);
|
|
202
|
+
--bi-font-title-bold-xl: var(--bi-font-weight-bold) 1.75rem/2rem var(--bi-font-family-plain);
|
|
203
|
+
--bi-font-title-bold-large: var(--bi-font-weight-bold) 1.5rem/1.6875rem var(--bi-font-family-plain);
|
|
204
|
+
--bi-font-title-bold-medium: var(--bi-font-weight-bold) 1.25rem/1.4375rem var(--bi-font-family-plain);
|
|
205
|
+
--bi-font-title-bold-small: var(--bi-font-weight-bold) 1.125rem/1.25rem var(--bi-font-family-plain);
|
|
206
|
+
--bi-font-title-bold-xs: var(--bi-font-weight-bold) 1rem/1.125rem var(--bi-font-family-plain);
|
|
207
|
+
--bi-font-title-bold-xxs: var(--bi-font-weight-bold) .875rem/1rem var(--bi-font-family-plain);
|
|
208
|
+
--bi-font-title-regular-xxl: var(--bi-font-weight-regular) 2rem/2.25rem var(--bi-font-family-plain);
|
|
209
|
+
--bi-font-title-regular-xl: var(--bi-font-weight-regular) 1.75rem/2rem var(--bi-font-family-plain);
|
|
210
|
+
--bi-font-title-regular-large: var(--bi-font-weight-regular) 1.5rem/1.6875rem var(--bi-font-family-plain);
|
|
211
|
+
--bi-font-title-regular-medium: var(--bi-font-weight-regular) 1.25rem/1.4375rem var(--bi-font-family-plain);
|
|
212
|
+
--bi-font-title-regular-small: var(--bi-font-weight-regular) 1.125rem/1.25rem var(--bi-font-family-plain);
|
|
213
|
+
--bi-font-title-regular-xs: var(--bi-font-weight-regular) 1rem/1.125rem var(--bi-font-family-plain);
|
|
214
|
+
--bi-font-title-regular-xxs: var(--bi-font-weight-regular) .875rem/1rem var(--bi-font-family-plain);
|
|
215
|
+
--bi-font-label-xl: var(--bi-font-weight-bold) 1.125rem/1.6875rem var(--bi-font-family-plain);
|
|
216
|
+
--bi-font-label-large: var(--bi-font-weight-bold) 1rem/1.5rem var(--bi-font-family-plain);
|
|
217
|
+
--bi-font-label-medium: var(--bi-font-weight-bold) .875rem/1.25rem var(--bi-font-family-plain);
|
|
218
|
+
--bi-font-label-small: var(--bi-font-weight-bold) .8125rem/1.25rem var(--bi-font-family-plain);
|
|
219
|
+
--bi-font-label-xs: var(--bi-font-weight-bold) .75rem/1.125rem var(--bi-font-family-plain);
|
|
220
|
+
--bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem/1.6875rem var(--bi-font-family-plain);
|
|
221
|
+
--bi-font-body-large: var(--bi-font-weight-regular) 1rem/1.5rem var(--bi-font-family-plain);
|
|
222
|
+
--bi-font-body-medium: var(--bi-font-weight-regular) .875rem/1.3125rem var(--bi-font-family-plain);
|
|
223
|
+
--bi-font-body-small: var(--bi-font-weight-regular) .8125rem/1.25rem var(--bi-font-family-plain);
|
|
224
|
+
--bi-font-body-xs: var(--bi-font-weight-regular) .75rem/1.125rem var(--bi-font-family-plain);
|
|
225
225
|
}
|
|
226
226
|
|
|
227
227
|
.bi-alert {
|
|
@@ -248,7 +248,6 @@
|
|
|
248
248
|
border-radius: var(--bi-radius-medium);
|
|
249
249
|
gap: var(--bic-alert-gap);
|
|
250
250
|
grid-template-columns: 1fr;
|
|
251
|
-
width: -webkit-fit-content;
|
|
252
251
|
width: fit-content;
|
|
253
252
|
display: grid;
|
|
254
253
|
position: relative;
|
|
@@ -461,9 +460,7 @@
|
|
|
461
460
|
font-family: museo-sans, Arial, sans-serif;
|
|
462
461
|
font-size: var(--bic-badge-font-size);
|
|
463
462
|
line-height: var(--bic-badge-line-height);
|
|
464
|
-
width: -webkit-max-content;
|
|
465
463
|
width: max-content;
|
|
466
|
-
height: -webkit-fit-content;
|
|
467
464
|
height: fit-content;
|
|
468
465
|
min-height: var(--bic-badge-height);
|
|
469
466
|
box-shadow: 0 0 0 var(--bic-badge-border-width) var(--bic-badge-border-color) inset;
|
|
@@ -568,7 +565,7 @@
|
|
|
568
565
|
.bi-button {
|
|
569
566
|
--bic-button-box-shadow: none;
|
|
570
567
|
--bic-button-icon-size: var(--bi-icon-medium);
|
|
571
|
-
--bic-button-padding: .625rem calc(var(--bi-scale-6x)
|
|
568
|
+
--bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
|
|
572
569
|
--bic-button-size: var(--bi-scale-11x);
|
|
573
570
|
--bic-button-font-size: 1rem;
|
|
574
571
|
--bic-button-line-height: 1.5;
|
|
@@ -590,11 +587,9 @@
|
|
|
590
587
|
color: var(--bic-button-color);
|
|
591
588
|
background: var(--bic-button-background);
|
|
592
589
|
box-shadow: var(--bic-button-box-shadow);
|
|
593
|
-
height: -webkit-fit-content;
|
|
594
590
|
height: fit-content;
|
|
595
591
|
min-height: var(--bic-button-size);
|
|
596
592
|
min-width: var(--bic-button-size);
|
|
597
|
-
width: -webkit-fit-content;
|
|
598
593
|
width: fit-content;
|
|
599
594
|
padding: var(--bic-button-padding);
|
|
600
595
|
-webkit-text-decoration: unset;
|
|
@@ -634,13 +629,13 @@
|
|
|
634
629
|
.bi-button[data-size="small"] {
|
|
635
630
|
--bic-button-font-size: .875rem;
|
|
636
631
|
--bic-button-line-height: 1.25rem;
|
|
637
|
-
--bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x)
|
|
632
|
+
--bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
|
|
638
633
|
--bic-button-icon-size: var(--bi-icon-small);
|
|
639
634
|
--bic-button-size: var(--bi-scale-8x);
|
|
640
635
|
}
|
|
641
636
|
|
|
642
637
|
.bi-button[data-size="large"] {
|
|
643
|
-
--bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x)
|
|
638
|
+
--bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
|
|
644
639
|
--bic-button-icon-size: var(--bi-icon-large);
|
|
645
640
|
--bic-button-size: var(--bi-scale-14x);
|
|
646
641
|
}
|
|
@@ -652,20 +647,15 @@
|
|
|
652
647
|
padding: 0;
|
|
653
648
|
}
|
|
654
649
|
|
|
655
|
-
.bi-button:not([data-variant]) {
|
|
650
|
+
.bi-button:not([data-variant]), .bi-button[data-variant="filled"] {
|
|
656
651
|
--bic-button-color: var(--bi-basic-white);
|
|
657
652
|
--bic-button-background: var(--bi-primary-50);
|
|
658
|
-
--bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
|
|
659
|
-
|
|
660
|
-
--bic-button-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
--bic-button-color: var(--bi-basic-white);
|
|
665
|
-
--bic-button-background: var(--bi-primary-50);
|
|
666
|
-
--bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
|
|
667
|
-
--bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
|
|
668
|
-
--bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
|
|
653
|
+
--bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
|
|
654
|
+
var(--bic-button-background);
|
|
655
|
+
--bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
|
|
656
|
+
var(--bic-button-background);
|
|
657
|
+
--bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset,
|
|
658
|
+
0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
|
|
669
659
|
}
|
|
670
660
|
|
|
671
661
|
.bi-button[data-variant="outlined"] {
|
|
@@ -697,15 +687,19 @@
|
|
|
697
687
|
.bi-button[data-variant="flat"] {
|
|
698
688
|
--bic-button-color: var(--bi-primary-90);
|
|
699
689
|
--bic-button-background: var(--bi-primary-5);
|
|
700
|
-
--bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
|
|
701
|
-
|
|
690
|
+
--bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
|
|
691
|
+
var(--bic-button-background);
|
|
692
|
+
--bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
|
|
693
|
+
var(--bic-button-background);
|
|
702
694
|
}
|
|
703
695
|
|
|
704
696
|
.bi-button[data-variant="flat"][data-dark="true"] {
|
|
705
697
|
--bic-button-color: var(--bi-basic-white);
|
|
706
698
|
--bic-button-background: #ffffff1a;
|
|
707
|
-
--bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
|
|
708
|
-
|
|
699
|
+
--bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
|
|
700
|
+
var(--bic-button-background);
|
|
701
|
+
--bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
|
|
702
|
+
var(--bic-button-background);
|
|
709
703
|
}
|
|
710
704
|
|
|
711
705
|
@media (hover: hover) and (pointer: fine) {
|
|
@@ -718,14 +712,6 @@
|
|
|
718
712
|
cursor: progress;
|
|
719
713
|
}
|
|
720
714
|
|
|
721
|
-
.bi-button:-webkit-any(:disabled, [aria-disabled="true"]) {
|
|
722
|
-
cursor: not-allowed;
|
|
723
|
-
}
|
|
724
|
-
|
|
725
|
-
.bi-button:-webkit-any(:disabled, [aria-disabled="true"])[aria-busy="true"] {
|
|
726
|
-
cursor: progress;
|
|
727
|
-
}
|
|
728
|
-
|
|
729
715
|
.bi-button:is(:disabled, [aria-disabled="true"]) {
|
|
730
716
|
cursor: not-allowed;
|
|
731
717
|
}
|
|
@@ -738,12 +724,7 @@
|
|
|
738
724
|
background: var(--bic-button-background-press);
|
|
739
725
|
}
|
|
740
726
|
|
|
741
|
-
.bi-button .bi-button--start-icon {
|
|
742
|
-
display: inherit;
|
|
743
|
-
font-size: var(--bic-button-icon-size);
|
|
744
|
-
}
|
|
745
|
-
|
|
746
|
-
.bi-button .bi-button--end-icon {
|
|
727
|
+
.bi-button .bi-button--start-icon, .bi-button .bi-button--end-icon {
|
|
747
728
|
display: inherit;
|
|
748
729
|
font-size: var(--bic-button-icon-size);
|
|
749
730
|
}
|
|
@@ -823,13 +804,13 @@
|
|
|
823
804
|
--bic-card-media-width: 15.75rem;
|
|
824
805
|
}
|
|
825
806
|
|
|
826
|
-
@media
|
|
807
|
+
@media (width < 1024px) {
|
|
827
808
|
.bi-card[data-orientation="horizontal"] {
|
|
828
809
|
--bic-card-media-width: 14.5rem;
|
|
829
810
|
}
|
|
830
811
|
}
|
|
831
812
|
|
|
832
|
-
@media
|
|
813
|
+
@media (width < 600px) {
|
|
833
814
|
.bi-card[data-orientation="horizontal"] {
|
|
834
815
|
--bic-card-media-width: 8.4375rem;
|
|
835
816
|
}
|
|
@@ -924,134 +905,46 @@
|
|
|
924
905
|
overflow: hidden;
|
|
925
906
|
}
|
|
926
907
|
|
|
927
|
-
@media
|
|
908
|
+
@media (width < 600px) {
|
|
928
909
|
.bi-card .bi-card--content {
|
|
929
910
|
--bic-card-content-padding: var(--bi-scale-3x);
|
|
930
911
|
gap: var(--bi-scale-3x);
|
|
931
912
|
}
|
|
932
913
|
}
|
|
933
914
|
|
|
934
|
-
.bi-card
|
|
915
|
+
:is(.bi-card, .bi-card .bi-card--content):is(a, button) {
|
|
935
916
|
cursor: pointer;
|
|
936
917
|
text-decoration: none;
|
|
937
918
|
transition: box-shadow .25s ease-in-out;
|
|
938
919
|
position: relative;
|
|
939
920
|
}
|
|
940
921
|
|
|
941
|
-
.bi-card
|
|
942
|
-
box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color),
|
|
922
|
+
:is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible {
|
|
923
|
+
box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color),
|
|
924
|
+
0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
|
|
943
925
|
outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
|
|
944
926
|
outline-offset: var(--_bi--focus, 2px);
|
|
945
927
|
}
|
|
946
928
|
|
|
947
|
-
.bi-card
|
|
929
|
+
:is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible * {
|
|
948
930
|
--_bi--focus: ;
|
|
949
931
|
}
|
|
950
932
|
|
|
951
933
|
@media (hover: hover) and (pointer: fine) {
|
|
952
|
-
.bi-card
|
|
953
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
|
|
934
|
+
:is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):hover {
|
|
935
|
+
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
|
|
936
|
+
0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
|
|
937
|
+
0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
|
|
954
938
|
}
|
|
955
939
|
}
|
|
956
940
|
|
|
957
|
-
.bi-card
|
|
958
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color),
|
|
941
|
+
:is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):active {
|
|
942
|
+
box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color),
|
|
943
|
+
0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
|
|
944
|
+
0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
|
|
959
945
|
}
|
|
960
946
|
|
|
961
|
-
.bi-card
|
|
962
|
-
cursor: not-allowed;
|
|
963
|
-
}
|
|
964
|
-
|
|
965
|
-
.bi-card:is(a, button) {
|
|
966
|
-
cursor: pointer;
|
|
967
|
-
text-decoration: none;
|
|
968
|
-
transition: box-shadow .25s ease-in-out;
|
|
969
|
-
position: relative;
|
|
970
|
-
}
|
|
971
|
-
|
|
972
|
-
.bi-card:is(a, button):not(.disabled):focus-visible {
|
|
973
|
-
box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
|
|
974
|
-
outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
|
|
975
|
-
outline-offset: var(--_bi--focus, 2px);
|
|
976
|
-
}
|
|
977
|
-
|
|
978
|
-
.bi-card:is(a, button):not(.disabled):focus-visible * {
|
|
979
|
-
--_bi--focus: ;
|
|
980
|
-
}
|
|
981
|
-
|
|
982
|
-
@media (hover: hover) and (pointer: fine) {
|
|
983
|
-
.bi-card:is(a, button):not(.disabled):hover {
|
|
984
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
|
|
985
|
-
}
|
|
986
|
-
}
|
|
987
|
-
|
|
988
|
-
.bi-card:is(a, button):not(.disabled):active {
|
|
989
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
|
|
990
|
-
}
|
|
991
|
-
|
|
992
|
-
.bi-card:is(a, button):disabled {
|
|
993
|
-
cursor: not-allowed;
|
|
994
|
-
}
|
|
995
|
-
|
|
996
|
-
.bi-card .bi-card--content:-webkit-any(a, button) {
|
|
997
|
-
cursor: pointer;
|
|
998
|
-
text-decoration: none;
|
|
999
|
-
transition: box-shadow .25s ease-in-out;
|
|
1000
|
-
position: relative;
|
|
1001
|
-
}
|
|
1002
|
-
|
|
1003
|
-
.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
|
|
1004
|
-
box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
|
|
1005
|
-
outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
|
|
1006
|
-
outline-offset: var(--_bi--focus, 2px);
|
|
1007
|
-
}
|
|
1008
|
-
|
|
1009
|
-
.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible * {
|
|
1010
|
-
--_bi--focus: ;
|
|
1011
|
-
}
|
|
1012
|
-
|
|
1013
|
-
@media (hover: hover) and (pointer: fine) {
|
|
1014
|
-
.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
|
|
1015
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
|
|
1016
|
-
}
|
|
1017
|
-
}
|
|
1018
|
-
|
|
1019
|
-
.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
|
|
1020
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
|
|
1021
|
-
}
|
|
1022
|
-
|
|
1023
|
-
.bi-card .bi-card--content:-webkit-any(a, button):disabled {
|
|
1024
|
-
cursor: not-allowed;
|
|
1025
|
-
}
|
|
1026
|
-
|
|
1027
|
-
.bi-card .bi-card--content:is(a, button) {
|
|
1028
|
-
cursor: pointer;
|
|
1029
|
-
text-decoration: none;
|
|
1030
|
-
transition: box-shadow .25s ease-in-out;
|
|
1031
|
-
position: relative;
|
|
1032
|
-
}
|
|
1033
|
-
|
|
1034
|
-
.bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
|
|
1035
|
-
box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
|
|
1036
|
-
outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
|
|
1037
|
-
outline-offset: var(--_bi--focus, 2px);
|
|
1038
|
-
}
|
|
1039
|
-
|
|
1040
|
-
.bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible * {
|
|
1041
|
-
--_bi--focus: ;
|
|
1042
|
-
}
|
|
1043
|
-
|
|
1044
|
-
@media (hover: hover) and (pointer: fine) {
|
|
1045
|
-
.bi-card .bi-card--content:is(a, button):not(.disabled):hover {
|
|
1046
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
|
|
1047
|
-
}
|
|
1048
|
-
}
|
|
1049
|
-
|
|
1050
|
-
.bi-card .bi-card--content:is(a, button):not(.disabled):active {
|
|
1051
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
|
|
1052
|
-
}
|
|
1053
|
-
|
|
1054
|
-
.bi-card .bi-card--content:is(a, button):disabled {
|
|
947
|
+
:is(.bi-card, .bi-card .bi-card--content):is(a, button):disabled {
|
|
1055
948
|
cursor: not-allowed;
|
|
1056
949
|
}
|
|
1057
950
|
|
|
@@ -1064,7 +957,7 @@
|
|
|
1064
957
|
display: flex;
|
|
1065
958
|
}
|
|
1066
959
|
|
|
1067
|
-
@media
|
|
960
|
+
@media (width < 600px) {
|
|
1068
961
|
.bi-card .bi-card--actions {
|
|
1069
962
|
width: var(--bi-scale-11x);
|
|
1070
963
|
}
|
|
@@ -1077,7 +970,7 @@
|
|
|
1077
970
|
flex: 1;
|
|
1078
971
|
}
|
|
1079
972
|
|
|
1080
|
-
@media
|
|
973
|
+
@media (width < 600px) {
|
|
1081
974
|
.bi-card .bi-card--actions .bi-card--action {
|
|
1082
975
|
--bic-button-size: var(--bi-scale-11x);
|
|
1083
976
|
}
|
|
@@ -1100,7 +993,7 @@
|
|
|
1100
993
|
font-size: .875rem;
|
|
1101
994
|
}
|
|
1102
995
|
|
|
1103
|
-
@media
|
|
996
|
+
@media (width < 600px) {
|
|
1104
997
|
.bi-card .bi-card--header .bi-card--header-label {
|
|
1105
998
|
font-size: .8125rem;
|
|
1106
999
|
}
|
|
@@ -1135,7 +1028,7 @@
|
|
|
1135
1028
|
overflow: hidden;
|
|
1136
1029
|
}
|
|
1137
1030
|
|
|
1138
|
-
@media
|
|
1031
|
+
@media (width < 600px) {
|
|
1139
1032
|
.bi-card .bi-card--header .bi-card--header-title {
|
|
1140
1033
|
font-size: 1rem;
|
|
1141
1034
|
}
|
|
@@ -1148,20 +1041,6 @@
|
|
|
1148
1041
|
position: relative;
|
|
1149
1042
|
}
|
|
1150
1043
|
|
|
1151
|
-
.bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
|
|
1152
|
-
border-radius: inherit;
|
|
1153
|
-
object-fit: cover;
|
|
1154
|
-
aspect-ratio: 4 / 3;
|
|
1155
|
-
width: 100%;
|
|
1156
|
-
display: block;
|
|
1157
|
-
}
|
|
1158
|
-
|
|
1159
|
-
@media not (min-width: 600px) {
|
|
1160
|
-
.bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
|
|
1161
|
-
aspect-ratio: 3 / 2;
|
|
1162
|
-
}
|
|
1163
|
-
}
|
|
1164
|
-
|
|
1165
1044
|
.bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
|
|
1166
1045
|
border-radius: inherit;
|
|
1167
1046
|
object-fit: cover;
|
|
@@ -1170,7 +1049,7 @@
|
|
|
1170
1049
|
display: block;
|
|
1171
1050
|
}
|
|
1172
1051
|
|
|
1173
|
-
@media
|
|
1052
|
+
@media (width < 600px) {
|
|
1174
1053
|
.bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
|
|
1175
1054
|
aspect-ratio: 3 / 2;
|
|
1176
1055
|
}
|
|
@@ -1181,7 +1060,6 @@
|
|
|
1181
1060
|
left: var(--bi-scale-4x);
|
|
1182
1061
|
right: var(--bi-scale-4x);
|
|
1183
1062
|
flex-wrap: wrap;
|
|
1184
|
-
width: -webkit-fit-content;
|
|
1185
1063
|
width: fit-content;
|
|
1186
1064
|
display: flex;
|
|
1187
1065
|
position: absolute;
|
|
@@ -1193,7 +1071,8 @@
|
|
|
1193
1071
|
padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
|
|
1194
1072
|
border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
|
|
1195
1073
|
background: var(--bic-card-background-color);
|
|
1196
|
-
box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d,
|
|
1074
|
+
box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d,
|
|
1075
|
+
0px 4px 6px 0px #26333f0d;
|
|
1197
1076
|
color: var(--bic-card-header-title-color);
|
|
1198
1077
|
text-align: center;
|
|
1199
1078
|
flex-direction: column;
|
|
@@ -1249,7 +1128,6 @@
|
|
|
1249
1128
|
--bic-chip-line-height: 1.5rem;
|
|
1250
1129
|
gap: var(--bi-scale-1x);
|
|
1251
1130
|
border-radius: var(--bi-radius-full);
|
|
1252
|
-
width: -webkit-fit-content;
|
|
1253
1131
|
width: fit-content;
|
|
1254
1132
|
color: var(--bic-chip-text-color);
|
|
1255
1133
|
background-color: var(--bic-chip-background);
|
|
@@ -1420,92 +1298,28 @@
|
|
|
1420
1298
|
--bic-chip-text-color: var(--bi-basic-white);
|
|
1421
1299
|
}
|
|
1422
1300
|
|
|
1423
|
-
.bi-chip
|
|
1301
|
+
.bi-chip:is(button), .bi-chip:is(a) {
|
|
1424
1302
|
cursor: pointer;
|
|
1425
1303
|
border: none;
|
|
1426
1304
|
text-decoration: none;
|
|
1427
1305
|
}
|
|
1428
1306
|
|
|
1429
|
-
.bi-chip
|
|
1307
|
+
:is(.bi-chip:is(button), .bi-chip:is(a)):focus-visible {
|
|
1430
1308
|
box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
|
|
1431
1309
|
outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
|
|
1432
1310
|
outline-offset: var(--_bi--focus, 2px);
|
|
1433
1311
|
}
|
|
1434
1312
|
|
|
1435
1313
|
@media (hover: hover) and (pointer: fine) {
|
|
1436
|
-
.bi-chip
|
|
1437
|
-
background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%),
|
|
1314
|
+
:is(.bi-chip:is(button), .bi-chip:is(a)):hover {
|
|
1315
|
+
background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%),
|
|
1316
|
+
var(--bic-chip-background);
|
|
1438
1317
|
}
|
|
1439
1318
|
}
|
|
1440
1319
|
|
|
1441
|
-
.bi-chip
|
|
1442
|
-
background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%),
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
.bi-chip:is(button) {
|
|
1446
|
-
cursor: pointer;
|
|
1447
|
-
border: none;
|
|
1448
|
-
text-decoration: none;
|
|
1449
|
-
}
|
|
1450
|
-
|
|
1451
|
-
.bi-chip:is(button):focus-visible {
|
|
1452
|
-
box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
|
|
1453
|
-
outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
|
|
1454
|
-
outline-offset: var(--_bi--focus, 2px);
|
|
1455
|
-
}
|
|
1456
|
-
|
|
1457
|
-
@media (hover: hover) and (pointer: fine) {
|
|
1458
|
-
.bi-chip:is(button):hover {
|
|
1459
|
-
background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
|
|
1460
|
-
}
|
|
1461
|
-
}
|
|
1462
|
-
|
|
1463
|
-
.bi-chip:is(button):active {
|
|
1464
|
-
background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
|
|
1465
|
-
}
|
|
1466
|
-
|
|
1467
|
-
.bi-chip:-webkit-any(a) {
|
|
1468
|
-
cursor: pointer;
|
|
1469
|
-
border: none;
|
|
1470
|
-
text-decoration: none;
|
|
1471
|
-
}
|
|
1472
|
-
|
|
1473
|
-
.bi-chip:-webkit-any(a):focus-visible {
|
|
1474
|
-
box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
|
|
1475
|
-
outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
|
|
1476
|
-
outline-offset: var(--_bi--focus, 2px);
|
|
1477
|
-
}
|
|
1478
|
-
|
|
1479
|
-
@media (hover: hover) and (pointer: fine) {
|
|
1480
|
-
.bi-chip:-webkit-any(a):hover {
|
|
1481
|
-
background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
|
|
1482
|
-
}
|
|
1483
|
-
}
|
|
1484
|
-
|
|
1485
|
-
.bi-chip:-webkit-any(a):active {
|
|
1486
|
-
background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
|
|
1487
|
-
}
|
|
1488
|
-
|
|
1489
|
-
.bi-chip:is(a) {
|
|
1490
|
-
cursor: pointer;
|
|
1491
|
-
border: none;
|
|
1492
|
-
text-decoration: none;
|
|
1493
|
-
}
|
|
1494
|
-
|
|
1495
|
-
.bi-chip:is(a):focus-visible {
|
|
1496
|
-
box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
|
|
1497
|
-
outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
|
|
1498
|
-
outline-offset: var(--_bi--focus, 2px);
|
|
1499
|
-
}
|
|
1500
|
-
|
|
1501
|
-
@media (hover: hover) and (pointer: fine) {
|
|
1502
|
-
.bi-chip:is(a):hover {
|
|
1503
|
-
background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
|
|
1504
|
-
}
|
|
1505
|
-
}
|
|
1506
|
-
|
|
1507
|
-
.bi-chip:is(a):active {
|
|
1508
|
-
background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
|
|
1320
|
+
:is(.bi-chip:is(button), .bi-chip:is(a)):active {
|
|
1321
|
+
background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%),
|
|
1322
|
+
var(--bic-chip-background);
|
|
1509
1323
|
}
|
|
1510
1324
|
|
|
1511
1325
|
.bi-chip > svg {
|
|
@@ -1515,8 +1329,10 @@
|
|
|
1515
1329
|
|
|
1516
1330
|
details.bi-details {
|
|
1517
1331
|
--bic-details-background: var(--bi-basic-white);
|
|
1518
|
-
--bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
|
|
1519
|
-
|
|
1332
|
+
--bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
|
|
1333
|
+
var(--bic-details-background);
|
|
1334
|
+
--bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
|
|
1335
|
+
var(--bic-details-background);
|
|
1520
1336
|
--bic-details-color: var(--bi-neutral-90);
|
|
1521
1337
|
--bic-details-border-color: var(--bi-neutral-15);
|
|
1522
1338
|
--bic-details-padding: var(--bi-scale-4x);
|
|
@@ -1526,8 +1342,10 @@ details.bi-details {
|
|
|
1526
1342
|
|
|
1527
1343
|
details.bi-details[data-dark="true"] {
|
|
1528
1344
|
--bic-details-background: var(--bi-neutral-90);
|
|
1529
|
-
--bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
|
|
1530
|
-
|
|
1345
|
+
--bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
|
|
1346
|
+
var(--bic-details-background);
|
|
1347
|
+
--bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
|
|
1348
|
+
var(--bic-details-background);
|
|
1531
1349
|
--bic-details-border-color: var(--bi-neutral-70);
|
|
1532
1350
|
--bic-details-color: var(--bi-basic-white);
|
|
1533
1351
|
--bic-details-focus-shadow-color: var(--bi-neutral-95);
|
|
@@ -1622,7 +1440,8 @@ details.bi-details[open] summary > svg {
|
|
|
1622
1440
|
}
|
|
1623
1441
|
|
|
1624
1442
|
details.bi-details::details-content {
|
|
1625
|
-
transition: height .2s ease-in-out,
|
|
1443
|
+
transition: height .2s ease-in-out,
|
|
1444
|
+
content-visibility .2s ease-in-out allow-discrete;
|
|
1626
1445
|
height: 0;
|
|
1627
1446
|
overflow: clip;
|
|
1628
1447
|
}
|
|
@@ -1686,10 +1505,7 @@ details.bi-details > *:not(summary) + * {
|
|
|
1686
1505
|
margin: auto;
|
|
1687
1506
|
padding: 0;
|
|
1688
1507
|
position: fixed;
|
|
1689
|
-
|
|
1690
|
-
bottom: 0;
|
|
1691
|
-
left: 0;
|
|
1692
|
-
right: 0;
|
|
1508
|
+
inset: 0;
|
|
1693
1509
|
overflow: auto;
|
|
1694
1510
|
}
|
|
1695
1511
|
|
|
@@ -1699,16 +1515,13 @@ details.bi-details > *:not(summary) + * {
|
|
|
1699
1515
|
}
|
|
1700
1516
|
|
|
1701
1517
|
.bi-dialog[open] {
|
|
1702
|
-
animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out,
|
|
1518
|
+
animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out,
|
|
1519
|
+
bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
|
|
1703
1520
|
display: flex;
|
|
1704
1521
|
}
|
|
1705
1522
|
|
|
1706
1523
|
@media (prefers-reduced-motion: reduce) {
|
|
1707
|
-
.bi-dialog[open] {
|
|
1708
|
-
animation: none;
|
|
1709
|
-
}
|
|
1710
|
-
|
|
1711
|
-
.bi-dialog::backdrop {
|
|
1524
|
+
.bi-dialog[open], .bi-dialog::backdrop {
|
|
1712
1525
|
animation: none;
|
|
1713
1526
|
}
|
|
1714
1527
|
}
|
|
@@ -1749,15 +1562,7 @@ details.bi-details > *:not(summary) + * {
|
|
|
1749
1562
|
display: flex;
|
|
1750
1563
|
}
|
|
1751
1564
|
|
|
1752
|
-
.bi-dialog .bi-dialog--header:not([data-no-border="true"]):not(:first-child) {
|
|
1753
|
-
border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
|
|
1754
|
-
}
|
|
1755
|
-
|
|
1756
|
-
.bi-dialog .bi-dialog--content:not([data-no-border="true"]):not(:first-child) {
|
|
1757
|
-
border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
|
|
1758
|
-
}
|
|
1759
|
-
|
|
1760
|
-
.bi-dialog .bi-dialog--footer:not([data-no-border="true"]):not(:first-child) {
|
|
1565
|
+
:is(.bi-dialog .bi-dialog--header, .bi-dialog .bi-dialog--content, .bi-dialog .bi-dialog--footer):not([data-no-border="true"]):not(:first-child) {
|
|
1761
1566
|
border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
|
|
1762
1567
|
}
|
|
1763
1568
|
|
|
@@ -1785,7 +1590,8 @@ body:has(.bi-dialog:modal) {
|
|
|
1785
1590
|
--bic-drawer-max-width: 40rem;
|
|
1786
1591
|
--bic-drawer-min-height: 20rem;
|
|
1787
1592
|
--bic-drawer-border-radius: var(--bi-radius-medium);
|
|
1788
|
-
transition: display var(--bic-dialog-animation-duration) allow-discrete,
|
|
1593
|
+
transition: display var(--bic-dialog-animation-duration) allow-discrete,
|
|
1594
|
+
overlay var(--bic-dialog-animation-duration) allow-discrete;
|
|
1789
1595
|
transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
|
|
1790
1596
|
animation: bi-drawer-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
|
|
1791
1597
|
}
|
|
@@ -1829,30 +1635,14 @@ body:has(.bi-dialog:modal) {
|
|
|
1829
1635
|
border-radius: var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0 0;
|
|
1830
1636
|
}
|
|
1831
1637
|
|
|
1832
|
-
.bi-dialog.bi-drawer[data-anchor="left"] {
|
|
1638
|
+
.bi-dialog.bi-drawer[data-anchor="left"], .bi-dialog.bi-drawer[data-anchor="right"] {
|
|
1833
1639
|
min-width: var(--bic-drawer-min-width);
|
|
1834
1640
|
max-width: var(--bic-drawer-max-width);
|
|
1835
|
-
width: -webkit-fit-content;
|
|
1836
1641
|
width: fit-content;
|
|
1837
1642
|
height: 100dvh;
|
|
1838
1643
|
}
|
|
1839
1644
|
|
|
1840
|
-
.bi-dialog.bi-drawer[data-anchor="
|
|
1841
|
-
min-width: var(--bic-drawer-min-width);
|
|
1842
|
-
max-width: var(--bic-drawer-max-width);
|
|
1843
|
-
width: -webkit-fit-content;
|
|
1844
|
-
width: fit-content;
|
|
1845
|
-
height: 100dvh;
|
|
1846
|
-
}
|
|
1847
|
-
|
|
1848
|
-
.bi-dialog.bi-drawer[data-anchor="top"] {
|
|
1849
|
-
min-height: var(--bic-drawer-min-height);
|
|
1850
|
-
max-height: calc(100dvh - var(--bi-layout-navbar-height));
|
|
1851
|
-
width: 100%;
|
|
1852
|
-
max-width: 100dvw;
|
|
1853
|
-
}
|
|
1854
|
-
|
|
1855
|
-
.bi-dialog.bi-drawer[data-anchor="bottom"] {
|
|
1645
|
+
.bi-dialog.bi-drawer[data-anchor="top"], .bi-dialog.bi-drawer[data-anchor="bottom"] {
|
|
1856
1646
|
min-height: var(--bic-drawer-min-height);
|
|
1857
1647
|
max-height: calc(100dvh - var(--bi-layout-navbar-height));
|
|
1858
1648
|
width: 100%;
|
|
@@ -1889,14 +1679,16 @@ body:has(.bi-dialog:modal) {
|
|
|
1889
1679
|
--bic-dropdown-border-width: var(--bi-stroke-thin);
|
|
1890
1680
|
--bic-dropdown-border-style: solid;
|
|
1891
1681
|
--bic-dropdown-border-color: var(--bi-neutral-15);
|
|
1892
|
-
--bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
|
|
1682
|
+
--bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
|
|
1683
|
+
0px 2px 2px -1px #26333f0a;
|
|
1893
1684
|
}
|
|
1894
1685
|
|
|
1895
1686
|
.bi-dropdown[data-dark="true"] {
|
|
1896
1687
|
--bic-dropdown-background: var(--bi-neutral-100);
|
|
1897
1688
|
--bic-dropdown-border-color: var(--bi-neutral-90);
|
|
1898
1689
|
--bic-dropdown-color: var(--bi-neutral-5);
|
|
1899
|
-
--bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
|
|
1690
|
+
--bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
|
|
1691
|
+
0px 2px 2px -1px #26333f0a;
|
|
1900
1692
|
}
|
|
1901
1693
|
|
|
1902
1694
|
.bi-dropdown {
|
|
@@ -1921,17 +1713,6 @@ body:has(.bi-dialog:modal) {
|
|
|
1921
1713
|
display: flex;
|
|
1922
1714
|
}
|
|
1923
1715
|
|
|
1924
|
-
.bi-dropdown :-webkit-any(a, button, [role="button"]) {
|
|
1925
|
-
padding: var(--bic-dropdown-item-padding);
|
|
1926
|
-
min-height: var(--bic-dropdown-item-size);
|
|
1927
|
-
justify-content: start;
|
|
1928
|
-
width: 100%;
|
|
1929
|
-
}
|
|
1930
|
-
|
|
1931
|
-
.bi-dropdown :-webkit-any(a, button, [role="button"]) .bi-button--end-icon {
|
|
1932
|
-
margin-left: auto;
|
|
1933
|
-
}
|
|
1934
|
-
|
|
1935
1716
|
.bi-dropdown :is(a, button, [role="button"]) {
|
|
1936
1717
|
padding: var(--bic-dropdown-item-padding);
|
|
1937
1718
|
min-height: var(--bic-dropdown-item-size);
|
|
@@ -1956,6 +1737,7 @@ body:has(.bi-dialog:modal) {
|
|
|
1956
1737
|
--bic-field-affix-color: var(--bi-neutral-60);
|
|
1957
1738
|
--bic-field-background: var(--bi-basic-white);
|
|
1958
1739
|
--bic-field-background-hover: var(--bi-states-hover-dark);
|
|
1740
|
+
--bic-field-background-press: var(--bi-states-press-dark);
|
|
1959
1741
|
--bic-field-background-readonly: var(--bi-neutral-10);
|
|
1960
1742
|
--bic-field-border-color: var(--bi-neutral-50);
|
|
1961
1743
|
--bic-field-border-color-hover: var(--bi-neutral-50);
|
|
@@ -1972,6 +1754,7 @@ body:has(.bi-dialog:modal) {
|
|
|
1972
1754
|
--bic-field-affix-color: var(--bi-neutral-30);
|
|
1973
1755
|
--bic-field-background: var(--bi-neutral-95);
|
|
1974
1756
|
--bic-field-background-hover: var(--bi-states-hover-light);
|
|
1757
|
+
--bic-field-background-press: var(--bi-states-press-light);
|
|
1975
1758
|
--bic-field-background-readonly: var(--bi-neutral-50);
|
|
1976
1759
|
--bic-field-border-color-hover: var(--bi-neutral-25);
|
|
1977
1760
|
--bic-field-disabled-color: var(--bi-neutral-40);
|
|
@@ -1983,8 +1766,7 @@ body:has(.bi-dialog:modal) {
|
|
|
1983
1766
|
}
|
|
1984
1767
|
|
|
1985
1768
|
.bi-field > * {
|
|
1986
|
-
margin-
|
|
1987
|
-
margin-bottom: 0;
|
|
1769
|
+
margin-block: 0;
|
|
1988
1770
|
}
|
|
1989
1771
|
|
|
1990
1772
|
.bi-field > * + * {
|
|
@@ -2019,104 +1801,40 @@ body:has(.bi-dialog:modal) {
|
|
|
2019
1801
|
width: 100%;
|
|
2020
1802
|
}
|
|
2021
1803
|
|
|
2022
|
-
.bi-field:has(.bi-input
|
|
1804
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
|
|
2023
1805
|
border-radius: var(--bi-radius-medium);
|
|
2024
|
-
grid-template-areas: "input content";
|
|
2025
|
-
grid-template-columns: var(--bi-scale-5x) 1fr;
|
|
2026
1806
|
gap: 0 var(--bi-scale-3x);
|
|
2027
|
-
width: -webkit-fit-content;
|
|
2028
1807
|
width: fit-content;
|
|
2029
1808
|
padding: var(--bi-scale-2x) var(--bi-scale-3x);
|
|
1809
|
+
grid-template-columns: auto 1fr;
|
|
1810
|
+
grid-template-areas: "input content";
|
|
2030
1811
|
align-items: center;
|
|
2031
1812
|
}
|
|
2032
1813
|
|
|
2033
|
-
.bi-field:has(.bi-input
|
|
1814
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
|
|
2034
1815
|
display: grid;
|
|
2035
1816
|
}
|
|
2036
1817
|
|
|
2037
|
-
.bi-field:has(.bi-input
|
|
1818
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
|
|
2038
1819
|
width: 100%;
|
|
2039
1820
|
}
|
|
2040
1821
|
|
|
2041
|
-
.bi-field:has(.bi-input
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
margin-bottom: 0;
|
|
2045
|
-
}
|
|
2046
|
-
|
|
2047
|
-
.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) .bi-label {
|
|
2048
|
-
margin: var(--bi-scale-0-50x) 0;
|
|
2049
|
-
-webkit-user-select: none;
|
|
2050
|
-
user-select: none;
|
|
2051
|
-
font-size: 1rem;
|
|
2052
|
-
line-height: 1.5;
|
|
2053
|
-
}
|
|
2054
|
-
|
|
2055
|
-
.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) .bi-input {
|
|
2056
|
-
margin: var(--bi-scale-1x) auto;
|
|
2057
|
-
grid-area: 1 / input;
|
|
2058
|
-
align-self: flex-start;
|
|
2059
|
-
}
|
|
2060
|
-
|
|
2061
|
-
.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):-webkit-any(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
|
|
2062
|
-
cursor: pointer;
|
|
1822
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]) {
|
|
1823
|
+
border-radius: var(--bi-scale-24x);
|
|
1824
|
+
padding: var(--bi-scale-1x) var(--bi-scale-2x);
|
|
2063
1825
|
}
|
|
2064
1826
|
|
|
2065
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):
|
|
2066
|
-
|
|
1827
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="start"] {
|
|
1828
|
+
padding-inline-end: var(--bi-scale-4x);
|
|
2067
1829
|
}
|
|
2068
1830
|
|
|
2069
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(input:
|
|
2070
|
-
|
|
2071
|
-
}
|
|
2072
|
-
|
|
2073
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
|
|
2074
|
-
background: var(--_bi--hover, var(--bic-field-background-hover));
|
|
2075
|
-
}
|
|
2076
|
-
|
|
2077
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
|
|
2078
|
-
--_bi--hover: ;
|
|
2079
|
-
}
|
|
2080
|
-
|
|
2081
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
|
|
2082
|
-
box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
|
|
2083
|
-
outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
|
|
2084
|
-
outline-offset: var(--_bi--focus, 2px);
|
|
2085
|
-
}
|
|
2086
|
-
|
|
2087
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) * {
|
|
2088
|
-
--_bi--focus: ;
|
|
2089
|
-
}
|
|
2090
|
-
|
|
2091
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
|
|
2092
|
-
grid-template-areas: "content input";
|
|
2093
|
-
grid-template-columns: 1fr var(--bi-scale-5x);
|
|
2094
|
-
width: auto;
|
|
2095
|
-
}
|
|
2096
|
-
|
|
2097
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
|
|
2098
|
-
border-radius: var(--bi-radius-medium);
|
|
2099
|
-
grid-template-areas: "input content";
|
|
2100
|
-
grid-template-columns: var(--bi-scale-5x) 1fr;
|
|
2101
|
-
gap: 0 var(--bi-scale-3x);
|
|
2102
|
-
width: -webkit-fit-content;
|
|
2103
|
-
width: fit-content;
|
|
2104
|
-
padding: var(--bi-scale-2x) var(--bi-scale-3x);
|
|
2105
|
-
align-items: center;
|
|
2106
|
-
}
|
|
2107
|
-
|
|
2108
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
|
|
2109
|
-
display: grid;
|
|
2110
|
-
}
|
|
2111
|
-
|
|
2112
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
|
|
2113
|
-
width: 100%;
|
|
1831
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="end"] {
|
|
1832
|
+
padding-inline-start: var(--bi-scale-4x);
|
|
2114
1833
|
}
|
|
2115
1834
|
|
|
2116
1835
|
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) > * {
|
|
2117
1836
|
grid-column: content;
|
|
2118
|
-
margin-
|
|
2119
|
-
margin-bottom: 0;
|
|
1837
|
+
margin-block: 0;
|
|
2120
1838
|
}
|
|
2121
1839
|
|
|
2122
1840
|
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-label {
|
|
@@ -2133,10 +1851,6 @@ body:has(.bi-dialog:modal) {
|
|
|
2133
1851
|
align-self: flex-start;
|
|
2134
1852
|
}
|
|
2135
1853
|
|
|
2136
|
-
.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):-webkit-any(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
|
|
2137
|
-
cursor: pointer;
|
|
2138
|
-
}
|
|
2139
|
-
|
|
2140
1854
|
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
|
|
2141
1855
|
cursor: pointer;
|
|
2142
1856
|
}
|
|
@@ -2153,6 +1867,14 @@ body:has(.bi-dialog:modal) {
|
|
|
2153
1867
|
--_bi--hover: ;
|
|
2154
1868
|
}
|
|
2155
1869
|
|
|
1870
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) {
|
|
1871
|
+
background: var(--_bi--hover, var(--bic-field-background-press));
|
|
1872
|
+
}
|
|
1873
|
+
|
|
1874
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) * {
|
|
1875
|
+
--_bi--hover: ;
|
|
1876
|
+
}
|
|
1877
|
+
|
|
2156
1878
|
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
|
|
2157
1879
|
box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
|
|
2158
1880
|
outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
|
|
@@ -2164,9 +1886,8 @@ body:has(.bi-dialog:modal) {
|
|
|
2164
1886
|
}
|
|
2165
1887
|
|
|
2166
1888
|
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
|
|
1889
|
+
grid-template-columns: 1fr auto;
|
|
2167
1890
|
grid-template-areas: "content input";
|
|
2168
|
-
grid-template-columns: 1fr var(--bi-scale-5x);
|
|
2169
|
-
width: auto;
|
|
2170
1891
|
}
|
|
2171
1892
|
|
|
2172
1893
|
.bi-field .bi-field--affixes {
|
|
@@ -2189,7 +1910,6 @@ body:has(.bi-dialog:modal) {
|
|
|
2189
1910
|
}
|
|
2190
1911
|
|
|
2191
1912
|
.bi-field .bi-field--affixes:has(.bi-input[size]) {
|
|
2192
|
-
width: -webkit-fit-content;
|
|
2193
1913
|
width: fit-content;
|
|
2194
1914
|
}
|
|
2195
1915
|
|
|
@@ -2204,7 +1924,8 @@ body:has(.bi-dialog:modal) {
|
|
|
2204
1924
|
.bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
|
|
2205
1925
|
outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
|
|
2206
1926
|
outline-offset: 0;
|
|
2207
|
-
box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
|
|
1927
|
+
box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
|
|
1928
|
+
0px 0px 10px 0px #0000000d);
|
|
2208
1929
|
}
|
|
2209
1930
|
|
|
2210
1931
|
.bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
|
|
@@ -2222,46 +1943,18 @@ body:has(.bi-dialog:modal) {
|
|
|
2222
1943
|
display: flex;
|
|
2223
1944
|
}
|
|
2224
1945
|
|
|
2225
|
-
.bi-field .bi-field--affixes .bi-field--affix:first-child
|
|
2226
|
-
border-
|
|
2227
|
-
border-
|
|
2228
|
-
border-
|
|
2229
|
-
padding-
|
|
1946
|
+
.bi-field .bi-field--affixes .bi-field--affix:first-child {
|
|
1947
|
+
border-inline-end: 0;
|
|
1948
|
+
border-start-start-radius: inherit;
|
|
1949
|
+
border-end-start-radius: inherit;
|
|
1950
|
+
padding-inline-end: 0;
|
|
2230
1951
|
}
|
|
2231
1952
|
|
|
2232
|
-
.bi-field .bi-field--affixes .bi-field--affix:
|
|
2233
|
-
border-
|
|
2234
|
-
border-
|
|
2235
|
-
border-
|
|
2236
|
-
padding-
|
|
2237
|
-
}
|
|
2238
|
-
|
|
2239
|
-
.bi-field .bi-field--affixes .bi-field--affix:first-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
2240
|
-
border-top-right-radius: inherit;
|
|
2241
|
-
border-bottom-right-radius: inherit;
|
|
2242
|
-
border-left: 0;
|
|
2243
|
-
padding-left: 0;
|
|
2244
|
-
}
|
|
2245
|
-
|
|
2246
|
-
.bi-field .bi-field--affixes .bi-field--affix:last-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
2247
|
-
border-top-right-radius: inherit;
|
|
2248
|
-
border-bottom-right-radius: inherit;
|
|
2249
|
-
border-left: 0;
|
|
2250
|
-
padding-left: 0;
|
|
2251
|
-
}
|
|
2252
|
-
|
|
2253
|
-
.bi-field .bi-field--affixes .bi-field--affix:last-child:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
2254
|
-
border-top-left-radius: inherit;
|
|
2255
|
-
border-bottom-left-radius: inherit;
|
|
2256
|
-
border-right: 0;
|
|
2257
|
-
padding-right: 0;
|
|
2258
|
-
}
|
|
2259
|
-
|
|
2260
|
-
.bi-field .bi-field--affixes .bi-field--affix:last-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
2261
|
-
border-top-left-radius: inherit;
|
|
2262
|
-
border-bottom-left-radius: inherit;
|
|
2263
|
-
border-right: 0;
|
|
2264
|
-
padding-right: 0;
|
|
1953
|
+
.bi-field .bi-field--affixes .bi-field--affix:last-child {
|
|
1954
|
+
border-inline-start: 0;
|
|
1955
|
+
border-start-end-radius: inherit;
|
|
1956
|
+
border-end-end-radius: inherit;
|
|
1957
|
+
padding-inline-start: 0;
|
|
2265
1958
|
}
|
|
2266
1959
|
|
|
2267
1960
|
.bi-fieldset {
|
|
@@ -2288,7 +1981,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2288
1981
|
}
|
|
2289
1982
|
|
|
2290
1983
|
.bi-fieldset > * + * {
|
|
2291
|
-
margin-
|
|
1984
|
+
margin-block-start: var(--bi-scale-1x);
|
|
2292
1985
|
}
|
|
2293
1986
|
|
|
2294
1987
|
.bi-fieldset > legend + p {
|
|
@@ -2300,18 +1993,16 @@ body:has(.bi-dialog:modal) {
|
|
|
2300
1993
|
line-height: 1.15;
|
|
2301
1994
|
}
|
|
2302
1995
|
|
|
2303
|
-
.bi-fieldset:disabled > legend {
|
|
2304
|
-
opacity: var(--ds-opacity-disabled);
|
|
2305
|
-
}
|
|
2306
|
-
|
|
2307
|
-
.bi-fieldset:disabled > legend + p {
|
|
1996
|
+
.bi-fieldset:disabled > legend, .bi-fieldset:disabled > legend + p {
|
|
2308
1997
|
opacity: var(--ds-opacity-disabled);
|
|
2309
1998
|
}
|
|
2310
1999
|
|
|
2311
2000
|
.bi-filter-group {
|
|
2312
2001
|
--bic-filter-group-background: var(--bi-basic-white);
|
|
2313
|
-
--bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
|
|
2314
|
-
|
|
2002
|
+
--bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
|
|
2003
|
+
var(--bic-filter-group-background);
|
|
2004
|
+
--bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
|
|
2005
|
+
var(--bic-filter-group-background);
|
|
2315
2006
|
--bic-filter-group-background-expanded: var(--bi-neutral-15);
|
|
2316
2007
|
--bic-filter-group-border-color: var(--bi-neutral-15);
|
|
2317
2008
|
--bic-filter-group-text-color: var(--bi-neutral-90);
|
|
@@ -2321,8 +2012,10 @@ body:has(.bi-dialog:modal) {
|
|
|
2321
2012
|
|
|
2322
2013
|
.bi-filter-group[data-dark="true"] {
|
|
2323
2014
|
--bic-filter-group-background: var(--bi-neutral-90);
|
|
2324
|
-
--bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
|
|
2325
|
-
|
|
2015
|
+
--bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
|
|
2016
|
+
var(--bic-filter-group-background);
|
|
2017
|
+
--bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
|
|
2018
|
+
var(--bic-filter-group-background);
|
|
2326
2019
|
--bic-filter-group-background-expanded: var(--bi-neutral-80);
|
|
2327
2020
|
--bic-filter-group-border-color: var(--bi-neutral-70);
|
|
2328
2021
|
--bic-filter-group-text-color: var(--bi-basic-white);
|
|
@@ -2341,9 +2034,9 @@ body:has(.bi-dialog:modal) {
|
|
|
2341
2034
|
height: var(--bi-scale-12x);
|
|
2342
2035
|
color: var(--bic-filter-group-text-color);
|
|
2343
2036
|
align-items: center;
|
|
2344
|
-
gap: calc(var(--bi-scale-2x)
|
|
2037
|
+
gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
|
|
2345
2038
|
width: 100%;
|
|
2346
|
-
padding: var(--bi-scale-2x) calc(var(--bi-scale-2x)
|
|
2039
|
+
padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
|
|
2347
2040
|
background: var(--bic-filter-group-background);
|
|
2348
2041
|
cursor: pointer;
|
|
2349
2042
|
border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
|
|
@@ -2452,7 +2145,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2452
2145
|
display: flex;
|
|
2453
2146
|
}
|
|
2454
2147
|
|
|
2455
|
-
@media
|
|
2148
|
+
@media (width < 768px) {
|
|
2456
2149
|
.bi-footer .bi-footer--links-container {
|
|
2457
2150
|
flex-direction: column;
|
|
2458
2151
|
}
|
|
@@ -2471,7 +2164,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2471
2164
|
display: flex;
|
|
2472
2165
|
}
|
|
2473
2166
|
|
|
2474
|
-
@media
|
|
2167
|
+
@media (width < 768px) {
|
|
2475
2168
|
.bi-footer .bi-footer--links-container .bi-footer--links {
|
|
2476
2169
|
flex-direction: column;
|
|
2477
2170
|
}
|
|
@@ -2482,7 +2175,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2482
2175
|
font-weight: 300;
|
|
2483
2176
|
}
|
|
2484
2177
|
|
|
2485
|
-
@media
|
|
2178
|
+
@media (width < 768px) {
|
|
2486
2179
|
.bi-footer .bi-footer--links-container .bi-footer--links > p {
|
|
2487
2180
|
margin: var(--bi-scale-3x) 0;
|
|
2488
2181
|
}
|
|
@@ -2498,7 +2191,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2498
2191
|
display: flex;
|
|
2499
2192
|
}
|
|
2500
2193
|
|
|
2501
|
-
@media
|
|
2194
|
+
@media (width < 768px) {
|
|
2502
2195
|
.bi-footer .bi-footer--links-container .bi-footer--links > div {
|
|
2503
2196
|
flex-direction: column;
|
|
2504
2197
|
}
|
|
@@ -2513,29 +2206,13 @@ body:has(.bi-dialog:modal) {
|
|
|
2513
2206
|
display: flex;
|
|
2514
2207
|
}
|
|
2515
2208
|
|
|
2516
|
-
@media
|
|
2209
|
+
@media (width < 600px) {
|
|
2517
2210
|
.bi-footer .bi-footer--accreditations {
|
|
2518
2211
|
gap: var(--bi-scale-2x) var(--bi-scale-1x);
|
|
2519
2212
|
}
|
|
2520
2213
|
}
|
|
2521
2214
|
|
|
2522
|
-
.bi-footer .bi-footer--accreditations .bi-footer--aacsb {
|
|
2523
|
-
background-position: center;
|
|
2524
|
-
background-repeat: no-repeat;
|
|
2525
|
-
background-size: contain;
|
|
2526
|
-
height: 58px;
|
|
2527
|
-
display: block;
|
|
2528
|
-
}
|
|
2529
|
-
|
|
2530
|
-
.bi-footer .bi-footer--accreditations .bi-footer--amba {
|
|
2531
|
-
background-position: center;
|
|
2532
|
-
background-repeat: no-repeat;
|
|
2533
|
-
background-size: contain;
|
|
2534
|
-
height: 58px;
|
|
2535
|
-
display: block;
|
|
2536
|
-
}
|
|
2537
|
-
|
|
2538
|
-
.bi-footer .bi-footer--accreditations .bi-footer--equis {
|
|
2215
|
+
.bi-footer .bi-footer--accreditations .bi-footer--aacsb, .bi-footer .bi-footer--accreditations .bi-footer--amba, .bi-footer .bi-footer--accreditations .bi-footer--equis {
|
|
2539
2216
|
background-position: center;
|
|
2540
2217
|
background-repeat: no-repeat;
|
|
2541
2218
|
background-size: contain;
|
|
@@ -2578,7 +2255,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2578
2255
|
display: flex;
|
|
2579
2256
|
}
|
|
2580
2257
|
|
|
2581
|
-
@media
|
|
2258
|
+
@media (width < 600px) {
|
|
2582
2259
|
.bi-footer .bi-footer--socials {
|
|
2583
2260
|
gap: var(--bi-scale-2x);
|
|
2584
2261
|
}
|
|
@@ -2682,7 +2359,6 @@ svg[data-color="white"] {
|
|
|
2682
2359
|
}
|
|
2683
2360
|
|
|
2684
2361
|
.bi-input {
|
|
2685
|
-
-webkit-appearance: none;
|
|
2686
2362
|
appearance: none;
|
|
2687
2363
|
background: var(--bic-input-background);
|
|
2688
2364
|
border-radius: var(--bi-radius-medium);
|
|
@@ -2718,7 +2394,8 @@ svg[data-color="white"] {
|
|
|
2718
2394
|
.bi-input:focus-visible {
|
|
2719
2395
|
outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
|
|
2720
2396
|
outline-offset: 0;
|
|
2721
|
-
box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
|
|
2397
|
+
box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
|
|
2398
|
+
0px 0px 10px 0px #0000000d);
|
|
2722
2399
|
}
|
|
2723
2400
|
|
|
2724
2401
|
.bi-input:focus-visible * {
|
|
@@ -2733,11 +2410,7 @@ svg[data-color="white"] {
|
|
|
2733
2410
|
width: 100%;
|
|
2734
2411
|
}
|
|
2735
2412
|
|
|
2736
|
-
.bi-input:disabled {
|
|
2737
|
-
cursor: not-allowed;
|
|
2738
|
-
}
|
|
2739
|
-
|
|
2740
|
-
.bi-input[aria-disabled="true"] {
|
|
2413
|
+
.bi-input:disabled, .bi-input[aria-disabled="true"] {
|
|
2741
2414
|
cursor: not-allowed;
|
|
2742
2415
|
}
|
|
2743
2416
|
|
|
@@ -2745,34 +2418,12 @@ svg[data-color="white"] {
|
|
|
2745
2418
|
--bic-input-border-color: var(--bic-input-border-color-invalid);
|
|
2746
2419
|
}
|
|
2747
2420
|
|
|
2748
|
-
.bi-input[readonly] {
|
|
2421
|
+
.bi-input[readonly], .bi-input:disabled, .bi-input[aria-disabled="true"] {
|
|
2749
2422
|
background: var(--bic-input-background-readonly);
|
|
2750
2423
|
--bic-input-border-color: var(--bic-input-border-color-readonly);
|
|
2751
2424
|
color: var(--bic-input-color-readonly);
|
|
2752
2425
|
}
|
|
2753
2426
|
|
|
2754
|
-
.bi-input:disabled {
|
|
2755
|
-
background: var(--bic-input-background-readonly);
|
|
2756
|
-
--bic-input-border-color: var(--bic-input-border-color-readonly);
|
|
2757
|
-
color: var(--bic-input-color-readonly);
|
|
2758
|
-
}
|
|
2759
|
-
|
|
2760
|
-
.bi-input[aria-disabled="true"] {
|
|
2761
|
-
background: var(--bic-input-background-readonly);
|
|
2762
|
-
--bic-input-border-color: var(--bic-input-border-color-readonly);
|
|
2763
|
-
color: var(--bic-input-color-readonly);
|
|
2764
|
-
}
|
|
2765
|
-
|
|
2766
|
-
.bi-input:-webkit-any(textarea) {
|
|
2767
|
-
height: auto;
|
|
2768
|
-
min-height: calc(var(--bic-input-size) * 2);
|
|
2769
|
-
resize: vertical;
|
|
2770
|
-
}
|
|
2771
|
-
|
|
2772
|
-
.bi-input:-webkit-any(textarea):not([rows]) {
|
|
2773
|
-
field-sizing: content;
|
|
2774
|
-
}
|
|
2775
|
-
|
|
2776
2427
|
.bi-input:is(textarea) {
|
|
2777
2428
|
height: auto;
|
|
2778
2429
|
min-height: calc(var(--bic-input-size) * 2);
|
|
@@ -2783,17 +2434,6 @@ svg[data-color="white"] {
|
|
|
2783
2434
|
field-sizing: content;
|
|
2784
2435
|
}
|
|
2785
2436
|
|
|
2786
|
-
.bi-input:-webkit-any(select):not([readonly], [aria-disabled="true"], :disabled) {
|
|
2787
|
-
cursor: pointer;
|
|
2788
|
-
}
|
|
2789
|
-
|
|
2790
|
-
.bi-input:-webkit-any(select) {
|
|
2791
|
-
background-image: var(--bic-input-select-chevron);
|
|
2792
|
-
background-position: calc(100% - .5em);
|
|
2793
|
-
background-repeat: no-repeat;
|
|
2794
|
-
background-size: 1.5em;
|
|
2795
|
-
}
|
|
2796
|
-
|
|
2797
2437
|
.bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
|
|
2798
2438
|
cursor: pointer;
|
|
2799
2439
|
}
|
|
@@ -2805,7 +2445,7 @@ svg[data-color="white"] {
|
|
|
2805
2445
|
background-size: 1.5em;
|
|
2806
2446
|
}
|
|
2807
2447
|
|
|
2808
|
-
.bi-input
|
|
2448
|
+
.bi-input[type="checkbox"], .bi-input[type="radio"] {
|
|
2809
2449
|
padding: var(--bi-scale-0-50x);
|
|
2810
2450
|
line-height: inherit;
|
|
2811
2451
|
height: var(--bic-input-toggle-size);
|
|
@@ -2818,25 +2458,25 @@ svg[data-color="white"] {
|
|
|
2818
2458
|
flex-shrink: 0;
|
|
2819
2459
|
}
|
|
2820
2460
|
|
|
2821
|
-
.bi-input
|
|
2461
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible {
|
|
2822
2462
|
box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
|
|
2823
2463
|
outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
|
|
2824
2464
|
outline-offset: var(--_bi--focus, 3px);
|
|
2825
2465
|
}
|
|
2826
2466
|
|
|
2827
|
-
.bi-input
|
|
2467
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible * {
|
|
2828
2468
|
--_bi--focus: ;
|
|
2829
2469
|
}
|
|
2830
2470
|
|
|
2831
|
-
.bi-input
|
|
2471
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
|
|
2832
2472
|
cursor: pointer;
|
|
2833
2473
|
}
|
|
2834
2474
|
|
|
2835
|
-
.bi-input
|
|
2475
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"] {
|
|
2836
2476
|
border-radius: var(--bi-radius-full);
|
|
2837
2477
|
}
|
|
2838
2478
|
|
|
2839
|
-
.bi-input
|
|
2479
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:before {
|
|
2840
2480
|
content: "";
|
|
2841
2481
|
background-color: var(--bic-input-toggle-background);
|
|
2842
2482
|
border-radius: 100%;
|
|
@@ -2850,22 +2490,22 @@ svg[data-color="white"] {
|
|
|
2850
2490
|
transform: translate(-50%, -50%);
|
|
2851
2491
|
}
|
|
2852
2492
|
|
|
2853
|
-
.bi-input
|
|
2493
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked {
|
|
2854
2494
|
--bic-input-border-color: var(--bic-input-toggle-background);
|
|
2855
2495
|
}
|
|
2856
2496
|
|
|
2857
|
-
.bi-input
|
|
2497
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked:before {
|
|
2858
2498
|
width: 12px;
|
|
2859
2499
|
height: 12px;
|
|
2860
2500
|
}
|
|
2861
2501
|
|
|
2862
|
-
.bi-input
|
|
2502
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]) {
|
|
2863
2503
|
border-radius: var(--bi-radius-small);
|
|
2864
2504
|
place-content: center;
|
|
2865
2505
|
display: grid;
|
|
2866
2506
|
}
|
|
2867
2507
|
|
|
2868
|
-
.bi-input
|
|
2508
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):before {
|
|
2869
2509
|
content: "";
|
|
2870
2510
|
width: .7em;
|
|
2871
2511
|
height: .7em;
|
|
@@ -2876,119 +2516,41 @@ svg[data-color="white"] {
|
|
|
2876
2516
|
transform: scale(0);
|
|
2877
2517
|
}
|
|
2878
2518
|
|
|
2879
|
-
.bi-input
|
|
2519
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate) {
|
|
2880
2520
|
background: var(--bic-input-toggle-background);
|
|
2881
2521
|
--bic-input-border-color: var(--bic-input-toggle-background);
|
|
2882
2522
|
}
|
|
2883
2523
|
|
|
2884
|
-
.bi-input
|
|
2524
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate):before {
|
|
2885
2525
|
transform: scale(1);
|
|
2886
2526
|
}
|
|
2887
2527
|
|
|
2888
|
-
.bi-input
|
|
2889
|
-
background: var(--bic-input-toggle-background);
|
|
2890
|
-
--bic-input-border-color: var(--bic-input-toggle-background);
|
|
2891
|
-
}
|
|
2892
|
-
|
|
2893
|
-
.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate):before {
|
|
2894
|
-
transform: scale(1);
|
|
2895
|
-
}
|
|
2896
|
-
|
|
2897
|
-
.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:indeterminate:before {
|
|
2528
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):indeterminate:before {
|
|
2898
2529
|
clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
|
|
2899
2530
|
}
|
|
2900
2531
|
|
|
2901
|
-
.bi-input
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
height: var(--bic-input-toggle-size);
|
|
2905
|
-
width: var(--bic-input-toggle-size);
|
|
2906
|
-
box-shadow: none;
|
|
2907
|
-
border-width: var(--bi-stroke-medium);
|
|
2908
|
-
border-style: solid;
|
|
2909
|
-
border-color: var(--bic-input-border-color);
|
|
2910
|
-
background: none;
|
|
2911
|
-
flex-shrink: 0;
|
|
2912
|
-
}
|
|
2913
|
-
|
|
2914
|
-
.bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
|
|
2915
|
-
box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
|
|
2916
|
-
outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
|
|
2917
|
-
outline-offset: var(--_bi--focus, 3px);
|
|
2918
|
-
}
|
|
2919
|
-
|
|
2920
|
-
.bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
|
|
2921
|
-
--_bi--focus: ;
|
|
2922
|
-
}
|
|
2923
|
-
|
|
2924
|
-
.bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
|
|
2925
|
-
cursor: pointer;
|
|
2926
|
-
}
|
|
2927
|
-
|
|
2928
|
-
.bi-input:is([type="checkbox"], [type="radio"])[type="radio"] {
|
|
2929
|
-
border-radius: var(--bi-radius-full);
|
|
2930
|
-
}
|
|
2931
|
-
|
|
2932
|
-
.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:before {
|
|
2933
|
-
content: "";
|
|
2934
|
-
background-color: var(--bic-input-toggle-background);
|
|
2935
|
-
border-radius: 100%;
|
|
2936
|
-
width: 0;
|
|
2937
|
-
height: 0;
|
|
2938
|
-
transition: width .1s ease-in-out, height .1s ease-in-out;
|
|
2939
|
-
display: block;
|
|
2940
|
-
position: absolute;
|
|
2941
|
-
top: 50%;
|
|
2942
|
-
left: 50%;
|
|
2943
|
-
transform: translate(-50%, -50%);
|
|
2944
|
-
}
|
|
2945
|
-
|
|
2946
|
-
.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked {
|
|
2947
|
-
--bic-input-border-color: var(--bic-input-toggle-background);
|
|
2948
|
-
}
|
|
2949
|
-
|
|
2950
|
-
.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked:before {
|
|
2951
|
-
width: 12px;
|
|
2952
|
-
height: 12px;
|
|
2953
|
-
}
|
|
2954
|
-
|
|
2955
|
-
.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"] {
|
|
2956
|
-
border-radius: var(--bi-radius-small);
|
|
2957
|
-
place-content: center;
|
|
2958
|
-
display: grid;
|
|
2959
|
-
}
|
|
2960
|
-
|
|
2961
|
-
.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:before {
|
|
2962
|
-
content: "";
|
|
2963
|
-
width: .7em;
|
|
2964
|
-
height: .7em;
|
|
2965
|
-
box-shadow: inset 1em 1em var(--bic-input-toggle-color);
|
|
2966
|
-
transform-origin: center;
|
|
2967
|
-
clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
|
|
2968
|
-
transition: transform .2s ease-in-out;
|
|
2969
|
-
transform: scale(0);
|
|
2970
|
-
}
|
|
2971
|
-
|
|
2972
|
-
.bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate) {
|
|
2973
|
-
background: var(--bic-input-toggle-background);
|
|
2974
|
-
--bic-input-border-color: var(--bic-input-toggle-background);
|
|
2975
|
-
}
|
|
2976
|
-
|
|
2977
|
-
.bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate):before {
|
|
2978
|
-
transform: scale(1);
|
|
2532
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
|
|
2533
|
+
--_bic-input-circle-position-x: var(--bi-scale-0-50x);
|
|
2534
|
+
background: var(--bi-neutral-50);
|
|
2979
2535
|
}
|
|
2980
2536
|
|
|
2981
|
-
.bi-input
|
|
2537
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"]:where(:checked) {
|
|
2538
|
+
--_bic-input-circle-position-x: calc(100% - var(--bi-scale-0-50x));
|
|
2982
2539
|
background: var(--bic-input-toggle-background);
|
|
2983
2540
|
--bic-input-border-color: var(--bic-input-toggle-background);
|
|
2984
2541
|
}
|
|
2985
2542
|
|
|
2986
|
-
.bi-input
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
|
|
2543
|
+
:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
|
|
2544
|
+
background-image: radial-gradient(circle closest-side, var(--bi-basic-white) 95%, transparent 100%);
|
|
2545
|
+
background-origin: content-box;
|
|
2546
|
+
background-position: var(--_bic-input-circle-position-x);
|
|
2547
|
+
background-repeat: no-repeat;
|
|
2548
|
+
background-size: calc(var(--bic-input-toggle-size)) 100%;
|
|
2549
|
+
border-radius: var(--bi-radius-full);
|
|
2550
|
+
width: var(--bi-scale-11x);
|
|
2551
|
+
height: var(--bi-scale-6x);
|
|
2552
|
+
padding-inline: 0;
|
|
2553
|
+
transition: background-position .2s;
|
|
2992
2554
|
}
|
|
2993
2555
|
|
|
2994
2556
|
.bi-label {
|
|
@@ -3020,18 +2582,7 @@ svg[data-color="white"] {
|
|
|
3020
2582
|
.bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):before {
|
|
3021
2583
|
content: "*";
|
|
3022
2584
|
color: var(--bic-label-required-color);
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
.bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
|
|
3026
|
-
padding-right: var(--bi-scale-0-25x);
|
|
3027
|
-
}
|
|
3028
|
-
|
|
3029
|
-
.bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
|
|
3030
|
-
padding-left: var(--bi-scale-0-25x);
|
|
3031
|
-
}
|
|
3032
|
-
|
|
3033
|
-
.bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
|
|
3034
|
-
padding-left: var(--bi-scale-0-25x);
|
|
2585
|
+
padding-inline-end: var(--bi-scale-0-25x);
|
|
3035
2586
|
}
|
|
3036
2587
|
|
|
3037
2588
|
.bi-link {
|
|
@@ -3044,19 +2595,13 @@ svg[data-color="white"] {
|
|
|
3044
2595
|
--bic-link-focus-shadow-color: var(--bi-basic-white);
|
|
3045
2596
|
--bic-link-focus-outline-color: var(--bi-primary-50);
|
|
3046
2597
|
color: var(--bic-link-color);
|
|
3047
|
-
-webkit-text-decoration-line: underline;
|
|
3048
2598
|
text-decoration-line: underline;
|
|
3049
|
-
-webkit-text-decoration-style: solid;
|
|
3050
2599
|
text-decoration-style: solid;
|
|
3051
2600
|
text-decoration-thickness: var(--bic-link-text-decoration-thickness);
|
|
3052
2601
|
text-underline-offset: .25em;
|
|
3053
2602
|
outline: none;
|
|
3054
2603
|
}
|
|
3055
2604
|
|
|
3056
|
-
.bi-link :-webkit-any(img, svg) {
|
|
3057
|
-
vertical-align: middle;
|
|
3058
|
-
}
|
|
3059
|
-
|
|
3060
2605
|
.bi-link :is(img, svg) {
|
|
3061
2606
|
vertical-align: middle;
|
|
3062
2607
|
}
|
|
@@ -3150,7 +2695,7 @@ svg[data-color="white"] {
|
|
|
3150
2695
|
--bic-logo-height: var(--bi-scale-48x);
|
|
3151
2696
|
}
|
|
3152
2697
|
|
|
3153
|
-
@media (
|
|
2698
|
+
@media (width >= 795px) {
|
|
3154
2699
|
.bi-logo[data-dark="true"][data-international="true"][data-vertical="true"] {
|
|
3155
2700
|
aspect-ratio: .974318;
|
|
3156
2701
|
background-image: url("./assets/logos/international-vertical-dark.svg");
|
|
@@ -3166,7 +2711,7 @@ svg[data-color="white"] {
|
|
|
3166
2711
|
background-image: url("./assets/logos/dark.svg");
|
|
3167
2712
|
}
|
|
3168
2713
|
|
|
3169
|
-
@media (
|
|
2714
|
+
@media (width >= 795px) {
|
|
3170
2715
|
.bi-logo:not([data-dark="true"])[data-international="true"][data-vertical="true"] {
|
|
3171
2716
|
aspect-ratio: .974318;
|
|
3172
2717
|
background-image: url("./assets/logos/international-vertical.svg");
|
|
@@ -3208,7 +2753,7 @@ svg[data-color="white"] {
|
|
|
3208
2753
|
display: flex;
|
|
3209
2754
|
}
|
|
3210
2755
|
|
|
3211
|
-
@media
|
|
2756
|
+
@media (width < 768px) {
|
|
3212
2757
|
.bi-navbar > header {
|
|
3213
2758
|
padding: 0 var(--bi-scale-4x);
|
|
3214
2759
|
}
|
|
@@ -3278,40 +2823,11 @@ svg[data-color="white"] {
|
|
|
3278
2823
|
--bic-pagination-selected-background: var(--bi-primary-80);
|
|
3279
2824
|
}
|
|
3280
2825
|
|
|
3281
|
-
.bi-pagination :-webkit-any(ol, ul) {
|
|
3282
|
-
color: var(--bic-pagination-color);
|
|
3283
|
-
gap: var(--bic-pagination-gap);
|
|
3284
|
-
flex-wrap: wrap;
|
|
3285
|
-
align-items: center;
|
|
3286
|
-
width: -webkit-fit-content;
|
|
3287
|
-
width: fit-content;
|
|
3288
|
-
margin: 0;
|
|
3289
|
-
padding: 0;
|
|
3290
|
-
list-style: none;
|
|
3291
|
-
display: flex;
|
|
3292
|
-
}
|
|
3293
|
-
|
|
3294
|
-
.bi-pagination :-webkit-any(ol, ul) > li:empty:before {
|
|
3295
|
-
content: "...";
|
|
3296
|
-
min-width: var(--bi-scale-11x);
|
|
3297
|
-
text-align: center;
|
|
3298
|
-
display: block;
|
|
3299
|
-
}
|
|
3300
|
-
|
|
3301
|
-
.bi-pagination :-webkit-any(ol, ul) > li > .bi-button {
|
|
3302
|
-
--bic-button-font-size: 1rem;
|
|
3303
|
-
}
|
|
3304
|
-
|
|
3305
|
-
.bi-pagination :-webkit-any(ol, ul) > li > .bi-button[aria-current="page"] {
|
|
3306
|
-
background-color: var(--bic-pagination-selected-background);
|
|
3307
|
-
}
|
|
3308
|
-
|
|
3309
2826
|
.bi-pagination :is(ol, ul) {
|
|
3310
2827
|
color: var(--bic-pagination-color);
|
|
3311
2828
|
gap: var(--bic-pagination-gap);
|
|
3312
2829
|
flex-wrap: wrap;
|
|
3313
2830
|
align-items: center;
|
|
3314
|
-
width: -webkit-fit-content;
|
|
3315
2831
|
width: fit-content;
|
|
3316
2832
|
margin: 0;
|
|
3317
2833
|
padding: 0;
|
|
@@ -3344,14 +2860,16 @@ svg[data-color="white"] {
|
|
|
3344
2860
|
--bic-popover-border-radius: var(--bi-radius-medium);
|
|
3345
2861
|
--bic-popover-max-width: 300px;
|
|
3346
2862
|
--bic-popover-padding: var(--bi-scale-1x);
|
|
3347
|
-
--bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
|
|
2863
|
+
--bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
|
|
2864
|
+
0px 2px 2px -1px #26333f0a;
|
|
3348
2865
|
}
|
|
3349
2866
|
|
|
3350
2867
|
.bi-popover[data-dark="true"] {
|
|
3351
2868
|
--bic-popover-background: var(--bi-neutral-95);
|
|
3352
2869
|
--bic-popover-border-color: var(--bi-neutral-70);
|
|
3353
2870
|
--bic-popover-color: var(--bi-neutral-5);
|
|
3354
|
-
--bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
|
|
2871
|
+
--bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
|
|
2872
|
+
0px 2px 2px -1px #26333f0a;
|
|
3355
2873
|
}
|
|
3356
2874
|
|
|
3357
2875
|
.bi-popover {
|
|
@@ -3368,10 +2886,7 @@ svg[data-color="white"] {
|
|
|
3368
2886
|
z-index: 100000;
|
|
3369
2887
|
display: none;
|
|
3370
2888
|
position: fixed;
|
|
3371
|
-
|
|
3372
|
-
bottom: auto;
|
|
3373
|
-
left: 0;
|
|
3374
|
-
right: auto;
|
|
2889
|
+
inset: 0 auto auto 0;
|
|
3375
2890
|
overflow: visible;
|
|
3376
2891
|
}
|
|
3377
2892
|
|
|
@@ -3431,10 +2946,6 @@ svg[data-color="white"] {
|
|
|
3431
2946
|
--bic-field-padding-inline: 0;
|
|
3432
2947
|
}
|
|
3433
2948
|
|
|
3434
|
-
.bi-search:has(.bi-input:-webkit-any(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
|
|
3435
|
-
display: none;
|
|
3436
|
-
}
|
|
3437
|
-
|
|
3438
2949
|
.bi-search:has(.bi-input:is(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
|
|
3439
2950
|
display: none;
|
|
3440
2951
|
}
|
|
@@ -3475,7 +2986,8 @@ svg[data-color="white"] {
|
|
|
3475
2986
|
.bi-spinner {
|
|
3476
2987
|
--bic-spinner-color: currentColor;
|
|
3477
2988
|
aspect-ratio: 1;
|
|
3478
|
-
background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top
|
|
2989
|
+
background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top/4px 4px no-repeat,
|
|
2990
|
+
conic-gradient(#0000 30%, var(--bic-spinner-color));
|
|
3479
2991
|
border-radius: 50%;
|
|
3480
2992
|
width: 1em;
|
|
3481
2993
|
height: 1em;
|
|
@@ -3526,7 +3038,6 @@ svg[data-color="white"] {
|
|
|
3526
3038
|
|
|
3527
3039
|
.bi-sticky-header {
|
|
3528
3040
|
z-index: 100;
|
|
3529
|
-
position: -webkit-sticky;
|
|
3530
3041
|
position: sticky;
|
|
3531
3042
|
}
|
|
3532
3043
|
|
|
@@ -3568,7 +3079,6 @@ svg[data-color="white"] {
|
|
|
3568
3079
|
overflow-y: auto;
|
|
3569
3080
|
overflow-x: unset;
|
|
3570
3081
|
flex-direction: column;
|
|
3571
|
-
width: -webkit-fit-content;
|
|
3572
3082
|
width: fit-content;
|
|
3573
3083
|
}
|
|
3574
3084
|
|
|
@@ -3647,16 +3157,8 @@ svg[data-color="white"] {
|
|
|
3647
3157
|
position: relative;
|
|
3648
3158
|
}
|
|
3649
3159
|
|
|
3650
|
-
.bi-validation-message:has( > svg)
|
|
3651
|
-
padding-
|
|
3652
|
-
}
|
|
3653
|
-
|
|
3654
|
-
.bi-validation-message:has( > svg):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
3655
|
-
padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
|
|
3656
|
-
}
|
|
3657
|
-
|
|
3658
|
-
.bi-validation-message:has( > svg):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
3659
|
-
padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
|
|
3160
|
+
.bi-validation-message:has( > svg) {
|
|
3161
|
+
padding-inline-start: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
|
|
3660
3162
|
}
|
|
3661
3163
|
|
|
3662
3164
|
.bi-validation-message > svg {
|
|
@@ -3666,11 +3168,7 @@ svg[data-color="white"] {
|
|
|
3666
3168
|
position: absolute;
|
|
3667
3169
|
}
|
|
3668
3170
|
|
|
3669
|
-
html:has(.bi-navbar) {
|
|
3670
|
-
scroll-padding-top: var(--bi-layout-navbar-height);
|
|
3671
|
-
}
|
|
3672
|
-
|
|
3673
|
-
html:has(.bi-sub-navbar) {
|
|
3171
|
+
:is(html:has(.bi-navbar), html:has(.bi-sub-navbar)) {
|
|
3674
3172
|
scroll-padding-top: var(--bi-layout-navbar-height);
|
|
3675
3173
|
}
|
|
3676
3174
|
|
|
@@ -3699,5 +3197,5 @@ html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][da
|
|
|
3699
3197
|
}
|
|
3700
3198
|
|
|
3701
3199
|
html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sticky-header {
|
|
3702
|
-
top: calc(var(--bi-layout-navbar-height)
|
|
3200
|
+
top: calc(var(--bi-layout-navbar-height) + var(--bi-layout-navbar-height));
|
|
3703
3201
|
}
|