@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/card.css CHANGED
@@ -26,30 +26,28 @@
26
26
  --bic-card-box-shadow-active-color: #0000000d;
27
27
  --bic-card-box-shadow-active-outer-border: 20px;
28
28
  --bic-card-box-shadow-active-inner-border: 10px;
29
- }
30
29
 
31
- .bi-card[data-dark="true"] {
32
- --bic-card-background-color: var(--bi-neutral-90);
33
- --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
34
- --bic-card-border-color: var(--bi-neutral-70);
35
- --bic-card-color: var(--bi-neutral-5);
36
- --bic-card-header-title-color: var(--bi-neutral-5);
37
- --bic-card-header-bold-color: var(--bi-primary-20);
38
- --bic-card-header-label-color: var(--bi-neutral-30);
39
- --bic-card-content-color: var(--bi-neutral-30);
40
- --bic-card-actions-background-color: var(--bi-neutral-75);
41
- --bic-card-actions-icon-color: var(--bi-neutral-10);
42
- --bic-card-border-hover-color: var(--bi-neutral-25);
43
- --bic-card-box-shadow-hover-color: #b2cdf40d;
44
- --bic-card-box-shadow-focus-color: var(--bi-primary-30);
45
- --bic-card-box-shadow-focus-background-color: var(--bi-neutral-95);
46
- --bic-card-box-shadow-focus-outer-border: 4.5px;
47
- --bic-card-box-shadow-focus-inner-border: 4px;
48
- --bic-card-border-active-color: var(--bi-primary-50);
49
- --bic-card-box-shadow-active-color: #b2cdf40d;
50
- }
30
+ &[data-dark="true"] {
31
+ --bic-card-background-color: var(--bi-neutral-90);
32
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
33
+ --bic-card-border-color: var(--bi-neutral-70);
34
+ --bic-card-color: var(--bi-neutral-5);
35
+ --bic-card-header-title-color: var(--bi-neutral-5);
36
+ --bic-card-header-bold-color: var(--bi-primary-20);
37
+ --bic-card-header-label-color: var(--bi-neutral-30);
38
+ --bic-card-content-color: var(--bi-neutral-30);
39
+ --bic-card-actions-background-color: var(--bi-neutral-75);
40
+ --bic-card-actions-icon-color: var(--bi-neutral-10);
41
+ --bic-card-border-hover-color: var(--bi-neutral-25);
42
+ --bic-card-box-shadow-hover-color: #b2cdf40d;
43
+ --bic-card-box-shadow-focus-color: var(--bi-primary-30);
44
+ --bic-card-box-shadow-focus-background-color: var(--bi-neutral-95);
45
+ --bic-card-box-shadow-focus-outer-border: 4.5px;
46
+ --bic-card-box-shadow-focus-inner-border: 4px;
47
+ --bic-card-border-active-color: var(--bi-primary-50);
48
+ --bic-card-box-shadow-active-color: #b2cdf40d;
49
+ }
51
50
 
52
- .bi-card {
53
51
  width: 100%;
54
52
  box-shadow: var(--bic-card-box-shadow);
55
53
  border-radius: var(--bic-card-border-radius);
@@ -57,297 +55,285 @@
57
55
  color: var(--bic-card-color);
58
56
  flex-direction: row;
59
57
  display: flex;
60
- }
61
58
 
