@bi-digital/css 0.4.2 → 0.5.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 +2 -7
- package/dist/components/alert.css +24 -0
- package/dist/components/button.css +5 -13
- package/dist/components/card.css +62 -27
- package/dist/components/checkbox-subsection.css +1 -1
- package/dist/components/details.css +1 -1
- package/dist/components/dialog.css +3 -3
- package/dist/components/dropdown.css +3 -3
- package/dist/components/field.css +7 -37
- package/dist/components/filter-group.css +3 -3
- package/dist/components/input.css +11 -39
- package/dist/components/label.css +1 -5
- package/dist/components/popover.css +3 -3
- package/dist/components/spinner.css +3 -3
- package/dist/components/validation-message.css +1 -5
- package/dist/components.css +128 -143
- package/dist/index.css +61 -224
- package/dist/reset.css +2 -14
- package/dist/salesforce.css +185 -346
- package/dist/tokens.css +57 -203
- package/package.json +3 -3
|
@@ -15,11 +15,7 @@
|
|
|
15
15
|
position: relative;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.bi-validation-message:has( > svg):not(
|
|
19
|
-
padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.bi-validation-message:has( > svg):not(: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))) {
|
|
18
|
+
.bi-validation-message:has( > svg):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)) {
|
|
23
19
|
padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
|
|
24
20
|
}
|
|
25
21
|
|
package/dist/components.css
CHANGED
|
@@ -90,6 +90,30 @@
|
|
|
90
90
|
--bic-alert-color: var(--bi-warning-5);
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
+
.bi-alert[data-variant="info"] {
|
|
94
|
+
--bic-alert-background: var(--bi-info-5);
|
|
95
|
+
--bic-alert-border-color: var(--bi-info-10);
|
|
96
|
+
--bic-alert-color: var(--bi-info-90);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.bi-alert[data-variant="info"][data-dark="true"] {
|
|
100
|
+
--bic-alert-background: var(--bi-info-90);
|
|
101
|
+
--bic-alert-border-color: var(--bi-info-80);
|
|
102
|
+
--bic-alert-color: var(--bi-info-10);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.bi-alert[data-variant="neutral"] {
|
|
106
|
+
--bic-alert-background: var(--bi-neutral-10);
|
|
107
|
+
--bic-alert-border-color: var(--bi-neutral-15);
|
|
108
|
+
--bic-alert-color: var(--bi-neutral-95);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.bi-alert[data-variant="neutral"][data-dark="true"] {
|
|
112
|
+
--bic-alert-background: var(--bi-neutral-90);
|
|
113
|
+
--bic-alert-border-color: var(--bi-neutral-90);
|
|
114
|
+
--bic-alert-color: var(--bi-neutral-30);
|
|
115
|
+
}
|
|
116
|
+
|
|
93
117
|
.bi-alert:has( > .bi-alert--footer) {
|
|
94
118
|
width: 100%;
|
|
95
119
|
}
|
|
@@ -365,7 +389,7 @@
|
|
|
365
389
|
--bic-button-background: var(--bi-primary-50);
|
|
366
390
|
--bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
|
|
367
391
|
--bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
|
|
368
|
-
--bic-button-box-shadow: 0px 0px 0px 2px
|
|
392
|
+
--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;
|
|
369
393
|
}
|
|
370
394
|
|
|
371
395
|
.bi-button[data-variant="filled"] {
|
|
@@ -373,7 +397,7 @@
|
|
|
373
397
|
--bic-button-background: var(--bi-primary-50);
|
|
374
398
|
--bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
|
|
375
399
|
--bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
|
|
376
|
-
--bic-button-box-shadow: 0px 0px 0px 2px
|
|
400
|
+
--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;
|
|
377
401
|
}
|
|
378
402
|
|
|
379
403
|
.bi-button[data-variant="outlined"] {
|
|
@@ -411,17 +435,13 @@
|
|
|
411
435
|
|
|
412
436
|
.bi-button[data-variant="flat"][data-dark="true"] {
|
|
413
437
|
--bic-button-color: var(--bi-basic-white);
|
|
414
|
-
--bic-button-background:
|
|
438
|
+
--bic-button-background: #ffffff1a;
|
|
415
439
|
--bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-button-background);
|
|
416
440
|
--bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-button-background);
|
|
417
441
|
}
|
|
418
442
|
|
|
419
443
|
@media (hover: hover) and (pointer: fine) {
|
|
420
|
-
.bi-button:where(:not(
|
|
421
|
-
background: var(--bic-button-background-hover);
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
.bi-button:where(:not(:is(:disabled, [aria-disabled="true"], [aria-busy="true"]))):hover {
|
|
444
|
+
.bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):hover {
|
|
425
445
|
background: var(--bic-button-background-hover);
|
|
426
446
|
}
|
|
427
447
|
}
|
|
@@ -446,11 +466,7 @@
|
|
|
446
466
|
cursor: progress;
|
|
447
467
|
}
|
|
448
468
|
|
|
449
|
-
.bi-button:where(:not(
|
|
450
|
-
background: var(--bic-button-background-press);
|
|
451
|
-
}
|
|
452
|
-
|
|
453
|
-
.bi-button:where(:not(:is(:disabled, [aria-disabled="true"], [aria-busy="true"]))):active {
|
|
469
|
+
.bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):active {
|
|
454
470
|
background: var(--bic-button-background-press);
|
|
455
471
|
}
|
|
456
472
|
|
|
@@ -465,36 +481,54 @@
|
|
|
465
481
|
}
|
|
466
482
|
|
|
467
483
|
.bi-card {
|
|
468
|
-
--bic-card-border-color: var(--bi-neutral-15);
|
|
469
|
-
--bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
|
|
470
|
-
--bic-card-border-radius: var(--bi-radius-medium);
|
|
471
484
|
--bic-card-background-color: var(--bi-basic-white);
|
|
485
|
+
--bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
|
|
486
|
+
--bic-card-border-color: var(--bi-neutral-15);
|
|
472
487
|
--bic-card-color: var(--bi-neutral-95);
|
|
473
488
|
--bic-card-header-title-color: var(--bi-neutral-95);
|
|
474
489
|
--bic-card-header-bold-color: var(--bi-primary-60);
|
|
475
490
|
--bic-card-header-label-color: var(--bi-neutral-50);
|
|
476
|
-
--bic-card-actions-background-color: var(--bi-neutral-10);
|
|
477
|
-
--bic-card-actions-icon-color: var(--bi-primary-50);
|
|
478
|
-
--bic-card-actions-flex-direction: column;
|
|
479
|
-
--bic-card-content-padding: var(--bi-scale-4x);
|
|
480
491
|
--bic-card-content-color: var(--bi-neutral-50);
|
|
492
|
+
--bic-card-content-padding: var(--bi-scale-4x);
|
|
493
|
+
--bic-card-border-radius: var(--bi-radius-medium);
|
|
481
494
|
--bic-card-content-lines: 2;
|
|
482
495
|
--bic-card-media-width: 100%;
|
|
483
496
|
--bic-card-media-date-width: 3.1875rem;
|
|
484
497
|
--bic-card-media-date-height: 2.875rem;
|
|
498
|
+
--bic-card-actions-flex-direction: column;
|
|
499
|
+
--bic-card-actions-background-color: var(--bi-neutral-10);
|
|
500
|
+
--bic-card-actions-icon-color: var(--bi-primary-50);
|
|
501
|
+
--bic-card-border-hover-color: var(--bi-neutral-50);
|
|
502
|
+
--bic-card-box-shadow-hover-color: #0000000d;
|
|
503
|
+
--bic-card-box-shadow-focus-color: var(--bi-primary-50);
|
|
504
|
+
--bic-card-box-shadow-focus-background-color: var(--bi-basic-white);
|
|
505
|
+
--bic-card-box-shadow-focus-outer-border: 6px;
|
|
506
|
+
--bic-card-box-shadow-focus-inner-border: 4px;
|
|
507
|
+
--bic-card-border-active-color: var(--bi-primary-50);
|
|
508
|
+
--bic-card-box-shadow-active-color: #0000000d;
|
|
509
|
+
--bic-card-box-shadow-active-outer-border: 20px;
|
|
510
|
+
--bic-card-box-shadow-active-inner-border: 10px;
|
|
485
511
|
}
|
|
486
512
|
|
|
487
513
|
.bi-card[data-dark="true"] {
|
|
514
|
+
--bic-card-background-color: var(--bi-neutral-90);
|
|
488
515
|
--bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
|
|
489
516
|
--bic-card-border-color: var(--bi-neutral-70);
|
|
490
|
-
--bic-card-background-color: var(--bi-neutral-95);
|
|
491
517
|
--bic-card-color: var(--bi-neutral-5);
|
|
492
518
|
--bic-card-header-title-color: var(--bi-neutral-5);
|
|
493
519
|
--bic-card-header-bold-color: var(--bi-primary-20);
|
|
494
520
|
--bic-card-header-label-color: var(--bi-neutral-30);
|
|
495
|
-
--bic-card-actions-background-color: var(--bi-neutral-75);
|
|
496
|
-
--bic-card-actions-icon-color: var(--bi-primary-20);
|
|
497
521
|
--bic-card-content-color: var(--bi-neutral-30);
|
|
522
|
+
--bic-card-actions-background-color: var(--bi-neutral-75);
|
|
523
|
+
--bic-card-actions-icon-color: var(--bi-neutral-10);
|
|
524
|
+
--bic-card-border-hover-color: var(--bi-neutral-25);
|
|
525
|
+
--bic-card-box-shadow-hover-color: #b2cdf40d;
|
|
526
|
+
--bic-card-box-shadow-focus-color: var(--bi-secondary-50);
|
|
527
|
+
--bic-card-box-shadow-focus-background-color: var(--bi-neutral-95);
|
|
528
|
+
--bic-card-box-shadow-focus-outer-border: 4.5px;
|
|
529
|
+
--bic-card-box-shadow-focus-inner-border: 4px;
|
|
530
|
+
--bic-card-border-active-color: var(--bi-primary-50);
|
|
531
|
+
--bic-card-box-shadow-active-color: #b2cdf40d;
|
|
498
532
|
}
|
|
499
533
|
|
|
500
534
|
.bi-card {
|
|
@@ -573,6 +607,23 @@
|
|
|
573
607
|
--bic-card-header-label-color: var(--bi-warning-90);
|
|
574
608
|
}
|
|
575
609
|
|
|
610
|
+
.bi-card[data-color="primary"][data-dark="true"] {
|
|
611
|
+
--bic-card-background-color: var(--bi-primary-90);
|
|
612
|
+
--bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-primary-75);
|
|
613
|
+
--bic-card-border-color: var(--bi-primary-75);
|
|
614
|
+
--bic-card-color: var(--bi-neutral-5);
|
|
615
|
+
--bic-card-header-title-color: var(--bi-neutral-5);
|
|
616
|
+
--bic-card-header-bold-color: var(--bi-primary-20);
|
|
617
|
+
--bic-card-header-label-color: var(--bi-neutral-30);
|
|
618
|
+
--bic-card-content-color: var(--bi-neutral-30);
|
|
619
|
+
--bic-card-actions-background-color: var(--bi-primary-85);
|
|
620
|
+
--bic-card-actions-icon-color: var(--bi-primary-10);
|
|
621
|
+
--bic-card-border-hover-color: var(--bi-primary-40);
|
|
622
|
+
--bic-card-box-shadow-focus-color: var(--bi-neutral-15);
|
|
623
|
+
--bic-card-box-shadow-focus-background-color: var(--bi-secondary-50);
|
|
624
|
+
--bic-card-border-active-color: var(--bi-primary-10);
|
|
625
|
+
}
|
|
626
|
+
|
|
576
627
|
.bi-card[data-error="true"] {
|
|
577
628
|
box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
|
|
578
629
|
--bic-card-border-color: transparent;
|
|
@@ -620,8 +671,8 @@
|
|
|
620
671
|
}
|
|
621
672
|
|
|
622
673
|
.bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
|
|
623
|
-
box-shadow: var(--bic-card-box-shadow)
|
|
624
|
-
outline: var(--_bi--focus, 1.5px solid var(--
|
|
674
|
+
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);
|
|
675
|
+
outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
|
|
625
676
|
outline-offset: var(--_bi--focus, 2px);
|
|
626
677
|
}
|
|
627
678
|
|
|
@@ -631,12 +682,12 @@
|
|
|
631
682
|
|
|
632
683
|
@media (hover: hover) and (pointer: fine) {
|
|
633
684
|
.bi-card:-webkit-any(a, button):not(.disabled):hover {
|
|
634
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--
|
|
685
|
+
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);
|
|
635
686
|
}
|
|
636
687
|
}
|
|
637
688
|
|
|
638
689
|
.bi-card:-webkit-any(a, button):not(.disabled):active {
|
|
639
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-
|
|
690
|
+
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);
|
|
640
691
|
}
|
|
641
692
|
|
|
642
693
|
.bi-card:-webkit-any(a, button):disabled {
|
|
@@ -651,8 +702,8 @@
|
|
|
651
702
|
}
|
|
652
703
|
|
|
653
704
|
.bi-card:is(a, button):not(.disabled):focus-visible {
|
|
654
|
-
box-shadow: var(--bic-card-box-shadow)
|
|
655
|
-
outline: var(--_bi--focus, 1.5px solid var(--
|
|
705
|
+
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);
|
|
706
|
+
outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
|
|
656
707
|
outline-offset: var(--_bi--focus, 2px);
|
|
657
708
|
}
|
|
658
709
|
|
|
@@ -662,12 +713,12 @@
|
|
|
662
713
|
|
|
663
714
|
@media (hover: hover) and (pointer: fine) {
|
|
664
715
|
.bi-card:is(a, button):not(.disabled):hover {
|
|
665
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--
|
|
716
|
+
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);
|
|
666
717
|
}
|
|
667
718
|
}
|
|
668
719
|
|
|
669
720
|
.bi-card:is(a, button):not(.disabled):active {
|
|
670
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-
|
|
721
|
+
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);
|
|
671
722
|
}
|
|
672
723
|
|
|
673
724
|
.bi-card:is(a, button):disabled {
|
|
@@ -682,8 +733,8 @@
|
|
|
682
733
|
}
|
|
683
734
|
|
|
684
735
|
.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
|
|
685
|
-
box-shadow: var(--bic-card-box-shadow)
|
|
686
|
-
outline: var(--_bi--focus, 1.5px solid var(--
|
|
736
|
+
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);
|
|
737
|
+
outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
|
|
687
738
|
outline-offset: var(--_bi--focus, 2px);
|
|
688
739
|
}
|
|
689
740
|
|
|
@@ -693,12 +744,12 @@
|
|
|
693
744
|
|
|
694
745
|
@media (hover: hover) and (pointer: fine) {
|
|
695
746
|
.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
|
|
696
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--
|
|
747
|
+
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);
|
|
697
748
|
}
|
|
698
749
|
}
|
|
699
750
|
|
|
700
751
|
.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
|
|
701
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-
|
|
752
|
+
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);
|
|
702
753
|
}
|
|
703
754
|
|
|
704
755
|
.bi-card .bi-card--content:-webkit-any(a, button):disabled {
|
|
@@ -713,8 +764,8 @@
|
|
|
713
764
|
}
|
|
714
765
|
|
|
715
766
|
.bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
|
|
716
|
-
box-shadow: var(--bic-card-box-shadow)
|
|
717
|
-
outline: var(--_bi--focus, 1.5px solid var(--
|
|
767
|
+
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);
|
|
768
|
+
outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
|
|
718
769
|
outline-offset: var(--_bi--focus, 2px);
|
|
719
770
|
}
|
|
720
771
|
|
|
@@ -724,12 +775,12 @@
|
|
|
724
775
|
|
|
725
776
|
@media (hover: hover) and (pointer: fine) {
|
|
726
777
|
.bi-card .bi-card--content:is(a, button):not(.disabled):hover {
|
|
727
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--
|
|
778
|
+
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);
|
|
728
779
|
}
|
|
729
780
|
}
|
|
730
781
|
|
|
731
782
|
.bi-card .bi-card--content:is(a, button):not(.disabled):active {
|
|
732
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-
|
|
783
|
+
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);
|
|
733
784
|
}
|
|
734
785
|
|
|
735
786
|
.bi-card .bi-card--content:is(a, button):disabled {
|
|
@@ -874,7 +925,7 @@
|
|
|
874
925
|
padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
|
|
875
926
|
border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
|
|
876
927
|
background: var(--bic-card-background-color);
|
|
877
|
-
box-shadow: 0px 8px 16px var(--bi-scale-1-5x)
|
|
928
|
+
box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d, 0px 4px 6px 0px #26333f0d;
|
|
878
929
|
color: var(--bic-card-header-title-color);
|
|
879
930
|
text-align: center;
|
|
880
931
|
flex-direction: column;
|
|
@@ -906,7 +957,7 @@
|
|
|
906
957
|
.bi-checkbox-subsection > div:first-child {
|
|
907
958
|
margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
|
|
908
959
|
background-color: var(--bic-checkbox-subsection-line-bg);
|
|
909
|
-
width: var(--bi-stroke-
|
|
960
|
+
width: var(--bi-stroke-medium);
|
|
910
961
|
}
|
|
911
962
|
|
|
912
963
|
.bi-checkbox-subsection > div:last-child {
|
|
@@ -1112,7 +1163,7 @@ details.bi-details {
|
|
|
1112
1163
|
--bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-details-background);
|
|
1113
1164
|
--bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-details-background);
|
|
1114
1165
|
--bic-details-color: var(--bi-neutral-90);
|
|
1115
|
-
--bic-details-border-color: var(--bi-
|
|
1166
|
+
--bic-details-border-color: var(--bi-neutral-15);
|
|
1116
1167
|
--bic-details-padding: var(--bi-scale-4x);
|
|
1117
1168
|
}
|
|
1118
1169
|
|
|
@@ -1246,7 +1297,7 @@ details.bi-details > *:not(summary) + * {
|
|
|
1246
1297
|
|
|
1247
1298
|
.bi-dialog {
|
|
1248
1299
|
--bic-dialog-animation-duration: .2s;
|
|
1249
|
-
--bic-dialog-backdrop-background:
|
|
1300
|
+
--bic-dialog-backdrop-background: #00000080;
|
|
1250
1301
|
--bic-dialog-background: var(--bi-basic-white);
|
|
1251
1302
|
--bic-dialog-border-color: var(--bi-neutral-15);
|
|
1252
1303
|
--bic-dialog-icon-spacing: .625rem;
|
|
@@ -1266,7 +1317,7 @@ details.bi-details > *:not(summary) + * {
|
|
|
1266
1317
|
animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) forwards;
|
|
1267
1318
|
background: var(--bic-dialog-background);
|
|
1268
1319
|
border-radius: var(--bi-radius-large);
|
|
1269
|
-
box-shadow: 0 var(--bi-scale-1x) var(--bi-scale-1x) 0
|
|
1320
|
+
box-shadow: 0 var(--bi-scale-1x) var(--bi-scale-1x) 0 #00000040;
|
|
1270
1321
|
color: var(--bic-dialog-color);
|
|
1271
1322
|
max-height: var(--bic-dialog-max-height);
|
|
1272
1323
|
max-width: var(--bic-dialog-max-width);
|
|
@@ -1285,7 +1336,7 @@ details.bi-details > *:not(summary) + * {
|
|
|
1285
1336
|
|
|
1286
1337
|
.bi-dialog::backdrop {
|
|
1287
1338
|
animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
|
|
1288
|
-
background: var(--bic-dialog-backdrop-background,
|
|
1339
|
+
background: var(--bic-dialog-backdrop-background, #00000080);
|
|
1289
1340
|
}
|
|
1290
1341
|
|
|
1291
1342
|
.bi-dialog[open] {
|
|
@@ -1478,15 +1529,15 @@ body:has(.bi-dialog:modal) {
|
|
|
1478
1529
|
--bic-dropdown-background: var(--bi-basic-white);
|
|
1479
1530
|
--bic-dropdown-border-width: var(--bi-stroke-thin);
|
|
1480
1531
|
--bic-dropdown-border-style: solid;
|
|
1481
|
-
--bic-dropdown-border-color: var(--bi-
|
|
1482
|
-
--bic-dropdown-box-shadow: 0px 8px 16px -4px
|
|
1532
|
+
--bic-dropdown-border-color: var(--bi-neutral-15);
|
|
1533
|
+
--bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
|
|
1483
1534
|
}
|
|
1484
1535
|
|
|
1485
1536
|
.bi-dropdown[data-dark="true"] {
|
|
1486
1537
|
--bic-dropdown-background: var(--bi-neutral-100);
|
|
1487
1538
|
--bic-dropdown-border-color: var(--bi-neutral-90);
|
|
1488
1539
|
--bic-dropdown-color: var(--bi-neutral-5);
|
|
1489
|
-
--bic-dropdown-box-shadow: 0px 8px 16px -4px
|
|
1540
|
+
--bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
|
|
1490
1541
|
}
|
|
1491
1542
|
|
|
1492
1543
|
.bi-dropdown {
|
|
@@ -1656,19 +1707,11 @@ body:has(.bi-dialog:modal) {
|
|
|
1656
1707
|
gap: 0;
|
|
1657
1708
|
}
|
|
1658
1709
|
|
|
1659
|
-
.bi-field:has(.bi-input
|
|
1660
|
-
background: var(--_bi--hover, var(--bic-field-background-hover));
|
|
1661
|
-
}
|
|
1662
|
-
|
|
1663
|
-
.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):hover:not(:-webkit-any(:has(a:hover), :has([aria-disabled="true"], :disabled))) * {
|
|
1664
|
-
--_bi--hover: ;
|
|
1665
|
-
}
|
|
1666
|
-
|
|
1667
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) {
|
|
1710
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
|
|
1668
1711
|
background: var(--_bi--hover, var(--bic-field-background-hover));
|
|
1669
1712
|
}
|
|
1670
1713
|
|
|
1671
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:
|
|
1714
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
|
|
1672
1715
|
--_bi--hover: ;
|
|
1673
1716
|
}
|
|
1674
1717
|
|
|
@@ -1739,19 +1782,11 @@ body:has(.bi-dialog:modal) {
|
|
|
1739
1782
|
gap: 0;
|
|
1740
1783
|
}
|
|
1741
1784
|
|
|
1742
|
-
.bi-field:has(.bi-input
|
|
1785
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
|
|
1743
1786
|
background: var(--_bi--hover, var(--bic-field-background-hover));
|
|
1744
1787
|
}
|
|
1745
1788
|
|
|
1746
|
-
.bi-field:has(.bi-input
|
|
1747
|
-
--_bi--hover: ;
|
|
1748
|
-
}
|
|
1749
|
-
|
|
1750
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) {
|
|
1751
|
-
background: var(--_bi--hover, var(--bic-field-background-hover));
|
|
1752
|
-
}
|
|
1753
|
-
|
|
1754
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) * {
|
|
1789
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
|
|
1755
1790
|
--_bi--hover: ;
|
|
1756
1791
|
}
|
|
1757
1792
|
|
|
@@ -1806,7 +1841,7 @@ body:has(.bi-dialog:modal) {
|
|
|
1806
1841
|
.bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
|
|
1807
1842
|
outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
|
|
1808
1843
|
outline-offset: 0;
|
|
1809
|
-
box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x)
|
|
1844
|
+
box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
|
|
1810
1845
|
}
|
|
1811
1846
|
|
|
1812
1847
|
.bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
|
|
@@ -1824,14 +1859,7 @@ body:has(.bi-dialog:modal) {
|
|
|
1824
1859
|
display: flex;
|
|
1825
1860
|
}
|
|
1826
1861
|
|
|
1827
|
-
.bi-field .bi-field--affixes .bi-field--affix:first-child:not(
|
|
1828
|
-
border-top-left-radius: inherit;
|
|
1829
|
-
border-bottom-left-radius: inherit;
|
|
1830
|
-
border-right: 0;
|
|
1831
|
-
padding-right: 0;
|
|
1832
|
-
}
|
|
1833
|
-
|
|
1834
|
-
.bi-field .bi-field--affixes .bi-field--affix:first-child:not(: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))) {
|
|
1862
|
+
.bi-field .bi-field--affixes .bi-field--affix:first-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)) {
|
|
1835
1863
|
border-top-left-radius: inherit;
|
|
1836
1864
|
border-bottom-left-radius: inherit;
|
|
1837
1865
|
border-right: 0;
|
|
@@ -1852,14 +1880,7 @@ body:has(.bi-dialog:modal) {
|
|
|
1852
1880
|
padding-left: 0;
|
|
1853
1881
|
}
|
|
1854
1882
|
|
|
1855
|
-
.bi-field .bi-field--affixes .bi-field--affix:last-child:not(
|
|
1856
|
-
border-top-right-radius: inherit;
|
|
1857
|
-
border-bottom-right-radius: inherit;
|
|
1858
|
-
border-left: 0;
|
|
1859
|
-
padding-left: 0;
|
|
1860
|
-
}
|
|
1861
|
-
|
|
1862
|
-
.bi-field .bi-field--affixes .bi-field--affix:last-child:not(: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))) {
|
|
1883
|
+
.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)) {
|
|
1863
1884
|
border-top-right-radius: inherit;
|
|
1864
1885
|
border-bottom-right-radius: inherit;
|
|
1865
1886
|
border-left: 0;
|
|
@@ -1928,7 +1949,7 @@ body:has(.bi-dialog:modal) {
|
|
|
1928
1949
|
--bic-filter-group-background: var(--bi-basic-white);
|
|
1929
1950
|
--bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-filter-group-background);
|
|
1930
1951
|
--bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-filter-group-background);
|
|
1931
|
-
--bic-filter-group-background-expanded: var(--bi-
|
|
1952
|
+
--bic-filter-group-background-expanded: var(--bi-neutral-15);
|
|
1932
1953
|
--bic-filter-group-border-color: var(--bi-neutral-15);
|
|
1933
1954
|
--bic-filter-group-text-color: var(--bi-neutral-90);
|
|
1934
1955
|
}
|
|
@@ -2011,7 +2032,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2011
2032
|
|
|
2012
2033
|
.bi-filter-group:last-of-type > button {
|
|
2013
2034
|
border-radius: var(--bi-radius-small);
|
|
2014
|
-
border-bottom-color:
|
|
2035
|
+
border-bottom-color: #0000;
|
|
2015
2036
|
}
|
|
2016
2037
|
|
|
2017
2038
|
.bi-filter-group:last-of-type > div {
|
|
@@ -2024,7 +2045,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2024
2045
|
|
|
2025
2046
|
.bi-filter-group[data-expanded="true"] > button {
|
|
2026
2047
|
border-radius: var(--bi-radius-small);
|
|
2027
|
-
border-bottom-color:
|
|
2048
|
+
border-bottom-color: #0000;
|
|
2028
2049
|
}
|
|
2029
2050
|
|
|
2030
2051
|
.bi-filter-group[data-expanded="true"] > div {
|
|
@@ -2315,26 +2336,18 @@ svg[data-color="white"] {
|
|
|
2315
2336
|
--bic-input-font-size: 1.25rem;
|
|
2316
2337
|
}
|
|
2317
2338
|
|
|
2318
|
-
.bi-input:where(:not(
|
|
2319
|
-
box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
|
|
2320
|
-
}
|
|
2321
|
-
|
|
2322
|
-
.bi-input:where(:not(:-webkit-any([type="checkbox"], [type="radio"]))):focus-visible {
|
|
2323
|
-
--bic-input-border-color: var(--bi-primary-50);
|
|
2324
|
-
}
|
|
2325
|
-
|
|
2326
|
-
.bi-input:where(:not(:is([type="checkbox"], [type="radio"]))):hover {
|
|
2339
|
+
.bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
|
|
2327
2340
|
box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
|
|
2328
2341
|
}
|
|
2329
2342
|
|
|
2330
|
-
.bi-input:where(:not(
|
|
2343
|
+
.bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
|
|
2331
2344
|
--bic-input-border-color: var(--bi-primary-50);
|
|
2332
2345
|
}
|
|
2333
2346
|
|
|
2334
2347
|
.bi-input:focus-visible {
|
|
2335
2348
|
outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
|
|
2336
2349
|
outline-offset: 0;
|
|
2337
|
-
box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x)
|
|
2350
|
+
box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
|
|
2338
2351
|
}
|
|
2339
2352
|
|
|
2340
2353
|
.bi-input:focus-visible * {
|
|
@@ -2345,11 +2358,7 @@ svg[data-color="white"] {
|
|
|
2345
2358
|
color: var(--bic-input-placeholder-color);
|
|
2346
2359
|
}
|
|
2347
2360
|
|
|
2348
|
-
.bi-input:not(
|
|
2349
|
-
width: 100%;
|
|
2350
|
-
}
|
|
2351
|
-
|
|
2352
|
-
.bi-input:not(:is([size], [cols])) {
|
|
2361
|
+
.bi-input:not([size], [cols]) {
|
|
2353
2362
|
width: 100%;
|
|
2354
2363
|
}
|
|
2355
2364
|
|
|
@@ -2403,26 +2412,18 @@ svg[data-color="white"] {
|
|
|
2403
2412
|
field-sizing: content;
|
|
2404
2413
|
}
|
|
2405
2414
|
|
|
2406
|
-
.bi-input:-webkit-any(select):not(
|
|
2407
|
-
cursor: pointer;
|
|
2408
|
-
}
|
|
2409
|
-
|
|
2410
|
-
.bi-input:is(select):not(:is([readonly], [aria-disabled="true"], :disabled)) {
|
|
2415
|
+
.bi-input:-webkit-any(select):not([readonly], [aria-disabled="true"], :disabled) {
|
|
2411
2416
|
cursor: pointer;
|
|
2412
2417
|
}
|
|
2413
2418
|
|
|
2414
|
-
.bi-input
|
|
2419
|
+
.bi-input:-webkit-any(select) {
|
|
2415
2420
|
background-image: var(--bic-input-select-chevron);
|
|
2416
2421
|
background-position: calc(100% - .5em);
|
|
2417
2422
|
background-repeat: no-repeat;
|
|
2418
2423
|
background-size: 1.5em;
|
|
2419
2424
|
}
|
|
2420
2425
|
|
|
2421
|
-
.bi-input
|
|
2422
|
-
cursor: pointer;
|
|
2423
|
-
}
|
|
2424
|
-
|
|
2425
|
-
.bi-input:is(select):not(:is([readonly], [aria-disabled="true"], :disabled)) {
|
|
2426
|
+
.bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
|
|
2426
2427
|
cursor: pointer;
|
|
2427
2428
|
}
|
|
2428
2429
|
|
|
@@ -2439,7 +2440,7 @@ svg[data-color="white"] {
|
|
|
2439
2440
|
height: var(--bic-input-toggle-size);
|
|
2440
2441
|
width: var(--bic-input-toggle-size);
|
|
2441
2442
|
box-shadow: none;
|
|
2442
|
-
border-width: var(--bi-stroke-
|
|
2443
|
+
border-width: var(--bi-stroke-medium);
|
|
2443
2444
|
border-style: solid;
|
|
2444
2445
|
border-color: var(--bic-input-border-color);
|
|
2445
2446
|
background: none;
|
|
@@ -2456,11 +2457,7 @@ svg[data-color="white"] {
|
|
|
2456
2457
|
--_bi--focus: ;
|
|
2457
2458
|
}
|
|
2458
2459
|
|
|
2459
|
-
.bi-input
|
|
2460
|
-
cursor: pointer;
|
|
2461
|
-
}
|
|
2462
|
-
|
|
2463
|
-
.bi-input:is([type="checkbox"], [type="radio"]):read-only:not(:is([readonly], [aria-disabled="true"], :disabled)) {
|
|
2460
|
+
.bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
|
|
2464
2461
|
cursor: pointer;
|
|
2465
2462
|
}
|
|
2466
2463
|
|
|
@@ -2536,7 +2533,7 @@ svg[data-color="white"] {
|
|
|
2536
2533
|
height: var(--bic-input-toggle-size);
|
|
2537
2534
|
width: var(--bic-input-toggle-size);
|
|
2538
2535
|
box-shadow: none;
|
|
2539
|
-
border-width: var(--bi-stroke-
|
|
2536
|
+
border-width: var(--bi-stroke-medium);
|
|
2540
2537
|
border-style: solid;
|
|
2541
2538
|
border-color: var(--bic-input-border-color);
|
|
2542
2539
|
background: none;
|
|
@@ -2553,11 +2550,7 @@ svg[data-color="white"] {
|
|
|
2553
2550
|
--_bi--focus: ;
|
|
2554
2551
|
}
|
|
2555
2552
|
|
|
2556
|
-
.bi-input
|
|
2557
|
-
cursor: pointer;
|
|
2558
|
-
}
|
|
2559
|
-
|
|
2560
|
-
.bi-input:is([type="checkbox"], [type="radio"]):read-only:not(:is([readonly], [aria-disabled="true"], :disabled)) {
|
|
2553
|
+
.bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
|
|
2561
2554
|
cursor: pointer;
|
|
2562
2555
|
}
|
|
2563
2556
|
|
|
@@ -2658,11 +2651,7 @@ svg[data-color="white"] {
|
|
|
2658
2651
|
color: var(--bic-label-required-color);
|
|
2659
2652
|
}
|
|
2660
2653
|
|
|
2661
|
-
.bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):not(
|
|
2662
|
-
padding-right: var(--bi-scale-0-25x);
|
|
2663
|
-
}
|
|
2664
|
-
|
|
2665
|
-
.bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):not(: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 {
|
|
2654
|
+
.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 {
|
|
2666
2655
|
padding-right: var(--bi-scale-0-25x);
|
|
2667
2656
|
}
|
|
2668
2657
|
|
|
@@ -2974,19 +2963,19 @@ svg[data-color="white"] {
|
|
|
2974
2963
|
--bic-popover-background: var(--bi-basic-white);
|
|
2975
2964
|
--bic-popover-border-width: var(--bi-stroke-thin);
|
|
2976
2965
|
--bic-popover-border-style: solid;
|
|
2977
|
-
--bic-popover-border-color: var(--bi-
|
|
2966
|
+
--bic-popover-border-color: var(--bi-neutral-15);
|
|
2978
2967
|
--bic-popover-color: var(--bi-neutral-90);
|
|
2979
2968
|
--bic-popover-border-radius: var(--bi-radius-medium);
|
|
2980
2969
|
--bic-popover-max-width: 300px;
|
|
2981
2970
|
--bic-popover-padding: var(--bi-scale-1x);
|
|
2982
|
-
--bic-popover-box-shadow: 0px 8px 16px -4px
|
|
2971
|
+
--bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
|
|
2983
2972
|
}
|
|
2984
2973
|
|
|
2985
2974
|
.bi-popover[data-dark="true"] {
|
|
2986
2975
|
--bic-popover-background: var(--bi-neutral-95);
|
|
2987
2976
|
--bic-popover-border-color: var(--bi-neutral-70);
|
|
2988
2977
|
--bic-popover-color: var(--bi-neutral-5);
|
|
2989
|
-
--bic-popover-box-shadow: 0px 8px 16px -4px
|
|
2978
|
+
--bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
|
|
2990
2979
|
}
|
|
2991
2980
|
|
|
2992
2981
|
.bi-popover {
|
|
@@ -3079,13 +3068,13 @@ svg[data-color="white"] {
|
|
|
3079
3068
|
.bi-spinner {
|
|
3080
3069
|
--bic-spinner-color: currentColor;
|
|
3081
3070
|
aspect-ratio: 1;
|
|
3082
|
-
background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%,
|
|
3071
|
+
background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top / 4px 4px no-repeat, conic-gradient(#0000 30%, var(--bic-spinner-color));
|
|
3083
3072
|
border-radius: 50%;
|
|
3084
3073
|
width: 1em;
|
|
3085
3074
|
height: 1em;
|
|
3086
3075
|
animation: 1s linear infinite bi-spinner;
|
|
3087
|
-
-webkit-mask: radial-gradient(farthest-side,
|
|
3088
|
-
mask: radial-gradient(farthest-side,
|
|
3076
|
+
-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
|
|
3077
|
+
mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
|
|
3089
3078
|
}
|
|
3090
3079
|
|
|
3091
3080
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -3247,11 +3236,7 @@ svg[data-color="white"] {
|
|
|
3247
3236
|
position: relative;
|
|
3248
3237
|
}
|
|
3249
3238
|
|
|
3250
|
-
.bi-validation-message:has( > svg):not(
|
|
3251
|
-
padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
|
|
3252
|
-
}
|
|
3253
|
-
|
|
3254
|
-
.bi-validation-message:has( > svg):not(: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))) {
|
|
3239
|
+
.bi-validation-message:has( > svg):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)) {
|
|
3255
3240
|
padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
|
|
3256
3241
|
}
|
|
3257
3242
|
|