@bi-digital/css 0.11.10 → 0.12.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.
Files changed (36) hide show
  1. package/dist/baseline.css +4 -2
  2. package/dist/components/alert.css +52 -114
  3. package/dist/components/avatar.css +11 -59
  4. package/dist/components/badge.css +25 -92
  5. package/dist/components/button.css +108 -131
  6. package/dist/components/card.css +232 -309
  7. package/dist/components/checkbox-subsection.css +13 -17
  8. package/dist/components/chip.css +41 -185
  9. package/dist/components/details.css +86 -105
  10. package/dist/components/dialog.css +97 -102
  11. package/dist/components/dropdown.css +19 -30
  12. package/dist/components/field.css +203 -219
  13. package/dist/components/fieldset.css +18 -26
  14. package/dist/components/filter-group.css +76 -94
  15. package/dist/components/footer.css +104 -124
  16. package/dist/components/icons.css +30 -30
  17. package/dist/components/input.css +188 -206
  18. package/dist/components/label.css +15 -21
  19. package/dist/components/link.css +36 -56
  20. package/dist/components/logo.css +45 -41
  21. package/dist/components/navbar.css +49 -52
  22. package/dist/components/pagination.css +27 -30
  23. package/dist/components/popover.css +37 -46
  24. package/dist/components/search.css +12 -8
  25. package/dist/components/skip-link.css +8 -10
  26. package/dist/components/spinner.css +22 -25
  27. package/dist/components/sticky-header.css +1 -3
  28. package/dist/components/sub-navbar.css +25 -25
  29. package/dist/components/tabs.css +105 -121
  30. package/dist/components/tooltip.css +32 -32
  31. package/dist/components/validation-message.css +11 -11
  32. package/dist/components.css +1695 -2281
  33. package/dist/index.css +509 -10
  34. package/dist/salesforce.css +2200 -2289
  35. package/dist/tokens.css +505 -8
  36. package/package.json +2 -2