62
- .bi-card[data-orientation="horizontal"] > div:first-child {
63
- border-top-left-radius: var(--bic-card-border-radius);
64
- border-bottom-left-radius: var(--bic-card-border-radius);
65
- }
59
+ &[data-orientation="horizontal"] {
60
+ & > div:first-child {
61
+ border-top-left-radius: var(--bic-card-border-radius);
62
+ border-bottom-left-radius: var(--bic-card-border-radius);
63
+ }
66
64
 
67
- .bi-card[data-orientation="horizontal"] > div:last-child {
68
- border-top-right-radius: var(--bic-card-border-radius);
69
- border-bottom-right-radius: var(--bic-card-border-radius);
70
- }
65
+ & > div:last-child {
66
+ border-top-right-radius: var(--bic-card-border-radius);
67
+ border-bottom-right-radius: var(--bic-card-border-radius);
68
+ }
71
69
 
72
- .bi-card[data-orientation="horizontal"] {
73
- --bic-card-media-width: 15.75rem;
74
- }
70
+ --bic-card-media-width: 15.75rem;
75
71
 
76
- @media (width < 1024px) {
77
- .bi-card[data-orientation="horizontal"] {
78
- --bic-card-media-width: 14.5rem;
79
- }
80
- }
72
+ @media (width < 1024px) {
73
+ --bic-card-media-width: 14.5rem;
74
+ }
81
75
 
82
- @media (width < 600px) {
83
- .bi-card[data-orientation="horizontal"] {
84
- --bic-card-media-width: 8.4375rem;
76
+ @media (width < 600px) {
77
+ --bic-card-media-width: 8.4375rem;
78
+ }
85
79
  }
86
- }
87
-
88
- .bi-card[data-orientation="vertical"] {
89
- --bic-card-actions-flex-direction: row;
90
- --bic-card-content-lines: 4;
91
- --bic-card-media-date-width: 4rem;
92
- --bic-card-media-date-height: 3.5625rem;
93
- flex-direction: column;
94
- }
95
-
96
- .bi-card[data-orientation="vertical"] > div:first-child {
97
- border-top-left-radius: var(--bic-card-border-radius);
98
- border-top-right-radius: var(--bic-card-border-radius);
99
- }
100
-
101
- .bi-card[data-orientation="vertical"] > div:last-child {
102
- border-bottom-left-radius: var(--bic-card-border-radius);
103
- border-bottom-right-radius: var(--bic-card-border-radius);
104
- }
105
-
106
- .bi-card[data-orientation="vertical"] .bi-card--actions {
107
- width: 100%;
108
- }
109
80
 
110
- .bi-card[data-color="info"] {
111
- --bic-card-background-color: var(--bi-info-5);
112
- --bic-card-color: var(--bi-info-90);
113
- --bic-card-border-color: var(--bi-info-15);
114
- --bic-card-header-title-color: var(--bi-info-90);
115
- --bic-card-header-bold-color: var(--bi-info-90);
116
- --bic-card-header-label-color: var(--bi-info-90);
117
- }
118
-
119
- .bi-card[data-color="warning"] {
120
- --bic-card-background-color: var(--bi-warning-10);
121
- --bic-card-color: var(--bi-warning-90);
122
- --bic-card-border-color: var(--bi-warning-15);
123
- --bic-card-header-title-color: var(--bi-warning-90);
124
- --bic-card-header-bold-color: var(--bi-warning-90);
125
- --bic-card-header-label-color: var(--bi-warning-90);
126
- }
81
+ &[data-orientation="vertical"] {
82
+ --bic-card-actions-flex-direction: row;
83
+ --bic-card-content-lines: 4;
84
+ --bic-card-media-date-width: 4rem;
85
+ --bic-card-media-date-height: 3.5625rem;
86
+ flex-direction: column;
87
+
88
+ & > div:first-child {
89
+ border-top-left-radius: var(--bic-card-border-radius);
90
+ border-top-right-radius: var(--bic-card-border-radius);
91
+ }
92
+
93
+ & > div:last-child {
94
+ border-bottom-left-radius: var(--bic-card-border-radius);
95
+ border-bottom-right-radius: var(--bic-card-border-radius);
96
+ }
97
+
98
+ & .bi-card--actions {
99
+ width: 100%;
100
+ }
101
+ }
127
102
 
128
- .bi-card[data-color="primary"][data-dark="true"] {
129
- --bic-card-background-color: var(--bi-primary-90);
130
- --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-primary-75);
131
- --bic-card-border-color: var(--bi-primary-75);
132
- --bic-card-color: var(--bi-neutral-5);
133
- --bic-card-header-title-color: var(--bi-neutral-5);
134
- --bic-card-header-bold-color: var(--bi-primary-20);
135
- --bic-card-header-label-color: var(--bi-neutral-30);
136
- --bic-card-content-color: var(--bi-neutral-30);
137
- --bic-card-actions-background-color: var(--bi-primary-85);
138
- --bic-card-actions-icon-color: var(--bi-primary-10);
139
- --bic-card-border-hover-color: var(--bi-primary-40);
140
- --bic-card-box-shadow-focus-color: var(--bi-neutral-15);
141
- --bic-card-box-shadow-focus-background-color: var(--bi-primary-30);
142
- --bic-card-border-active-color: var(--bi-primary-10);
143
- }
103
+ &[data-color="info"] {
104
+ --bic-card-background-color: var(--bi-info-5);
105
+ --bic-card-color: var(--bi-info-90);
106
+ --bic-card-border-color: var(--bi-info-15);
107
+ --bic-card-header-title-color: var(--bi-info-90);
108
+ --bic-card-header-bold-color: var(--bi-info-90);
109
+ --bic-card-header-label-color: var(--bi-info-90);
110
+ }
144
111
 
