@bi-digital/css 0.11.9 → 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 -45
  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 +1997 -2033
  33. package/dist/index.css +4 -2
  34. package/dist/salesforce.css +1997 -2033
  35. package/package.json +2 -2
package/dist/components/dialog.css CHANGED
@@ -14,15 +14,13 @@
14
14
  --bic-dialog-max-height: 80vh;
15
15
  --bic-dialog-max-width: 40rem;
16
16
  --bic-dialog-padding: var(--bi-scale-4x);
17
- }
18
17
 
19
- .bi-dialog[data-dark="true"] {
20
- --bic-dialog-background: var(--bi-primary-95);
21
- --bic-dialog-border-color: var(--bi-neutral-70);
22
- --bic-dialog-color: var(--bi-basic-white);
23
- }
18
+ &[data-dark="true"] {
19
+ --bic-dialog-background: var(--bi-primary-95);
20
+ --bic-dialog-border-color: var(--bi-neutral-70);
21
+ --bic-dialog-color: var(--bi-basic-white);
22
+ }
24
23
 
25
- .bi-dialog {
26
24
  animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) forwards;
27
25
  background: var(--bic-dialog-background);
28
26
  border-radius: var(--bic-dialog-border-radius);
@@ -38,116 +36,120 @@
38
36
  position: fixed;
39
37
  inset: 0;
40
38
  overflow: auto;
41
- }
42
39
 
43
- .bi-dialog::backdrop {
44
- animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
45
- background: var(--bic-dialog-backdrop-background, #00000080);
46
- }
40
+ &::backdrop {
41
+ animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
42
+ background: var(--bic-dialog-backdrop-background, #00000080);
43
+ }
47
44
 
48
- .bi-dialog[open] {
49
- animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out,
45
+ &[open] {
46
+ animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out,
50
47
  bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
51
- display: flex;
52
- }
48
+ display: flex;
49
+ }
53
50
 
54
- .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"]) {
55
- --bic-dialog-max-height: unset;
56
- border-radius: var(--bic-dialog-anchor-border-radius);
57
- transition: display var(--bic-dialog-animation-duration) allow-discrete,
51
+ &:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"]) {
52
+ --bic-dialog-max-height: unset;
53
+ border-radius: var(--bic-dialog-anchor-border-radius);
54
+ transition: display var(--bic-dialog-animation-duration) allow-discrete,
58
55
  overlay var(--bic-dialog-animation-duration) allow-discrete;
59
- transform: translate(var(--bic-dialog-anchor-closed-translate));
60
- animation: bi-dialog-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
61
- }
56
+ transform: translate(var(--bic-dialog-anchor-closed-translate));
57
+ animation: bi-dialog-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
62
58
 
63
- .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"])[open] {
64
- animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
65
- transform: translate(0);
66
- }
59
+ &[open] {
60
+ animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
61
+ transform: translate(0);
62
+ }
63
+ }
67
64
 
68
- .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"]) {
69
- min-height: var(--bic-dialog-anchor-block-min-height);
70
- max-height: calc(100dvh - var(--bi-layout-navbar-height));
71
- max-width: 100dvw;
72
- }
65
+ &:where([data-anchor="bottom"], [data-anchor="top"]) {
66
+ min-height: var(--bic-dialog-anchor-block-min-height);
67
+ max-height: calc(100dvh - var(--bi-layout-navbar-height));
68
+ max-width: 100dvw;
69
+ }
73
70
 
74
- .bi-dialog:where([data-anchor="left"], [data-anchor="right"]) {
75
- min-width: var(--bic-dialog-anchor-inline-min-width);
76
- max-width: var(--bic-dialog-anchor-inline-max-width);
77
- width: fit-content;
78
- height: 100dvh;
79
- }
71
+ &:where([data-anchor="left"], [data-anchor="right"]) {
72
+ min-width: var(--bic-dialog-anchor-inline-min-width);
73
+ max-width: var(--bic-dialog-anchor-inline-max-width);
74
+ width: fit-content;
75
+ height: 100dvh;
76
+ }
80
77
 