package/dist/components/logo.css CHANGED
@@ -1,17 +1,23 @@
1
- [data-bi-pride="true"] {
1
+ :root, [data-color-scheme="light"] {
2
+ --bic-logo-international-vertical: url("./assets/logos/vertical.svg");
3
+ --bic-logo-international: url("./assets/logos/international.svg");
4
+ --bic-logo-default: url("./assets/logos/default.svg");
2
5
  --bic-logo-pride-international-vertical: url("./assets/logos/pride-vertical.svg");
3
6
  --bic-logo-pride-international: url("./assets/logos/pride-international.svg");
4
7
  --bic-logo-pride-default: url("./assets/logos/pride-default.svg");
5
- --bic-logo-pride-dark-international-vertical: url("./assets/logos/pride-vertical-dark.svg");
6
- --bic-logo-pride-dark-international: url("./assets/logos/pride-international-dark.svg");
7
- --bic-logo-pride-dark-default: url("./assets/logos/pride-dark.svg");
8
+ }
9
+
10
+ [data-color-scheme="dark"] {
11
+ --bic-logo-international-vertical: url("./assets/logos/vertical-dark.svg");
12
+ --bic-logo-international: url("./assets/logos/international-dark.svg");
13
+ --bic-logo-default: url("./assets/logos/dark.svg");
14
+ --bic-logo-pride-international-vertical: url("./assets/logos/pride-vertical-dark.svg");
15
+ --bic-logo-pride-international: url("./assets/logos/pride-international-dark.svg");
16
+ --bic-logo-pride-default: url("./assets/logos/pride-dark.svg");
8
17
  }
9
18
 
10
19
  .bi-logo {
11
20
  --bic-logo-height: var(--bi-scale-12x);
12
- --bic-logo-international-vertical: var(--bic-logo-pride-international-vertical, url("./assets/logos/vertical.svg"));
13
- --bic-logo-international: var(--bic-logo-pride-international, url("./assets/logos/international.svg"));
14
- --bic-logo-default: var(--bic-logo-pride-default, url("./assets/logos/default.svg"));
15
21
  height: var(--bic-logo-height);
16
22
  aspect-ratio: 1;
17
23
  background-position: center;
@@ -19,50 +25,48 @@
19
25
  background-size: contain;
20
26
  justify-content: center;
21
27
  display: flex;
22
- }
23
-
24
- .bi-logo[data-dark="true"] {
25
- --bic-logo-international-vertical: var(--bic-logo-pride-dark-international-vertical, url("./assets/logos/vertical-dark.svg"));
26
- --bic-logo-international: var(--bic-logo-pride-dark-international, url("./assets/logos/international-dark.svg"));
27
- --bic-logo-default: var(--bic-logo-pride-dark-default, url("./assets/logos/dark.svg"));
28
- }
29
28
 
30
- .bi-logo[data-size="xs"] {
31
- --bic-logo-height: var(--bi-scale-6x);
32
- }
29
+ &[data-pride="true"] {
30
+ --bic-logo-international-vertical: var(--bic-logo-pride-international-vertical);
31
+ --bic-logo-international: var(--bic-logo-pride-international);
32
+ --bic-logo-default: var(--bic-logo-pride-default);
33
+ }
33
34
 
34
- .bi-logo[data-size="small"] {
35
- --bic-logo-height: var(--bi-scale-8x);
36
- }
35
+ &[data-size="xs"] {
36
+ --bic-logo-height: var(--bi-scale-6x);
37
+ }
37
38
 
38
- .bi-logo[data-size="medium"] {
39
- --bic-logo-height: var(--bi-scale-11x);
40
- }
39
+ &[data-size="small"] {
40
+ --bic-logo-height: var(--bi-scale-8x);
41
+ }
41
42
 
42
- .bi-logo[data-size="large"] {
43
- --bic-logo-height: var(--bi-scale-24x);
44
- }
43
+ &[data-size="medium"] {
44
+ --bic-logo-height: var(--bi-scale-11x);
45
+ }
45
46
 
46
- .bi-logo[data-size="xl"] {
47
- --bic-logo-height: var(--bi-scale-36x);
48
- }
47
+ &[data-size="large"] {
48
+ --bic-logo-height: var(--bi-scale-24x);
49
+ }
49
50
 
50
- .bi-logo[data-size="xxl"] {
51
- --bic-logo-height: var(--bi-scale-48x);
52
- }
51
+ &[data-size="xl"] {
52
+ --bic-logo-height: var(--bi-scale-36x);
53
+ }
53
54
 
54
- @media (width >= 795px) {
55
- .bi-logo[data-international="true"][data-vertical="true"] {
56
- background-image: var(--bic-logo-international-vertical);
57
- aspect-ratio: .974318;
55
+ &[data-size="xxl"] {
56
+ --bic-logo-height: var(--bi-scale-48x);
58
57
  }
59
58
 
60
- .bi-logo[data-international="true"] {
61
- background-image: var(--bic-logo-international);
62
- aspect-ratio: 2.8125;
59
+ @media (width >= 795px) {
60
+ &[data-international="true"] {
61
+ &[data-vertical="true"] {
62
+ background-image: var(--bic-logo-international-vertical);
63
+ aspect-ratio: .974318;
64
+ }
65
+
66
+ background-image: var(--bic-logo-international);
67
+ aspect-ratio: 2.8125;
68
+ }
63
69
  }
64
- }
65
70
 
66
- .bi-logo {
67
71
  background-image: var(--bic-logo-default);
68
72
  }
package/dist/components/navbar.css CHANGED
@@ -9,71 +9,68 @@
9
9
  }
10
10
 
11
11
  .bi-navbar {
12
- --bic-navbar-background-color: var(--bi-basic-white);
13
- --bic-navbar-color: var(--bi-basic-key);
12
+ --bic-navbar-background-color: var(--bi-color-primary-surface-subtle);
13
+ --bic-navbar-color: var(--bi-color-primary-text);
14
+
15
+ &[data-color] {
16
+ --bic-navbar-background-color: var(--bi-color-surface-subtle);
17
+ --bic-navbar-color: var(--bi-color-text);
18
+ }
19
+
14
20
  height: var(--bi-layout-navbar-height);
15
21
  background-color: var(--bic-navbar-background-color);
16
22
  width: 100%;
17
23
  color: var(--bic-navbar-color);
18
24
  display: flex;
19
- }
20
25
 
21
- .bi-navbar[data-dark="true"] {
22
- --bic-navbar-background-color: var(--bi-primary-95);
23
- --bic-navbar-color: var(--bi-basic-white);
24
- }
26
+ & > header {
27
+ height: var(--bi-layout-navbar-height);
28
+ align-items: center;
29
+ gap: var(--bi-scale-6x);
30
+ width: 100%;
31
+ padding: 0 var(--bi-scale-6x);
32
+ background-color: inherit;
33
+ color: inherit;
34
+ z-index: 130;
35
+ display: flex;
25
36
 
26
- .bi-navbar > header {
27
- height: var(--bi-layout-navbar-height);
28
- align-items: center;
29
- gap: var(--bi-scale-6x);
30
- width: 100%;
31
- padding: 0 var(--bi-scale-6x);
32
- background-color: inherit;
33
- color: inherit;
34
- z-index: 130;
35
- display: flex;
36
- }
37
+ @media (width < 768px) {
38
+ padding: 0 var(--bi-scale-4x);
39
+ }
37
40
 
38
- @media (width < 768px) {
39
- .bi-navbar > header {
40
- padding: 0 var(--bi-scale-4x);
41
- }
42
- }
41
+ @media (prefers-reduced-motion: no-preference) {
42
+ transition: transform .2s ease-in-out;
43
+ }
43
44
 
44
- @media (prefers-reduced-motion: no-preference) {
45
- .bi-navbar > header {
46
- transition: transform .2s ease-in-out;
45
+ & > :first-child {
46
+ margin-right: auto;
47
+ }
47
48
  }
48
- }
49
49
 
50
- .bi-navbar > header > :first-child {
51
- margin-right: auto;
52
- }
53
-
54
- .bi-navbar[data-fixed="true"] > header {
55
- position: fixed;
56
- top: 0;
57
- left: 0;
58
- right: 0;
59
- }
50
+ &[data-fixed="true"] {
51
+ & > header {
52
+ position: fixed;
53
+ top: 0;
54
+ left: 0;
55
+ right: 0;
56
+ }
57
+ }
60
58
 
61
- .bi-navbar:not([data-fixed="true"])[data-transparent="true"] {
62
- --bic-navbar-background-color: transparent;
63
- height: 0;
64
- }
59
+ &:not([data-fixed="true"])[data-transparent="true"] {
60
+ --bic-navbar-background-color: transparent;
61
+ height: 0;
62
+ }
65
63
 
66
- .bi-navbar[data-fixed="true"][data-transparent="true"] {
67
- height: 0;
68
- animation-name: bi-navbar-transparent-reveal;
69
- animation-timing-function: linear;
70
- animation-fill-mode: both;
71
- animation-timeline: scroll();
72
- animation-range: 0px var(--bi-layout-navbar-height);
73
- }
64
+ &[data-fixed="true"][data-transparent="true"] {
65
+ height: 0;
66
+ animation-name: bi-navbar-transparent-reveal;
67
+ animation-timing-function: linear;
68
+ animation-fill-mode: both;
69
+ animation-timeline: scroll();
70
+ animation-range: 0px var(--bi-layout-navbar-height);
74
71
 
75
- @media (prefers-reduced-motion: reduce) {
76
- .bi-navbar[data-fixed="true"][data-transparent="true"] {
77
- animation-timing-function: step-end;
72
+ @media (prefers-reduced-motion: reduce) {
73
+ animation-timing-function: step-end;
74
+ }
78
75
  }
79
76
  }
package/dist/components/pagination.css CHANGED
@@ -1,37 +1,34 @@
1
1
  .bi-pagination {
2
2
  --bic-pagination-gap: var(--bi-scale-2x);
3
- --bic-pagination-color: var(--bi-basic-key);
4
- --bic-pagination-selected-background: var(--bi-primary-5);
5
- }
6
-
7
- .bi-pagination[data-dark="true"] {
8
- --bic-pagination-color: var(--bi-basic-white);
9
- --bic-pagination-selected-background: var(--bi-primary-80);
10
- }
3
+ --bic-pagination-color: var(--bi-color-text);
4
+ --bic-pagination-selected-background: var(--bi-color-surface);
11
5
 
12
- .bi-pagination :is(ol, ul) {
13
- color: var(--bic-pagination-color);
14
- gap: var(--bic-pagination-gap);
15
- flex-wrap: wrap;
16
- align-items: center;
17
- width: fit-content;
18
- margin: 0;
19
- padding: 0;
20
- list-style: none;
21
- display: flex;
22
- }
6
+ & :is(ol, ul) {
7
+ color: var(--bic-pagination-color);
8
+ gap: var(--bic-pagination-gap);
9
+ flex-wrap: wrap;
10
+ align-items: center;
11
+ width: fit-content;
12
+ margin: 0;
13
+ padding: 0;
14
+ list-style: none;
15
+ display: flex;
23
16
 
24
- .bi-pagination :is(ol, ul) > li:empty:before {
25
- content: "...";
26
- min-width: var(--bi-scale-11x);
27
- text-align: center;
28
- display: block;
29
- }
17
+ & > li {
18
+ &:empty:before {
19
+ content: "...";
20
+ min-width: var(--bi-scale-11x);
21
+ text-align: center;
22
+ display: block;
23
+ }
30
24
 
31
- .bi-pagination :is(ol, ul) > li > .bi-button {
32
- --bic-button-font-size: 1rem;
33
- }
25
+ & > .bi-button {
26
+ --bic-button-font-size: 1rem;
34
27
 
35
- .bi-pagination :is(ol, ul) > li > .bi-button[aria-current="page"] {
36
- background-color: var(--bic-pagination-selected-background);
28
+ &[aria-current="page"] {
29
+ background-color: var(--bic-pagination-selected-background);
30
+ }
31
+ }
32
+ }
33
+ }
37
34
  }
package/dist/components/popover.css CHANGED
@@ -1,26 +1,15 @@
1
1
  .bi-popover {
2
2
  --bic-popover-arrow-size: var(--bi-scale-3x);
3
- --bic-popover-background: var(--bi-basic-white);
3
+ --bic-popover-background: var(--bi-color-surface-subtle);
4
4
  --bic-popover-border-width: var(--bi-stroke-thin);
5
5
  --bic-popover-border-style: solid;
6
- --bic-popover-border-color: var(--bi-neutral-15);
7
- --bic-popover-color: var(--bi-neutral-90);
6
+ --bic-popover-border-color: var(--bi-color-stroke);
7
+ --bic-popover-color: var(--bi-color-text);
8
8
  --bic-popover-border-radius: var(--bi-radius-medium);
9
9
  --bic-popover-max-width: 300px;
10
10
  --bic-popover-padding: var(--bi-scale-1x);
11
11
  --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
12
12
  0px 2px 2px -1px #26333f0a;
13
- }
14
-
15
- .bi-popover[data-dark="true"] {
16
- --bic-popover-background: var(--bi-neutral-95);
17
- --bic-popover-border-color: var(--bi-neutral-70);
18
- --bic-popover-color: var(--bi-neutral-5);
19
- --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
20
- 0px 2px 2px -1px #26333f0a;
21
- }
22
-
23
- .bi-popover {
24
13
  background: var(--bic-popover-background);
25
14
  border-radius: var(--bic-popover-border-radius);
26
15
  border-width: var(--bic-popover-border-width);
@@ -36,41 +25,43 @@
36
25
  position: fixed;
37
26
  inset: 0 auto auto 0;
38
27
  overflow: visible;
39
- }
40
28
 
41
- .bi-popover[aria-hidden="false"] {
42
- display: block;
43
- }
29
+ &[aria-hidden="false"] {
30
+ display: block;
31
+ }
44
32
 
45
- .bi-popover[data-arrow="true"]:before {
46
- background: var(--bic-popover-background);
47
- border: inherit;
48
- box-sizing: border-box;
49
- content: "";
50
- height: var(--bic-popover-arrow-size);
51
- left: var(--bic-popover-arrow-x);
52
- top: var(--bic-popover-arrow-y);
53
- width: var(--bic-popover-arrow-size);
54
- border-top-color: #0000;
55
- border-left-color: #0000;
56
- position: absolute;
57
- translate: -50% -50%;
58
- }
33
+ &[data-arrow="true"] {
34
+ &:before {
35
+ background: var(--bic-popover-background);
36
+ border: inherit;
37
+ box-sizing: border-box;
38
+ content: "";
39
+ height: var(--bic-popover-arrow-size);
40
+ left: var(--bic-popover-arrow-x);
41
+ top: var(--bic-popover-arrow-y);
42
+ width: var(--bic-popover-arrow-size);
43
+ border-top-color: #0000;
44
+ border-left-color: #0000;
45
+ position: absolute;
46
+ translate: -50% -50%;
47
+ }
59
48
 
60
- .bi-popover[data-arrow="true"][data-placement="top"]:before {
61
- rotate: 45deg;
62
- }
49
+ &[data-placement="top"]:before {
50
+ rotate: 45deg;
51
+ }
63
52
 
64
- .bi-popover[data-arrow="true"][data-placement="left"]:before {
65
- rotate: -45deg;
66
- }
53
+ &[data-placement="left"]:before {
54
+ rotate: -45deg;
55
+ }
67
56
 
68
- .bi-popover[data-arrow="true"][data-placement="right"]:before {
69
- rotate: 135deg;
70
- }
57
+ &[data-placement="right"]:before {
58
+ rotate: 135deg;
59
+ }
71
60
 
72
- .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
73
- rotate: -135deg;
61
+ &[data-placement="bottom"]:before {
62
+ rotate: -135deg;
63
+ }
64
+ }
74
65
  }
75
66
 
76
67
  [data-popover="inline"] {
@@ -80,8 +71,8 @@
80
71
  font-size: inherit;
81
72
  -webkit-text-decoration: underline dotted;
82
73
  text-decoration: underline dotted;
83
- }
84
74
 
85
- [data-popover="inline"]:not([hidden]) {
86
- display: inline;
75
+ &:not([hidden]) {
76
+ display: inline;
77
+ }
87
78
  }
package/dist/components/search.css CHANGED
@@ -1,11 +1,15 @@
1
- .bi-search:has(:focus-visible) .bi-field--affix:first-child {
2
- color: var(--bi-primary-50);
3
- }
1
+ .bi-search {
2
+ &:has(:focus-visible) {
3
+ & .bi-field--affix:first-child {
4
+ color: var(--bi-states-focus);
5
+ }
6
+ }
4
7
 
5
- .bi-search .bi-field--affix:last-child {
6
- --bic-field-padding-inline: 0;
7
- }
8
+ & .bi-field--affix:last-child {
9
+ --bic-field-padding-inline: 0;
10
+ }
8
11
 
9
- .bi-search:has(.bi-input:is(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
10
- display: none;
12
+ &:has(.bi-input:is(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
13
+ display: none;
14
+ }
11
15
  }
package/dist/components/skip-link.css CHANGED
@@ -14,18 +14,16 @@
14
14
  position: absolute;
15
15
  left: 50%;
16
16
  transform: translate(-50%, -110%);
17
- }
18
17
 
19
- @media (prefers-reduced-motion: reduce) {
20
- .bi-skip-link {
18
+ @media (prefers-reduced-motion: reduce) {
21
19
  transition: none;
22
20
  }
23
- }
24
21
 
25
- .bi-skip-link:focus {
26
- transform: translate(-50%, var(--bi-scale-2x));
27
- border-radius: var(--bi-radius-medium);
28
- outline-offset: 2px;
29
- outline: var(--bi-stroke-thick) solid var(--bi-primary-50);
30
- box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
22
+ &:focus {
23
+ transform: translate(-50%, var(--bi-scale-2x));
24
+ border-radius: var(--bi-radius-medium);
25
+ outline-offset: 2px;
26
+ outline: var(--bi-stroke-thick) solid var(--bi-primary-50);
27
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
28
+ }
31
29
  }
package/dist/components/spinner.css CHANGED
@@ -8,42 +8,39 @@
8
8
  height: 1em;
9
9
  animation: 1s linear infinite bi-spinner;
10
10
  display: inline-block;
11
- -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
12
11
  mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
13
- }
14
12
 
15
- @media (prefers-reduced-motion: reduce) {
16
- .bi-spinner {
13
+ @media (prefers-reduced-motion: reduce) {
17
14
  animation-duration: 6s;
18
15
  }
19
- }
20
16
 
21
- .bi-spinner[data-color="inherit"] {
22
- --bic-spinner-color: currentColor;
23
- }
17
+ &[data-color="inherit"] {
18
+ --bic-spinner-color: currentColor;
19
+ }
24
20
 
25
- .bi-spinner[data-color="black"] {
26
- --bic-spinner-color: var(--bi-basic-key);
27
- }
21
+ &[data-color="black"] {
22
+ --bic-spinner-color: var(--bi-basic-key);
23
+ }
28
24
 
29
- .bi-spinner[data-size="2xl"] {
30
- font-size: var(--bi-scale-12x);
31
- }
25
+ &[data-size="2xl"] {
26
+ font-size: var(--bi-scale-12x);
27
+ }
32
28
 
33
- .bi-spinner[data-size="xl"] {
34
- font-size: var(--bi-scale-10x);
35
- }
29
+ &[data-size="xl"] {
30
+ font-size: var(--bi-scale-10x);
31
+ }
36
32
 
37
- .bi-spinner[data-size="large"] {
38
- font-size: var(--bi-scale-8x);
39
- }
33
+ &[data-size="large"] {
34
+ font-size: var(--bi-scale-8x);
35
+ }
40
36
 
41
- .bi-spinner[data-size="medium"] {
42
- font-size: var(--bi-scale-6x);
43
- }
37
+ &[data-size="medium"] {
38
+ font-size: var(--bi-scale-6x);
39
+ }
44
40
 
45
- .bi-spinner[data-size="small"] {
46
- font-size: var(--bi-scale-5x);
41
+ &[data-size="small"] {
42
+ font-size: var(--bi-scale-5x);
43
+ }
47
44
  }
48
45
 
49
46
  @keyframes bi-spinner {
package/dist/components/sticky-header.css CHANGED
@@ -1,10 +1,8 @@
1
1
  .bi-sticky-header {
2
2
  z-index: 100;
3
3
  position: sticky;
4
- }
5
4
 
6
- @media (prefers-reduced-motion: no-preference) {
7
- .bi-sticky-header {
5
+ @media (prefers-reduced-motion: no-preference) {
8
6
  transition: top .2s ease-in-out;
9
7
  }
10
8
  }
package/dist/components/sub-navbar.css CHANGED
@@ -1,34 +1,34 @@
1
1
  .bi-sub-navbar--wrapper {
2
2
  height: var(--bi-layout-navbar-height);
3
3
  position: relative;
4
- }
5
4
 
6
- .bi-sub-navbar--wrapper .bi-sub-navbar {
7
- --bic-sub-navbar-background-color: var(--bi-basic-white);
8
- --bic-sub-navbar-color: var(--bi-basic-key);
9
- --bic-sub-navbar-border-color: var(--bi-neutral-15);
10
- height: var(--bi-layout-navbar-height);
11
- background-color: var(--bic-sub-navbar-background-color);
12
- border-bottom: 1px solid var(--bic-sub-navbar-border-color);
13
- width: 100%;
14
- position: absolute;
15
- top: 0;
16
- left: 0;
17
- }
5
+ & .bi-sub-navbar {
6
+ --bic-sub-navbar-background-color: var(--bi-color-primary-surface-subtle);
7
+ --bic-sub-navbar-color: var(--bi-color-primary-text);
8
+ --bic-sub-navbar-border-color: var(--bi-color-primary-stroke);
18
9
 
19
- .bi-sub-navbar--wrapper .bi-sub-navbar[data-dark="true"] {
20
- --bic-sub-navbar-background-color: var(--bi-primary-95);
21
- --bic-sub-navbar-color: var(--bi-basic-white);
22
- --bic-sub-navbar-border-color: var(--bi-neutral-70);
23
- }
10
+ &[data-color] {
11
+ --bic-sub-navbar-background-color: var(--bi-color-surface-subtle);
12
+ --bic-sub-navbar-color: var(--bi-color-text);
13
+ --bic-sub-navbar-border-color: var(--bi-color-stroke);
14
+ }
24
15
 
25
- .bi-sub-navbar--wrapper .bi-sub-navbar[data-fixed="true"] {
26
- z-index: 120;
27
- position: fixed;
28
- }
16
+ height: var(--bi-layout-navbar-height);
17
+ background-color: var(--bic-sub-navbar-background-color);
18
+ border-bottom: 1px solid var(--bic-sub-navbar-border-color);
19
+ width: 100%;
20
+ color: var(--bic-sub-navbar-color);
21
+ position: absolute;
22
+ top: 0;
23
+ left: 0;
24
+
25
+ &[data-fixed="true"] {
26
+ z-index: 120;
27
+ position: fixed;
29
28
 
30
- @media (prefers-reduced-motion: no-preference) {
31
- .bi-sub-navbar--wrapper .bi-sub-navbar[data-fixed="true"] {
32
- transition: top .2s ease-in-out;
29
+ @media (prefers-reduced-motion: no-preference) {
30
+ transition: top .2s ease-in-out;
31
+ }
32
+ }
33
33
  }
34
34
  }