145
- .bi-card[data-error="true"] {
146
- box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
147
- --bic-card-border-color: transparent;
148
- }
112
+ &[data-color="warning"] {
113
+ --bic-card-background-color: var(--bi-warning-10);
114
+ --bic-card-color: var(--bi-warning-90);
115
+ --bic-card-border-color: var(--bi-warning-15);
116
+ --bic-card-header-title-color: var(--bi-warning-90);
117
+ --bic-card-header-bold-color: var(--bi-warning-90);
118
+ --bic-card-header-label-color: var(--bi-warning-90);
119
+ }
149
120
 
150
- .bi-card .bi-card--content {
151
- padding: var(--bic-card-content-padding);
152
- gap: var(--bi-scale-4x);
153
- border-radius: inherit;
154
- background: none;
155
- border: none;
156
- flex-direction: column;
157
- flex: auto;
158
- display: flex;
159
- overflow: hidden;
160
- }
121
+ &[data-color="primary"][data-dark="true"] {
122
+ --bic-card-background-color: var(--bi-primary-90);
123
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-primary-75);
124
+ --bic-card-border-color: var(--bi-primary-75);
125
+ --bic-card-color: var(--bi-neutral-5);
126
+ --bic-card-header-title-color: var(--bi-neutral-5);
127
+ --bic-card-header-bold-color: var(--bi-primary-20);
128
+ --bic-card-header-label-color: var(--bi-neutral-30);
129
+ --bic-card-content-color: var(--bi-neutral-30);
130
+ --bic-card-actions-background-color: var(--bi-primary-85);
131
+ --bic-card-actions-icon-color: var(--bi-primary-10);
132
+ --bic-card-border-hover-color: var(--bi-primary-40);
133
+ --bic-card-box-shadow-focus-color: var(--bi-neutral-15);
134
+ --bic-card-box-shadow-focus-background-color: var(--bi-primary-30);
135
+ --bic-card-border-active-color: var(--bi-primary-10);
136
+ }
161
137
 
162
- .bi-card .bi-card--content > p {
163
- color: var(--bic-card-content-color);
164
- font: var(--bi-font-body-medium);
165
- white-space: break-spaces;
166
- text-overflow: ellipsis;
167
- -webkit-line-clamp: var(--bic-card-content-lines);
168
- line-clamp: var(--bic-card-content-lines);
169
- -webkit-box-orient: vertical;
170
- margin: 0;
171
- display: -webkit-box;
172
- overflow: hidden;
173
- }
138
+ &[data-error="true"] {
139
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
140
+ --bic-card-border-color: transparent;
141
+ }
174
142
 
