@bi-digital/css 0.11.10 → 0.11.11

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 (35) hide show
  1. package/dist/baseline.css +4 -2
  2. package/dist/components/alert.css +109 -111
  3. package/dist/components/avatar.css +45 -47
  4. package/dist/components/badge.css +88 -88
  5. package/dist/components/button.css +117 -117
  6. package/dist/components/card.css +268 -282
  7. package/dist/components/checkbox-subsection.css +15 -15
  8. package/dist/components/chip.css +146 -146
  9. package/dist/components/details.css +88 -92
  10. package/dist/components/dialog.css +99 -97
  11. package/dist/components/dropdown.css +23 -25
  12. package/dist/components/field.css +204 -202
  13. package/dist/components/fieldset.css +20 -22
  14. package/dist/components/filter-group.css +80 -80
  15. package/dist/components/footer.css +110 -124
  16. package/dist/components/icons.css +30 -30
  17. package/dist/components/input.css +184 -186
  18. package/dist/components/label.css +17 -17
  19. package/dist/components/link.css +47 -47
  20. package/dist/components/logo.css +32 -34
  21. package/dist/components/navbar.css +46 -50
  22. package/dist/components/pagination.css +29 -27
  23. package/dist/components/popover.css +40 -40
  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 +23 -25
  29. package/dist/components/tabs.css +109 -113
  30. package/dist/components/tooltip.css +30 -30
  31. package/dist/components/validation-message.css +9 -9
  32. package/dist/components.css +1996 -2037
  33. package/dist/index.css +4 -2
  34. package/dist/salesforce.css +1996 -2037
  35. package/package.json +2 -2
package/dist/components/navbar.css CHANGED
@@ -16,64 +16,60 @@
16
16
  width: 100%;
17
17
  color: var(--bic-navbar-color);
18
18
  display: flex;
19
- }
20
19
 
21
- .bi-navbar[data-dark="true"] {
22
- --bic-navbar-background-color: var(--bi-primary-95);
23
- --bic-navbar-color: var(--bi-basic-white);
24
- }
20
+ &[data-dark="true"] {
21
+ --bic-navbar-background-color: var(--bi-primary-95);
22
+ --bic-navbar-color: var(--bi-basic-white);
23
+ }
25
24
 
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
- }
25
+ & > header {
26
+ height: var(--bi-layout-navbar-height);
27
+ align-items: center;
28
+ gap: var(--bi-scale-6x);
29
+ width: 100%;
30
+ padding: 0 var(--bi-scale-6x);
31
+ background-color: inherit;
32
+ color: inherit;
33
+ z-index: 130;
34
+ display: flex;
37
35
 
38
- @media (width < 768px) {
39
- .bi-navbar > header {
40
- padding: 0 var(--bi-scale-4x);
41
- }
42
- }
36
+ @media (width < 768px) {
37
+ padding: 0 var(--bi-scale-4x);
38
+ }
43
39
 
44
- @media (prefers-reduced-motion: no-preference) {
45
- .bi-navbar > header {
46
- transition: transform .2s ease-in-out;
47
- }
48
- }
40
+ @media (prefers-reduced-motion: no-preference) {
41
+ transition: transform .2s ease-in-out;
42
+ }
49
43
 
50
- .bi-navbar > header > :first-child {
51
- margin-right: auto;
52
- }
44
+ & > :first-child {
45
+ margin-right: auto;
46
+ }
47
+ }
53
48
 
54
- .bi-navbar[data-fixed="true"] > header {
55
- position: fixed;
56
- top: 0;
57
- left: 0;
58
- right: 0;
59
- }
49
+ &[data-fixed="true"] {
50
+ & > header {
51
+ position: fixed;
52
+ top: 0;
53
+ left: 0;
54
+ right: 0;
55
+ }
56
+ }
60
57
 
61
- .bi-navbar:not([data-fixed="true"])[data-transparent="true"] {
62
- --bic-navbar-background-color: transparent;
63
- height: 0;
64
- }
58
+ &:not([data-fixed="true"])[data-transparent="true"] {
59
+ --bic-navbar-background-color: transparent;
60
+ height: 0;
61
+ }
65
62
 
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
- }
63
+ &[data-fixed="true"][data-transparent="true"] {
64
+ height: 0;
65
+ animation-name: bi-navbar-transparent-reveal;
66
+ animation-timing-function: linear;
67
+ animation-fill-mode: both;
68
+ animation-timeline: scroll();
69
+ animation-range: 0px var(--bi-layout-navbar-height);
74
70
 
75
- @media (prefers-reduced-motion: reduce) {
76
- .bi-navbar[data-fixed="true"][data-transparent="true"] {
77
- animation-timing-function: step-end;
71
+ @media (prefers-reduced-motion: reduce) {
72
+ animation-timing-function: step-end;
73
+ }
78
74
  }
79
75
  }
package/dist/components/pagination.css CHANGED
@@ -2,36 +2,38 @@
2
2
  --bic-pagination-gap: var(--bi-scale-2x);
3
3
  --bic-pagination-color: var(--bi-basic-key);
4
4
  --bic-pagination-selected-background: var(--bi-primary-5);
5
- }
6
5
 