81
- .bi-dialog[data-anchor="bottom"] {
82
- --bic-dialog-anchor-closed-translate: 0, 100%;
83
- border-bottom-right-radius: 0;
84
- border-bottom-left-radius: 0;
85
- top: auto;
86
- }
78
+ &[data-anchor="bottom"] {
79
+ --bic-dialog-anchor-closed-translate: 0, 100%;
80
+ border-bottom-right-radius: 0;
81
+ border-bottom-left-radius: 0;
82
+ top: auto;
83
+ }
87
84
 
88
- .bi-dialog[data-anchor="top"] {
89
- --bic-dialog-anchor-closed-translate: 0, -100%;
90
- border-top-left-radius: 0;
91
- border-top-right-radius: 0;
92
- bottom: auto;
93
- }
85
+ &[data-anchor="top"] {
86
+ --bic-dialog-anchor-closed-translate: 0, -100%;
87
+ border-top-left-radius: 0;
88
+ border-top-right-radius: 0;
89
+ bottom: auto;
90
+ }
94
91
 
95
- .bi-dialog[data-anchor="left"] {
96
- --bic-dialog-anchor-closed-translate: -100%, 0;
97
- border-top-left-radius: 0;
98
- border-bottom-left-radius: 0;
99
- right: auto;
100
- }
92
+ &[data-anchor="left"] {
93
+ --bic-dialog-anchor-closed-translate: -100%, 0;
94
+ border-top-left-radius: 0;
95
+ border-bottom-left-radius: 0;
96
+ right: auto;
97
+ }
101
98
 
102
- .bi-dialog[data-anchor="right"] {
103
- --bic-dialog-anchor-closed-translate: 100%, 0;
104
- border-top-right-radius: 0;
105
- border-bottom-right-radius: 0;
106
- left: auto;
107
- }
99
+ &[data-anchor="right"] {
100
+ --bic-dialog-anchor-closed-translate: 100%, 0;
101
+ border-top-right-radius: 0;
102
+ border-bottom-right-radius: 0;
103
+ left: auto;
104
+ }
108
105
 