175
- @media (width < 600px) {
176
- .bi-card .bi-card--content {
177
- --bic-card-content-padding: var(--bi-scale-3x);
178
- gap: var(--bi-scale-3x);
143
+ & .bi-card--content {
144
+ padding: var(--bic-card-content-padding);
145
+ gap: var(--bi-scale-4x);
146
+ border-radius: inherit;
147
+ background: none;
148
+ border: none;
149
+ flex-direction: column;
150
+ flex: auto;
151
+ display: flex;
152
+ overflow: hidden;
153
+
154
+ & > p {
155
+ color: var(--bic-card-content-color);
156
+ font: var(--bi-font-body-medium);
157
+ white-space: break-spaces;
158
+ text-overflow: ellipsis;
159
+ -webkit-line-clamp: var(--bic-card-content-lines);
160
+ line-clamp: var(--bic-card-content-lines);
161
+ -webkit-box-orient: vertical;
162
+ margin: 0;
163
+ display: -webkit-box;
164
+ overflow: hidden;
165
+ }
166
+
167
+ @media (width < 600px) {
168
+ --bic-card-content-padding: var(--bi-scale-3x);
169
+ gap: var(--bi-scale-3x);
170
+ }
179
171
  }
180
- }
181
172
 
182
- :is(.bi-card, .bi-card .bi-card--content):is(a, button) {
183
- cursor: pointer;
184
- text-decoration: none;
185
- transition: box-shadow .25s ease-in-out;
186
- position: relative;
187
- }
173
+ &, & .bi-card--content {
174
+ &:is(a, button) {
175
+ cursor: pointer;
176
+ text-decoration: none;
177
+ transition: box-shadow .25s ease-in-out;
178
+ position: relative;
188
179
 
189
- :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible {
190
- box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color),
180
+ &:not(.disabled) {
181
+ &:focus-visible {
182
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color),
191
183
  0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
192
- outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
193
- outline-offset: var(--_bi--focus, 2px);
194
- }
184
+ outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
185
+ outline-offset: var(--_bi--focus, 2px);
195
186
 
196
- :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible * {
197
- --_bi--focus: ;
198
- }
187
+ & * {
188
+ --_bi--focus: ;
189
+ }
190
+ }
199
191
 
200
- @media (hover: hover) and (pointer: fine) {
201
- :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):hover {
202
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
192
+ @media (hover: hover) and (pointer: fine) {
193
+ &:hover {
194
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
203
195
  0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
204
196
  0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
205
- }
206
- }
197
+ }
198
+ }
207
199
 
208
- :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):active {
209
- box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color),
200
+ &:active {
201
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color),
210
202
  0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
211
203
  0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
212
- }
213
-
214
- :is(.bi-card, .bi-card .bi-card--content):is(a, button):disabled {
215
- cursor: not-allowed;
216
- }
217
-
218
- .bi-card .bi-card--actions {
219
- flex-direction: var(--bic-card-actions-flex-direction, column);
220
- justify-content: center;
221
- gap: var(--bi-scale-1x);
222
- width: var(--bi-scale-14x);
223
- background-color: var(--bic-card-actions-background-color);
224
- display: flex;
225
- }
226
-
227
- @media (width < 600px) {
228
- .bi-card .bi-card--actions {
229
- width: var(--bi-scale-11x);
230
- }
231
- }
204
+ }
205
+ }
232
206
 
233
- .bi-card .bi-card--actions .bi-card--action {
234
- --bic-button-font-size: var(--bi-icon-medium);
235
- --bic-button-color: var(--bic-card-actions-icon-color);
236
- --bic-button-size: var(--bi-scale-14x);
237
- flex: 1;
238
- }
239
-
240
- @media (width < 600px) {
241
- .bi-card .bi-card--actions .bi-card--action {
242
- --bic-button-size: var(--bi-scale-11x);
207
+ &:disabled {
208
+ cursor: not-allowed;
209
+ }
210
+ }
243
211
  }
244
- }
245
-
246
- .bi-card .bi-card--header {
247
- font: var(--bi-font-body-medium);
248
- gap: var(--bi-scale-0-50x);
249
- word-wrap: break-word;
250
- word-break: break-word;
251
- flex-direction: column;
252
- width: 100%;
253
- display: flex;
254
- }
255
212
 
