@boostdev/design-system-components 2.0.0 → 2.2.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/AGENTS.md +2 -1
- package/README.md +42 -1
- package/dist/client.cjs +305 -60
- package/dist/client.css +577 -523
- package/dist/client.d.cts +42 -2
- package/dist/client.d.ts +42 -2
- package/dist/client.js +311 -60
- package/dist/index.cjs +305 -60
- package/dist/index.css +577 -523
- package/dist/index.d.cts +42 -2
- package/dist/index.d.ts +42 -2
- package/dist/index.js +311 -60
- package/dist/native/index.cjs +5 -2
- package/dist/native/index.d.cts +3 -1
- package/dist/native/index.d.ts +3 -1
- package/dist/native/index.js +5 -2
- package/dist/web-components/{chunk-3REOIRDW.js → chunk-N3TN6WCH.js} +26 -1
- package/dist/web-components/index.d.ts +129 -1
- package/dist/web-components/index.js +312 -1
- package/dist/web-components/interaction/bds-button.d.ts +7 -0
- package/dist/web-components/interaction/bds-button.js +1 -1
- package/package.json +1 -1
- package/src/components/interaction/Button/Button.mdx +81 -36
- package/src/components/interaction/Button/Button.module.css +24 -0
- package/src/components/interaction/Button/Button.native.mdx +31 -12
- package/src/components/interaction/Button/Button.native.spec.tsx +20 -0
- package/src/components/interaction/Button/Button.native.stories.tsx +110 -9
- package/src/components/interaction/Button/Button.native.tsx +13 -4
- package/src/components/interaction/Button/Button.spec.tsx +16 -0
- package/src/components/interaction/Button/Button.stories.tsx +134 -16
- package/src/components/interaction/Button/Button.tsx +4 -0
- package/src/components/layout/Grid/Grid.mdx +244 -0
- package/src/components/layout/Grid/Grid.module.css +59 -0
- package/src/components/layout/Grid/Grid.spec.tsx +401 -0
- package/src/components/layout/Grid/Grid.stories.tsx +160 -0
- package/src/components/layout/Grid/Grid.tsx +85 -0
- package/src/components/layout/Grid/GridItem.tsx +150 -0
- package/src/components/layout/Grid/autoSpan.ts +77 -0
- package/src/components/layout/Grid/index.ts +4 -0
- package/src/components/layout/Grid/masonry.ts +134 -0
- package/src/components/layout/IconWrapper/IconWrapper.stories.tsx +46 -14
- package/src/index.ts +2 -0
- package/src/web-components/index.ts +4 -0
- package/src/web-components/interaction/BdsButton.mdx +46 -14
- package/src/web-components/interaction/BdsButton.stories.tsx +171 -19
- package/src/web-components/interaction/bds-button.spec.ts +35 -0
- package/src/web-components/interaction/bds-button.ts +28 -1
- package/src/web-components/layout/BdsGrid.mdx +210 -0
- package/src/web-components/layout/BdsGrid.stories.tsx +209 -0
- package/src/web-components/layout/BdsGridItem.mdx +52 -0
- package/src/web-components/layout/BdsGridItem.stories.tsx +72 -0
- package/src/web-components/layout/bds-grid-item.spec.ts +102 -0
- package/src/web-components/layout/bds-grid-item.ts +177 -0
- package/src/web-components/layout/bds-grid.spec.ts +62 -0
- package/src/web-components/layout/bds-grid.ts +184 -0
package/dist/client.css
CHANGED
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
/* src/components/ui/Accordion/Accordion.module.css */
|
|
30
|
-
@layer boostdev.
|
|
31
|
-
.
|
|
30
|
+
@layer boostdev.bds220Accordion-component {
|
|
31
|
+
.bds220Accordion-accordion {
|
|
32
32
|
display: flex;
|
|
33
33
|
flex-direction: column;
|
|
34
34
|
border: var(--accordion_border, none);
|
|
@@ -38,16 +38,16 @@
|
|
|
38
38
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
39
39
|
overflow: hidden;
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
.bds220Accordion-item {
|
|
42
42
|
border-block-end: 1px solid var(--bds-color_bg--subtle);
|
|
43
43
|
}
|
|
44
|
-
.
|
|
44
|
+
.bds220Accordion-item:last-child {
|
|
45
45
|
border-block-end: none;
|
|
46
46
|
}
|
|
47
|
-
.
|
|
47
|
+
.bds220Accordion-heading {
|
|
48
48
|
margin: 0;
|
|
49
49
|
}
|
|
50
|
-
.
|
|
50
|
+
.bds220Accordion-trigger {
|
|
51
51
|
all: unset;
|
|
52
52
|
display: flex;
|
|
53
53
|
align-items: center;
|
|
@@ -62,52 +62,52 @@
|
|
|
62
62
|
transition: var(--bds-animation_transition);
|
|
63
63
|
box-sizing: border-box;
|
|
64
64
|
}
|
|
65
|
-
.
|
|
65
|
+
.bds220Accordion-trigger:disabled {
|
|
66
66
|
opacity: 0.4;
|
|
67
67
|
cursor: not-allowed;
|
|
68
68
|
}
|
|
69
|
-
.
|
|
69
|
+
.bds220Accordion-trigger:focus-visible {
|
|
70
70
|
outline: var(--bds-outline_default);
|
|
71
71
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
72
72
|
border-radius: var(--bds-border_radius--xs);
|
|
73
73
|
}
|
|
74
74
|
@media (hover: hover) and (pointer: fine) {
|
|
75
|
-
.
|
|
75
|
+
.bds220Accordion-trigger:not(:disabled):hover {
|
|
76
76
|
background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
-
.
|
|
79
|
+
.bds220Accordion-triggerLabel {
|
|
80
80
|
flex: 1;
|
|
81
81
|
text-align: start;
|
|
82
82
|
}
|
|
83
|
-
.
|
|
83
|
+
.bds220Accordion-chevron {
|
|
84
84
|
inline-size: 1.25rem;
|
|
85
85
|
block-size: 1.25rem;
|
|
86
86
|
flex-shrink: 0;
|
|
87
87
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
88
88
|
}
|
|
89
|
-
.
|
|
89
|
+
.bds220Accordion-item.bds220Accordion---open .bds220Accordion-chevron {
|
|
90
90
|
transform: rotate(180deg);
|
|
91
91
|
}
|
|
92
|
-
.
|
|
92
|
+
.bds220Accordion-panel {
|
|
93
93
|
overflow: hidden;
|
|
94
94
|
}
|
|
95
|
-
.
|
|
95
|
+
.bds220Accordion-panelContent {
|
|
96
96
|
padding: 0 var(--bds-space_m) var(--bds-space_m);
|
|
97
97
|
color: var(--bds-color_on-bg);
|
|
98
98
|
font-size: var(--bds-font_size--body);
|
|
99
99
|
line-height: var(--bds-font_line-height--body);
|
|
100
100
|
}
|
|
101
101
|
@media (prefers-reduced-motion: reduce) {
|
|
102
|
-
.
|
|
102
|
+
.bds220Accordion-chevron {
|
|
103
103
|
transition: none;
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
/* src/components/ui/Alert/Alert.module.css */
|
|
109
|
-
@layer boostdev.
|
|
110
|
-
.
|
|
109
|
+
@layer boostdev.bds220Alert-component {
|
|
110
|
+
.bds220Alert-alert {
|
|
111
111
|
display: flex;
|
|
112
112
|
align-items: flex-start;
|
|
113
113
|
gap: var(--bds-space_s);
|
|
@@ -119,43 +119,43 @@
|
|
|
119
119
|
font-size: var(--bds-font_size--body);
|
|
120
120
|
line-height: var(--bds-font_line-height--body);
|
|
121
121
|
}
|
|
122
|
-
.
|
|
122
|
+
.bds220Alert---variant_info {
|
|
123
123
|
--alert_bg: var(--bds-color_blue--subtle);
|
|
124
124
|
--alert_text: var(--bds-color_on-blue--subtle);
|
|
125
125
|
--alert_border: var(--bds-color_blue);
|
|
126
126
|
}
|
|
127
|
-
.
|
|
127
|
+
.bds220Alert---variant_success {
|
|
128
128
|
--alert_bg: var(--bds-color_success--subtle);
|
|
129
129
|
--alert_text: var(--bds-color_on-success--subtle);
|
|
130
130
|
--alert_border: var(--bds-color_success);
|
|
131
131
|
}
|
|
132
|
-
.
|
|
132
|
+
.bds220Alert---variant_warning {
|
|
133
133
|
--alert_bg: var(--bds-color_orange--subtle);
|
|
134
134
|
--alert_text: var(--bds-color_on-orange--subtle);
|
|
135
135
|
--alert_border: var(--bds-color_warning);
|
|
136
136
|
}
|
|
137
|
-
.
|
|
137
|
+
.bds220Alert---variant_error {
|
|
138
138
|
--alert_bg: rgb(from var(--bds-color_error) r g b / 12%);
|
|
139
139
|
--alert_text: var(--bds-color_on-bg);
|
|
140
140
|
--alert_border: var(--bds-color_error);
|
|
141
141
|
}
|
|
142
|
-
.
|
|
142
|
+
.bds220Alert-icon {
|
|
143
143
|
display: flex;
|
|
144
144
|
align-items: center;
|
|
145
145
|
flex-shrink: 0;
|
|
146
146
|
margin-block-start: 0.1em;
|
|
147
147
|
}
|
|
148
|
-
.
|
|
148
|
+
.bds220Alert-content {
|
|
149
149
|
flex: 1;
|
|
150
150
|
display: flex;
|
|
151
151
|
flex-direction: column;
|
|
152
152
|
gap: var(--bds-space_xxs);
|
|
153
153
|
}
|
|
154
|
-
.
|
|
154
|
+
.bds220Alert-title {
|
|
155
155
|
font-weight: var(--bds-font_weight--semibold);
|
|
156
156
|
font-size: var(--bds-font_size--body);
|
|
157
157
|
}
|
|
158
|
-
.
|
|
158
|
+
.bds220Alert-dismiss {
|
|
159
159
|
all: unset;
|
|
160
160
|
display: flex;
|
|
161
161
|
align-items: center;
|
|
@@ -169,24 +169,24 @@
|
|
|
169
169
|
--bdc_color: currentcolor;
|
|
170
170
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
171
171
|
}
|
|
172
|
-
.
|
|
172
|
+
.bds220Alert-dismiss svg {
|
|
173
173
|
width: 1rem;
|
|
174
174
|
height: 1rem;
|
|
175
175
|
}
|
|
176
|
-
.
|
|
176
|
+
.bds220Alert-dismiss:focus-visible {
|
|
177
177
|
outline: var(--bds-outline_default);
|
|
178
178
|
outline-offset: var(--bds-outline_offset);
|
|
179
179
|
}
|
|
180
180
|
@media (hover: hover) and (pointer: fine) {
|
|
181
|
-
.
|
|
181
|
+
.bds220Alert-dismiss:hover {
|
|
182
182
|
opacity: var(--alert_dismiss-opacity--hover, 0.7);
|
|
183
183
|
}
|
|
184
184
|
}
|
|
185
185
|
}
|
|
186
186
|
|
|
187
187
|
/* src/components/ui/Avatar/Avatar.module.css */
|
|
188
|
-
@layer boostdev.
|
|
189
|
-
.
|
|
188
|
+
@layer boostdev.bds220Avatar-component {
|
|
189
|
+
.bds220Avatar-avatar {
|
|
190
190
|
display: inline-flex;
|
|
191
191
|
align-items: center;
|
|
192
192
|
justify-content: center;
|
|
@@ -196,42 +196,42 @@
|
|
|
196
196
|
overflow: hidden;
|
|
197
197
|
flex-shrink: 0;
|
|
198
198
|
}
|
|
199
|
-
.
|
|
199
|
+
.bds220Avatar-avatar.bds220Avatar---fallback {
|
|
200
200
|
background-color: var(--avatar_bg, var(--bds-color_blue));
|
|
201
201
|
color: var(--avatar_text, var(--bds-color_on-blue));
|
|
202
202
|
font-weight: var(--bds-font_weight--semibold);
|
|
203
203
|
}
|
|
204
|
-
.
|
|
204
|
+
.bds220Avatar-avatar.bds220Avatar---size_small {
|
|
205
205
|
--avatar_size: 2em;
|
|
206
206
|
}
|
|
207
|
-
.
|
|
207
|
+
.bds220Avatar-avatar.bds220Avatar---size_medium {
|
|
208
208
|
--avatar_size: 3em;
|
|
209
209
|
}
|
|
210
|
-
.
|
|
210
|
+
.bds220Avatar-avatar.bds220Avatar---size_large {
|
|
211
211
|
--avatar_size: 4.5em;
|
|
212
212
|
}
|
|
213
|
-
.
|
|
213
|
+
.bds220Avatar-image {
|
|
214
214
|
width: 100%;
|
|
215
215
|
height: 100%;
|
|
216
216
|
object-fit: cover;
|
|
217
217
|
display: block;
|
|
218
218
|
}
|
|
219
|
-
.
|
|
219
|
+
.bds220Avatar-initials {
|
|
220
220
|
line-height: 1;
|
|
221
221
|
user-select: none;
|
|
222
222
|
font-size: var(--bds-font_size--body);
|
|
223
223
|
}
|
|
224
|
-
.
|
|
224
|
+
.bds220Avatar-avatar.bds220Avatar---size_small .bds220Avatar-initials {
|
|
225
225
|
font-size: var(--bds-font_size--body--s);
|
|
226
226
|
}
|
|
227
|
-
.
|
|
227
|
+
.bds220Avatar-avatar.bds220Avatar---size_large .bds220Avatar-initials {
|
|
228
228
|
font-size: var(--bds-font_size--heading-3);
|
|
229
229
|
}
|
|
230
230
|
}
|
|
231
231
|
|
|
232
232
|
/* src/components/ui/Badge/Badge.module.css */
|
|
233
|
-
@layer boostdev.
|
|
234
|
-
.
|
|
233
|
+
@layer boostdev.bds220Badge-component {
|
|
234
|
+
.bds220Badge-badge {
|
|
235
235
|
display: inline-flex;
|
|
236
236
|
align-items: center;
|
|
237
237
|
justify-content: center;
|
|
@@ -244,34 +244,34 @@
|
|
|
244
244
|
background-color: var(--badge_bg, var(--bds-color_blue));
|
|
245
245
|
color: var(--badge_text, var(--bds-color_on-blue));
|
|
246
246
|
}
|
|
247
|
-
.
|
|
247
|
+
.bds220Badge---variant_primary {
|
|
248
248
|
--badge_bg: var(--bds-color_interactive);
|
|
249
249
|
--badge_text: var(--bds-color_on-interactive);
|
|
250
250
|
}
|
|
251
|
-
.
|
|
251
|
+
.bds220Badge---variant_secondary {
|
|
252
252
|
--badge_bg: var(--bds-color_bg);
|
|
253
253
|
--badge_text: var(--bds-color_on-bg);
|
|
254
254
|
}
|
|
255
|
-
.
|
|
255
|
+
.bds220Badge---variant_success {
|
|
256
256
|
--badge_bg: var(--bds-color_success);
|
|
257
257
|
--badge_text: var(--bds-color_on-success);
|
|
258
258
|
}
|
|
259
|
-
.
|
|
259
|
+
.bds220Badge---variant_error {
|
|
260
260
|
--badge_bg: var(--bds-color_error);
|
|
261
261
|
--badge_text: var(--bds-color_on-error);
|
|
262
262
|
}
|
|
263
|
-
.
|
|
263
|
+
.bds220Badge---variant_warning {
|
|
264
264
|
--badge_bg: var(--bds-color_warning);
|
|
265
265
|
--badge_text: var(--bds-color_on-warning);
|
|
266
266
|
}
|
|
267
267
|
}
|
|
268
268
|
|
|
269
269
|
/* src/components/ui/Breadcrumb/Breadcrumb.module.css */
|
|
270
|
-
@layer boostdev.
|
|
271
|
-
.
|
|
270
|
+
@layer boostdev.bds220Breadcrumb-component {
|
|
271
|
+
.bds220Breadcrumb-breadcrumb {
|
|
272
272
|
font-size: var(--bds-font_size--body--s);
|
|
273
273
|
}
|
|
274
|
-
.
|
|
274
|
+
.bds220Breadcrumb-list {
|
|
275
275
|
display: flex;
|
|
276
276
|
flex-wrap: wrap;
|
|
277
277
|
align-items: center;
|
|
@@ -280,45 +280,45 @@
|
|
|
280
280
|
margin: 0;
|
|
281
281
|
padding: 0;
|
|
282
282
|
}
|
|
283
|
-
.
|
|
283
|
+
.bds220Breadcrumb-item {
|
|
284
284
|
display: flex;
|
|
285
285
|
align-items: center;
|
|
286
286
|
gap: var(--bds-space_xxs);
|
|
287
287
|
}
|
|
288
|
-
.
|
|
288
|
+
.bds220Breadcrumb-link {
|
|
289
289
|
color: var(--bds-color_interactive_on-bg);
|
|
290
290
|
text-decoration: none;
|
|
291
291
|
transition: var(--bds-animation_transition);
|
|
292
292
|
}
|
|
293
|
-
.
|
|
293
|
+
.bds220Breadcrumb-link:focus-visible {
|
|
294
294
|
outline: var(--bds-outline_default);
|
|
295
295
|
outline-offset: var(--bds-outline_offset);
|
|
296
296
|
border-radius: var(--bds-border_radius--xs);
|
|
297
297
|
}
|
|
298
298
|
@media (hover: hover) and (pointer: fine) {
|
|
299
|
-
.
|
|
299
|
+
.bds220Breadcrumb-link:hover {
|
|
300
300
|
text-decoration: underline;
|
|
301
301
|
text-underline-offset: 0.2em;
|
|
302
302
|
}
|
|
303
303
|
}
|
|
304
|
-
.
|
|
304
|
+
.bds220Breadcrumb-separator {
|
|
305
305
|
color: var(--bds-color_on-bg--subtle);
|
|
306
306
|
user-select: none;
|
|
307
307
|
}
|
|
308
|
-
.
|
|
308
|
+
.bds220Breadcrumb-current {
|
|
309
309
|
color: var(--bds-color_on-bg--subtle);
|
|
310
310
|
font-weight: var(--bds-font_weight--semibold);
|
|
311
311
|
}
|
|
312
312
|
}
|
|
313
313
|
|
|
314
314
|
/* src/components/ui/Collapsible/Collapsible.module.css */
|
|
315
|
-
@layer boostdev.
|
|
316
|
-
.
|
|
315
|
+
@layer boostdev.bds220Collapsible-component {
|
|
316
|
+
.bds220Collapsible-collapsible {
|
|
317
317
|
border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
|
|
318
318
|
border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
|
|
319
319
|
overflow: hidden;
|
|
320
320
|
}
|
|
321
|
-
.
|
|
321
|
+
.bds220Collapsible-summary {
|
|
322
322
|
list-style: none;
|
|
323
323
|
display: flex;
|
|
324
324
|
align-items: center;
|
|
@@ -333,25 +333,25 @@
|
|
|
333
333
|
user-select: none;
|
|
334
334
|
transition: var(--bds-animation_transition);
|
|
335
335
|
}
|
|
336
|
-
.
|
|
336
|
+
.bds220Collapsible-summary::-webkit-details-marker {
|
|
337
337
|
display: none;
|
|
338
338
|
}
|
|
339
|
-
.
|
|
339
|
+
.bds220Collapsible-summary:focus-visible {
|
|
340
340
|
outline: var(--bds-outline_default);
|
|
341
341
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
342
342
|
}
|
|
343
343
|
@media (hover: hover) and (pointer: fine) {
|
|
344
|
-
.
|
|
344
|
+
.bds220Collapsible-summary:hover {
|
|
345
345
|
background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
|
|
346
346
|
}
|
|
347
347
|
}
|
|
348
|
-
.
|
|
348
|
+
.bds220Collapsible-collapsible[open] > .bds220Collapsible-summary {
|
|
349
349
|
border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
|
|
350
350
|
}
|
|
351
|
-
.
|
|
351
|
+
.bds220Collapsible-summaryContent {
|
|
352
352
|
flex: 1;
|
|
353
353
|
}
|
|
354
|
-
.
|
|
354
|
+
.bds220Collapsible-icon {
|
|
355
355
|
inline-size: 0.5rem;
|
|
356
356
|
block-size: 0.5rem;
|
|
357
357
|
border-inline-end: 2px solid currentcolor;
|
|
@@ -360,25 +360,25 @@
|
|
|
360
360
|
flex-shrink: 0;
|
|
361
361
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
362
362
|
}
|
|
363
|
-
.
|
|
363
|
+
.bds220Collapsible-collapsible[open] > .bds220Collapsible-summary .bds220Collapsible-icon {
|
|
364
364
|
transform: rotate(-135deg);
|
|
365
365
|
}
|
|
366
|
-
.
|
|
366
|
+
.bds220Collapsible-content {
|
|
367
367
|
padding: var(--bds-space_m);
|
|
368
368
|
color: var(--collapsible_on-color, var(--bds-color_on-bg));
|
|
369
369
|
font-size: var(--bds-font_size--body);
|
|
370
370
|
line-height: var(--bds-font_line-height--body);
|
|
371
371
|
}
|
|
372
372
|
@media (prefers-reduced-motion: reduce) {
|
|
373
|
-
.
|
|
373
|
+
.bds220Collapsible-icon {
|
|
374
374
|
transition: none;
|
|
375
375
|
}
|
|
376
376
|
}
|
|
377
377
|
}
|
|
378
378
|
|
|
379
379
|
/* src/components/ui/Calendar/Calendar.module.css */
|
|
380
|
-
@layer boostdev.
|
|
381
|
-
.
|
|
380
|
+
@layer boostdev.bds220Calendar-component {
|
|
381
|
+
.bds220Calendar-calendar {
|
|
382
382
|
display: inline-flex;
|
|
383
383
|
flex-direction: column;
|
|
384
384
|
gap: var(--bds-space_s);
|
|
@@ -391,17 +391,17 @@
|
|
|
391
391
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_shadow, var(--bds-shadow_s));
|
|
392
392
|
inline-size: 20rem;
|
|
393
393
|
}
|
|
394
|
-
.
|
|
394
|
+
.bds220Calendar-header {
|
|
395
395
|
display: flex;
|
|
396
396
|
align-items: center;
|
|
397
397
|
justify-content: space-between;
|
|
398
398
|
}
|
|
399
|
-
.
|
|
399
|
+
.bds220Calendar-monthYear {
|
|
400
400
|
font-size: var(--bds-font_size--body);
|
|
401
401
|
font-weight: var(--bds-font_weight--semibold);
|
|
402
402
|
color: var(--bds-color_on-bg);
|
|
403
403
|
}
|
|
404
|
-
.
|
|
404
|
+
.bds220Calendar-navBtn {
|
|
405
405
|
all: unset;
|
|
406
406
|
display: flex;
|
|
407
407
|
align-items: center;
|
|
@@ -413,35 +413,35 @@
|
|
|
413
413
|
color: var(--bds-color_on-bg);
|
|
414
414
|
transition: var(--bds-animation_transition);
|
|
415
415
|
}
|
|
416
|
-
.
|
|
416
|
+
.bds220Calendar-navBtn svg {
|
|
417
417
|
inline-size: 1rem;
|
|
418
418
|
block-size: 1rem;
|
|
419
419
|
}
|
|
420
|
-
.
|
|
420
|
+
.bds220Calendar-navBtn:focus-visible {
|
|
421
421
|
outline: var(--bds-outline_default);
|
|
422
422
|
outline-offset: var(--bds-outline_offset);
|
|
423
423
|
}
|
|
424
424
|
@media (hover: hover) and (pointer: fine) {
|
|
425
|
-
.
|
|
425
|
+
.bds220Calendar-navBtn:hover {
|
|
426
426
|
background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle));
|
|
427
427
|
}
|
|
428
428
|
}
|
|
429
|
-
.
|
|
429
|
+
.bds220Calendar-grid {
|
|
430
430
|
border-collapse: collapse;
|
|
431
431
|
inline-size: 100%;
|
|
432
432
|
table-layout: fixed;
|
|
433
433
|
}
|
|
434
|
-
.
|
|
434
|
+
.bds220Calendar-weekday {
|
|
435
435
|
font-size: var(--bds-font_size--body--s);
|
|
436
436
|
font-weight: var(--bds-font_weight--semibold);
|
|
437
437
|
color: var(--bds-color_on-bg);
|
|
438
438
|
text-align: center;
|
|
439
439
|
padding-block-end: var(--bds-space_xs);
|
|
440
440
|
}
|
|
441
|
-
.
|
|
441
|
+
.bds220Calendar-empty {
|
|
442
442
|
padding: 0;
|
|
443
443
|
}
|
|
444
|
-
.
|
|
444
|
+
.bds220Calendar-day {
|
|
445
445
|
all: unset;
|
|
446
446
|
display: flex;
|
|
447
447
|
align-items: center;
|
|
@@ -455,46 +455,46 @@
|
|
|
455
455
|
transition: var(--bds-animation_transition);
|
|
456
456
|
box-sizing: border-box;
|
|
457
457
|
}
|
|
458
|
-
.
|
|
458
|
+
.bds220Calendar-day:focus-visible {
|
|
459
459
|
outline: var(--bds-outline_default);
|
|
460
460
|
outline-offset: var(--bds-outline_offset);
|
|
461
461
|
}
|
|
462
462
|
@media (hover: hover) and (pointer: fine) {
|
|
463
|
-
.
|
|
463
|
+
.bds220Calendar-day:not(.bds220Calendar-disabled, .bds220Calendar-selected):hover {
|
|
464
464
|
background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
|
|
465
465
|
}
|
|
466
466
|
}
|
|
467
|
-
.
|
|
467
|
+
.bds220Calendar-today {
|
|
468
468
|
font-weight: var(--bds-font_weight--semibold);
|
|
469
469
|
--bdc_color: var(--calendar_today-color, var(--bds-color_interactive));
|
|
470
470
|
border: var(--calendar_today-border, none);
|
|
471
471
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
472
472
|
}
|
|
473
|
-
.
|
|
473
|
+
.bds220Calendar-selected {
|
|
474
474
|
background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
|
|
475
475
|
color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
|
|
476
476
|
font-weight: var(--bds-font_weight--semibold);
|
|
477
477
|
}
|
|
478
|
-
.
|
|
478
|
+
.bds220Calendar-disabled {
|
|
479
479
|
opacity: 0.35;
|
|
480
480
|
cursor: not-allowed;
|
|
481
481
|
}
|
|
482
482
|
@media (prefers-reduced-motion: reduce) {
|
|
483
|
-
.
|
|
483
|
+
.bds220Calendar-day {
|
|
484
484
|
transition: none;
|
|
485
485
|
}
|
|
486
486
|
}
|
|
487
487
|
}
|
|
488
488
|
|
|
489
489
|
/* src/components/ui/Carousel/Carousel.module.css */
|
|
490
|
-
@layer boostdev.
|
|
491
|
-
.
|
|
490
|
+
@layer boostdev.bds220Carousel-component {
|
|
491
|
+
.bds220Carousel-carousel {
|
|
492
492
|
position: relative;
|
|
493
493
|
display: flex;
|
|
494
494
|
align-items: center;
|
|
495
495
|
gap: var(--bds-space_xs);
|
|
496
496
|
}
|
|
497
|
-
.
|
|
497
|
+
.bds220Carousel-track {
|
|
498
498
|
display: flex;
|
|
499
499
|
gap: var(--bds-space_m);
|
|
500
500
|
overflow-inline: auto;
|
|
@@ -503,14 +503,14 @@
|
|
|
503
503
|
flex: 1;
|
|
504
504
|
scroll-behavior: smooth;
|
|
505
505
|
}
|
|
506
|
-
.
|
|
506
|
+
.bds220Carousel-track::-webkit-scrollbar {
|
|
507
507
|
display: none;
|
|
508
508
|
}
|
|
509
|
-
.
|
|
509
|
+
.bds220Carousel-slide {
|
|
510
510
|
scroll-snap-align: start;
|
|
511
511
|
flex-shrink: 0;
|
|
512
512
|
}
|
|
513
|
-
.
|
|
513
|
+
.bds220Carousel-navBtn {
|
|
514
514
|
all: unset;
|
|
515
515
|
display: flex;
|
|
516
516
|
align-items: center;
|
|
@@ -527,29 +527,29 @@
|
|
|
527
527
|
flex-shrink: 0;
|
|
528
528
|
transition: var(--bds-animation_transition);
|
|
529
529
|
}
|
|
530
|
-
.
|
|
530
|
+
.bds220Carousel-navBtn svg {
|
|
531
531
|
inline-size: 1.25rem;
|
|
532
532
|
block-size: 1.25rem;
|
|
533
533
|
}
|
|
534
|
-
.
|
|
534
|
+
.bds220Carousel-navBtn:focus-visible {
|
|
535
535
|
outline: var(--bds-outline_default);
|
|
536
536
|
outline-offset: var(--bds-outline_offset);
|
|
537
537
|
}
|
|
538
538
|
@media (hover: hover) and (pointer: fine) {
|
|
539
|
-
.
|
|
539
|
+
.bds220Carousel-navBtn:hover {
|
|
540
540
|
background-color: var(--carousel_navBtn-bg--hover, var(--bds-color_bg--subtle));
|
|
541
541
|
}
|
|
542
542
|
}
|
|
543
543
|
@media (prefers-reduced-motion: reduce) {
|
|
544
|
-
.
|
|
544
|
+
.bds220Carousel-track {
|
|
545
545
|
scroll-behavior: auto;
|
|
546
546
|
}
|
|
547
547
|
}
|
|
548
548
|
}
|
|
549
549
|
|
|
550
550
|
/* src/components/ui/DescriptionList/DescriptionList.module.css */
|
|
551
|
-
@layer boostdev.
|
|
552
|
-
.
|
|
551
|
+
@layer boostdev.bds220DescriptionList-component {
|
|
552
|
+
.bds220DescriptionList-list {
|
|
553
553
|
display: flex;
|
|
554
554
|
flex-direction: column;
|
|
555
555
|
gap: var(--bds-space_s);
|
|
@@ -558,61 +558,61 @@
|
|
|
558
558
|
font-size: var(--bds-font_size--body);
|
|
559
559
|
color: var(--bds-color_on-bg);
|
|
560
560
|
}
|
|
561
|
-
.
|
|
561
|
+
.bds220DescriptionList-group {
|
|
562
562
|
display: flex;
|
|
563
563
|
flex-direction: column;
|
|
564
564
|
gap: var(--bds-space_xxs);
|
|
565
565
|
}
|
|
566
|
-
.
|
|
566
|
+
.bds220DescriptionList-term {
|
|
567
567
|
font-weight: var(--bds-font_weight--semibold);
|
|
568
568
|
color: var(--bds-color_on-bg);
|
|
569
569
|
}
|
|
570
|
-
.
|
|
570
|
+
.bds220DescriptionList-details {
|
|
571
571
|
margin: 0;
|
|
572
572
|
color: var(--bds-color_on-bg);
|
|
573
573
|
}
|
|
574
|
-
.
|
|
574
|
+
.bds220DescriptionList---layout_inline .bds220DescriptionList-group {
|
|
575
575
|
display: grid;
|
|
576
576
|
grid-template-columns: minmax(8rem, 1fr) 2fr;
|
|
577
577
|
gap: var(--bds-space_xs);
|
|
578
578
|
align-items: baseline;
|
|
579
579
|
}
|
|
580
|
-
.
|
|
580
|
+
.bds220DescriptionList---layout_inline .bds220DescriptionList-term {
|
|
581
581
|
grid-column: 1;
|
|
582
582
|
}
|
|
583
|
-
.
|
|
583
|
+
.bds220DescriptionList---layout_inline .bds220DescriptionList-details {
|
|
584
584
|
grid-column: 2;
|
|
585
585
|
}
|
|
586
586
|
}
|
|
587
587
|
|
|
588
588
|
/* src/components/ui/Link/Link.module.css */
|
|
589
|
-
@layer boostdev.
|
|
590
|
-
.
|
|
589
|
+
@layer boostdev.bds220Link-component {
|
|
590
|
+
.bds220Link-link {
|
|
591
591
|
color: var(--link_color, var(--bds-color_interactive_on-bg));
|
|
592
592
|
text-decoration: underline;
|
|
593
593
|
text-underline-offset: 0.2em;
|
|
594
594
|
transition: var(--bds-animation_transition);
|
|
595
595
|
cursor: pointer;
|
|
596
596
|
}
|
|
597
|
-
.
|
|
597
|
+
.bds220Link-link:focus-visible {
|
|
598
598
|
outline: var(--bds-outline_default);
|
|
599
599
|
outline-offset: var(--bds-outline_offset);
|
|
600
600
|
border-radius: var(--bds-border_radius--xs);
|
|
601
601
|
}
|
|
602
602
|
@media (hover: hover) and (pointer: fine) {
|
|
603
|
-
.
|
|
603
|
+
.bds220Link-link:hover {
|
|
604
604
|
--link_color: var(--link_color-hover, var(--bds-color_blue--strong));
|
|
605
605
|
}
|
|
606
606
|
}
|
|
607
|
-
.
|
|
607
|
+
.bds220Link---variant_default {
|
|
608
608
|
--link_color: var(--bds-color_interactive_on-bg);
|
|
609
609
|
--link_color-hover: var(--bds-color_blue--strong);
|
|
610
610
|
}
|
|
611
|
-
.
|
|
611
|
+
.bds220Link---variant_subtle {
|
|
612
612
|
--link_color: var(--bds-color_on-bg);
|
|
613
613
|
--link_color-hover: var(--bds-color_interactive_on-bg);
|
|
614
614
|
}
|
|
615
|
-
.
|
|
615
|
+
.bds220Link---variant_standalone {
|
|
616
616
|
--link_color: var(--bds-color_interactive_on-bg);
|
|
617
617
|
--link_color-hover: var(--bds-color_blue--strong);
|
|
618
618
|
display: inline-flex;
|
|
@@ -622,12 +622,12 @@
|
|
|
622
622
|
text-decoration: none;
|
|
623
623
|
}
|
|
624
624
|
@media (hover: hover) and (pointer: fine) {
|
|
625
|
-
.
|
|
625
|
+
.bds220Link---variant_standalone:hover {
|
|
626
626
|
text-decoration: underline;
|
|
627
627
|
text-underline-offset: 0.2em;
|
|
628
628
|
}
|
|
629
629
|
}
|
|
630
|
-
.
|
|
630
|
+
.bds220Link-externalLabel {
|
|
631
631
|
position: absolute;
|
|
632
632
|
inline-size: 1px;
|
|
633
633
|
block-size: 1px;
|
|
@@ -641,13 +641,13 @@
|
|
|
641
641
|
}
|
|
642
642
|
|
|
643
643
|
/* src/components/ui/Loading/Loading.module.css */
|
|
644
|
-
@layer boostdev.
|
|
645
|
-
.
|
|
644
|
+
@layer boostdev.bds220Loading-component {
|
|
645
|
+
.bds220Loading-loading {
|
|
646
646
|
display: flex;
|
|
647
647
|
justify-content: center;
|
|
648
648
|
align-items: center;
|
|
649
649
|
}
|
|
650
|
-
.
|
|
650
|
+
.bds220Loading-spinner {
|
|
651
651
|
inline-size: 2.5em;
|
|
652
652
|
block-size: 2.5em;
|
|
653
653
|
border: 4px solid var(--bds-color_bg);
|
|
@@ -655,12 +655,12 @@
|
|
|
655
655
|
border-radius: var(--loading_radius, var(--bds-border_radius--circle));
|
|
656
656
|
animation: spin 1s linear infinite;
|
|
657
657
|
}
|
|
658
|
-
.
|
|
658
|
+
.bds220Loading---size_small .bds220Loading-spinner {
|
|
659
659
|
inline-size: 1.5em;
|
|
660
660
|
block-size: 1.5em;
|
|
661
661
|
border-width: 2px;
|
|
662
662
|
}
|
|
663
|
-
.
|
|
663
|
+
.bds220Loading---size_large .bds220Loading-spinner {
|
|
664
664
|
inline-size: 4em;
|
|
665
665
|
block-size: 4em;
|
|
666
666
|
border-width: 6px;
|
|
@@ -675,14 +675,14 @@
|
|
|
675
675
|
}
|
|
676
676
|
}
|
|
677
677
|
@media (prefers-reduced-motion: reduce) {
|
|
678
|
-
.
|
|
678
|
+
.bds220Loading-spinner {
|
|
679
679
|
animation: none;
|
|
680
680
|
}
|
|
681
681
|
}
|
|
682
682
|
|
|
683
683
|
/* src/components/ui/NotificationBanner/NotificationBanner.module.css */
|
|
684
|
-
@layer boostdev.
|
|
685
|
-
.
|
|
684
|
+
@layer boostdev.bds220NotificationBanner-component {
|
|
685
|
+
.bds220NotificationBanner-banner {
|
|
686
686
|
display: flex;
|
|
687
687
|
align-items: center;
|
|
688
688
|
gap: var(--bds-space_m);
|
|
@@ -694,33 +694,33 @@
|
|
|
694
694
|
line-height: var(--bds-font_line-height--body);
|
|
695
695
|
inline-size: 100%;
|
|
696
696
|
}
|
|
697
|
-
.
|
|
697
|
+
.bds220NotificationBanner---variant_info {
|
|
698
698
|
--banner_bg: var(--bds-color_blue--subtle);
|
|
699
699
|
--banner_text: var(--bds-color_on-blue--subtle);
|
|
700
700
|
--banner_border: var(--bds-color_blue);
|
|
701
701
|
}
|
|
702
|
-
.
|
|
702
|
+
.bds220NotificationBanner---variant_success {
|
|
703
703
|
--banner_bg: var(--bds-color_success--subtle);
|
|
704
704
|
--banner_text: var(--bds-color_on-success--subtle);
|
|
705
705
|
--banner_border: var(--bds-color_success);
|
|
706
706
|
}
|
|
707
|
-
.
|
|
707
|
+
.bds220NotificationBanner---variant_warning {
|
|
708
708
|
--banner_bg: var(--bds-color_orange--subtle);
|
|
709
709
|
--banner_text: var(--bds-color_on-orange--subtle);
|
|
710
710
|
--banner_border: var(--bds-color_warning);
|
|
711
711
|
}
|
|
712
|
-
.
|
|
712
|
+
.bds220NotificationBanner---variant_error {
|
|
713
713
|
--banner_bg: rgb(from var(--bds-color_error) r g b / 12%);
|
|
714
714
|
--banner_text: var(--bds-color_on-bg);
|
|
715
715
|
--banner_border: var(--bds-color_error);
|
|
716
716
|
}
|
|
717
|
-
.
|
|
717
|
+
.bds220NotificationBanner-content {
|
|
718
718
|
flex: 1;
|
|
719
719
|
}
|
|
720
|
-
.
|
|
720
|
+
.bds220NotificationBanner-action {
|
|
721
721
|
flex-shrink: 0;
|
|
722
722
|
}
|
|
723
|
-
.
|
|
723
|
+
.bds220NotificationBanner-dismiss {
|
|
724
724
|
all: unset;
|
|
725
725
|
display: flex;
|
|
726
726
|
align-items: center;
|
|
@@ -734,28 +734,28 @@
|
|
|
734
734
|
--bdc_color: currentcolor;
|
|
735
735
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
736
736
|
}
|
|
737
|
-
.
|
|
737
|
+
.bds220NotificationBanner-dismiss svg {
|
|
738
738
|
inline-size: 1rem;
|
|
739
739
|
block-size: 1rem;
|
|
740
740
|
}
|
|
741
|
-
.
|
|
741
|
+
.bds220NotificationBanner-dismiss:focus-visible {
|
|
742
742
|
outline: var(--bds-outline_default);
|
|
743
743
|
outline-offset: var(--bds-outline_offset);
|
|
744
744
|
}
|
|
745
745
|
@media (hover: hover) and (pointer: fine) {
|
|
746
|
-
.
|
|
746
|
+
.bds220NotificationBanner-dismiss:hover {
|
|
747
747
|
opacity: var(--banner_dismiss-opacity--hover, 0.7);
|
|
748
748
|
}
|
|
749
749
|
}
|
|
750
750
|
}
|
|
751
751
|
|
|
752
752
|
/* src/components/ui/Pagination/Pagination.module.css */
|
|
753
|
-
@layer boostdev.
|
|
754
|
-
.
|
|
753
|
+
@layer boostdev.bds220Pagination-component {
|
|
754
|
+
.bds220Pagination-pagination {
|
|
755
755
|
display: flex;
|
|
756
756
|
justify-content: center;
|
|
757
757
|
}
|
|
758
|
-
.
|
|
758
|
+
.bds220Pagination-list {
|
|
759
759
|
display: flex;
|
|
760
760
|
align-items: center;
|
|
761
761
|
gap: var(--bds-space_xxs);
|
|
@@ -763,10 +763,10 @@
|
|
|
763
763
|
margin: 0;
|
|
764
764
|
padding: 0;
|
|
765
765
|
}
|
|
766
|
-
.
|
|
766
|
+
.bds220Pagination-list li {
|
|
767
767
|
list-style: none;
|
|
768
768
|
}
|
|
769
|
-
.
|
|
769
|
+
.bds220Pagination-button {
|
|
770
770
|
all: unset;
|
|
771
771
|
display: inline-flex;
|
|
772
772
|
align-items: center;
|
|
@@ -787,30 +787,30 @@
|
|
|
787
787
|
transition: var(--bds-animation_transition);
|
|
788
788
|
box-sizing: border-box;
|
|
789
789
|
}
|
|
790
|
-
.
|
|
790
|
+
.bds220Pagination-button:disabled {
|
|
791
791
|
opacity: 0.4;
|
|
792
792
|
cursor: not-allowed;
|
|
793
793
|
}
|
|
794
|
-
.
|
|
794
|
+
.bds220Pagination-button:focus-visible {
|
|
795
795
|
outline: var(--bds-outline_default);
|
|
796
796
|
outline-offset: var(--bds-outline_offset);
|
|
797
797
|
}
|
|
798
798
|
@media (hover: hover) and (pointer: fine) {
|
|
799
|
-
.
|
|
799
|
+
.bds220Pagination-button:not(:disabled, .bds220Pagination---active):hover {
|
|
800
800
|
--btn_bg: var(--btn_bg--hover, var(--bds-color_bg--subtle));
|
|
801
801
|
--btn_color: var(--btn_color--hover, var(--bds-color_interactive_on-bg));
|
|
802
802
|
}
|
|
803
803
|
}
|
|
804
|
-
.
|
|
804
|
+
.bds220Pagination-button.bds220Pagination---active {
|
|
805
805
|
--btn_bg: var(--btn_bg--active, var(--bds-color_interactive));
|
|
806
806
|
--btn_color: var(--btn_color--active, var(--bds-color_on-interactive));
|
|
807
807
|
--btn_border: var(--btn_border--active, var(--bds-color_interactive));
|
|
808
808
|
}
|
|
809
|
-
.
|
|
809
|
+
.bds220Pagination-button.bds220Pagination---nav svg {
|
|
810
810
|
inline-size: 1rem;
|
|
811
811
|
block-size: 1rem;
|
|
812
812
|
}
|
|
813
|
-
.
|
|
813
|
+
.bds220Pagination-ellipsis {
|
|
814
814
|
display: inline-flex;
|
|
815
815
|
align-items: center;
|
|
816
816
|
justify-content: center;
|
|
@@ -823,71 +823,71 @@
|
|
|
823
823
|
}
|
|
824
824
|
|
|
825
825
|
/* src/components/ui/Progress/Progress.module.css */
|
|
826
|
-
@layer boostdev.
|
|
827
|
-
.
|
|
826
|
+
@layer boostdev.bds220Progress-component {
|
|
827
|
+
.bds220Progress-container {
|
|
828
828
|
display: flex;
|
|
829
829
|
flex-direction: column;
|
|
830
830
|
gap: var(--bds-space_xxs);
|
|
831
831
|
inline-size: 100%;
|
|
832
832
|
}
|
|
833
|
-
.
|
|
833
|
+
.bds220Progress-labelRow {
|
|
834
834
|
display: flex;
|
|
835
835
|
justify-content: space-between;
|
|
836
836
|
align-items: baseline;
|
|
837
837
|
font-size: var(--bds-font_size--body--s);
|
|
838
838
|
color: var(--bds-color_on-bg);
|
|
839
839
|
}
|
|
840
|
-
.
|
|
840
|
+
.bds220Progress-value {
|
|
841
841
|
font-variant-numeric: tabular-nums;
|
|
842
842
|
}
|
|
843
|
-
.
|
|
843
|
+
.bds220Progress-track {
|
|
844
844
|
inline-size: 100%;
|
|
845
845
|
block-size: var(--progress_height, var(--bds-space_xs));
|
|
846
846
|
background-color: var(--bds-color_bg--subtle);
|
|
847
847
|
border-radius: var(--progress_radius, var(--bds-border_radius--full));
|
|
848
848
|
overflow: hidden;
|
|
849
849
|
}
|
|
850
|
-
.
|
|
850
|
+
.bds220Progress-track.bds220Progress---size_small {
|
|
851
851
|
--progress_height: var(--bds-space_xxs);
|
|
852
852
|
}
|
|
853
|
-
.
|
|
853
|
+
.bds220Progress-track.bds220Progress---size_medium {
|
|
854
854
|
--progress_height: var(--bds-space_xs);
|
|
855
855
|
}
|
|
856
|
-
.
|
|
856
|
+
.bds220Progress-track.bds220Progress---size_large {
|
|
857
857
|
--progress_height: var(--bds-space_s);
|
|
858
858
|
}
|
|
859
|
-
.
|
|
859
|
+
.bds220Progress-fill {
|
|
860
860
|
block-size: 100%;
|
|
861
861
|
background-color: var(--progress_color-active, var(--bdc-color_active));
|
|
862
862
|
border-radius: var(--progress_radius, var(--bds-border_radius--full));
|
|
863
863
|
transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
864
864
|
}
|
|
865
865
|
@media (prefers-reduced-motion: reduce) {
|
|
866
|
-
.
|
|
866
|
+
.bds220Progress-fill {
|
|
867
867
|
transition: none;
|
|
868
868
|
}
|
|
869
869
|
}
|
|
870
870
|
}
|
|
871
871
|
|
|
872
872
|
/* src/components/ui/ProgressCircle/ProgressCircle.module.css */
|
|
873
|
-
@layer boostdev.
|
|
874
|
-
.
|
|
873
|
+
@layer boostdev.bds220ProgressCircle-component {
|
|
874
|
+
.bds220ProgressCircle-wrapper {
|
|
875
875
|
position: relative;
|
|
876
876
|
display: inline-flex;
|
|
877
877
|
align-items: center;
|
|
878
878
|
justify-content: center;
|
|
879
879
|
}
|
|
880
|
-
.
|
|
880
|
+
.bds220ProgressCircle-svg {
|
|
881
881
|
display: block;
|
|
882
882
|
}
|
|
883
|
-
.
|
|
883
|
+
.bds220ProgressCircle-track {
|
|
884
884
|
stroke: var(--bds-color_bg--subtle);
|
|
885
885
|
}
|
|
886
|
-
.
|
|
886
|
+
.bds220ProgressCircle-fill {
|
|
887
887
|
stroke: var(--progressCircle_color-active, var(--bdc-color_active));
|
|
888
888
|
transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
889
889
|
}
|
|
890
|
-
.
|
|
890
|
+
.bds220ProgressCircle-value {
|
|
891
891
|
position: absolute;
|
|
892
892
|
font-size: var(--bds-font_size--body--s);
|
|
893
893
|
font-weight: var(--bds-font_weight--semibold);
|
|
@@ -895,34 +895,34 @@
|
|
|
895
895
|
color: var(--bds-color_on-bg);
|
|
896
896
|
line-height: 1;
|
|
897
897
|
}
|
|
898
|
-
.
|
|
898
|
+
.bds220ProgressCircle---size_small .bds220ProgressCircle-value {
|
|
899
899
|
font-size: 0.5rem;
|
|
900
900
|
}
|
|
901
|
-
.
|
|
901
|
+
.bds220ProgressCircle---size_medium .bds220ProgressCircle-value {
|
|
902
902
|
font-size: var(--bds-font_size--body--s);
|
|
903
903
|
}
|
|
904
|
-
.
|
|
904
|
+
.bds220ProgressCircle---size_large .bds220ProgressCircle-value {
|
|
905
905
|
font-size: var(--bds-font_size--body);
|
|
906
906
|
}
|
|
907
907
|
@media (prefers-reduced-motion: reduce) {
|
|
908
|
-
.
|
|
908
|
+
.bds220ProgressCircle-fill {
|
|
909
909
|
transition: none;
|
|
910
910
|
}
|
|
911
911
|
}
|
|
912
912
|
}
|
|
913
913
|
|
|
914
914
|
/* src/components/ui/Separator/Separator.module.css */
|
|
915
|
-
@layer boostdev.
|
|
916
|
-
.
|
|
915
|
+
@layer boostdev.bds220Separator-component {
|
|
916
|
+
.bds220Separator-separator {
|
|
917
917
|
border: none;
|
|
918
918
|
background-color: var(--separator_color, var(--bds-color_on-bg));
|
|
919
919
|
}
|
|
920
|
-
.
|
|
920
|
+
.bds220Separator-separator.bds220Separator---horizontal {
|
|
921
921
|
display: block;
|
|
922
922
|
inline-size: 100%;
|
|
923
923
|
block-size: var(--separator_thickness, 1px);
|
|
924
924
|
}
|
|
925
|
-
.
|
|
925
|
+
.bds220Separator-separator.bds220Separator---vertical {
|
|
926
926
|
display: inline-block;
|
|
927
927
|
inline-size: var(--separator_thickness, 1px);
|
|
928
928
|
align-self: stretch;
|
|
@@ -930,8 +930,8 @@
|
|
|
930
930
|
}
|
|
931
931
|
|
|
932
932
|
/* src/components/ui/Skeleton/Skeleton.module.css */
|
|
933
|
-
@layer boostdev.
|
|
934
|
-
.
|
|
933
|
+
@layer boostdev.bds220Skeleton-component {
|
|
934
|
+
.bds220Skeleton-skeleton {
|
|
935
935
|
background:
|
|
936
936
|
linear-gradient(
|
|
937
937
|
90deg,
|
|
@@ -954,8 +954,8 @@
|
|
|
954
954
|
}
|
|
955
955
|
|
|
956
956
|
/* src/components/ui/SkipLink/SkipLink.module.css */
|
|
957
|
-
@layer boostdev.
|
|
958
|
-
.
|
|
957
|
+
@layer boostdev.bds220SkipLink-component {
|
|
958
|
+
.bds220SkipLink-skipLink {
|
|
959
959
|
position: absolute;
|
|
960
960
|
inset-block-start: var(--bds-space_s);
|
|
961
961
|
inset-inline-start: var(--bds-space_s);
|
|
@@ -973,21 +973,21 @@
|
|
|
973
973
|
transform: translateY(-200%);
|
|
974
974
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
975
975
|
}
|
|
976
|
-
.
|
|
976
|
+
.bds220SkipLink-skipLink:focus-visible {
|
|
977
977
|
transform: translateY(0);
|
|
978
978
|
outline: var(--bds-outline_default);
|
|
979
979
|
outline-offset: var(--bds-outline_offset);
|
|
980
980
|
}
|
|
981
981
|
@media (prefers-reduced-motion: reduce) {
|
|
982
|
-
.
|
|
982
|
+
.bds220SkipLink-skipLink {
|
|
983
983
|
transition: none;
|
|
984
984
|
}
|
|
985
985
|
}
|
|
986
986
|
}
|
|
987
987
|
|
|
988
988
|
/* src/components/ui/Table/Table.module.css */
|
|
989
|
-
@layer boostdev.
|
|
990
|
-
.
|
|
989
|
+
@layer boostdev.bds220Table-component {
|
|
990
|
+
.bds220Table-wrapper {
|
|
991
991
|
inline-size: 100%;
|
|
992
992
|
overflow-inline: auto;
|
|
993
993
|
border: var(--table_border, none);
|
|
@@ -996,23 +996,23 @@
|
|
|
996
996
|
border-radius: var(--table_radius, var(--bdc-outline_radius));
|
|
997
997
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
998
998
|
}
|
|
999
|
-
.
|
|
999
|
+
.bds220Table-table {
|
|
1000
1000
|
inline-size: 100%;
|
|
1001
1001
|
border-collapse: collapse;
|
|
1002
1002
|
font-size: var(--bds-font_size--body);
|
|
1003
1003
|
font-family: var(--bds-font_family--body);
|
|
1004
1004
|
}
|
|
1005
|
-
.
|
|
1005
|
+
.bds220Table-caption {
|
|
1006
1006
|
caption-side: top;
|
|
1007
1007
|
text-align: start;
|
|
1008
1008
|
padding: var(--bds-space_s) var(--bds-space_m);
|
|
1009
1009
|
font-weight: var(--bds-font_weight--semibold);
|
|
1010
1010
|
color: var(--bds-color_on-bg);
|
|
1011
1011
|
}
|
|
1012
|
-
.
|
|
1012
|
+
.bds220Table-thead {
|
|
1013
1013
|
background-color: var(--bds-color_bg--subtle);
|
|
1014
1014
|
}
|
|
1015
|
-
.
|
|
1015
|
+
.bds220Table-th {
|
|
1016
1016
|
padding: var(--bds-space_s) var(--bds-space_m);
|
|
1017
1017
|
text-align: start;
|
|
1018
1018
|
font-weight: var(--bds-font_weight--semibold);
|
|
@@ -1021,10 +1021,10 @@
|
|
|
1021
1021
|
white-space: nowrap;
|
|
1022
1022
|
border-block-end: 1px solid var(--bds-color_bg--subtle);
|
|
1023
1023
|
}
|
|
1024
|
-
.
|
|
1024
|
+
.bds220Table-th.bds220Table---sortable {
|
|
1025
1025
|
padding: 0;
|
|
1026
1026
|
}
|
|
1027
|
-
.
|
|
1027
|
+
.bds220Table-sortButton {
|
|
1028
1028
|
all: unset;
|
|
1029
1029
|
display: flex;
|
|
1030
1030
|
align-items: center;
|
|
@@ -1038,64 +1038,64 @@
|
|
|
1038
1038
|
transition: var(--bds-animation_transition);
|
|
1039
1039
|
box-sizing: border-box;
|
|
1040
1040
|
}
|
|
1041
|
-
.
|
|
1041
|
+
.bds220Table-sortButton:focus-visible {
|
|
1042
1042
|
outline: var(--bds-outline_default);
|
|
1043
1043
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
1044
1044
|
}
|
|
1045
1045
|
@media (hover: hover) and (pointer: fine) {
|
|
1046
|
-
.
|
|
1046
|
+
.bds220Table-sortButton:hover {
|
|
1047
1047
|
color: var(--table_sortBtn-color--hover, var(--bds-color_on-bg));
|
|
1048
1048
|
}
|
|
1049
1049
|
}
|
|
1050
|
-
.
|
|
1050
|
+
.bds220Table-sortIcon {
|
|
1051
1051
|
inline-size: 1rem;
|
|
1052
1052
|
block-size: 1rem;
|
|
1053
1053
|
opacity: 0.4;
|
|
1054
1054
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing), opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1055
1055
|
}
|
|
1056
|
-
.
|
|
1056
|
+
.bds220Table-sortIcon.bds220Table---sort-active {
|
|
1057
1057
|
opacity: 1;
|
|
1058
1058
|
color: var(--bds-color_interactive);
|
|
1059
1059
|
}
|
|
1060
|
-
.
|
|
1060
|
+
.bds220Table-sortIcon.bds220Table---sort-desc {
|
|
1061
1061
|
transform: rotate(180deg);
|
|
1062
1062
|
}
|
|
1063
|
-
.
|
|
1063
|
+
.bds220Table-tbody .bds220Table-tr {
|
|
1064
1064
|
border-block-end: 1px solid var(--bds-color_bg--subtle);
|
|
1065
1065
|
transition: var(--bds-animation_transition);
|
|
1066
1066
|
}
|
|
1067
|
-
.
|
|
1067
|
+
.bds220Table-tbody .bds220Table-tr:last-child {
|
|
1068
1068
|
border-block-end: none;
|
|
1069
1069
|
}
|
|
1070
1070
|
@media (hover: hover) and (pointer: fine) {
|
|
1071
|
-
.
|
|
1071
|
+
.bds220Table-tbody .bds220Table-tr:hover {
|
|
1072
1072
|
background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
|
|
1073
1073
|
}
|
|
1074
1074
|
}
|
|
1075
|
-
.
|
|
1075
|
+
.bds220Table-td {
|
|
1076
1076
|
padding: var(--bds-space_s) var(--bds-space_m);
|
|
1077
1077
|
color: var(--bds-color_on-bg);
|
|
1078
1078
|
vertical-align: middle;
|
|
1079
1079
|
}
|
|
1080
1080
|
@media (prefers-reduced-motion: reduce) {
|
|
1081
|
-
.
|
|
1081
|
+
.bds220Table-sortIcon {
|
|
1082
1082
|
transition: none;
|
|
1083
1083
|
}
|
|
1084
1084
|
}
|
|
1085
1085
|
}
|
|
1086
1086
|
|
|
1087
1087
|
/* src/components/ui/Tabs/Tabs.module.css */
|
|
1088
|
-
@layer boostdev.
|
|
1089
|
-
.
|
|
1088
|
+
@layer boostdev.bds220Tabs-component {
|
|
1089
|
+
.bds220Tabs-tabs {
|
|
1090
1090
|
display: flex;
|
|
1091
1091
|
flex-direction: column;
|
|
1092
1092
|
}
|
|
1093
|
-
.
|
|
1093
|
+
.bds220Tabs-tabList {
|
|
1094
1094
|
display: flex;
|
|
1095
1095
|
border-block-end: 1px solid var(--bds-color_bg--subtle);
|
|
1096
1096
|
gap: var(--bds-space_xxs);
|
|
1097
1097
|
}
|
|
1098
|
-
.
|
|
1098
|
+
.bds220Tabs-tab {
|
|
1099
1099
|
all: unset;
|
|
1100
1100
|
display: inline-flex;
|
|
1101
1101
|
align-items: center;
|
|
@@ -1109,41 +1109,41 @@
|
|
|
1109
1109
|
cursor: pointer;
|
|
1110
1110
|
transition: var(--bds-animation_transition);
|
|
1111
1111
|
}
|
|
1112
|
-
.
|
|
1112
|
+
.bds220Tabs-tab.bds220Tabs---active {
|
|
1113
1113
|
--tab_color: var(--tab_color--active, var(--bds-color_interactive_on-bg));
|
|
1114
1114
|
--tab_border-color: var(--tab_border-color--active, var(--bds-color_interactive));
|
|
1115
1115
|
}
|
|
1116
|
-
.
|
|
1116
|
+
.bds220Tabs-tab:disabled {
|
|
1117
1117
|
opacity: 0.4;
|
|
1118
1118
|
cursor: not-allowed;
|
|
1119
1119
|
}
|
|
1120
|
-
.
|
|
1120
|
+
.bds220Tabs-tab:focus-visible {
|
|
1121
1121
|
outline: var(--bds-outline_default);
|
|
1122
1122
|
outline-offset: var(--bds-outline_offset);
|
|
1123
1123
|
border-radius: var(--bds-border_radius--xs);
|
|
1124
1124
|
}
|
|
1125
1125
|
@media (hover: hover) and (pointer: fine) {
|
|
1126
|
-
.
|
|
1126
|
+
.bds220Tabs-tab:not(:disabled, .bds220Tabs---active):hover {
|
|
1127
1127
|
--tab_color: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
|
|
1128
1128
|
}
|
|
1129
1129
|
}
|
|
1130
|
-
.
|
|
1130
|
+
.bds220Tabs-panel {
|
|
1131
1131
|
padding-block-start: var(--bds-space_m);
|
|
1132
1132
|
}
|
|
1133
|
-
.
|
|
1133
|
+
.bds220Tabs-panel:focus-visible {
|
|
1134
1134
|
outline: var(--bds-outline_default);
|
|
1135
1135
|
outline-offset: var(--bds-outline_offset);
|
|
1136
1136
|
}
|
|
1137
1137
|
}
|
|
1138
1138
|
|
|
1139
1139
|
/* src/components/ui/Tooltip/Tooltip.module.css */
|
|
1140
|
-
@layer boostdev.
|
|
1141
|
-
.
|
|
1140
|
+
@layer boostdev.bds220Tooltip-component {
|
|
1141
|
+
.bds220Tooltip-wrapper {
|
|
1142
1142
|
position: relative;
|
|
1143
1143
|
display: inline-flex;
|
|
1144
1144
|
align-items: center;
|
|
1145
1145
|
}
|
|
1146
|
-
.
|
|
1146
|
+
.bds220Tooltip-tooltip {
|
|
1147
1147
|
position: absolute;
|
|
1148
1148
|
z-index: var(--bds-z-index_popover);
|
|
1149
1149
|
padding: var(--bds-space_xxs) var(--bds-space_xs);
|
|
@@ -1158,68 +1158,68 @@
|
|
|
1158
1158
|
opacity: 0;
|
|
1159
1159
|
transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1160
1160
|
}
|
|
1161
|
-
.
|
|
1162
|
-
.
|
|
1161
|
+
.bds220Tooltip-wrapper:hover .bds220Tooltip-tooltip,
|
|
1162
|
+
.bds220Tooltip-wrapper:focus-within .bds220Tooltip-tooltip {
|
|
1163
1163
|
visibility: visible;
|
|
1164
1164
|
opacity: 1;
|
|
1165
1165
|
}
|
|
1166
|
-
.
|
|
1166
|
+
.bds220Tooltip---placement_top {
|
|
1167
1167
|
inset-block-end: calc(100% + var(--bds-space_xs));
|
|
1168
1168
|
inset-inline-start: 50%;
|
|
1169
1169
|
transform: translateX(-50%);
|
|
1170
1170
|
}
|
|
1171
|
-
.
|
|
1171
|
+
.bds220Tooltip---placement_bottom {
|
|
1172
1172
|
inset-block-start: calc(100% + var(--bds-space_xs));
|
|
1173
1173
|
inset-inline-start: 50%;
|
|
1174
1174
|
transform: translateX(-50%);
|
|
1175
1175
|
}
|
|
1176
|
-
.
|
|
1176
|
+
.bds220Tooltip---placement_left {
|
|
1177
1177
|
inset-inline-end: calc(100% + var(--bds-space_xs));
|
|
1178
1178
|
inset-block-start: 50%;
|
|
1179
1179
|
transform: translateY(-50%);
|
|
1180
1180
|
}
|
|
1181
|
-
.
|
|
1181
|
+
.bds220Tooltip---placement_right {
|
|
1182
1182
|
inset-inline-start: calc(100% + var(--bds-space_xs));
|
|
1183
1183
|
inset-block-start: 50%;
|
|
1184
1184
|
transform: translateY(-50%);
|
|
1185
1185
|
}
|
|
1186
1186
|
@media (prefers-reduced-motion: reduce) {
|
|
1187
|
-
.
|
|
1187
|
+
.bds220Tooltip-tooltip {
|
|
1188
1188
|
transition: none;
|
|
1189
1189
|
}
|
|
1190
1190
|
}
|
|
1191
1191
|
}
|
|
1192
1192
|
|
|
1193
1193
|
/* src/components/ui/Typography/Typography.module.css */
|
|
1194
|
-
@layer boostdev.
|
|
1195
|
-
.
|
|
1194
|
+
@layer boostdev.bds220Typography-component {
|
|
1195
|
+
.bds220Typography-typography {
|
|
1196
1196
|
margin: 0;
|
|
1197
1197
|
font-family: var(--bds-font_family--body);
|
|
1198
1198
|
color: var(--typography_color, var(--bds-color_on-bg));
|
|
1199
1199
|
}
|
|
1200
|
-
.
|
|
1200
|
+
.bds220Typography---h1 {
|
|
1201
1201
|
font-family: var(--bds-font_family--heading);
|
|
1202
1202
|
font-size: var(--bds-font_size--heading-1);
|
|
1203
1203
|
font-weight: var(--bds-font_weight--bold);
|
|
1204
1204
|
line-height: var(--bds-font_line-height--heading);
|
|
1205
1205
|
}
|
|
1206
|
-
.
|
|
1206
|
+
.bds220Typography---h2 {
|
|
1207
1207
|
font-family: var(--bds-font_family--heading);
|
|
1208
1208
|
font-size: var(--bds-font_size--heading-2);
|
|
1209
1209
|
font-weight: var(--bds-font_weight--semibold);
|
|
1210
1210
|
line-height: var(--bds-font_line-height--heading);
|
|
1211
1211
|
}
|
|
1212
|
-
.
|
|
1212
|
+
.bds220Typography---h3 {
|
|
1213
1213
|
font-family: var(--bds-font_family--heading);
|
|
1214
1214
|
font-size: var(--bds-font_size--heading-3);
|
|
1215
1215
|
font-weight: var(--bds-font_weight--semibold);
|
|
1216
1216
|
line-height: var(--bds-font_line-height--heading);
|
|
1217
1217
|
}
|
|
1218
|
-
.
|
|
1218
|
+
.bds220Typography---body {
|
|
1219
1219
|
font-size: var(--bds-font_size--body);
|
|
1220
1220
|
line-height: var(--bds-font_line-height--body);
|
|
1221
1221
|
}
|
|
1222
|
-
.
|
|
1222
|
+
.bds220Typography---body_s {
|
|
1223
1223
|
font-size: var(--bds-font_size--body--s);
|
|
1224
1224
|
line-height: var(--bds-font_line-height--body);
|
|
1225
1225
|
}
|
|
@@ -1250,9 +1250,9 @@
|
|
|
1250
1250
|
box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%);
|
|
1251
1251
|
}
|
|
1252
1252
|
}
|
|
1253
|
-
@layer boostdev.
|
|
1254
|
-
.
|
|
1255
|
-
.
|
|
1253
|
+
@layer boostdev.bds220Button-component {
|
|
1254
|
+
.bds220Button-button,
|
|
1255
|
+
.bds220Button-button[href] {
|
|
1256
1256
|
all: unset;
|
|
1257
1257
|
position: relative;
|
|
1258
1258
|
font: inherit;
|
|
@@ -1278,65 +1278,78 @@
|
|
|
1278
1278
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
1279
1279
|
transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1280
1280
|
}
|
|
1281
|
-
.
|
|
1281
|
+
.bds220Button-button.bds220Button---default {
|
|
1282
1282
|
}
|
|
1283
|
-
.
|
|
1284
|
-
.
|
|
1283
|
+
.bds220Button-button.bds220Button---outline,
|
|
1284
|
+
.bds220Button-button.bds220Button---ghost {
|
|
1285
1285
|
--button_bg: transparent;
|
|
1286
1286
|
--button_text: var(--button_color--on-bg);
|
|
1287
1287
|
--bdc_color: var(--button_color--on-bg);
|
|
1288
1288
|
}
|
|
1289
|
-
.
|
|
1289
|
+
.bds220Button-button.bds220Button---size_small {
|
|
1290
1290
|
--button_height: 2.25em;
|
|
1291
1291
|
--button_font-size: var(--bds-font_size--body--s);
|
|
1292
1292
|
padding-inline: var(--bds-space_m);
|
|
1293
1293
|
}
|
|
1294
|
-
.
|
|
1294
|
+
.bds220Button-button.bds220Button---size_medium {
|
|
1295
1295
|
--button_height: 3em;
|
|
1296
1296
|
padding-inline: var(--bds-space_l);
|
|
1297
1297
|
}
|
|
1298
|
-
.
|
|
1298
|
+
.bds220Button-button.bds220Button---size_large {
|
|
1299
1299
|
--button_font-size: var(--bds-font_size--heading-3);
|
|
1300
1300
|
padding-inline: var(--bds-space_xl);
|
|
1301
1301
|
}
|
|
1302
|
-
.
|
|
1302
|
+
.bds220Button-button.bds220Button---hasPulse {
|
|
1303
1303
|
animation: pulse 3s infinite;
|
|
1304
1304
|
}
|
|
1305
|
-
.
|
|
1305
|
+
.bds220Button-button.bds220Button---iconOnly {
|
|
1306
|
+
aspect-ratio: 1;
|
|
1307
|
+
box-sizing: border-box;
|
|
1308
|
+
padding: var(--bds-space_xxs);
|
|
1309
|
+
}
|
|
1310
|
+
.bds220Button-button.bds220Button---iconOnly > * {
|
|
1311
|
+
inline-size: 100%;
|
|
1312
|
+
block-size: 100%;
|
|
1313
|
+
}
|
|
1314
|
+
.bds220Button-button[href] {
|
|
1306
1315
|
text-decoration: none;
|
|
1307
1316
|
}
|
|
1308
|
-
.
|
|
1317
|
+
.bds220Button-button svg {
|
|
1309
1318
|
--icon__stroke: currentcolor;
|
|
1310
1319
|
fill: currentcolor;
|
|
1311
1320
|
color: currentcolor;
|
|
1312
1321
|
flex-shrink: 0;
|
|
1313
1322
|
}
|
|
1314
|
-
.
|
|
1323
|
+
.bds220Button-iconStart {
|
|
1315
1324
|
display: flex;
|
|
1316
1325
|
align-items: center;
|
|
1317
1326
|
margin-inline-start: calc(var(--bds-space_s) * -1);
|
|
1318
1327
|
transition: var(--bds-animation_transition);
|
|
1319
1328
|
}
|
|
1320
|
-
.
|
|
1329
|
+
.bds220Button-iconEnd {
|
|
1321
1330
|
display: flex;
|
|
1322
1331
|
align-items: center;
|
|
1323
1332
|
margin-inline-end: calc(var(--bds-space_s) * -1);
|
|
1324
1333
|
transition: var(--bds-animation_transition);
|
|
1325
1334
|
}
|
|
1335
|
+
.bds220Button-button.bds220Button---iconOnly .bds220Button-iconStart,
|
|
1336
|
+
.bds220Button-button.bds220Button---iconOnly .bds220Button-iconEnd {
|
|
1337
|
+
margin-inline: 0;
|
|
1338
|
+
}
|
|
1326
1339
|
@media (hover: hover) and (pointer: fine) {
|
|
1327
|
-
.
|
|
1340
|
+
.bds220Button-button:hover .bds220Button-iconStart svg {
|
|
1328
1341
|
animation: fadeZoom 2s ease-out infinite;
|
|
1329
1342
|
}
|
|
1330
|
-
.
|
|
1343
|
+
.bds220Button-button:hover .bds220Button-iconEnd svg {
|
|
1331
1344
|
animation: fadeZoom 2s ease-out infinite;
|
|
1332
1345
|
}
|
|
1333
1346
|
}
|
|
1334
|
-
.
|
|
1347
|
+
.bds220Button-button:focus-visible {
|
|
1335
1348
|
outline: var(--bds-outline_default);
|
|
1336
1349
|
outline-offset: var(--bds-outline_offset);
|
|
1337
1350
|
}
|
|
1338
1351
|
@media (hover: hover) and (pointer: fine) {
|
|
1339
|
-
.
|
|
1352
|
+
.bds220Button-button.bds220Button---default:hover {
|
|
1340
1353
|
--button_bg: var(--button_bg--hover, var(--bds-color_bg));
|
|
1341
1354
|
--button_text: var(--button_text--hover, var(--bds-color_interactive_on-bg));
|
|
1342
1355
|
--button_pulse-color: var(--button_pulse-color--hover, var(--bds-color_interactive_on-bg));
|
|
@@ -1344,8 +1357,8 @@
|
|
|
1344
1357
|
}
|
|
1345
1358
|
}
|
|
1346
1359
|
@media (hover: hover) and (pointer: fine) {
|
|
1347
|
-
.
|
|
1348
|
-
.
|
|
1360
|
+
.bds220Button-button.bds220Button---outline:hover,
|
|
1361
|
+
.bds220Button-button.bds220Button---ghost:hover {
|
|
1349
1362
|
--button_bg: var(--button_bg--outline-hover, var(--button_color));
|
|
1350
1363
|
--button_text: var(--button_text--outline-hover, var(--button_on-color));
|
|
1351
1364
|
--bdc_color: transparent;
|
|
@@ -1354,8 +1367,8 @@
|
|
|
1354
1367
|
}
|
|
1355
1368
|
|
|
1356
1369
|
/* src/components/interaction/Command/Command.module.css */
|
|
1357
|
-
@layer boostdev.
|
|
1358
|
-
.
|
|
1370
|
+
@layer boostdev.bds220Command-component {
|
|
1371
|
+
.bds220Command-dialog {
|
|
1359
1372
|
padding: 0;
|
|
1360
1373
|
border: none;
|
|
1361
1374
|
border-radius: var(--bds-border_radius--m);
|
|
@@ -1365,11 +1378,11 @@
|
|
|
1365
1378
|
overflow: visible;
|
|
1366
1379
|
margin-block-start: 10vh;
|
|
1367
1380
|
}
|
|
1368
|
-
.
|
|
1381
|
+
.bds220Command-dialog::backdrop {
|
|
1369
1382
|
background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
|
|
1370
1383
|
backdrop-filter: blur(3px);
|
|
1371
1384
|
}
|
|
1372
|
-
.
|
|
1385
|
+
.bds220Command-palette {
|
|
1373
1386
|
display: flex;
|
|
1374
1387
|
flex-direction: column;
|
|
1375
1388
|
background-color: var(--command_color, var(--bds-color_bg));
|
|
@@ -1382,7 +1395,7 @@
|
|
|
1382
1395
|
--bdc-outline_radius: var(--bds-border_radius--m);
|
|
1383
1396
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
|
|
1384
1397
|
}
|
|
1385
|
-
.
|
|
1398
|
+
.bds220Command-searchRow {
|
|
1386
1399
|
display: flex;
|
|
1387
1400
|
align-items: center;
|
|
1388
1401
|
gap: var(--bds-space_xs);
|
|
@@ -1390,13 +1403,13 @@
|
|
|
1390
1403
|
border-block-end: 1px solid currentcolor;
|
|
1391
1404
|
flex-shrink: 0;
|
|
1392
1405
|
}
|
|
1393
|
-
.
|
|
1406
|
+
.bds220Command-searchIcon {
|
|
1394
1407
|
inline-size: 1.25rem;
|
|
1395
1408
|
block-size: 1.25rem;
|
|
1396
1409
|
color: var(--bds-color_on-bg);
|
|
1397
1410
|
flex-shrink: 0;
|
|
1398
1411
|
}
|
|
1399
|
-
.
|
|
1412
|
+
.bds220Command-search {
|
|
1400
1413
|
flex: 1;
|
|
1401
1414
|
border: none;
|
|
1402
1415
|
outline: none;
|
|
@@ -1406,10 +1419,10 @@
|
|
|
1406
1419
|
background: transparent;
|
|
1407
1420
|
min-inline-size: 0;
|
|
1408
1421
|
}
|
|
1409
|
-
.
|
|
1422
|
+
.bds220Command-search::placeholder {
|
|
1410
1423
|
color: var(--bds-color_on-bg);
|
|
1411
1424
|
}
|
|
1412
|
-
.
|
|
1425
|
+
.bds220Command-escHint {
|
|
1413
1426
|
font-size: var(--bds-font_size--body--s);
|
|
1414
1427
|
color: var(--bds-color_on-bg);
|
|
1415
1428
|
border-radius: var(--bds-border_radius--xs);
|
|
@@ -1419,18 +1432,18 @@
|
|
|
1419
1432
|
border: none;
|
|
1420
1433
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
1421
1434
|
}
|
|
1422
|
-
.
|
|
1435
|
+
.bds220Command-list {
|
|
1423
1436
|
overflow-block: auto;
|
|
1424
1437
|
list-style: none;
|
|
1425
1438
|
margin: 0;
|
|
1426
1439
|
padding: var(--bds-space_xs) 0;
|
|
1427
1440
|
}
|
|
1428
|
-
.
|
|
1441
|
+
.bds220Command-groupList {
|
|
1429
1442
|
list-style: none;
|
|
1430
1443
|
margin: 0;
|
|
1431
1444
|
padding: 0;
|
|
1432
1445
|
}
|
|
1433
|
-
.
|
|
1446
|
+
.bds220Command-group {
|
|
1434
1447
|
padding: var(--bds-space_xs) var(--bds-space_m);
|
|
1435
1448
|
font-size: var(--bds-font_size--body--s);
|
|
1436
1449
|
font-weight: var(--bds-font_weight--semibold);
|
|
@@ -1438,7 +1451,7 @@
|
|
|
1438
1451
|
text-transform: uppercase;
|
|
1439
1452
|
letter-spacing: 0.05em;
|
|
1440
1453
|
}
|
|
1441
|
-
.
|
|
1454
|
+
.bds220Command-item {
|
|
1442
1455
|
display: flex;
|
|
1443
1456
|
align-items: center;
|
|
1444
1457
|
gap: var(--bds-space_s);
|
|
@@ -1446,19 +1459,19 @@
|
|
|
1446
1459
|
cursor: pointer;
|
|
1447
1460
|
transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1448
1461
|
}
|
|
1449
|
-
.
|
|
1462
|
+
.bds220Command-itemActive {
|
|
1450
1463
|
background-color: var(--command_item-bg--active, var(--bds-color_bg--subtle));
|
|
1451
1464
|
}
|
|
1452
|
-
.
|
|
1465
|
+
.bds220Command-itemLabel {
|
|
1453
1466
|
flex: 1;
|
|
1454
1467
|
font-size: var(--bds-font_size--body);
|
|
1455
1468
|
color: var(--bds-color_on-bg);
|
|
1456
1469
|
}
|
|
1457
|
-
.
|
|
1470
|
+
.bds220Command-itemDesc {
|
|
1458
1471
|
font-size: var(--bds-font_size--body--s);
|
|
1459
1472
|
color: var(--bds-color_on-bg);
|
|
1460
1473
|
}
|
|
1461
|
-
.
|
|
1474
|
+
.bds220Command-shortcut {
|
|
1462
1475
|
font-size: var(--bds-font_size--body--s);
|
|
1463
1476
|
color: var(--bds-color_on-bg);
|
|
1464
1477
|
border-radius: var(--bds-border_radius--xs);
|
|
@@ -1467,7 +1480,7 @@
|
|
|
1467
1480
|
border: none;
|
|
1468
1481
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
1469
1482
|
}
|
|
1470
|
-
.
|
|
1483
|
+
.bds220Command-empty {
|
|
1471
1484
|
padding: var(--bds-space_l) var(--bds-space_m);
|
|
1472
1485
|
text-align: center;
|
|
1473
1486
|
color: var(--bds-color_on-bg);
|
|
@@ -1476,8 +1489,8 @@
|
|
|
1476
1489
|
}
|
|
1477
1490
|
|
|
1478
1491
|
/* src/components/interaction/Dialog/Dialog.module.css */
|
|
1479
|
-
@layer boostdev.
|
|
1480
|
-
.
|
|
1492
|
+
@layer boostdev.bds220Dialog-component {
|
|
1493
|
+
.bds220Dialog-dialog {
|
|
1481
1494
|
font-size: var(--bds-font_size--body--s);
|
|
1482
1495
|
border: var(--dialog_border, none);
|
|
1483
1496
|
--bdc_color: currentcolor;
|
|
@@ -1491,14 +1504,14 @@
|
|
|
1491
1504
|
max-block-size: 90svh;
|
|
1492
1505
|
overflow: visible;
|
|
1493
1506
|
}
|
|
1494
|
-
.
|
|
1507
|
+
.bds220Dialog-dialogContent {
|
|
1495
1508
|
display: grid;
|
|
1496
1509
|
gap: var(--bds-grid_gap);
|
|
1497
1510
|
overflow-block: auto;
|
|
1498
1511
|
min-block-size: 0;
|
|
1499
1512
|
flex: 1;
|
|
1500
1513
|
}
|
|
1501
|
-
.
|
|
1514
|
+
.bds220Dialog-closeButton {
|
|
1502
1515
|
all: unset;
|
|
1503
1516
|
position: absolute;
|
|
1504
1517
|
inset-block-start: -1em;
|
|
@@ -1516,23 +1529,23 @@
|
|
|
1516
1529
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
1517
1530
|
cursor: pointer;
|
|
1518
1531
|
}
|
|
1519
|
-
.
|
|
1532
|
+
.bds220Dialog-closeButton:focus-visible {
|
|
1520
1533
|
outline: var(--bds-outline_default);
|
|
1521
1534
|
outline-offset: var(--bds-outline_offset);
|
|
1522
1535
|
}
|
|
1523
|
-
.
|
|
1536
|
+
.bds220Dialog-closeButton svg {
|
|
1524
1537
|
inline-size: 1.25em;
|
|
1525
1538
|
block-size: 1.25em;
|
|
1526
1539
|
}
|
|
1527
|
-
.
|
|
1540
|
+
.bds220Dialog-dialog::backdrop {
|
|
1528
1541
|
background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
|
|
1529
1542
|
backdrop-filter: blur(3px);
|
|
1530
1543
|
}
|
|
1531
1544
|
}
|
|
1532
1545
|
|
|
1533
1546
|
/* src/components/interaction/Drawer/Drawer.module.css */
|
|
1534
|
-
@layer boostdev.
|
|
1535
|
-
.
|
|
1547
|
+
@layer boostdev.bds220Drawer-component {
|
|
1548
|
+
.bds220Drawer-drawer {
|
|
1536
1549
|
position: fixed;
|
|
1537
1550
|
inset-block: 0;
|
|
1538
1551
|
inset-inline: auto 0;
|
|
@@ -1555,22 +1568,22 @@
|
|
|
1555
1568
|
display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
|
|
1556
1569
|
overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
|
|
1557
1570
|
}
|
|
1558
|
-
.
|
|
1571
|
+
.bds220Drawer---side_left.bds220Drawer-drawer {
|
|
1559
1572
|
inset-inline: 0 auto;
|
|
1560
1573
|
translate: -100% 0;
|
|
1561
1574
|
}
|
|
1562
|
-
.
|
|
1575
|
+
.bds220Drawer-drawer[open] {
|
|
1563
1576
|
translate: 0 0;
|
|
1564
1577
|
}
|
|
1565
1578
|
@starting-style {
|
|
1566
|
-
.
|
|
1579
|
+
.bds220Drawer-drawer[open] {
|
|
1567
1580
|
translate: 100% 0;
|
|
1568
1581
|
}
|
|
1569
|
-
.
|
|
1582
|
+
.bds220Drawer---side_left.bds220Drawer-drawer[open] {
|
|
1570
1583
|
translate: -100% 0;
|
|
1571
1584
|
}
|
|
1572
1585
|
}
|
|
1573
|
-
.
|
|
1586
|
+
.bds220Drawer-drawer::backdrop {
|
|
1574
1587
|
background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
|
|
1575
1588
|
backdrop-filter: blur(3px);
|
|
1576
1589
|
opacity: 0;
|
|
@@ -1579,15 +1592,15 @@
|
|
|
1579
1592
|
display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
|
|
1580
1593
|
overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
|
|
1581
1594
|
}
|
|
1582
|
-
.
|
|
1595
|
+
.bds220Drawer-drawer[open]::backdrop {
|
|
1583
1596
|
opacity: 1;
|
|
1584
1597
|
}
|
|
1585
1598
|
@starting-style {
|
|
1586
|
-
.
|
|
1599
|
+
.bds220Drawer-drawer[open]::backdrop {
|
|
1587
1600
|
opacity: 0;
|
|
1588
1601
|
}
|
|
1589
1602
|
}
|
|
1590
|
-
.
|
|
1603
|
+
.bds220Drawer-header {
|
|
1591
1604
|
display: flex;
|
|
1592
1605
|
align-items: center;
|
|
1593
1606
|
justify-content: space-between;
|
|
@@ -1595,7 +1608,7 @@
|
|
|
1595
1608
|
border-block-end: 1px solid currentcolor;
|
|
1596
1609
|
flex-shrink: 0;
|
|
1597
1610
|
}
|
|
1598
|
-
.
|
|
1611
|
+
.bds220Drawer-closeButton {
|
|
1599
1612
|
all: unset;
|
|
1600
1613
|
display: flex;
|
|
1601
1614
|
align-items: center;
|
|
@@ -1606,20 +1619,20 @@
|
|
|
1606
1619
|
cursor: pointer;
|
|
1607
1620
|
transition: var(--bds-animation_transition);
|
|
1608
1621
|
}
|
|
1609
|
-
.
|
|
1622
|
+
.bds220Drawer-closeButton svg {
|
|
1610
1623
|
inline-size: 1.25rem;
|
|
1611
1624
|
block-size: 1.25rem;
|
|
1612
1625
|
}
|
|
1613
|
-
.
|
|
1626
|
+
.bds220Drawer-closeButton:focus-visible {
|
|
1614
1627
|
outline: var(--bds-outline_default);
|
|
1615
1628
|
outline-offset: var(--bds-outline_offset);
|
|
1616
1629
|
}
|
|
1617
1630
|
@media (hover: hover) and (pointer: fine) {
|
|
1618
|
-
.
|
|
1631
|
+
.bds220Drawer-closeButton:hover {
|
|
1619
1632
|
background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
|
|
1620
1633
|
}
|
|
1621
1634
|
}
|
|
1622
|
-
.
|
|
1635
|
+
.bds220Drawer-body {
|
|
1623
1636
|
flex: 1;
|
|
1624
1637
|
overflow-block: auto;
|
|
1625
1638
|
padding: var(--bds-space_l);
|
|
@@ -1627,20 +1640,20 @@
|
|
|
1627
1640
|
flex-direction: column;
|
|
1628
1641
|
}
|
|
1629
1642
|
@media (prefers-reduced-motion: reduce) {
|
|
1630
|
-
.
|
|
1631
|
-
.
|
|
1643
|
+
.bds220Drawer-drawer,
|
|
1644
|
+
.bds220Drawer-drawer::backdrop {
|
|
1632
1645
|
transition: none;
|
|
1633
1646
|
}
|
|
1634
1647
|
}
|
|
1635
1648
|
}
|
|
1636
1649
|
|
|
1637
1650
|
/* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
|
|
1638
|
-
@layer boostdev.
|
|
1639
|
-
.
|
|
1651
|
+
@layer boostdev.bds220DropdownMenu-component {
|
|
1652
|
+
.bds220DropdownMenu-wrapper {
|
|
1640
1653
|
position: relative;
|
|
1641
1654
|
display: inline-flex;
|
|
1642
1655
|
}
|
|
1643
|
-
.
|
|
1656
|
+
.bds220DropdownMenu-menu {
|
|
1644
1657
|
position: absolute;
|
|
1645
1658
|
inset-block-start: calc(100% + var(--bds-space_xxs));
|
|
1646
1659
|
z-index: var(--bds-z-index_dropdown);
|
|
@@ -1656,22 +1669,22 @@
|
|
|
1656
1669
|
list-style: none;
|
|
1657
1670
|
margin: 0;
|
|
1658
1671
|
}
|
|
1659
|
-
.
|
|
1672
|
+
.bds220DropdownMenu-menu li {
|
|
1660
1673
|
list-style: none;
|
|
1661
1674
|
}
|
|
1662
|
-
.
|
|
1675
|
+
.bds220DropdownMenu---placement_bottom-start {
|
|
1663
1676
|
inset-inline-start: 0;
|
|
1664
1677
|
}
|
|
1665
|
-
.
|
|
1678
|
+
.bds220DropdownMenu---placement_bottom-end {
|
|
1666
1679
|
inset-inline-end: 0;
|
|
1667
1680
|
}
|
|
1668
|
-
.
|
|
1681
|
+
.bds220DropdownMenu-separator {
|
|
1669
1682
|
border: none;
|
|
1670
1683
|
border-block-start: 1px solid currentcolor;
|
|
1671
1684
|
margin: var(--bds-space_xxs) 0;
|
|
1672
1685
|
opacity: 0.15;
|
|
1673
1686
|
}
|
|
1674
|
-
.
|
|
1687
|
+
.bds220DropdownMenu-item {
|
|
1675
1688
|
all: unset;
|
|
1676
1689
|
display: flex;
|
|
1677
1690
|
align-items: center;
|
|
@@ -1685,22 +1698,22 @@
|
|
|
1685
1698
|
box-sizing: border-box;
|
|
1686
1699
|
transition: var(--bds-animation_transition);
|
|
1687
1700
|
}
|
|
1688
|
-
.
|
|
1701
|
+
.bds220DropdownMenu-item:disabled {
|
|
1689
1702
|
opacity: 0.4;
|
|
1690
1703
|
cursor: not-allowed;
|
|
1691
1704
|
}
|
|
1692
|
-
.
|
|
1705
|
+
.bds220DropdownMenu-item:focus-visible {
|
|
1693
1706
|
outline: var(--bds-outline_default);
|
|
1694
1707
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
1695
1708
|
border-radius: var(--bds-border_radius--xs);
|
|
1696
1709
|
}
|
|
1697
1710
|
@media (hover: hover) and (pointer: fine) {
|
|
1698
|
-
.
|
|
1711
|
+
.bds220DropdownMenu-item:not(:disabled):hover {
|
|
1699
1712
|
background-color: var(--dropdown_item-bg--hover, var(--bds-color_bg--subtle));
|
|
1700
1713
|
color: var(--dropdown_item-color--hover, var(--bds-color_interactive_on-bg));
|
|
1701
1714
|
}
|
|
1702
1715
|
}
|
|
1703
|
-
.
|
|
1716
|
+
.bds220DropdownMenu-icon {
|
|
1704
1717
|
display: flex;
|
|
1705
1718
|
align-items: center;
|
|
1706
1719
|
flex-shrink: 0;
|
|
@@ -1708,11 +1721,11 @@
|
|
|
1708
1721
|
}
|
|
1709
1722
|
|
|
1710
1723
|
/* src/components/interaction/Popover/Popover.module.css */
|
|
1711
|
-
@layer boostdev.
|
|
1712
|
-
.
|
|
1724
|
+
@layer boostdev.bds220Popover-component {
|
|
1725
|
+
.bds220Popover-wrapper {
|
|
1713
1726
|
display: inline-flex;
|
|
1714
1727
|
}
|
|
1715
|
-
.
|
|
1728
|
+
.bds220Popover-panel {
|
|
1716
1729
|
position: fixed;
|
|
1717
1730
|
inset: unset;
|
|
1718
1731
|
margin: 0;
|
|
@@ -1731,7 +1744,7 @@
|
|
|
1731
1744
|
color: var(--popover_on-color, var(--bds-color_on-bg));
|
|
1732
1745
|
font-size: var(--bds-font_size--body);
|
|
1733
1746
|
}
|
|
1734
|
-
.
|
|
1747
|
+
.bds220Popover-panel[data-placement=bottom] {
|
|
1735
1748
|
top: anchor(bottom);
|
|
1736
1749
|
left: anchor(left);
|
|
1737
1750
|
margin-block-start: var(--bds-space_xs, 8px);
|
|
@@ -1740,7 +1753,7 @@
|
|
|
1740
1753
|
--popover-right,
|
|
1741
1754
|
--popover-left;
|
|
1742
1755
|
}
|
|
1743
|
-
.
|
|
1756
|
+
.bds220Popover-panel[data-placement=top] {
|
|
1744
1757
|
bottom: anchor(top);
|
|
1745
1758
|
left: anchor(left);
|
|
1746
1759
|
margin-block-end: var(--bds-space_xs, 8px);
|
|
@@ -1749,7 +1762,7 @@
|
|
|
1749
1762
|
--popover-right,
|
|
1750
1763
|
--popover-left;
|
|
1751
1764
|
}
|
|
1752
|
-
.
|
|
1765
|
+
.bds220Popover-panel[data-placement=right] {
|
|
1753
1766
|
top: anchor(top);
|
|
1754
1767
|
left: anchor(right);
|
|
1755
1768
|
margin-inline-start: var(--bds-space_xs, 8px);
|
|
@@ -1758,7 +1771,7 @@
|
|
|
1758
1771
|
--popover-bottom,
|
|
1759
1772
|
--popover-top;
|
|
1760
1773
|
}
|
|
1761
|
-
.
|
|
1774
|
+
.bds220Popover-panel[data-placement=left] {
|
|
1762
1775
|
top: anchor(top);
|
|
1763
1776
|
right: anchor(left);
|
|
1764
1777
|
margin-inline-end: var(--bds-space_xs, 8px);
|
|
@@ -1816,10 +1829,10 @@
|
|
|
1816
1829
|
margin-block-end: var(--bds-space_xs, 8px);
|
|
1817
1830
|
}
|
|
1818
1831
|
@media (width <= 420px) {
|
|
1819
|
-
.
|
|
1820
|
-
.
|
|
1821
|
-
.
|
|
1822
|
-
.
|
|
1832
|
+
.bds220Popover-panel[data-placement=bottom],
|
|
1833
|
+
.bds220Popover-panel[data-placement=top],
|
|
1834
|
+
.bds220Popover-panel[data-placement=left],
|
|
1835
|
+
.bds220Popover-panel[data-placement=right] {
|
|
1823
1836
|
left: var(--bds-space_xs, 8px);
|
|
1824
1837
|
right: var(--bds-space_xs, 8px);
|
|
1825
1838
|
inline-size: 100%;
|
|
@@ -1828,13 +1841,13 @@
|
|
|
1828
1841
|
}
|
|
1829
1842
|
}
|
|
1830
1843
|
@media (aspect-ratio >= 2/1) {
|
|
1831
|
-
.
|
|
1844
|
+
.bds220Popover-panel[data-placement=bottom] {
|
|
1832
1845
|
position-try-fallbacks:
|
|
1833
1846
|
--popover-top,
|
|
1834
1847
|
--popover-right,
|
|
1835
1848
|
--popover-left;
|
|
1836
1849
|
}
|
|
1837
|
-
.
|
|
1850
|
+
.bds220Popover-panel[data-placement=top] {
|
|
1838
1851
|
position-try-fallbacks:
|
|
1839
1852
|
--popover-bottom,
|
|
1840
1853
|
--popover-right,
|
|
@@ -1844,24 +1857,24 @@
|
|
|
1844
1857
|
}
|
|
1845
1858
|
|
|
1846
1859
|
/* src/components/interaction/Rating/Rating.module.css */
|
|
1847
|
-
@layer boostdev.
|
|
1848
|
-
.
|
|
1860
|
+
@layer boostdev.bds220Rating-component {
|
|
1861
|
+
.bds220Rating-rating {
|
|
1849
1862
|
display: inline-flex;
|
|
1850
1863
|
gap: var(--bds-space_xxxs);
|
|
1851
1864
|
color: var(--rating_color, var(--bds-color_bg));
|
|
1852
1865
|
}
|
|
1853
|
-
.
|
|
1866
|
+
.bds220Rating-star {
|
|
1854
1867
|
width: 1.5em;
|
|
1855
1868
|
height: 1.5em;
|
|
1856
1869
|
}
|
|
1857
|
-
.
|
|
1870
|
+
.bds220Rating---filled {
|
|
1858
1871
|
color: var(--rating_color--filled, var(--bds-color_warning));
|
|
1859
1872
|
}
|
|
1860
1873
|
}
|
|
1861
1874
|
|
|
1862
1875
|
/* src/components/interaction/Toast/Toast.module.css */
|
|
1863
|
-
@layer boostdev.
|
|
1864
|
-
.
|
|
1876
|
+
@layer boostdev.bds220Toast-component {
|
|
1877
|
+
.bds220Toast-toastContainer {
|
|
1865
1878
|
position: fixed;
|
|
1866
1879
|
inset: unset;
|
|
1867
1880
|
inset-block-end: var(--bds-space_xl);
|
|
@@ -1873,7 +1886,7 @@
|
|
|
1873
1886
|
padding: 0;
|
|
1874
1887
|
background: transparent;
|
|
1875
1888
|
}
|
|
1876
|
-
.
|
|
1889
|
+
.bds220Toast-toast {
|
|
1877
1890
|
padding: var(--bds-space_m) var(--bds-space_l);
|
|
1878
1891
|
background-color: var(--toast_color, var(--bds-color_bg));
|
|
1879
1892
|
color: var(--toast_on-color, var(--bds-color_on-bg));
|
|
@@ -1885,26 +1898,26 @@
|
|
|
1885
1898
|
min-inline-size: 300px;
|
|
1886
1899
|
animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
|
|
1887
1900
|
}
|
|
1888
|
-
.
|
|
1901
|
+
.bds220Toast-toast.bds220Toast---variant_success {
|
|
1889
1902
|
--toast_color: var(--bds-color_success);
|
|
1890
1903
|
--toast_on-color: var(--bds-color_on-success);
|
|
1891
1904
|
}
|
|
1892
|
-
.
|
|
1905
|
+
.bds220Toast-toast.bds220Toast---variant_warning {
|
|
1893
1906
|
--toast_color: var(--bds-color_warning);
|
|
1894
1907
|
--toast_on-color: var(--bds-color_on-warning);
|
|
1895
1908
|
}
|
|
1896
|
-
.
|
|
1909
|
+
.bds220Toast-toast.bds220Toast---variant_info {
|
|
1897
1910
|
--toast_color: var(--bds-color_bg--subtle);
|
|
1898
1911
|
--toast_on-color: var(--bds-color_on-bg--subtle);
|
|
1899
1912
|
}
|
|
1900
|
-
.
|
|
1913
|
+
.bds220Toast-toast.bds220Toast---variant_error {
|
|
1901
1914
|
--toast_color: var(--bds-color_error);
|
|
1902
1915
|
--toast_on-color: var(--bds-color_on-error);
|
|
1903
1916
|
}
|
|
1904
|
-
.
|
|
1917
|
+
.bds220Toast-message {
|
|
1905
1918
|
flex: 1;
|
|
1906
1919
|
}
|
|
1907
|
-
.
|
|
1920
|
+
.bds220Toast-closeButton {
|
|
1908
1921
|
display: flex;
|
|
1909
1922
|
align-items: center;
|
|
1910
1923
|
justify-content: center;
|
|
@@ -1917,7 +1930,7 @@
|
|
|
1917
1930
|
cursor: pointer;
|
|
1918
1931
|
color: var(--toast_on-color);
|
|
1919
1932
|
}
|
|
1920
|
-
.
|
|
1933
|
+
.bds220Toast-closeButton svg {
|
|
1921
1934
|
inline-size: 1rem;
|
|
1922
1935
|
block-size: 1rem;
|
|
1923
1936
|
}
|
|
@@ -1934,18 +1947,18 @@
|
|
|
1934
1947
|
}
|
|
1935
1948
|
|
|
1936
1949
|
/* src/components/interaction/form/Checkbox/Checkbox.module.css */
|
|
1937
|
-
@layer boostdev.
|
|
1938
|
-
.
|
|
1950
|
+
@layer boostdev.bds220Checkbox-component {
|
|
1951
|
+
.bds220Checkbox-checkboxGroup {
|
|
1939
1952
|
--inputSize: calc(var(--bds-space_s) * 2);
|
|
1940
1953
|
display: flex;
|
|
1941
1954
|
flex-direction: column;
|
|
1942
1955
|
}
|
|
1943
|
-
.
|
|
1956
|
+
.bds220Checkbox-inputWrapper {
|
|
1944
1957
|
display: flex;
|
|
1945
1958
|
align-items: stretch;
|
|
1946
1959
|
gap: var(--bds-space_xs);
|
|
1947
1960
|
}
|
|
1948
|
-
.
|
|
1961
|
+
.bds220Checkbox-checkbox {
|
|
1949
1962
|
margin-block-start: 0.25em;
|
|
1950
1963
|
inline-size: var(--inputSize);
|
|
1951
1964
|
block-size: var(--inputSize);
|
|
@@ -1961,11 +1974,11 @@
|
|
|
1961
1974
|
position: relative;
|
|
1962
1975
|
transition: --bdc_color 0.3s ease, background-color 0.3s ease;
|
|
1963
1976
|
}
|
|
1964
|
-
.
|
|
1977
|
+
.bds220Checkbox-checkbox:checked {
|
|
1965
1978
|
background-color: var(--checkbox_color-active, var(--bdc-color_active));
|
|
1966
1979
|
--bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
|
|
1967
1980
|
}
|
|
1968
|
-
.
|
|
1981
|
+
.bds220Checkbox-checkbox:checked::after {
|
|
1969
1982
|
content: "";
|
|
1970
1983
|
position: absolute;
|
|
1971
1984
|
inset-inline-start: 0.6em;
|
|
@@ -1976,33 +1989,33 @@
|
|
|
1976
1989
|
border-width: 0 2px 2px 0;
|
|
1977
1990
|
transform: rotate(45deg);
|
|
1978
1991
|
}
|
|
1979
|
-
.
|
|
1992
|
+
.bds220Checkbox-checkbox:focus {
|
|
1980
1993
|
--bdc_color: var(--bdc_color--focus);
|
|
1981
1994
|
}
|
|
1982
|
-
.
|
|
1995
|
+
.bds220Checkbox-checkbox:focus-visible {
|
|
1983
1996
|
outline: var(--bds-outline_default);
|
|
1984
1997
|
outline-offset: var(--bds-outline_offset);
|
|
1985
1998
|
}
|
|
1986
|
-
.
|
|
1999
|
+
.bds220Checkbox-checkboxError {
|
|
1987
2000
|
--bdc_color: var(--bdc_color--error);
|
|
1988
2001
|
}
|
|
1989
2002
|
}
|
|
1990
2003
|
|
|
1991
2004
|
/* src/components/interaction/form/atoms/Message.module.css */
|
|
1992
|
-
@layer boostdev.
|
|
1993
|
-
.
|
|
1994
|
-
.
|
|
2005
|
+
@layer boostdev.bds220Message-component {
|
|
2006
|
+
.bds220Message-error,
|
|
2007
|
+
.bds220Message-hint {
|
|
1995
2008
|
font-size: var(--bds-font_size--body--s);
|
|
1996
2009
|
margin-inline-start: var(--labelPosition);
|
|
1997
2010
|
}
|
|
1998
|
-
.
|
|
2011
|
+
.bds220Message-error {
|
|
1999
2012
|
color: var(--bds-color_error_on-bg);
|
|
2000
2013
|
}
|
|
2001
2014
|
}
|
|
2002
2015
|
|
|
2003
2016
|
/* src/components/interaction/form/atoms/Label.module.css */
|
|
2004
|
-
@layer boostdev.
|
|
2005
|
-
.
|
|
2017
|
+
@layer boostdev.bds220Label-component {
|
|
2018
|
+
.bds220Label-label {
|
|
2006
2019
|
display: flex;
|
|
2007
2020
|
align-items: center;
|
|
2008
2021
|
font-family: var(--bds-font_family--body);
|
|
@@ -2012,8 +2025,8 @@
|
|
|
2012
2025
|
}
|
|
2013
2026
|
|
|
2014
2027
|
/* src/components/interaction/form/atoms/InputContainer.module.css */
|
|
2015
|
-
@layer boostdev.
|
|
2016
|
-
.
|
|
2028
|
+
@layer boostdev.bds220InputContainer-component {
|
|
2029
|
+
.bds220InputContainer-container {
|
|
2017
2030
|
--labelPosition: calc(var(--inputSize) + var(--bds-space_m));
|
|
2018
2031
|
display: flex;
|
|
2019
2032
|
flex-direction: column;
|
|
@@ -2022,8 +2035,8 @@
|
|
|
2022
2035
|
}
|
|
2023
2036
|
|
|
2024
2037
|
/* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
|
|
2025
|
-
@layer boostdev.
|
|
2026
|
-
.
|
|
2038
|
+
@layer boostdev.bds220CheckboxGroup-component {
|
|
2039
|
+
.bds220CheckboxGroup-group {
|
|
2027
2040
|
border: none;
|
|
2028
2041
|
padding: 0;
|
|
2029
2042
|
margin: 0;
|
|
@@ -2031,7 +2044,7 @@
|
|
|
2031
2044
|
flex-direction: column;
|
|
2032
2045
|
gap: var(--bds-space_xs);
|
|
2033
2046
|
}
|
|
2034
|
-
.
|
|
2047
|
+
.bds220CheckboxGroup-legend {
|
|
2035
2048
|
font-family: var(--bds-font_family--body);
|
|
2036
2049
|
font-size: var(--bds-font_size--body--s);
|
|
2037
2050
|
font-weight: var(--bds-font_weight--medium);
|
|
@@ -2039,10 +2052,10 @@
|
|
|
2039
2052
|
padding: 0;
|
|
2040
2053
|
margin-block-end: var(--bds-space_xs);
|
|
2041
2054
|
}
|
|
2042
|
-
.
|
|
2055
|
+
.bds220CheckboxGroup-required {
|
|
2043
2056
|
color: var(--bds-color_error);
|
|
2044
2057
|
}
|
|
2045
|
-
.
|
|
2058
|
+
.bds220CheckboxGroup-items {
|
|
2046
2059
|
display: flex;
|
|
2047
2060
|
flex-direction: column;
|
|
2048
2061
|
gap: var(--bds-space_xs);
|
|
@@ -2050,17 +2063,17 @@
|
|
|
2050
2063
|
}
|
|
2051
2064
|
|
|
2052
2065
|
/* src/components/interaction/form/Combobox/Combobox.module.css */
|
|
2053
|
-
@layer boostdev.
|
|
2054
|
-
.
|
|
2066
|
+
@layer boostdev.bds220Combobox-component {
|
|
2067
|
+
.bds220Combobox-formGroup {
|
|
2055
2068
|
display: flex;
|
|
2056
2069
|
flex-direction: column;
|
|
2057
2070
|
}
|
|
2058
|
-
.
|
|
2071
|
+
.bds220Combobox-inputWrapper {
|
|
2059
2072
|
position: relative;
|
|
2060
2073
|
display: flex;
|
|
2061
2074
|
align-items: center;
|
|
2062
2075
|
}
|
|
2063
|
-
.
|
|
2076
|
+
.bds220Combobox-input {
|
|
2064
2077
|
appearance: none;
|
|
2065
2078
|
inline-size: 100%;
|
|
2066
2079
|
font-family: var(--bds-font_family--body);
|
|
@@ -2076,21 +2089,21 @@
|
|
|
2076
2089
|
color: var(--combobox_color, var(--bds-color_on-bg));
|
|
2077
2090
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2078
2091
|
}
|
|
2079
|
-
.
|
|
2092
|
+
.bds220Combobox-input:focus {
|
|
2080
2093
|
--bdc_color: var(--bdc_color--focus);
|
|
2081
2094
|
}
|
|
2082
|
-
.
|
|
2095
|
+
.bds220Combobox-input:focus-visible {
|
|
2083
2096
|
outline: var(--bds-outline_default);
|
|
2084
2097
|
outline-offset: var(--bds-outline_offset);
|
|
2085
2098
|
}
|
|
2086
|
-
.
|
|
2099
|
+
.bds220Combobox-input:disabled {
|
|
2087
2100
|
opacity: 0.5;
|
|
2088
2101
|
cursor: not-allowed;
|
|
2089
2102
|
}
|
|
2090
|
-
.
|
|
2103
|
+
.bds220Combobox-inputError {
|
|
2091
2104
|
--bdc_color: var(--bdc_color--error);
|
|
2092
2105
|
}
|
|
2093
|
-
.
|
|
2106
|
+
.bds220Combobox-chevron {
|
|
2094
2107
|
position: absolute;
|
|
2095
2108
|
inset-inline-end: var(--bds-space_s);
|
|
2096
2109
|
display: flex;
|
|
@@ -2098,11 +2111,11 @@
|
|
|
2098
2111
|
pointer-events: none;
|
|
2099
2112
|
color: var(--combobox_color, var(--bds-color_on-bg));
|
|
2100
2113
|
}
|
|
2101
|
-
.
|
|
2114
|
+
.bds220Combobox-chevron svg {
|
|
2102
2115
|
inline-size: 1rem;
|
|
2103
2116
|
block-size: 1rem;
|
|
2104
2117
|
}
|
|
2105
|
-
.
|
|
2118
|
+
.bds220Combobox-listbox {
|
|
2106
2119
|
position: absolute;
|
|
2107
2120
|
inset-block-start: calc(100% + var(--bds-space_xxs));
|
|
2108
2121
|
inset-inline: 0;
|
|
@@ -2120,7 +2133,7 @@
|
|
|
2120
2133
|
color: var(--combobox_on-color, var(--bds-color_on-bg));
|
|
2121
2134
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
|
|
2122
2135
|
}
|
|
2123
|
-
.
|
|
2136
|
+
.bds220Combobox-option {
|
|
2124
2137
|
display: flex;
|
|
2125
2138
|
align-items: center;
|
|
2126
2139
|
padding: var(--bds-space_xs) var(--bds-space_m);
|
|
@@ -2129,33 +2142,33 @@
|
|
|
2129
2142
|
cursor: pointer;
|
|
2130
2143
|
transition: var(--bds-animation_transition);
|
|
2131
2144
|
}
|
|
2132
|
-
.
|
|
2145
|
+
.bds220Combobox-option.bds220Combobox---highlighted {
|
|
2133
2146
|
background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
|
|
2134
2147
|
color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
|
|
2135
2148
|
}
|
|
2136
|
-
.
|
|
2149
|
+
.bds220Combobox-option.bds220Combobox---selected {
|
|
2137
2150
|
font-weight: var(--bds-font_weight--semibold);
|
|
2138
2151
|
}
|
|
2139
|
-
.
|
|
2152
|
+
.bds220Combobox-option.bds220Combobox---disabled {
|
|
2140
2153
|
opacity: 0.4;
|
|
2141
2154
|
cursor: not-allowed;
|
|
2142
2155
|
}
|
|
2143
2156
|
}
|
|
2144
2157
|
|
|
2145
2158
|
/* src/components/interaction/form/FileInput/FileInput.module.css */
|
|
2146
|
-
@layer boostdev.
|
|
2147
|
-
.
|
|
2159
|
+
@layer boostdev.bds220FileInput-component {
|
|
2160
|
+
.bds220FileInput-formGroup {
|
|
2148
2161
|
display: flex;
|
|
2149
2162
|
flex-direction: column;
|
|
2150
2163
|
}
|
|
2151
|
-
.
|
|
2164
|
+
.bds220FileInput-fieldLabel {
|
|
2152
2165
|
display: flex;
|
|
2153
2166
|
align-items: center;
|
|
2154
2167
|
font-family: var(--bds-font_family--body);
|
|
2155
2168
|
color: var(--bds-color_on-bg);
|
|
2156
2169
|
margin-block-end: var(--bds-space_xs);
|
|
2157
2170
|
}
|
|
2158
|
-
.
|
|
2171
|
+
.bds220FileInput-dropZone {
|
|
2159
2172
|
display: flex;
|
|
2160
2173
|
flex-direction: column;
|
|
2161
2174
|
align-items: center;
|
|
@@ -2169,40 +2182,40 @@
|
|
|
2169
2182
|
text-align: center;
|
|
2170
2183
|
transition: var(--bds-animation_transition);
|
|
2171
2184
|
}
|
|
2172
|
-
.
|
|
2185
|
+
.bds220FileInput-dropZone:focus-within {
|
|
2173
2186
|
outline: var(--bds-outline_default);
|
|
2174
2187
|
outline-offset: var(--bds-outline_offset);
|
|
2175
2188
|
border-color: var(--fileInput_border-color, currentcolor);
|
|
2176
2189
|
}
|
|
2177
|
-
.
|
|
2190
|
+
.bds220FileInput-isDragging {
|
|
2178
2191
|
border-color: currentcolor;
|
|
2179
2192
|
background-color: rgb(from currentcolor r g b / 8%);
|
|
2180
2193
|
}
|
|
2181
|
-
.
|
|
2194
|
+
.bds220FileInput-hasError {
|
|
2182
2195
|
border-color: var(--bds-color_error);
|
|
2183
2196
|
}
|
|
2184
|
-
.
|
|
2197
|
+
.bds220FileInput-isDisabled {
|
|
2185
2198
|
opacity: 0.5;
|
|
2186
2199
|
cursor: not-allowed;
|
|
2187
2200
|
}
|
|
2188
|
-
.
|
|
2201
|
+
.bds220FileInput-icon {
|
|
2189
2202
|
inline-size: 2rem;
|
|
2190
2203
|
block-size: 2rem;
|
|
2191
2204
|
flex-shrink: 0;
|
|
2192
2205
|
}
|
|
2193
|
-
.
|
|
2206
|
+
.bds220FileInput-prompt {
|
|
2194
2207
|
font-size: var(--bds-font_size--body);
|
|
2195
2208
|
color: var(--bds-color_on-bg);
|
|
2196
2209
|
}
|
|
2197
|
-
.
|
|
2210
|
+
.bds220FileInput-prompt strong {
|
|
2198
2211
|
color: var(--bds-color_interactive_on-bg);
|
|
2199
2212
|
font-weight: var(--bds-font_weight--semibold);
|
|
2200
2213
|
}
|
|
2201
|
-
.
|
|
2214
|
+
.bds220FileInput-acceptHint {
|
|
2202
2215
|
font-size: var(--bds-font_size--body--s);
|
|
2203
2216
|
color: var(--bds-color_on-bg);
|
|
2204
2217
|
}
|
|
2205
|
-
.
|
|
2218
|
+
.bds220FileInput-hiddenInput {
|
|
2206
2219
|
position: absolute;
|
|
2207
2220
|
inline-size: 1px;
|
|
2208
2221
|
block-size: 1px;
|
|
@@ -2212,7 +2225,7 @@
|
|
|
2212
2225
|
border: 0;
|
|
2213
2226
|
}
|
|
2214
2227
|
@media (hover: hover) and (pointer: fine) {
|
|
2215
|
-
.
|
|
2228
|
+
.bds220FileInput-dropZone:not(.bds220FileInput-isDisabled):hover {
|
|
2216
2229
|
border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
|
|
2217
2230
|
background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
|
|
2218
2231
|
}
|
|
@@ -2220,13 +2233,13 @@
|
|
|
2220
2233
|
}
|
|
2221
2234
|
|
|
2222
2235
|
/* src/components/interaction/form/FormInput/FormInput.module.css */
|
|
2223
|
-
@layer boostdev.
|
|
2224
|
-
.
|
|
2236
|
+
@layer boostdev.bds220FormInput-component {
|
|
2237
|
+
.bds220FormInput-formGroup {
|
|
2225
2238
|
--labelPosition: 0;
|
|
2226
2239
|
display: flex;
|
|
2227
2240
|
flex-direction: column;
|
|
2228
2241
|
}
|
|
2229
|
-
.
|
|
2242
|
+
.bds220FormInput-input {
|
|
2230
2243
|
font-family: var(--bds-font_family--body);
|
|
2231
2244
|
font-size: var(--bds-font_size--body);
|
|
2232
2245
|
padding: var(--bds-space_s);
|
|
@@ -2239,25 +2252,25 @@
|
|
|
2239
2252
|
background-color: var(--input_color_bg, var(--bds-color_bg));
|
|
2240
2253
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2241
2254
|
}
|
|
2242
|
-
.
|
|
2255
|
+
.bds220FormInput-input:focus {
|
|
2243
2256
|
--bdc_color: var(--bdc_color--focus);
|
|
2244
2257
|
}
|
|
2245
|
-
.
|
|
2258
|
+
.bds220FormInput-input:focus-visible {
|
|
2246
2259
|
outline: var(--bds-outline_default);
|
|
2247
2260
|
outline-offset: var(--bds-outline_offset);
|
|
2248
2261
|
}
|
|
2249
|
-
.
|
|
2262
|
+
.bds220FormInput-inputError {
|
|
2250
2263
|
--bdc_color: var(--bdc_color--error);
|
|
2251
2264
|
}
|
|
2252
2265
|
}
|
|
2253
2266
|
|
|
2254
2267
|
/* src/components/interaction/form/NumberInput/NumberInput.module.css */
|
|
2255
|
-
@layer boostdev.
|
|
2256
|
-
.
|
|
2268
|
+
@layer boostdev.bds220NumberInput-component {
|
|
2269
|
+
.bds220NumberInput-formGroup {
|
|
2257
2270
|
display: flex;
|
|
2258
2271
|
flex-direction: column;
|
|
2259
2272
|
}
|
|
2260
|
-
.
|
|
2273
|
+
.bds220NumberInput-inputRow {
|
|
2261
2274
|
display: flex;
|
|
2262
2275
|
align-items: stretch;
|
|
2263
2276
|
border: var(--numberInput_border, none);
|
|
@@ -2269,14 +2282,14 @@
|
|
|
2269
2282
|
overflow: hidden;
|
|
2270
2283
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2271
2284
|
}
|
|
2272
|
-
.
|
|
2285
|
+
.bds220NumberInput-inputRow:focus-within {
|
|
2273
2286
|
--bdc_color: var(--bdc_color--focus);
|
|
2274
2287
|
}
|
|
2275
|
-
.
|
|
2288
|
+
.bds220NumberInput-inputRow:focus-within:has(:focus-visible) {
|
|
2276
2289
|
outline: var(--bds-outline_default);
|
|
2277
2290
|
outline-offset: var(--bds-outline_offset);
|
|
2278
2291
|
}
|
|
2279
|
-
.
|
|
2292
|
+
.bds220NumberInput-input {
|
|
2280
2293
|
flex: 1;
|
|
2281
2294
|
border: none;
|
|
2282
2295
|
outline: none;
|
|
@@ -2289,14 +2302,14 @@
|
|
|
2289
2302
|
min-inline-size: 0;
|
|
2290
2303
|
appearance: textfield;
|
|
2291
2304
|
}
|
|
2292
|
-
.
|
|
2293
|
-
.
|
|
2305
|
+
.bds220NumberInput-input::-webkit-inner-spin-button,
|
|
2306
|
+
.bds220NumberInput-input::-webkit-outer-spin-button {
|
|
2294
2307
|
appearance: none;
|
|
2295
2308
|
}
|
|
2296
|
-
.
|
|
2309
|
+
.bds220NumberInput-inputError {
|
|
2297
2310
|
--bdc_color: var(--bdc_color--error);
|
|
2298
2311
|
}
|
|
2299
|
-
.
|
|
2312
|
+
.bds220NumberInput-stepper {
|
|
2300
2313
|
all: unset;
|
|
2301
2314
|
display: flex;
|
|
2302
2315
|
align-items: center;
|
|
@@ -2309,25 +2322,25 @@
|
|
|
2309
2322
|
transition: var(--bds-animation_transition);
|
|
2310
2323
|
flex-shrink: 0;
|
|
2311
2324
|
}
|
|
2312
|
-
.
|
|
2325
|
+
.bds220NumberInput-stepper svg {
|
|
2313
2326
|
width: 1rem;
|
|
2314
2327
|
height: 1rem;
|
|
2315
2328
|
color: var(--numberInput_stepper-color, var(--bds-color_interactive));
|
|
2316
2329
|
}
|
|
2317
|
-
.
|
|
2330
|
+
.bds220NumberInput-stepper:first-child {
|
|
2318
2331
|
border-start-start-radius: var(--_radius);
|
|
2319
2332
|
border-end-start-radius: var(--_radius);
|
|
2320
2333
|
}
|
|
2321
|
-
.
|
|
2334
|
+
.bds220NumberInput-stepper:last-child {
|
|
2322
2335
|
border-start-end-radius: var(--_radius);
|
|
2323
2336
|
border-end-end-radius: var(--_radius);
|
|
2324
2337
|
}
|
|
2325
|
-
.
|
|
2338
|
+
.bds220NumberInput-stepper:disabled {
|
|
2326
2339
|
opacity: 0.4;
|
|
2327
2340
|
cursor: not-allowed;
|
|
2328
2341
|
}
|
|
2329
2342
|
@media (hover: hover) and (pointer: fine) {
|
|
2330
|
-
.
|
|
2343
|
+
.bds220NumberInput-stepper:not(:disabled):hover {
|
|
2331
2344
|
background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
|
|
2332
2345
|
opacity: var(--numberInput_stepper-opacity--hover, 0.7);
|
|
2333
2346
|
}
|
|
@@ -2335,30 +2348,30 @@
|
|
|
2335
2348
|
}
|
|
2336
2349
|
|
|
2337
2350
|
/* src/components/interaction/form/Radio/Radio.module.css */
|
|
2338
|
-
@layer boostdev.
|
|
2339
|
-
.
|
|
2351
|
+
@layer boostdev.bds220Radio-component {
|
|
2352
|
+
.bds220Radio-radioGroup {
|
|
2340
2353
|
--inputSize: calc(var(--bds-space_s) * 2);
|
|
2341
2354
|
--labelPosition: calc(var(--inputSize) + var(--bds-space_m));
|
|
2342
2355
|
display: flex;
|
|
2343
2356
|
flex-direction: column;
|
|
2344
2357
|
}
|
|
2345
|
-
.
|
|
2358
|
+
.bds220Radio-inputWrapper {
|
|
2346
2359
|
display: flex;
|
|
2347
2360
|
align-items: flex-start;
|
|
2348
2361
|
gap: var(--bds-space_xs);
|
|
2349
2362
|
}
|
|
2350
|
-
.
|
|
2363
|
+
.bds220Radio-textWrapper {
|
|
2351
2364
|
display: flex;
|
|
2352
2365
|
flex-direction: column;
|
|
2353
2366
|
gap: var(--bds-space_xxxs);
|
|
2354
2367
|
padding-block-start: var(--bds-space_xxxs);
|
|
2355
2368
|
}
|
|
2356
|
-
.
|
|
2369
|
+
.bds220Radio-description {
|
|
2357
2370
|
font-size: var(--bds-font_size--body--s);
|
|
2358
2371
|
color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
|
|
2359
2372
|
line-height: var(--bds-font_line-height--body);
|
|
2360
2373
|
}
|
|
2361
|
-
.
|
|
2374
|
+
.bds220Radio-radio {
|
|
2362
2375
|
flex-shrink: 0;
|
|
2363
2376
|
margin-block-start: 0.2em;
|
|
2364
2377
|
inline-size: var(--inputSize);
|
|
@@ -2375,7 +2388,7 @@
|
|
|
2375
2388
|
position: relative;
|
|
2376
2389
|
transition: --bdc_color 0.2s ease, background-color 0.2s ease;
|
|
2377
2390
|
}
|
|
2378
|
-
.
|
|
2391
|
+
.bds220Radio-radio:checked {
|
|
2379
2392
|
background:
|
|
2380
2393
|
radial-gradient(
|
|
2381
2394
|
circle,
|
|
@@ -2383,21 +2396,21 @@
|
|
|
2383
2396
|
var(--radio_color_bg, var(--bds-color_bg)) 42%);
|
|
2384
2397
|
--bdc_color: var(--radio_color-active, var(--bdc-color_active));
|
|
2385
2398
|
}
|
|
2386
|
-
.
|
|
2399
|
+
.bds220Radio-radio:focus {
|
|
2387
2400
|
--bdc_color: var(--bdc_color--focus);
|
|
2388
2401
|
}
|
|
2389
|
-
.
|
|
2402
|
+
.bds220Radio-radio:focus-visible {
|
|
2390
2403
|
outline: var(--bds-outline_default);
|
|
2391
2404
|
outline-offset: var(--bds-outline_offset);
|
|
2392
2405
|
}
|
|
2393
|
-
.
|
|
2406
|
+
.bds220Radio-radioError {
|
|
2394
2407
|
--bdc_color: var(--bdc_color--error);
|
|
2395
2408
|
}
|
|
2396
2409
|
}
|
|
2397
2410
|
|
|
2398
2411
|
/* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
|
|
2399
|
-
@layer boostdev.
|
|
2400
|
-
.
|
|
2412
|
+
@layer boostdev.bds220RadioGroup-component {
|
|
2413
|
+
.bds220RadioGroup-group {
|
|
2401
2414
|
border: none;
|
|
2402
2415
|
padding: 0;
|
|
2403
2416
|
margin: 0;
|
|
@@ -2405,7 +2418,7 @@
|
|
|
2405
2418
|
flex-direction: column;
|
|
2406
2419
|
gap: var(--bds-space_xs);
|
|
2407
2420
|
}
|
|
2408
|
-
.
|
|
2421
|
+
.bds220RadioGroup-legend {
|
|
2409
2422
|
font-family: var(--bds-font_family--body);
|
|
2410
2423
|
font-size: var(--bds-font_size--body--s);
|
|
2411
2424
|
font-weight: var(--bds-font_weight--medium);
|
|
@@ -2413,10 +2426,10 @@
|
|
|
2413
2426
|
padding: 0;
|
|
2414
2427
|
margin-block-end: var(--bds-space_xs);
|
|
2415
2428
|
}
|
|
2416
|
-
.
|
|
2429
|
+
.bds220RadioGroup-required {
|
|
2417
2430
|
color: var(--bds-color_error);
|
|
2418
2431
|
}
|
|
2419
|
-
.
|
|
2432
|
+
.bds220RadioGroup-items {
|
|
2420
2433
|
display: flex;
|
|
2421
2434
|
flex-direction: column;
|
|
2422
2435
|
gap: var(--bds-space_xs);
|
|
@@ -2424,8 +2437,8 @@
|
|
|
2424
2437
|
}
|
|
2425
2438
|
|
|
2426
2439
|
/* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
|
|
2427
|
-
@layer boostdev.
|
|
2428
|
-
.
|
|
2440
|
+
@layer boostdev.bds220SegmentedControl-component {
|
|
2441
|
+
.bds220SegmentedControl-control {
|
|
2429
2442
|
position: relative;
|
|
2430
2443
|
display: inline-grid;
|
|
2431
2444
|
grid-auto-flow: column;
|
|
@@ -2435,7 +2448,7 @@
|
|
|
2435
2448
|
border-radius: var(--control_radius, var(--bds-border_radius--full));
|
|
2436
2449
|
gap: 0;
|
|
2437
2450
|
}
|
|
2438
|
-
.
|
|
2451
|
+
.bds220SegmentedControl-thumb {
|
|
2439
2452
|
position: absolute;
|
|
2440
2453
|
inset-block: var(--bds-space_xxxs);
|
|
2441
2454
|
inset-inline-start: var(--bds-space_xxxs);
|
|
@@ -2447,7 +2460,7 @@
|
|
|
2447
2460
|
transform: translateX(calc(var(--control_selected-index, 0) * 100%));
|
|
2448
2461
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2449
2462
|
}
|
|
2450
|
-
.
|
|
2463
|
+
.bds220SegmentedControl-indicator {
|
|
2451
2464
|
position: absolute;
|
|
2452
2465
|
inset-block: var(--bds-space_xxxs);
|
|
2453
2466
|
inset-inline-start: var(--bds-space_xxxs);
|
|
@@ -2459,7 +2472,7 @@
|
|
|
2459
2472
|
transform: translateX(calc(var(--control_selected-index, 0) * 100%));
|
|
2460
2473
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2461
2474
|
}
|
|
2462
|
-
.
|
|
2475
|
+
.bds220SegmentedControl-item {
|
|
2463
2476
|
position: relative;
|
|
2464
2477
|
z-index: 1;
|
|
2465
2478
|
display: flex;
|
|
@@ -2480,69 +2493,69 @@
|
|
|
2480
2493
|
border: none;
|
|
2481
2494
|
outline: none;
|
|
2482
2495
|
}
|
|
2483
|
-
.
|
|
2496
|
+
.bds220SegmentedControl-item:focus-visible {
|
|
2484
2497
|
outline: var(--bds-outline_default);
|
|
2485
2498
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
2486
2499
|
border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
|
|
2487
2500
|
}
|
|
2488
|
-
.
|
|
2501
|
+
.bds220SegmentedControl-item.bds220SegmentedControl---active {
|
|
2489
2502
|
color: var(--control_label-color--active, var(--bds-color_on-interactive));
|
|
2490
2503
|
}
|
|
2491
|
-
.
|
|
2504
|
+
.bds220SegmentedControl-item.bds220SegmentedControl---disabled {
|
|
2492
2505
|
opacity: 0.5;
|
|
2493
2506
|
cursor: not-allowed;
|
|
2494
2507
|
pointer-events: none;
|
|
2495
2508
|
}
|
|
2496
|
-
.
|
|
2509
|
+
.bds220SegmentedControl-control.bds220SegmentedControl---size_small .bds220SegmentedControl-item {
|
|
2497
2510
|
padding: var(--bds-space_xxs) var(--bds-space_s);
|
|
2498
2511
|
font-size: var(--bds-font_size--body--s);
|
|
2499
2512
|
}
|
|
2500
|
-
.
|
|
2513
|
+
.bds220SegmentedControl-control.bds220SegmentedControl---size_large .bds220SegmentedControl-item {
|
|
2501
2514
|
padding: var(--bds-space_s) var(--bds-space_m);
|
|
2502
2515
|
white-space: normal;
|
|
2503
2516
|
text-align: center;
|
|
2504
2517
|
}
|
|
2505
|
-
.
|
|
2518
|
+
.bds220SegmentedControl-control.bds220SegmentedControl---variant_outline {
|
|
2506
2519
|
--control_label-color--active: var(--bds-color_interactive);
|
|
2507
2520
|
}
|
|
2508
|
-
.
|
|
2521
|
+
.bds220SegmentedControl-control.bds220SegmentedControl---variant_outline .bds220SegmentedControl-thumb {
|
|
2509
2522
|
display: none;
|
|
2510
2523
|
}
|
|
2511
|
-
.
|
|
2524
|
+
.bds220SegmentedControl-control.bds220SegmentedControl---variant_outline .bds220SegmentedControl-item {
|
|
2512
2525
|
background-color: var(--control_item-bg, transparent);
|
|
2513
2526
|
}
|
|
2514
|
-
.
|
|
2527
|
+
.bds220SegmentedControl-control.bds220SegmentedControl---variant_outline .bds220SegmentedControl-item.bds220SegmentedControl---active {
|
|
2515
2528
|
background-color: var(--control_item-bg--active, var(--bds-color_bg));
|
|
2516
2529
|
}
|
|
2517
|
-
.
|
|
2530
|
+
.bds220SegmentedControl-control.bds220SegmentedControl---variant_outline .bds220SegmentedControl-indicator {
|
|
2518
2531
|
display: block;
|
|
2519
2532
|
box-shadow: inset 0 0 0 2px var(--control_indicator-color, var(--bds-color_interactive));
|
|
2520
2533
|
}
|
|
2521
2534
|
@media (hover: hover) and (pointer: fine) {
|
|
2522
|
-
.
|
|
2535
|
+
.bds220SegmentedControl-item:not(.bds220SegmentedControl---active, .bds220SegmentedControl---disabled):hover {
|
|
2523
2536
|
color: var(--control_label-color--hover, var(--bds-color_on-bg));
|
|
2524
2537
|
}
|
|
2525
2538
|
}
|
|
2526
2539
|
@media (prefers-reduced-motion: reduce) {
|
|
2527
|
-
.
|
|
2528
|
-
.
|
|
2540
|
+
.bds220SegmentedControl-thumb,
|
|
2541
|
+
.bds220SegmentedControl-indicator {
|
|
2529
2542
|
transition: none;
|
|
2530
2543
|
}
|
|
2531
2544
|
}
|
|
2532
2545
|
}
|
|
2533
2546
|
|
|
2534
2547
|
/* src/components/interaction/form/Select/Select.module.css */
|
|
2535
|
-
@layer boostdev.
|
|
2536
|
-
.
|
|
2548
|
+
@layer boostdev.bds220Select-component {
|
|
2549
|
+
.bds220Select-formGroup {
|
|
2537
2550
|
display: flex;
|
|
2538
2551
|
flex-direction: column;
|
|
2539
2552
|
}
|
|
2540
|
-
.
|
|
2553
|
+
.bds220Select-selectWrapper {
|
|
2541
2554
|
position: relative;
|
|
2542
2555
|
display: flex;
|
|
2543
2556
|
align-items: center;
|
|
2544
2557
|
}
|
|
2545
|
-
.
|
|
2558
|
+
.bds220Select-select {
|
|
2546
2559
|
appearance: none;
|
|
2547
2560
|
inline-size: 100%;
|
|
2548
2561
|
font-family: var(--bds-font_family--body);
|
|
@@ -2559,21 +2572,21 @@
|
|
|
2559
2572
|
cursor: pointer;
|
|
2560
2573
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2561
2574
|
}
|
|
2562
|
-
.
|
|
2575
|
+
.bds220Select-select:focus {
|
|
2563
2576
|
--bdc_color: var(--bdc_color--focus);
|
|
2564
2577
|
}
|
|
2565
|
-
.
|
|
2578
|
+
.bds220Select-select:focus-visible {
|
|
2566
2579
|
outline: var(--bds-outline_default);
|
|
2567
2580
|
outline-offset: var(--bds-outline_offset);
|
|
2568
2581
|
}
|
|
2569
|
-
.
|
|
2582
|
+
.bds220Select-select:disabled {
|
|
2570
2583
|
opacity: 0.5;
|
|
2571
2584
|
cursor: not-allowed;
|
|
2572
2585
|
}
|
|
2573
|
-
.
|
|
2586
|
+
.bds220Select-selectError {
|
|
2574
2587
|
--bdc_color: var(--bdc_color--error);
|
|
2575
2588
|
}
|
|
2576
|
-
.
|
|
2589
|
+
.bds220Select-chevron {
|
|
2577
2590
|
position: absolute;
|
|
2578
2591
|
inset-inline-end: var(--bds-space_s);
|
|
2579
2592
|
display: flex;
|
|
@@ -2581,30 +2594,30 @@
|
|
|
2581
2594
|
pointer-events: none;
|
|
2582
2595
|
color: var(--select_chevron-color, var(--bds-color_interactive));
|
|
2583
2596
|
}
|
|
2584
|
-
.
|
|
2597
|
+
.bds220Select-chevron svg {
|
|
2585
2598
|
inline-size: 1rem;
|
|
2586
2599
|
block-size: 1rem;
|
|
2587
2600
|
}
|
|
2588
2601
|
}
|
|
2589
2602
|
|
|
2590
2603
|
/* src/components/interaction/form/Slider/Slider.module.css */
|
|
2591
|
-
@layer boostdev.
|
|
2592
|
-
.
|
|
2604
|
+
@layer boostdev.bds220Slider-component {
|
|
2605
|
+
.bds220Slider-formGroup {
|
|
2593
2606
|
display: flex;
|
|
2594
2607
|
flex-direction: column;
|
|
2595
2608
|
gap: var(--bds-space_xxs);
|
|
2596
2609
|
}
|
|
2597
|
-
.
|
|
2610
|
+
.bds220Slider-labelRow {
|
|
2598
2611
|
display: flex;
|
|
2599
2612
|
justify-content: space-between;
|
|
2600
2613
|
align-items: baseline;
|
|
2601
2614
|
}
|
|
2602
|
-
.
|
|
2615
|
+
.bds220Slider-value {
|
|
2603
2616
|
font-size: var(--bds-font_size--body--s);
|
|
2604
2617
|
font-variant-numeric: tabular-nums;
|
|
2605
2618
|
color: var(--bds-color_on-bg--subtle);
|
|
2606
2619
|
}
|
|
2607
|
-
.
|
|
2620
|
+
.bds220Slider-slider {
|
|
2608
2621
|
--slider_fill: 0%;
|
|
2609
2622
|
--slider_track-height: var(--bds-space_xxs);
|
|
2610
2623
|
--slider_thumb-size: calc(var(--bds-space_s) * 2);
|
|
@@ -2623,16 +2636,16 @@
|
|
|
2623
2636
|
cursor: pointer;
|
|
2624
2637
|
transition: var(--bds-animation_transition);
|
|
2625
2638
|
}
|
|
2626
|
-
.
|
|
2639
|
+
.bds220Slider-slider:focus-visible {
|
|
2627
2640
|
outline: var(--bds-outline_default);
|
|
2628
2641
|
outline-offset: var(--bds-outline_offset);
|
|
2629
2642
|
border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
|
|
2630
2643
|
}
|
|
2631
|
-
.
|
|
2644
|
+
.bds220Slider-slider:disabled {
|
|
2632
2645
|
opacity: 0.4;
|
|
2633
2646
|
cursor: not-allowed;
|
|
2634
2647
|
}
|
|
2635
|
-
.
|
|
2648
|
+
.bds220Slider-slider::-webkit-slider-thumb {
|
|
2636
2649
|
appearance: none;
|
|
2637
2650
|
inline-size: var(--slider_thumb-size);
|
|
2638
2651
|
block-size: var(--slider_thumb-size);
|
|
@@ -2642,7 +2655,7 @@
|
|
|
2642
2655
|
transition: var(--bds-animation_transition);
|
|
2643
2656
|
cursor: pointer;
|
|
2644
2657
|
}
|
|
2645
|
-
.
|
|
2658
|
+
.bds220Slider-slider::-moz-range-thumb {
|
|
2646
2659
|
inline-size: var(--slider_thumb-size);
|
|
2647
2660
|
block-size: var(--slider_thumb-size);
|
|
2648
2661
|
border: none;
|
|
@@ -2651,7 +2664,7 @@
|
|
|
2651
2664
|
box-shadow: var(--bds-shadow_s);
|
|
2652
2665
|
cursor: pointer;
|
|
2653
2666
|
}
|
|
2654
|
-
.
|
|
2667
|
+
.bds220Slider-sliderError {
|
|
2655
2668
|
background:
|
|
2656
2669
|
linear-gradient(
|
|
2657
2670
|
to right,
|
|
@@ -2660,24 +2673,24 @@
|
|
|
2660
2673
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
|
|
2661
2674
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
|
|
2662
2675
|
}
|
|
2663
|
-
.
|
|
2676
|
+
.bds220Slider-sliderError::-webkit-slider-thumb {
|
|
2664
2677
|
background-color: var(--slider_color--error, var(--bds-color_error));
|
|
2665
2678
|
}
|
|
2666
|
-
.
|
|
2679
|
+
.bds220Slider-sliderError::-moz-range-thumb {
|
|
2667
2680
|
background-color: var(--slider_color--error, var(--bds-color_error));
|
|
2668
2681
|
}
|
|
2669
2682
|
@media (prefers-reduced-motion: reduce) {
|
|
2670
|
-
.
|
|
2671
|
-
.
|
|
2672
|
-
.
|
|
2683
|
+
.bds220Slider-slider,
|
|
2684
|
+
.bds220Slider-slider::-webkit-slider-thumb,
|
|
2685
|
+
.bds220Slider-slider::-moz-range-thumb {
|
|
2673
2686
|
transition: none;
|
|
2674
2687
|
}
|
|
2675
2688
|
}
|
|
2676
2689
|
}
|
|
2677
2690
|
|
|
2678
2691
|
/* src/components/interaction/form/Switch/Switch.module.css */
|
|
2679
|
-
@layer boostdev.
|
|
2680
|
-
.
|
|
2692
|
+
@layer boostdev.bds220Switch-component {
|
|
2693
|
+
.bds220Switch-switchGroup {
|
|
2681
2694
|
--switch_thumb-size: 1.25em;
|
|
2682
2695
|
--switch_track-pad: var(--bds-space_xxxs);
|
|
2683
2696
|
--switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
|
|
@@ -2686,21 +2699,21 @@
|
|
|
2686
2699
|
display: flex;
|
|
2687
2700
|
flex-direction: column;
|
|
2688
2701
|
}
|
|
2689
|
-
.
|
|
2702
|
+
.bds220Switch-switchGroup.bds220Switch---size_small {
|
|
2690
2703
|
--switch_thumb-size: 1em;
|
|
2691
2704
|
}
|
|
2692
|
-
.
|
|
2705
|
+
.bds220Switch-switchGroup.bds220Switch---size_medium {
|
|
2693
2706
|
--switch_thumb-size: 1.25em;
|
|
2694
2707
|
}
|
|
2695
|
-
.
|
|
2708
|
+
.bds220Switch-switchGroup.bds220Switch---size_large {
|
|
2696
2709
|
--switch_thumb-size: 1.5em;
|
|
2697
2710
|
}
|
|
2698
|
-
.
|
|
2711
|
+
.bds220Switch-inputWrapper {
|
|
2699
2712
|
display: flex;
|
|
2700
2713
|
align-items: center;
|
|
2701
2714
|
gap: var(--bds-space_xs);
|
|
2702
2715
|
}
|
|
2703
|
-
.
|
|
2716
|
+
.bds220Switch-trackWrapper {
|
|
2704
2717
|
position: relative;
|
|
2705
2718
|
display: inline-flex;
|
|
2706
2719
|
align-items: center;
|
|
@@ -2708,7 +2721,7 @@
|
|
|
2708
2721
|
inline-size: var(--switch_track-width);
|
|
2709
2722
|
block-size: var(--switch_track-height);
|
|
2710
2723
|
}
|
|
2711
|
-
.
|
|
2724
|
+
.bds220Switch-switch {
|
|
2712
2725
|
position: absolute;
|
|
2713
2726
|
inset: 0;
|
|
2714
2727
|
appearance: none;
|
|
@@ -2719,10 +2732,10 @@
|
|
|
2719
2732
|
cursor: pointer;
|
|
2720
2733
|
z-index: 1;
|
|
2721
2734
|
}
|
|
2722
|
-
.
|
|
2735
|
+
.bds220Switch-switch:disabled {
|
|
2723
2736
|
cursor: not-allowed;
|
|
2724
2737
|
}
|
|
2725
|
-
.
|
|
2738
|
+
.bds220Switch-track {
|
|
2726
2739
|
display: inline-flex;
|
|
2727
2740
|
align-items: center;
|
|
2728
2741
|
inline-size: var(--switch_track-width);
|
|
@@ -2738,7 +2751,7 @@
|
|
|
2738
2751
|
transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2739
2752
|
--bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
|
|
2740
2753
|
}
|
|
2741
|
-
.
|
|
2754
|
+
.bds220Switch-thumb {
|
|
2742
2755
|
display: block;
|
|
2743
2756
|
inline-size: var(--switch_thumb-size);
|
|
2744
2757
|
block-size: var(--switch_thumb-size);
|
|
@@ -2748,40 +2761,40 @@
|
|
|
2748
2761
|
transition: var(--bds-animation_transition);
|
|
2749
2762
|
transform: translateX(0);
|
|
2750
2763
|
}
|
|
2751
|
-
.
|
|
2764
|
+
.bds220Switch-switch.bds220Switch-switchError + .bds220Switch-track {
|
|
2752
2765
|
--bdc_color: var(--switch_border-color--error, var(--bds-color_error));
|
|
2753
2766
|
}
|
|
2754
|
-
.
|
|
2767
|
+
.bds220Switch-switch:checked + .bds220Switch-track {
|
|
2755
2768
|
background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
|
|
2756
2769
|
--bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
|
|
2757
2770
|
}
|
|
2758
|
-
.
|
|
2771
|
+
.bds220Switch-switch:checked + .bds220Switch-track .bds220Switch-thumb {
|
|
2759
2772
|
background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
|
|
2760
2773
|
transform: translateX(var(--switch_thumb-size));
|
|
2761
2774
|
}
|
|
2762
|
-
.
|
|
2775
|
+
.bds220Switch-switch:focus-visible + .bds220Switch-track {
|
|
2763
2776
|
outline: var(--bds-outline_default);
|
|
2764
2777
|
outline-offset: var(--bds-outline_offset);
|
|
2765
2778
|
border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
|
|
2766
2779
|
}
|
|
2767
|
-
.
|
|
2780
|
+
.bds220Switch-switch:disabled + .bds220Switch-track {
|
|
2768
2781
|
opacity: 0.4;
|
|
2769
2782
|
}
|
|
2770
2783
|
@media (prefers-reduced-motion: reduce) {
|
|
2771
|
-
.
|
|
2772
|
-
.
|
|
2784
|
+
.bds220Switch-track,
|
|
2785
|
+
.bds220Switch-thumb {
|
|
2773
2786
|
transition: none;
|
|
2774
2787
|
}
|
|
2775
2788
|
}
|
|
2776
2789
|
}
|
|
2777
2790
|
|
|
2778
2791
|
/* src/components/interaction/form/Textarea/Textarea.module.css */
|
|
2779
|
-
@layer boostdev.
|
|
2780
|
-
.
|
|
2792
|
+
@layer boostdev.bds220Textarea-component {
|
|
2793
|
+
.bds220Textarea-formGroup {
|
|
2781
2794
|
display: flex;
|
|
2782
2795
|
flex-direction: column;
|
|
2783
2796
|
}
|
|
2784
|
-
.
|
|
2797
|
+
.bds220Textarea-textarea {
|
|
2785
2798
|
font-family: var(--bds-font_family--body);
|
|
2786
2799
|
font-size: var(--bds-font_size--body);
|
|
2787
2800
|
line-height: var(--bds-font_line-height--body);
|
|
@@ -2797,69 +2810,69 @@
|
|
|
2797
2810
|
min-block-size: calc(var(--bds-space_m) * 5);
|
|
2798
2811
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2799
2812
|
}
|
|
2800
|
-
.
|
|
2813
|
+
.bds220Textarea-textarea:focus {
|
|
2801
2814
|
--bdc_color: var(--bdc_color--focus);
|
|
2802
2815
|
}
|
|
2803
|
-
.
|
|
2816
|
+
.bds220Textarea-textarea:focus-visible {
|
|
2804
2817
|
outline: var(--bds-outline_default);
|
|
2805
2818
|
outline-offset: var(--bds-outline_offset);
|
|
2806
2819
|
}
|
|
2807
|
-
.
|
|
2820
|
+
.bds220Textarea-textarea:disabled {
|
|
2808
2821
|
opacity: 0.5;
|
|
2809
2822
|
cursor: not-allowed;
|
|
2810
2823
|
resize: none;
|
|
2811
2824
|
}
|
|
2812
|
-
.
|
|
2825
|
+
.bds220Textarea-textareaError {
|
|
2813
2826
|
--bdc_color: var(--bdc_color--error);
|
|
2814
2827
|
}
|
|
2815
2828
|
}
|
|
2816
2829
|
|
|
2817
2830
|
/* src/components/layout/ButtonGroup/ButtonGroup.module.css */
|
|
2818
|
-
@layer boostdev.
|
|
2819
|
-
.
|
|
2831
|
+
@layer boostdev.bds220ButtonGroup-component {
|
|
2832
|
+
.bds220ButtonGroup-buttonGroup {
|
|
2820
2833
|
container-type: inline-size;
|
|
2821
2834
|
container-name: button-group;
|
|
2822
2835
|
grid-column: var(--bds-grid_span-100);
|
|
2823
2836
|
inline-size: 100%;
|
|
2824
2837
|
}
|
|
2825
|
-
.
|
|
2838
|
+
.bds220ButtonGroup-buttonGroup .bds220ButtonGroup-container {
|
|
2826
2839
|
position: relative;
|
|
2827
2840
|
display: flex;
|
|
2828
2841
|
flex-direction: column-reverse;
|
|
2829
2842
|
gap: var(--bds-space_l);
|
|
2830
2843
|
align-items: center;
|
|
2831
2844
|
}
|
|
2832
|
-
.
|
|
2845
|
+
.bds220ButtonGroup-buttonGroup.bds220ButtonGroup---variant_card .bds220ButtonGroup-container {
|
|
2833
2846
|
align-items: stretch;
|
|
2834
2847
|
}
|
|
2835
|
-
.
|
|
2836
|
-
.
|
|
2848
|
+
.bds220ButtonGroup-buttonGroup.bds220ButtonGroup---variant_flow .bds220ButtonGroup-container,
|
|
2849
|
+
.bds220ButtonGroup-buttonGroup.bds220ButtonGroup---variant_modal .bds220ButtonGroup-container {
|
|
2837
2850
|
align-items: center;
|
|
2838
2851
|
}
|
|
2839
|
-
.
|
|
2852
|
+
.bds220ButtonGroup-buttonGroup.bds220ButtonGroup---variant_content .bds220ButtonGroup-container {
|
|
2840
2853
|
align-items: flex-start;
|
|
2841
2854
|
}
|
|
2842
2855
|
@supports (contain: inline-size) {
|
|
2843
2856
|
@container button-group (min-width: 30rem) {
|
|
2844
|
-
.
|
|
2857
|
+
.bds220ButtonGroup-buttonGroup .bds220ButtonGroup-container {
|
|
2845
2858
|
flex-direction: row;
|
|
2846
2859
|
justify-content: space-between;
|
|
2847
2860
|
}
|
|
2848
|
-
.
|
|
2849
|
-
.
|
|
2861
|
+
.bds220ButtonGroup-buttonGroup.bds220ButtonGroup---variant_modal .bds220ButtonGroup-container > :first-child:last-child,
|
|
2862
|
+
.bds220ButtonGroup-buttonGroup.bds220ButtonGroup---variant_flow .bds220ButtonGroup-container > :first-child:last-child {
|
|
2850
2863
|
margin-inline-start: auto;
|
|
2851
2864
|
}
|
|
2852
|
-
.
|
|
2865
|
+
.bds220ButtonGroup-buttonGroup.bds220ButtonGroup---variant_card .bds220ButtonGroup-container {
|
|
2853
2866
|
justify-content: center;
|
|
2854
2867
|
}
|
|
2855
|
-
.
|
|
2868
|
+
.bds220ButtonGroup-buttonGroup.bds220ButtonGroup---variant_modal .bds220ButtonGroup-container {
|
|
2856
2869
|
justify-content: flex-end;
|
|
2857
2870
|
}
|
|
2858
|
-
.
|
|
2871
|
+
.bds220ButtonGroup-buttonGroup.bds220ButtonGroup---variant_content .bds220ButtonGroup-container {
|
|
2859
2872
|
justify-content: flex-start;
|
|
2860
2873
|
align-items: center;
|
|
2861
2874
|
}
|
|
2862
|
-
.
|
|
2875
|
+
.bds220ButtonGroup-buttonGroup.bds220ButtonGroup---variant_grid .bds220ButtonGroup-container {
|
|
2863
2876
|
justify-content: center;
|
|
2864
2877
|
}
|
|
2865
2878
|
}
|
|
@@ -2867,142 +2880,183 @@
|
|
|
2867
2880
|
}
|
|
2868
2881
|
|
|
2869
2882
|
/* src/components/layout/Card/Card.module.css */
|
|
2870
|
-
@layer boostdev.
|
|
2871
|
-
.
|
|
2883
|
+
@layer boostdev.bds220Card-component {
|
|
2884
|
+
.bds220Card-card {
|
|
2872
2885
|
background-color: var(--card_color, var(--bds-color_bg));
|
|
2873
2886
|
color: var(--card_on-color, var(--bds-color_on-bg));
|
|
2874
2887
|
border-radius: var(--bds-border_radius--m);
|
|
2875
2888
|
transition: all 0.3s ease;
|
|
2876
2889
|
position: relative;
|
|
2877
2890
|
}
|
|
2878
|
-
.
|
|
2891
|
+
.bds220Card-card.bds220Card---default {
|
|
2879
2892
|
box-shadow: var(--bds-shadow_s);
|
|
2880
2893
|
}
|
|
2881
|
-
.
|
|
2894
|
+
.bds220Card-card.bds220Card---elevated {
|
|
2882
2895
|
box-shadow: var(--bds-shadow_m);
|
|
2883
2896
|
}
|
|
2884
|
-
.
|
|
2897
|
+
.bds220Card-card.bds220Card---outlined {
|
|
2885
2898
|
border: var(--card_border, none);
|
|
2886
2899
|
--bdc_color: currentcolor;
|
|
2887
2900
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s);
|
|
2888
2901
|
}
|
|
2889
|
-
.
|
|
2902
|
+
.bds220Card-card.bds220Card---clickable {
|
|
2890
2903
|
cursor: pointer;
|
|
2891
2904
|
}
|
|
2892
|
-
.
|
|
2905
|
+
.bds220Card-card.bds220Card---padding-none {
|
|
2893
2906
|
padding: var(--card_padding, 0);
|
|
2894
2907
|
}
|
|
2895
|
-
.
|
|
2908
|
+
.bds220Card-card.bds220Card---padding-small {
|
|
2896
2909
|
padding: var(--card_padding, var(--bds-space_s));
|
|
2897
2910
|
}
|
|
2898
|
-
.
|
|
2911
|
+
.bds220Card-card.bds220Card---padding-medium {
|
|
2899
2912
|
padding: var(--card_padding, var(--bds-space_m));
|
|
2900
2913
|
}
|
|
2901
|
-
.
|
|
2914
|
+
.bds220Card-card.bds220Card---padding-large {
|
|
2902
2915
|
padding: var(--card_padding, var(--bds-space_l));
|
|
2903
2916
|
}
|
|
2904
|
-
.
|
|
2917
|
+
.bds220Card-card.bds220Card---padding-extra-large {
|
|
2905
2918
|
padding: var(--card_padding, var(--bds-space_xl));
|
|
2906
2919
|
}
|
|
2907
|
-
.
|
|
2920
|
+
.bds220Card-card.bds220Card---text-start {
|
|
2908
2921
|
text-align: start;
|
|
2909
2922
|
}
|
|
2910
|
-
.
|
|
2923
|
+
.bds220Card-card.bds220Card---text-center {
|
|
2911
2924
|
text-align: center;
|
|
2912
2925
|
}
|
|
2913
|
-
.
|
|
2926
|
+
.bds220Card-card.bds220Card---text-end {
|
|
2914
2927
|
text-align: end;
|
|
2915
2928
|
}
|
|
2916
|
-
.
|
|
2929
|
+
.bds220Card-card.bds220Card---clickable:focus-visible {
|
|
2917
2930
|
outline: 2px solid var(--color_focus, currentcolor);
|
|
2918
2931
|
outline-offset: 2px;
|
|
2919
2932
|
}
|
|
2920
|
-
.
|
|
2933
|
+
.bds220Card-card.bds220Card---clickable:active {
|
|
2921
2934
|
transform: translateY(0);
|
|
2922
2935
|
box-shadow: var(--bds-shadow_s);
|
|
2923
2936
|
}
|
|
2924
2937
|
@media (hover: hover) and (pointer: fine) {
|
|
2925
|
-
.
|
|
2938
|
+
.bds220Card-card.bds220Card---clickable:hover {
|
|
2926
2939
|
transform: translateY(-2px);
|
|
2927
2940
|
box-shadow: var(--card_shadow--clickable-hover, var(--bds-shadow_xl));
|
|
2928
2941
|
}
|
|
2929
|
-
.
|
|
2942
|
+
.bds220Card-card.bds220Card---default:hover {
|
|
2930
2943
|
box-shadow: var(--card_shadow--default-hover, var(--bds-shadow_m));
|
|
2931
2944
|
}
|
|
2932
|
-
.
|
|
2945
|
+
.bds220Card-card.bds220Card---elevated:hover {
|
|
2933
2946
|
box-shadow: var(--card_shadow--elevated-hover, var(--bds-shadow_2xl));
|
|
2934
2947
|
}
|
|
2935
|
-
.
|
|
2948
|
+
.bds220Card-card.bds220Card---outlined:hover {
|
|
2936
2949
|
box-shadow: var(--card_shadow--outlined-hover, var(--bds-shadow_s));
|
|
2937
2950
|
}
|
|
2938
2951
|
}
|
|
2939
2952
|
}
|
|
2940
2953
|
|
|
2954
|
+
/* src/components/layout/Grid/Grid.module.css */
|
|
2955
|
+
@layer boostdev.bds220Grid-component {
|
|
2956
|
+
.bds220Grid-grid {
|
|
2957
|
+
display: grid;
|
|
2958
|
+
gap: var(--grid_gap, var(--bds-grid_gap));
|
|
2959
|
+
}
|
|
2960
|
+
.bds220Grid-grid.bds220Grid---main {
|
|
2961
|
+
grid-template-columns: var(--bds-grid_template-columns);
|
|
2962
|
+
}
|
|
2963
|
+
.bds220Grid-grid.bds220Grid---page {
|
|
2964
|
+
grid-template-columns: 1fr;
|
|
2965
|
+
grid-column: 1 / -1;
|
|
2966
|
+
}
|
|
2967
|
+
.bds220Grid-grid.bds220Grid---funnel {
|
|
2968
|
+
grid-template-columns: var(--bds-grid_template-columns);
|
|
2969
|
+
max-inline-size: var(--bds-container_max-width--narrow);
|
|
2970
|
+
margin-inline: auto;
|
|
2971
|
+
}
|
|
2972
|
+
.bds220Grid-grid.bds220Grid---custom {
|
|
2973
|
+
grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
|
|
2974
|
+
}
|
|
2975
|
+
.bds220Grid-grid.bds220Grid---centered {
|
|
2976
|
+
margin-inline: auto;
|
|
2977
|
+
max-inline-size: var(--bds-container_max-width);
|
|
2978
|
+
padding-inline: var(--bds-container_spacing-inline);
|
|
2979
|
+
}
|
|
2980
|
+
.bds220Grid-item {
|
|
2981
|
+
min-inline-size: 0;
|
|
2982
|
+
}
|
|
2983
|
+
@supports (grid-template-rows: masonry) {
|
|
2984
|
+
.bds220Grid-grid.bds220Grid---masonry {
|
|
2985
|
+
grid-template-rows: masonry;
|
|
2986
|
+
}
|
|
2987
|
+
}
|
|
2988
|
+
@supports (display: grid-lanes) {
|
|
2989
|
+
.bds220Grid-grid.bds220Grid---masonry {
|
|
2990
|
+
display: grid-lanes;
|
|
2991
|
+
}
|
|
2992
|
+
}
|
|
2993
|
+
}
|
|
2994
|
+
|
|
2941
2995
|
/* src/components/layout/SectionHeader/SectionHeader.module.css */
|
|
2942
|
-
@layer boostdev.
|
|
2943
|
-
.
|
|
2996
|
+
@layer boostdev.bds220SectionHeader-component {
|
|
2997
|
+
.bds220SectionHeader-sectionHeader {
|
|
2944
2998
|
display: flex;
|
|
2945
2999
|
flex-direction: column;
|
|
2946
3000
|
gap: var(--bds-space_m);
|
|
2947
3001
|
grid-column: var(--bds-grid_span-100);
|
|
2948
3002
|
}
|
|
2949
|
-
.
|
|
3003
|
+
.bds220SectionHeader-title {
|
|
2950
3004
|
color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
|
|
2951
3005
|
margin: 0;
|
|
2952
3006
|
font-family: var(--bds-font_family--body);
|
|
2953
3007
|
}
|
|
2954
|
-
.
|
|
3008
|
+
.bds220SectionHeader-subtitle {
|
|
2955
3009
|
color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
|
|
2956
3010
|
margin: 0;
|
|
2957
3011
|
font-family: var(--bds-font_family--body);
|
|
2958
3012
|
font-weight: var(--bds-font_weight--medium);
|
|
2959
3013
|
}
|
|
2960
|
-
.
|
|
3014
|
+
.bds220SectionHeader-sectionHeader.bds220SectionHeader---start {
|
|
2961
3015
|
align-items: flex-start;
|
|
2962
3016
|
text-align: start;
|
|
2963
3017
|
}
|
|
2964
|
-
.
|
|
3018
|
+
.bds220SectionHeader-sectionHeader.bds220SectionHeader---center {
|
|
2965
3019
|
align-items: center;
|
|
2966
3020
|
text-align: center;
|
|
2967
3021
|
}
|
|
2968
|
-
.
|
|
3022
|
+
.bds220SectionHeader-sectionHeader.bds220SectionHeader---end {
|
|
2969
3023
|
align-items: flex-end;
|
|
2970
3024
|
text-align: end;
|
|
2971
3025
|
}
|
|
2972
|
-
.
|
|
3026
|
+
.bds220SectionHeader-sectionHeader.bds220SectionHeader---medium .bds220SectionHeader-title {
|
|
2973
3027
|
font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
|
|
2974
3028
|
line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
|
|
2975
3029
|
font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
|
|
2976
3030
|
}
|
|
2977
|
-
.
|
|
3031
|
+
.bds220SectionHeader-sectionHeader.bds220SectionHeader---medium .bds220SectionHeader-subtitle {
|
|
2978
3032
|
font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3));
|
|
2979
3033
|
line-height: 1.3;
|
|
2980
3034
|
}
|
|
2981
|
-
.
|
|
3035
|
+
.bds220SectionHeader-sectionHeader.bds220SectionHeader---xs .bds220SectionHeader-title {
|
|
2982
3036
|
font-size: var(--sectionHeader_title-size, 1.5em);
|
|
2983
3037
|
line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
|
|
2984
3038
|
font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
|
|
2985
3039
|
}
|
|
2986
|
-
.
|
|
3040
|
+
.bds220SectionHeader-sectionHeader.bds220SectionHeader---xs .bds220SectionHeader-subtitle {
|
|
2987
3041
|
font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
|
|
2988
3042
|
line-height: 1.4;
|
|
2989
3043
|
}
|
|
2990
|
-
.
|
|
3044
|
+
.bds220SectionHeader-sectionHeader.bds220SectionHeader---small .bds220SectionHeader-title {
|
|
2991
3045
|
font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
|
|
2992
3046
|
line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
|
|
2993
3047
|
font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
|
|
2994
3048
|
}
|
|
2995
|
-
.
|
|
3049
|
+
.bds220SectionHeader-sectionHeader.bds220SectionHeader---small .bds220SectionHeader-subtitle {
|
|
2996
3050
|
font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
|
|
2997
3051
|
line-height: 1.4;
|
|
2998
3052
|
}
|
|
2999
|
-
.
|
|
3053
|
+
.bds220SectionHeader-sectionHeader.bds220SectionHeader---large .bds220SectionHeader-title {
|
|
3000
3054
|
font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
|
|
3001
3055
|
line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
|
|
3002
3056
|
font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
|
|
3003
3057
|
letter-spacing: var(--bds-font_tracking--tight);
|
|
3004
3058
|
}
|
|
3005
|
-
.
|
|
3059
|
+
.bds220SectionHeader-sectionHeader.bds220SectionHeader---large .bds220SectionHeader-subtitle {
|
|
3006
3060
|
font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-2));
|
|
3007
3061
|
line-height: 1.3;
|
|
3008
3062
|
font-weight: var(--bds-font_weight--medium);
|
|
@@ -3010,8 +3064,8 @@
|
|
|
3010
3064
|
}
|
|
3011
3065
|
|
|
3012
3066
|
/* src/components/layout/IconWrapper/IconWrapper.module.css */
|
|
3013
|
-
@layer boostdev.
|
|
3014
|
-
.
|
|
3067
|
+
@layer boostdev.bds220IconWrapper-component {
|
|
3068
|
+
.bds220IconWrapper-wrapper {
|
|
3015
3069
|
inline-size: 2em;
|
|
3016
3070
|
block-size: 2em;
|
|
3017
3071
|
font-size: 3em;
|
|
@@ -3026,7 +3080,7 @@
|
|
|
3026
3080
|
position: relative;
|
|
3027
3081
|
transition: var(--bds-animation_transition);
|
|
3028
3082
|
}
|
|
3029
|
-
.
|
|
3083
|
+
.bds220IconWrapper-wrapper svg {
|
|
3030
3084
|
fill: currentcolor;
|
|
3031
3085
|
}
|
|
3032
3086
|
}
|