7
- .bi-pagination[data-dark="true"] {
8
- --bic-pagination-color: var(--bi-basic-white);
9
- --bic-pagination-selected-background: var(--bi-primary-80);
10
- }
6
+ &[data-dark="true"] {
7
+ --bic-pagination-color: var(--bi-basic-white);
8
+ --bic-pagination-selected-background: var(--bi-primary-80);
9
+ }
11
10
 
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
- }
11
+ & :is(ol, ul) {
12
+ color: var(--bic-pagination-color);
13
+ gap: var(--bic-pagination-gap);
14
+ flex-wrap: wrap;
15
+ align-items: center;
16
+ width: fit-content;
17
+ margin: 0;
18
+ padding: 0;
19
+ list-style: none;
20
+ display: flex;
23
21
 
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
- }
22
+ & > li {
23
+ &:empty:before {
24
+ content: "...";
25
+ min-width: var(--bi-scale-11x);
26
+ text-align: center;
27
+ display: block;
28
+ }
30
29
 
31
- .bi-pagination :is(ol, ul) > li > .bi-button {
32
- --bic-button-font-size: 1rem;
33
- }
30
+ & > .bi-button {
31
+ --bic-button-font-size: 1rem;
34
32
 
35
- .bi-pagination :is(ol, ul) > li > .bi-button[aria-current="page"] {
36
- background-color: var(--bic-pagination-selected-background);
33
+ &[aria-current="page"] {
34
+ background-color: var(--bic-pagination-selected-background);
35
+ }
36
+ }
37
+ }
38
+ }
37
39
  }
package/dist/components/popover.css CHANGED
@@ -10,17 +10,15 @@
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
13
 
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,
14
+ &[data-dark="true"] {
15
+ --bic-popover-background: var(--bi-neutral-95);
16
+ --bic-popover-border-color: var(--bi-neutral-70);
17
+ --bic-popover-color: var(--bi-neutral-5);
18
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
20
19
  0px 2px 2px -1px #26333f0a;
21
- }
20
+ }
22
21
 
23
- .bi-popover {
24
22
  background: var(--bic-popover-background);
25
23
  border-radius: var(--bic-popover-border-radius);
26
24
  border-width: var(--bic-popover-border-width);
@@ -36,41 +34,43 @@
36
34
  position: fixed;
37
35
  inset: 0 auto auto 0;
38
36
  overflow: visible;
39
- }
40
37
 
41
- .bi-popover[aria-hidden="false"] {
42
- display: block;
43
- }
38
+ &[aria-hidden="false"] {
39
+ display: block;
40
+ }
44
41
 
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
- }
42
+ &[data-arrow="true"] {
43
+ &:before {
44
+ background: var(--bic-popover-background);
45
+ border: inherit;
46
+ box-sizing: border-box;
47
+ content: "";
48
+ height: var(--bic-popover-arrow-size);
49
+ left: var(--bic-popover-arrow-x);
50
+ top: var(--bic-popover-arrow-y);
51
+ width: var(--bic-popover-arrow-size);
52
+ border-top-color: #0000;
53
+ border-left-color: #0000;
54
+ position: absolute;
55
+ translate: -50% -50%;
56
+ }
59
57
 
60
- .bi-popover[data-arrow="true"][data-placement="top"]:before {
61
- rotate: 45deg;
62
- }
58
+ &[data-placement="top"]:before {
59
+ rotate: 45deg;
60
+ }
63
61
 
64
- .bi-popover[data-arrow="true"][data-placement="left"]:before {
65
- rotate: -45deg;
66
- }
62
+ &[data-placement="left"]:before {
63
+ rotate: -45deg;
64
+ }
67
65
 
68
- .bi-popover[data-arrow="true"][data-placement="right"]:before {
69
- rotate: 135deg;
70
- }
66
+ &[data-placement="right"]:before {
67
+ rotate: 135deg;
68
+ }
71
69
 
72
- .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
73
- rotate: -135deg;
70
+ &[data-placement="bottom"]:before {
71
+ rotate: -135deg;
72
+ }
73
+ }
74
74
  }
75
75
 
76
76
  [data-popover="inline"] {
@@ -80,8 +80,8 @@
80
80
  font-size: inherit;
81
81
  -webkit-text-decoration: underline dotted;
82
82
  text-decoration: underline dotted;
83
- }
84
83
 
85
- [data-popover="inline"]:not([hidden]) {
86
- display: inline;
84
+ &:not([hidden]) {
85
+ display: inline;
86
+ }
87
87
  }
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-primary-50);
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,32 @@
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-basic-white);
7
+ --bic-sub-navbar-color: var(--bi-basic-key);
8
+ --bic-sub-navbar-border-color: var(--bi-neutral-15);
9
+ height: var(--bi-layout-navbar-height);
10
+ background-color: var(--bic-sub-navbar-background-color);
11
+ border-bottom: 1px solid var(--bic-sub-navbar-border-color);
12
+ width: 100%;
13
+ position: absolute;
14
+ top: 0;
15
+ left: 0;
18
16
 
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
- }
17
+ &[data-dark="true"] {
18
+ --bic-sub-navbar-background-color: var(--bi-primary-95);
19
+ --bic-sub-navbar-color: var(--bi-basic-white);
20
+ --bic-sub-navbar-border-color: var(--bi-neutral-70);
21
+ }
24
22
 
25
- .bi-sub-navbar--wrapper .bi-sub-navbar[data-fixed="true"] {
26
- z-index: 120;
27
- position: fixed;
28
- }
23
+ &[data-fixed="true"] {
24
+ z-index: 120;
25
+ position: fixed;
29
26
 
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;
27
+ @media (prefers-reduced-motion: no-preference) {
28
+ transition: top .2s ease-in-out;
29
+ }
30
+ }
33
31
  }
34
32
  }