256
- .bi-card .bi-card--header .bi-card--header-label {
257
- color: var(--bic-card-header-label-color);
258
- margin: 0;
259
- }
260
-
261
- @media (width < 600px) {
262
- .bi-card .bi-card--header .bi-card--header-label {
263
- font: var(--bi-font-body-small);
213
+ & .bi-card--actions {
214
+ flex-direction: var(--bic-card-actions-flex-direction, column);
215
+ justify-content: center;
216
+ gap: var(--bi-scale-1x);
217
+ width: var(--bi-scale-14x);
218
+ background-color: var(--bic-card-actions-background-color);
219
+ display: flex;
220
+
221
+ @media (width < 600px) {
222
+ width: var(--bi-scale-11x);
223
+ }
224
+
225
+ & .bi-card--action {
226
+ --bic-button-font-size: var(--bi-icon-medium);
227
+ --bic-button-color: var(--bic-card-actions-icon-color);
228
+ --bic-button-size: var(--bi-scale-14x);
229
+ flex: 1;
230
+
231
+ @media (width < 600px) {
232
+ --bic-button-size: var(--bi-scale-11x);
233
+ }
234
+ }
264
235
  }
265
- }
266
236
 
267
- .bi-card .bi-card--header .bi-card--header-label .bi-card--header-bold {
268
- color: var(--bic-card-header-bold-color);
269
- font-weight: var(--bi-font-weight-bold);
270
- }
271
-
272
- .bi-card .bi-card--header .bi-card--header-label .bi-card--header-dot {
273
- width: var(--bi-scale-0-50x);
274
- height: var(--bi-scale-0-50x);
275
- margin: auto var(--bi-scale-1x);
276
- vertical-align: middle;
277
- background-color: currentColor;
278
- border-radius: 50%;
279
- display: inline-block;
280
- }
281
-
282
- .bi-card .bi-card--header .bi-card--header-title {
283
- font: var(--bi-font-title-bold-small);
284
- color: var(--bic-card-header-title-color);
285
- text-overflow: ellipsis;
286
- -webkit-line-clamp: 2;
287
- line-clamp: 2;
288
- -webkit-box-orient: vertical;
289
- margin: 0;
290
- display: -webkit-box;
291
- overflow: hidden;
292
- }
293
-
294
- @media (width < 600px) {
295
- .bi-card .bi-card--header .bi-card--header-title {
296
- font: var(--bi-font-title-bold-xs);
237
+ & .bi-card--header {
238
+ font: var(--bi-font-body-medium);
239
+ gap: var(--bi-scale-0-50x);
240
+ word-wrap: break-word;
241
+ word-break: break-word;
242
+ flex-direction: column;
243
+ width: 100%;
244
+ display: flex;
245
+
246
+ & .bi-card--header-label {
247
+ color: var(--bic-card-header-label-color);
248
+ margin: 0;
249
+
250
+ @media (width < 600px) {
251
+ font: var(--bi-font-body-small);
252
+ }
253
+
254
+ & .bi-card--header-bold {
255
+ color: var(--bic-card-header-bold-color);
256
+ font-weight: var(--bi-font-weight-bold);
257
+ }
258
+
259
+ & .bi-card--header-dot {
260
+ width: var(--bi-scale-0-50x);
261
+ height: var(--bi-scale-0-50x);
262
+ margin: auto var(--bi-scale-1x);
263
+ vertical-align: middle;
264
+ background-color: currentColor;
265
+ border-radius: 50%;
266
+ display: inline-block;
267
+ }
268
+ }
269
+
270
+ & .bi-card--header-title {
271
+ font: var(--bi-font-title-bold-small);
272
+ color: var(--bic-card-header-title-color);
273
+ text-overflow: ellipsis;
274
+ -webkit-line-clamp: 2;
275
+ line-clamp: 2;
276
+ -webkit-box-orient: vertical;
277
+ margin: 0;
278
+ display: -webkit-box;
279
+ overflow: hidden;
280
+
281
+ @media (width < 600px) {
282
+ font: var(--bi-font-title-bold-xs);
283
+ }
284
+ }
297
285
  }
298
- }
299
-
300
- .bi-card .bi-card--media {
301
- width: var(--bic-card-media-width);
302
- min-width: var(--bic-card-media-width);
303
- display: block;
304
- position: relative;
305
- }
306
-
307
- .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
308
- border-radius: inherit;
309
- object-fit: cover;
310
- aspect-ratio: 4 / 3;
311
- width: 100%;
312
- display: block;
313
- }
314
286
 
315
- @media (width < 600px) {
316
- .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
317
- aspect-ratio: 3 / 2;
287
+ & .bi-card--media {
288
+ width: var(--bic-card-media-width);
289
+ min-width: var(--bic-card-media-width);
290
+ display: block;
291
+ position: relative;
292
+
293
+ & > :is(audio, figure, iframe, img, video) {
294
+ border-radius: inherit;
295
+ object-fit: cover;
296
+ aspect-ratio: 4 / 3;
297
+ width: 100%;
298
+ display: block;
299
+
300
+ @media (width < 600px) {
301
+ aspect-ratio: 3 / 2;
302
+ }
303
+ }
304
+
305
+ & .bi-card--media-overlay {
306
+ top: var(--bi-scale-4x);
307
+ left: var(--bi-scale-4x);
308
+ right: var(--bi-scale-4x);
309
+ flex-wrap: wrap;
310
+ width: fit-content;
311
+ display: flex;
312
+ position: absolute;
313
+ }
318
314
  }
319
- }
320
-
321
- .bi-card .bi-card--media .bi-card--media-overlay {
322
- top: var(--bi-scale-4x);
323
- left: var(--bi-scale-4x);
324
- right: var(--bi-scale-4x);
325
- flex-wrap: wrap;
326
- width: fit-content;
327
- display: flex;
328
- position: absolute;
329
- }
330
315
 
331
- .bi-card .bi-card--date {
332
- width: var(--bic-card-media-date-width);
333
- height: var(--bic-card-media-date-height);
334
- padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
335
- border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
336
- background: var(--bic-card-background-color);
337
- box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d,
316
+ & .bi-card--date {
317
+ width: var(--bic-card-media-date-width);
318
+ height: var(--bic-card-media-date-height);
319
+ padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
320
+ border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
321
+ background: var(--bic-card-background-color);
322
+ box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d,
338
323
  0px 4px 6px 0px #26333f0d;
339
- color: var(--bic-card-header-title-color);
340
- text-align: center;
341
- font: var(--bi-font-title-bold-medium);
342
- flex-direction: column;
343
- justify-content: center;
344
- align-items: center;
345
- margin: 0;
346
- display: flex;
347
- }
348
-
349
- .bi-card .bi-card--date span {
350
- color: var(--bic-card-header-bold-color);
351
- font-size: .8125rem;
352
- line-height: 1.15;
324
+ color: var(--bic-card-header-title-color);
325
+ text-align: center;
326
+ font: var(--bi-font-title-bold-medium);
327
+ flex-direction: column;
328
+ justify-content: center;
329
+ align-items: center;
330
+ margin: 0;
331
+ display: flex;
332
+
333
+ & span {
334
+ color: var(--bic-card-header-bold-color);
335
+ font-size: .8125rem;
336
+ line-height: 1.15;
337
+ }
338
+ }
353
339
  }
package/dist/components/checkbox-subsection.css CHANGED
@@ -1,22 +1,22 @@
1
1
  .bi-checkbox-subsection {
2
2
  --bic-checkbox-subsection-line-bg: var(--bi-neutral-30);
3
3
  display: flex;
4
- }
5
4
 
6
- .bi-checkbox-subsection[data-dark="true"] {
7
- --bic-checkbox-subsection-line-bg: var(--bi-neutral-50);
8
- }
5
+ &[data-dark="true"] {
6
+ --bic-checkbox-subsection-line-bg: var(--bi-neutral-50);
7
+ }
9
8
 
10
- .bi-checkbox-subsection > div:first-child {
11
- margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
12
- background-color: var(--bic-checkbox-subsection-line-bg);
13
- width: var(--bi-stroke-medium);
14
- }
9
+ & > div:first-child {
10
+ margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
11
+ background-color: var(--bic-checkbox-subsection-line-bg);
12
+ width: var(--bi-stroke-medium);
13
+ }
15
14
 
16
- .bi-checkbox-subsection > div:last-child {
17
- align-items: flex-start;
18
- gap: var(--bi-scale-0-50x);
19
- flex-direction: column;
20
- flex: 1;
21
- display: flex;
15
+ & > div:last-child {
16
+ align-items: flex-start;
17
+ gap: var(--bi-scale-0-50x);
18
+ flex-direction: column;
19
+ flex: 1;
20
+ display: flex;
21
+ }
22
22
  }