109
- @media (prefers-reduced-motion: reduce) {
110
- .bi-dialog[open], .bi-dialog::backdrop {
111
- animation: none;
106
+ @media (prefers-reduced-motion: reduce) {
107
+ &[open], &::backdrop {
108
+ animation: none;
109
+ }
112
110
  }
113
- }
114
111
 
115
- .bi-dialog > button.bi-dialog--close {
116
- top: var(--bic-dialog-icon-spacing);
117
- right: var(--bic-dialog-icon-spacing);
118
- position: absolute;
119
- }
112
+ & > button.bi-dialog--close {
113
+ top: var(--bic-dialog-icon-spacing);
114
+ right: var(--bic-dialog-icon-spacing);
115
+ position: absolute;
116
+ }
120
117
 
121
- .bi-dialog .bi-dialog--header {
122
- padding: var(--bic-dialog-padding);
123
- min-height: var(--bi-scale-16x);
124
- font: var(--bi-font-title-bold-medium);
125
- align-items: center;
126
- margin: 0;
127
- display: flex;
128
- }
118
+ & .bi-dialog--header {
119
+ padding: var(--bic-dialog-padding);
120
+ min-height: var(--bi-scale-16x);
121
+ font: var(--bi-font-title-bold-medium);
122
+ align-items: center;
123
+ margin: 0;
124
+ display: flex;
125
+ }
129
126
 
130
- .bi-dialog:has( > button.bi-dialog--close) .bi-dialog--header {
131
- padding-right: var(--bi-scale-14x);
132
- }
127
+ &:has( > button.bi-dialog--close) {
128
+ & .bi-dialog--header {
129
+ padding-right: var(--bi-scale-14x);
130
+ }
131
+ }
133
132
 
134
- .bi-dialog .bi-dialog--content {
135
- padding: var(--bic-dialog-padding);
136
- overflow-behavior: contain;
137
- overflow: auto;
138
- }
133
+ & .bi-dialog--content {
134
+ padding: var(--bic-dialog-padding);
135
+ overflow-behavior: contain;
136
+ overflow: auto;
137
+ }
139
138
 
140
- .bi-dialog .bi-dialog--footer {
141
- padding: var(--bic-dialog-padding);
142
- justify-content: flex-end;
143
- align-items: center;
144
- gap: var(--bi-scale-4x);
145
- margin-top: auto;
146
- display: flex;
147
- }
139
+ & .bi-dialog--footer {
140
+ padding: var(--bic-dialog-padding);
141
+ justify-content: flex-end;
142
+ align-items: center;
143
+ gap: var(--bi-scale-4x);
144
+ margin-top: auto;
145
+ display: flex;
146
+ }
148
147
 
149
- :is(.bi-dialog .bi-dialog--header, .bi-dialog .bi-dialog--content, .bi-dialog .bi-dialog--footer):not([data-no-border="true"]):not(:first-child) {
150
- border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
148
+ & .bi-dialog--header, & .bi-dialog--content, & .bi-dialog--footer {
149
+ &:not([data-no-border="true"]):not(:first-child) {
150
+ border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
151
+ }
152
+ }
151
153
  }
152
154
 
153
155
  body:has(.bi-dialog:modal) {
package/dist/components/dropdown.css CHANGED
@@ -9,17 +9,15 @@
9
9
  --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
10
10
  0px 2px 2px -1px #26333f0a;
11
11
  --bic-dropdown-min-width: var(--bi-scale-64x);
12
- }
13
12
 
14
- .bi-dropdown[data-dark="true"] {
15
- --bic-dropdown-background: var(--bi-neutral-100);
16
- --bic-dropdown-border-color: var(--bi-neutral-90);
17
- --bic-dropdown-color: var(--bi-neutral-5);
18
- --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
13
+ &[data-dark="true"] {
14
+ --bic-dropdown-background: var(--bi-neutral-100);
15
+ --bic-dropdown-border-color: var(--bi-neutral-90);
16
+ --bic-dropdown-color: var(--bi-neutral-5);
17
+ --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
19
18
  0px 2px 2px -1px #26333f0a;
20
- }
19
+ }
21
20
 
22
- .bi-dropdown {
23
21
  background: var(--bic-dropdown-background);
24
22
  border-radius: var(--bi-radius-medium);
25
23
  border-width: var(--bic-dropdown-border-width);
@@ -30,24 +28,24 @@
30
28
  min-width: max(var(--bic-dropdown-min-width), var(--bic-popover-trigger-width, 0px));
31
29
  padding: var(--bic-dropdown-padding);
32
30
  list-style: none;
33
- }
34
31
 
35
- .bi-dropdown ul {
36
- gap: var(--bi-scale-1x);
37
- flex-direction: column;
38
- margin: 0;
39
- padding: 0;
40
- list-style: none;
41
- display: flex;
42
- }
32
+ & ul {
33
+ gap: var(--bi-scale-1x);
34
+ flex-direction: column;
35
+ margin: 0;
36
+ padding: 0;
37
+ list-style: none;
38
+ display: flex;
39
+ }
43
40
 
44
- .bi-dropdown :is(a, button, [role="button"]) {
45
- padding: var(--bic-dropdown-item-padding);
46
- min-height: var(--bic-dropdown-item-size);
47
- justify-content: start;
48
- width: 100%;
49
- }
41
+ & :is(a, button, [role="button"]) {
42
+ padding: var(--bic-dropdown-item-padding);
43
+ min-height: var(--bic-dropdown-item-size);
44
+ justify-content: start;
45
+ width: 100%;
50
46
 
51
- .bi-dropdown :is(a, button, [role="button"]) .bi-button--end-icon {
52
- margin-left: auto;
47
+ & .bi-button--end-icon {
48
+ margin-left: auto;
49
+ }
50
+ }
53
51
  }