@boostdev/design-system-components 0.1.5 → 0.1.7
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/dist/client.cjs +55 -50
- package/dist/client.css +449 -451
- package/dist/client.js +55 -50
- package/dist/index.cjs +55 -50
- package/dist/index.css +449 -451
- package/dist/index.js +55 -50
- package/package.json +6 -3
- package/src/components/interaction/Command/Command.module.css +6 -5
- package/src/components/interaction/Dialog/Dialog.module.css +14 -6
- package/src/components/interaction/Dialog/Dialog.stories.tsx +2 -2
- package/src/components/interaction/Dialog/Dialog.tsx +8 -1
- package/src/components/interaction/Drawer/Drawer.module.css +3 -4
- package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +6 -4
- package/src/components/interaction/Popover/Popover.module.css +3 -3
- package/src/components/interaction/Toast/Toast.module.css +3 -14
- package/src/components/interaction/form/Checkbox/Checkbox.module.css +0 -1
- package/src/components/interaction/form/Checkbox/Checkbox.tsx +1 -1
- package/src/components/interaction/form/Combobox/Combobox.module.css +3 -2
- package/src/components/interaction/form/FormInput/FormInput.tsx +1 -1
- package/src/components/interaction/form/Radio/Radio.tsx +1 -1
- package/src/components/interaction/form/Switch/Switch.module.css +0 -1
- package/src/components/layout/Card/Card.module.css +3 -2
- package/src/components/layout/SectionHeader/SectionHeader.module.css +0 -1
- package/src/components/ui/Separator/Separator.module.css +0 -2
package/dist/index.css
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
/* src/components/ui/Accordion/Accordion.module.css */
|
|
2
2
|
@layer component {
|
|
3
|
-
.
|
|
3
|
+
.bds017-accordion {
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
6
|
border: 1px solid var(--color_bg--subtle);
|
|
7
7
|
border-radius: var(--border_radius--s);
|
|
8
8
|
overflow: hidden;
|
|
9
9
|
}
|
|
10
|
-
.
|
|
10
|
+
.bds017-item {
|
|
11
11
|
border-bottom: 1px solid var(--color_bg--subtle);
|
|
12
12
|
}
|
|
13
|
-
.
|
|
13
|
+
.bds017-item:last-child {
|
|
14
14
|
border-bottom: none;
|
|
15
15
|
}
|
|
16
|
-
.
|
|
16
|
+
.bds017-heading {
|
|
17
17
|
margin: 0;
|
|
18
18
|
}
|
|
19
|
-
.
|
|
19
|
+
.bds017-trigger {
|
|
20
20
|
all: unset;
|
|
21
21
|
display: flex;
|
|
22
22
|
align-items: center;
|
|
@@ -31,44 +31,44 @@
|
|
|
31
31
|
transition: var(--animation_transition);
|
|
32
32
|
box-sizing: border-box;
|
|
33
33
|
}
|
|
34
|
-
.
|
|
34
|
+
.bds017-trigger:disabled {
|
|
35
35
|
opacity: 0.4;
|
|
36
36
|
cursor: not-allowed;
|
|
37
37
|
}
|
|
38
|
-
.
|
|
38
|
+
.bds017-trigger:focus-visible {
|
|
39
39
|
outline: var(--outline_default);
|
|
40
40
|
outline-offset: calc(var(--outline_offset) * -1);
|
|
41
41
|
border-radius: var(--border_radius--xs);
|
|
42
42
|
}
|
|
43
43
|
@media (hover: hover) and (pointer: fine) {
|
|
44
|
-
.
|
|
44
|
+
.bds017-trigger:not(:disabled):hover {
|
|
45
45
|
background-color: var(--color_bg--subtle);
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
|
-
.
|
|
48
|
+
.bds017-triggerLabel {
|
|
49
49
|
flex: 1;
|
|
50
50
|
text-align: start;
|
|
51
51
|
}
|
|
52
|
-
.
|
|
52
|
+
.bds017-chevron {
|
|
53
53
|
width: 1.25rem;
|
|
54
54
|
height: 1.25rem;
|
|
55
55
|
flex-shrink: 0;
|
|
56
56
|
transition: transform var(--animation_transition-duration) var(--animation_easing);
|
|
57
57
|
}
|
|
58
|
-
.
|
|
58
|
+
.bds017-item.bds017---open .bds017-chevron {
|
|
59
59
|
transform: rotate(180deg);
|
|
60
60
|
}
|
|
61
|
-
.
|
|
61
|
+
.bds017-panel {
|
|
62
62
|
overflow: hidden;
|
|
63
63
|
}
|
|
64
|
-
.
|
|
64
|
+
.bds017-panelContent {
|
|
65
65
|
padding: 0 var(--space_m) var(--space_m);
|
|
66
66
|
color: var(--color_on-bg);
|
|
67
67
|
font-size: var(--font_size--body);
|
|
68
68
|
line-height: var(--font_line-height--body);
|
|
69
69
|
}
|
|
70
70
|
@media (prefers-reduced-motion: reduce) {
|
|
71
|
-
.
|
|
71
|
+
.bds017-chevron {
|
|
72
72
|
transition: none;
|
|
73
73
|
}
|
|
74
74
|
}
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
|
|
77
77
|
/* src/components/ui/Alert/Alert.module.css */
|
|
78
78
|
@layer component {
|
|
79
|
-
.
|
|
79
|
+
.bds017-alert {
|
|
80
80
|
--alert_bg: var(--color_blue--subtle);
|
|
81
81
|
--alert_text: var(--color_on-blue--subtle);
|
|
82
82
|
--alert_border: var(--color_blue);
|
|
@@ -91,43 +91,43 @@
|
|
|
91
91
|
font-size: var(--font_size--body);
|
|
92
92
|
line-height: var(--font_line-height--body);
|
|
93
93
|
}
|
|
94
|
-
.
|
|
94
|
+
.bds017---variant_info {
|
|
95
95
|
--alert_bg: var(--color_blue--subtle);
|
|
96
96
|
--alert_text: var(--color_on-blue--subtle);
|
|
97
97
|
--alert_border: var(--color_blue);
|
|
98
98
|
}
|
|
99
|
-
.
|
|
99
|
+
.bds017---variant_success {
|
|
100
100
|
--alert_bg: var(--color_green--subtle);
|
|
101
101
|
--alert_text: var(--color_on-green--subtle);
|
|
102
102
|
--alert_border: var(--color_green);
|
|
103
103
|
}
|
|
104
|
-
.
|
|
104
|
+
.bds017---variant_warning {
|
|
105
105
|
--alert_bg: var(--color_orange--subtle);
|
|
106
106
|
--alert_text: var(--color_on-orange--subtle);
|
|
107
107
|
--alert_border: var(--color_warning);
|
|
108
108
|
}
|
|
109
|
-
.
|
|
109
|
+
.bds017---variant_error {
|
|
110
110
|
--alert_bg: rgb(from var(--color_error) r g b / 12%);
|
|
111
111
|
--alert_text: var(--color_on-bg);
|
|
112
112
|
--alert_border: var(--color_error);
|
|
113
113
|
}
|
|
114
|
-
.
|
|
114
|
+
.bds017-icon {
|
|
115
115
|
display: flex;
|
|
116
116
|
align-items: center;
|
|
117
117
|
flex-shrink: 0;
|
|
118
118
|
margin-block-start: 0.1em;
|
|
119
119
|
}
|
|
120
|
-
.
|
|
120
|
+
.bds017-content {
|
|
121
121
|
flex: 1;
|
|
122
122
|
display: flex;
|
|
123
123
|
flex-direction: column;
|
|
124
124
|
gap: var(--space_xxs);
|
|
125
125
|
}
|
|
126
|
-
.
|
|
126
|
+
.bds017-title {
|
|
127
127
|
font-weight: var(--font_weight--semibold);
|
|
128
128
|
font-size: var(--font_size--body);
|
|
129
129
|
}
|
|
130
|
-
.
|
|
130
|
+
.bds017-dismiss {
|
|
131
131
|
all: unset;
|
|
132
132
|
display: flex;
|
|
133
133
|
align-items: center;
|
|
@@ -139,16 +139,16 @@
|
|
|
139
139
|
border: 1px solid currentcolor;
|
|
140
140
|
border-radius: 50%;
|
|
141
141
|
}
|
|
142
|
-
.
|
|
142
|
+
.bds017-dismiss svg {
|
|
143
143
|
width: 1rem;
|
|
144
144
|
height: 1rem;
|
|
145
145
|
}
|
|
146
|
-
.
|
|
146
|
+
.bds017-dismiss:focus-visible {
|
|
147
147
|
outline: var(--outline_default);
|
|
148
148
|
outline-offset: var(--outline_offset);
|
|
149
149
|
}
|
|
150
150
|
@media (hover: hover) and (pointer: fine) {
|
|
151
|
-
.
|
|
151
|
+
.bds017-dismiss:hover {
|
|
152
152
|
opacity: 0.7;
|
|
153
153
|
}
|
|
154
154
|
}
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
|
|
157
157
|
/* src/components/ui/Avatar/Avatar.module.css */
|
|
158
158
|
@layer component {
|
|
159
|
-
.
|
|
159
|
+
.bds017-avatar {
|
|
160
160
|
--avatar_size: 3em;
|
|
161
161
|
--avatar_bg: var(--color_blue);
|
|
162
162
|
--avatar_text: var(--color_on-blue);
|
|
@@ -169,42 +169,42 @@
|
|
|
169
169
|
overflow: hidden;
|
|
170
170
|
flex-shrink: 0;
|
|
171
171
|
}
|
|
172
|
-
.
|
|
172
|
+
.bds017-avatar.bds017---fallback {
|
|
173
173
|
background-color: var(--avatar_bg);
|
|
174
174
|
color: var(--avatar_text);
|
|
175
175
|
font-weight: var(--font_weight--semibold);
|
|
176
176
|
}
|
|
177
|
-
.
|
|
177
|
+
.bds017-avatar.bds017---size_small {
|
|
178
178
|
--avatar_size: 2em;
|
|
179
179
|
}
|
|
180
|
-
.
|
|
180
|
+
.bds017-avatar.bds017---size_medium {
|
|
181
181
|
--avatar_size: 3em;
|
|
182
182
|
}
|
|
183
|
-
.
|
|
183
|
+
.bds017-avatar.bds017---size_large {
|
|
184
184
|
--avatar_size: 4.5em;
|
|
185
185
|
}
|
|
186
|
-
.
|
|
186
|
+
.bds017-image {
|
|
187
187
|
width: 100%;
|
|
188
188
|
height: 100%;
|
|
189
189
|
object-fit: cover;
|
|
190
190
|
display: block;
|
|
191
191
|
}
|
|
192
|
-
.
|
|
192
|
+
.bds017-initials {
|
|
193
193
|
line-height: 1;
|
|
194
194
|
user-select: none;
|
|
195
195
|
font-size: var(--font_size--body);
|
|
196
196
|
}
|
|
197
|
-
.
|
|
197
|
+
.bds017-avatar.bds017---size_small .bds017-initials {
|
|
198
198
|
font-size: var(--font_size--body--s);
|
|
199
199
|
}
|
|
200
|
-
.
|
|
200
|
+
.bds017-avatar.bds017---size_large .bds017-initials {
|
|
201
201
|
font-size: var(--font_size--heading-3);
|
|
202
202
|
}
|
|
203
203
|
}
|
|
204
204
|
|
|
205
205
|
/* src/components/ui/Badge/Badge.module.css */
|
|
206
206
|
@layer component {
|
|
207
|
-
.
|
|
207
|
+
.bds017-badge {
|
|
208
208
|
--badge_bg: var(--color_blue);
|
|
209
209
|
--badge_text: var(--color_on-blue);
|
|
210
210
|
--badge_radius: 2em;
|
|
@@ -221,23 +221,23 @@
|
|
|
221
221
|
background-color: var(--badge_bg);
|
|
222
222
|
color: var(--badge_text);
|
|
223
223
|
}
|
|
224
|
-
.
|
|
224
|
+
.bds017---variant_primary {
|
|
225
225
|
--badge_bg: var(--color_interactive);
|
|
226
226
|
--badge_text: var(--color_on-interactive);
|
|
227
227
|
}
|
|
228
|
-
.
|
|
228
|
+
.bds017---variant_secondary {
|
|
229
229
|
--badge_bg: var(--color_bg);
|
|
230
230
|
--badge_text: var(--color_on-bg);
|
|
231
231
|
}
|
|
232
|
-
.
|
|
232
|
+
.bds017---variant_success {
|
|
233
233
|
--badge_bg: var(--color_success);
|
|
234
234
|
--badge_text: var(--color_on-success);
|
|
235
235
|
}
|
|
236
|
-
.
|
|
236
|
+
.bds017---variant_error {
|
|
237
237
|
--badge_bg: var(--color_error);
|
|
238
238
|
--badge_text: var(--color_on-error);
|
|
239
239
|
}
|
|
240
|
-
.
|
|
240
|
+
.bds017---variant_warning {
|
|
241
241
|
--badge_bg: var(--color_warning);
|
|
242
242
|
--badge_text: var(--color_on-warning);
|
|
243
243
|
}
|
|
@@ -245,10 +245,10 @@
|
|
|
245
245
|
|
|
246
246
|
/* src/components/ui/Breadcrumb/Breadcrumb.module.css */
|
|
247
247
|
@layer component {
|
|
248
|
-
.
|
|
248
|
+
.bds017-breadcrumb {
|
|
249
249
|
font-size: var(--font_size--body--s);
|
|
250
250
|
}
|
|
251
|
-
.
|
|
251
|
+
.bds017-list {
|
|
252
252
|
display: flex;
|
|
253
253
|
flex-wrap: wrap;
|
|
254
254
|
align-items: center;
|
|
@@ -257,32 +257,32 @@
|
|
|
257
257
|
margin: 0;
|
|
258
258
|
padding: 0;
|
|
259
259
|
}
|
|
260
|
-
.
|
|
260
|
+
.bds017-item {
|
|
261
261
|
display: flex;
|
|
262
262
|
align-items: center;
|
|
263
263
|
gap: var(--space_xxs);
|
|
264
264
|
}
|
|
265
|
-
.
|
|
265
|
+
.bds017-link {
|
|
266
266
|
color: var(--color_interactive);
|
|
267
267
|
text-decoration: none;
|
|
268
268
|
transition: var(--animation_transition);
|
|
269
269
|
}
|
|
270
|
-
.
|
|
270
|
+
.bds017-link:focus-visible {
|
|
271
271
|
outline: var(--outline_default);
|
|
272
272
|
outline-offset: var(--outline_offset);
|
|
273
273
|
border-radius: var(--border_radius--xs);
|
|
274
274
|
}
|
|
275
275
|
@media (hover: hover) and (pointer: fine) {
|
|
276
|
-
.
|
|
276
|
+
.bds017-link:hover {
|
|
277
277
|
text-decoration: underline;
|
|
278
278
|
text-underline-offset: 0.2em;
|
|
279
279
|
}
|
|
280
280
|
}
|
|
281
|
-
.
|
|
281
|
+
.bds017-separator {
|
|
282
282
|
color: var(--color_on-bg--subtle);
|
|
283
283
|
user-select: none;
|
|
284
284
|
}
|
|
285
|
-
.
|
|
285
|
+
.bds017-current {
|
|
286
286
|
color: var(--color_on-bg--subtle);
|
|
287
287
|
font-weight: var(--font_weight--semibold);
|
|
288
288
|
}
|
|
@@ -290,7 +290,7 @@
|
|
|
290
290
|
|
|
291
291
|
/* src/components/ui/Calendar/Calendar.module.css */
|
|
292
292
|
@layer component {
|
|
293
|
-
.
|
|
293
|
+
.bds017-calendar {
|
|
294
294
|
display: inline-flex;
|
|
295
295
|
flex-direction: column;
|
|
296
296
|
gap: var(--space_s);
|
|
@@ -301,17 +301,17 @@
|
|
|
301
301
|
box-shadow: var(--shadow_s);
|
|
302
302
|
width: 20rem;
|
|
303
303
|
}
|
|
304
|
-
.
|
|
304
|
+
.bds017-header {
|
|
305
305
|
display: flex;
|
|
306
306
|
align-items: center;
|
|
307
307
|
justify-content: space-between;
|
|
308
308
|
}
|
|
309
|
-
.
|
|
309
|
+
.bds017-monthYear {
|
|
310
310
|
font-size: var(--font_size--body);
|
|
311
311
|
font-weight: var(--font_weight--semibold);
|
|
312
312
|
color: var(--color_on-bg);
|
|
313
313
|
}
|
|
314
|
-
.
|
|
314
|
+
.bds017-navBtn {
|
|
315
315
|
all: unset;
|
|
316
316
|
display: flex;
|
|
317
317
|
align-items: center;
|
|
@@ -323,35 +323,35 @@
|
|
|
323
323
|
color: var(--color_on-bg);
|
|
324
324
|
transition: var(--animation_transition);
|
|
325
325
|
}
|
|
326
|
-
.
|
|
326
|
+
.bds017-navBtn svg {
|
|
327
327
|
width: 1rem;
|
|
328
328
|
height: 1rem;
|
|
329
329
|
}
|
|
330
|
-
.
|
|
330
|
+
.bds017-navBtn:focus-visible {
|
|
331
331
|
outline: var(--outline_default);
|
|
332
332
|
outline-offset: var(--outline_offset);
|
|
333
333
|
}
|
|
334
334
|
@media (hover: hover) and (pointer: fine) {
|
|
335
|
-
.
|
|
335
|
+
.bds017-navBtn:hover {
|
|
336
336
|
background-color: var(--color_bg--subtle);
|
|
337
337
|
}
|
|
338
338
|
}
|
|
339
|
-
.
|
|
339
|
+
.bds017-grid {
|
|
340
340
|
border-collapse: collapse;
|
|
341
341
|
width: 100%;
|
|
342
342
|
table-layout: fixed;
|
|
343
343
|
}
|
|
344
|
-
.
|
|
344
|
+
.bds017-weekday {
|
|
345
345
|
font-size: var(--font_size--body--s);
|
|
346
346
|
font-weight: var(--font_weight--semibold);
|
|
347
347
|
color: var(--color_on-bg--muted);
|
|
348
348
|
text-align: center;
|
|
349
349
|
padding-block-end: var(--space_xs);
|
|
350
350
|
}
|
|
351
|
-
.
|
|
351
|
+
.bds017-empty {
|
|
352
352
|
padding: 0;
|
|
353
353
|
}
|
|
354
|
-
.
|
|
354
|
+
.bds017-day {
|
|
355
355
|
all: unset;
|
|
356
356
|
display: flex;
|
|
357
357
|
align-items: center;
|
|
@@ -365,30 +365,30 @@
|
|
|
365
365
|
transition: var(--animation_transition);
|
|
366
366
|
box-sizing: border-box;
|
|
367
367
|
}
|
|
368
|
-
.
|
|
368
|
+
.bds017-day:focus-visible {
|
|
369
369
|
outline: var(--outline_default);
|
|
370
370
|
outline-offset: var(--outline_offset);
|
|
371
371
|
}
|
|
372
372
|
@media (hover: hover) and (pointer: fine) {
|
|
373
|
-
.
|
|
373
|
+
.bds017-day:not(.bds017-disabled, .bds017-selected):hover {
|
|
374
374
|
background-color: var(--color_bg--subtle);
|
|
375
375
|
}
|
|
376
376
|
}
|
|
377
|
-
.
|
|
377
|
+
.bds017-today {
|
|
378
378
|
border: 2px solid var(--color_interactive);
|
|
379
379
|
font-weight: var(--font_weight--semibold);
|
|
380
380
|
}
|
|
381
|
-
.
|
|
381
|
+
.bds017-selected {
|
|
382
382
|
background-color: var(--color_interactive);
|
|
383
383
|
color: var(--color_on-interactive);
|
|
384
384
|
font-weight: var(--font_weight--semibold);
|
|
385
385
|
}
|
|
386
|
-
.
|
|
386
|
+
.bds017-disabled {
|
|
387
387
|
opacity: 0.35;
|
|
388
388
|
cursor: not-allowed;
|
|
389
389
|
}
|
|
390
390
|
@media (prefers-reduced-motion: reduce) {
|
|
391
|
-
.
|
|
391
|
+
.bds017-day {
|
|
392
392
|
transition: none;
|
|
393
393
|
}
|
|
394
394
|
}
|
|
@@ -396,13 +396,13 @@
|
|
|
396
396
|
|
|
397
397
|
/* src/components/ui/Carousel/Carousel.module.css */
|
|
398
398
|
@layer component {
|
|
399
|
-
.
|
|
399
|
+
.bds017-carousel {
|
|
400
400
|
position: relative;
|
|
401
401
|
display: flex;
|
|
402
402
|
align-items: center;
|
|
403
403
|
gap: var(--space_xs);
|
|
404
404
|
}
|
|
405
|
-
.
|
|
405
|
+
.bds017-track {
|
|
406
406
|
display: flex;
|
|
407
407
|
gap: var(--space_m);
|
|
408
408
|
overflow-x: auto;
|
|
@@ -411,14 +411,14 @@
|
|
|
411
411
|
flex: 1;
|
|
412
412
|
scroll-behavior: smooth;
|
|
413
413
|
}
|
|
414
|
-
.
|
|
414
|
+
.bds017-track::-webkit-scrollbar {
|
|
415
415
|
display: none;
|
|
416
416
|
}
|
|
417
|
-
.
|
|
417
|
+
.bds017-slide {
|
|
418
418
|
scroll-snap-align: start;
|
|
419
419
|
flex-shrink: 0;
|
|
420
420
|
}
|
|
421
|
-
.
|
|
421
|
+
.bds017-navBtn {
|
|
422
422
|
all: unset;
|
|
423
423
|
display: flex;
|
|
424
424
|
align-items: center;
|
|
@@ -434,21 +434,21 @@
|
|
|
434
434
|
transition: var(--animation_transition);
|
|
435
435
|
box-shadow: var(--shadow_s);
|
|
436
436
|
}
|
|
437
|
-
.
|
|
437
|
+
.bds017-navBtn svg {
|
|
438
438
|
width: 1.25rem;
|
|
439
439
|
height: 1.25rem;
|
|
440
440
|
}
|
|
441
|
-
.
|
|
441
|
+
.bds017-navBtn:focus-visible {
|
|
442
442
|
outline: var(--outline_default);
|
|
443
443
|
outline-offset: var(--outline_offset);
|
|
444
444
|
}
|
|
445
445
|
@media (hover: hover) and (pointer: fine) {
|
|
446
|
-
.
|
|
446
|
+
.bds017-navBtn:hover {
|
|
447
447
|
background-color: var(--color_bg--subtle);
|
|
448
448
|
}
|
|
449
449
|
}
|
|
450
450
|
@media (prefers-reduced-motion: reduce) {
|
|
451
|
-
.
|
|
451
|
+
.bds017-track {
|
|
452
452
|
scroll-behavior: auto;
|
|
453
453
|
}
|
|
454
454
|
}
|
|
@@ -456,7 +456,7 @@
|
|
|
456
456
|
|
|
457
457
|
/* src/components/ui/DescriptionList/DescriptionList.module.css */
|
|
458
458
|
@layer component {
|
|
459
|
-
.
|
|
459
|
+
.bds017-list {
|
|
460
460
|
display: flex;
|
|
461
461
|
flex-direction: column;
|
|
462
462
|
gap: var(--space_s);
|
|
@@ -465,36 +465,36 @@
|
|
|
465
465
|
font-size: var(--font_size--body);
|
|
466
466
|
color: var(--color_on-bg);
|
|
467
467
|
}
|
|
468
|
-
.
|
|
468
|
+
.bds017-group {
|
|
469
469
|
display: flex;
|
|
470
470
|
flex-direction: column;
|
|
471
471
|
gap: var(--space_xxs);
|
|
472
472
|
}
|
|
473
|
-
.
|
|
473
|
+
.bds017-term {
|
|
474
474
|
font-weight: var(--font_weight--semibold);
|
|
475
475
|
color: var(--color_on-bg);
|
|
476
476
|
}
|
|
477
|
-
.
|
|
477
|
+
.bds017-details {
|
|
478
478
|
margin: 0;
|
|
479
479
|
color: var(--color_on-bg--muted);
|
|
480
480
|
}
|
|
481
|
-
.
|
|
481
|
+
.bds017---layout_inline .bds017-group {
|
|
482
482
|
display: grid;
|
|
483
483
|
grid-template-columns: minmax(8rem, 1fr) 2fr;
|
|
484
484
|
gap: var(--space_xs);
|
|
485
485
|
align-items: baseline;
|
|
486
486
|
}
|
|
487
|
-
.
|
|
487
|
+
.bds017---layout_inline .bds017-term {
|
|
488
488
|
grid-column: 1;
|
|
489
489
|
}
|
|
490
|
-
.
|
|
490
|
+
.bds017---layout_inline .bds017-details {
|
|
491
491
|
grid-column: 2;
|
|
492
492
|
}
|
|
493
493
|
}
|
|
494
494
|
|
|
495
495
|
/* src/components/ui/Link/Link.module.css */
|
|
496
496
|
@layer component {
|
|
497
|
-
.
|
|
497
|
+
.bds017-link {
|
|
498
498
|
--link_color: var(--color_interactive);
|
|
499
499
|
--link_color-hover: var(--color_blue--strong);
|
|
500
500
|
color: var(--link_color);
|
|
@@ -503,25 +503,25 @@
|
|
|
503
503
|
transition: var(--animation_transition);
|
|
504
504
|
cursor: pointer;
|
|
505
505
|
}
|
|
506
|
-
.
|
|
506
|
+
.bds017-link:focus-visible {
|
|
507
507
|
outline: var(--outline_default);
|
|
508
508
|
outline-offset: var(--outline_offset);
|
|
509
509
|
border-radius: var(--border_radius--xs);
|
|
510
510
|
}
|
|
511
511
|
@media (hover: hover) and (pointer: fine) {
|
|
512
|
-
.
|
|
512
|
+
.bds017-link:hover {
|
|
513
513
|
--link_color: var(--link_color-hover);
|
|
514
514
|
}
|
|
515
515
|
}
|
|
516
|
-
.
|
|
516
|
+
.bds017---variant_default {
|
|
517
517
|
--link_color: var(--color_interactive);
|
|
518
518
|
--link_color-hover: var(--color_blue--strong);
|
|
519
519
|
}
|
|
520
|
-
.
|
|
520
|
+
.bds017---variant_subtle {
|
|
521
521
|
--link_color: var(--color_on-bg);
|
|
522
522
|
--link_color-hover: var(--color_interactive);
|
|
523
523
|
}
|
|
524
|
-
.
|
|
524
|
+
.bds017---variant_standalone {
|
|
525
525
|
--link_color: var(--color_interactive);
|
|
526
526
|
--link_color-hover: var(--color_blue--strong);
|
|
527
527
|
display: inline-flex;
|
|
@@ -531,12 +531,12 @@
|
|
|
531
531
|
text-decoration: none;
|
|
532
532
|
}
|
|
533
533
|
@media (hover: hover) and (pointer: fine) {
|
|
534
|
-
.
|
|
534
|
+
.bds017---variant_standalone:hover {
|
|
535
535
|
text-decoration: underline;
|
|
536
536
|
text-underline-offset: 0.2em;
|
|
537
537
|
}
|
|
538
538
|
}
|
|
539
|
-
.
|
|
539
|
+
.bds017-externalLabel {
|
|
540
540
|
position: absolute;
|
|
541
541
|
width: 1px;
|
|
542
542
|
height: 1px;
|
|
@@ -551,12 +551,12 @@
|
|
|
551
551
|
|
|
552
552
|
/* src/components/ui/Loading/Loading.module.css */
|
|
553
553
|
@layer component {
|
|
554
|
-
.
|
|
554
|
+
.bds017-loading {
|
|
555
555
|
display: flex;
|
|
556
556
|
justify-content: center;
|
|
557
557
|
align-items: center;
|
|
558
558
|
}
|
|
559
|
-
.
|
|
559
|
+
.bds017-spinner {
|
|
560
560
|
width: 2.5em;
|
|
561
561
|
height: 2.5em;
|
|
562
562
|
border: 4px solid var(--color_bg);
|
|
@@ -564,12 +564,12 @@
|
|
|
564
564
|
border-radius: 50%;
|
|
565
565
|
animation: spin 1s linear infinite;
|
|
566
566
|
}
|
|
567
|
-
.
|
|
567
|
+
.bds017---size_small .bds017-spinner {
|
|
568
568
|
width: 1.5em;
|
|
569
569
|
height: 1.5em;
|
|
570
570
|
border-width: 2px;
|
|
571
571
|
}
|
|
572
|
-
.
|
|
572
|
+
.bds017---size_large .bds017-spinner {
|
|
573
573
|
width: 4em;
|
|
574
574
|
height: 4em;
|
|
575
575
|
border-width: 6px;
|
|
@@ -586,7 +586,7 @@
|
|
|
586
586
|
|
|
587
587
|
/* src/components/ui/NotificationBanner/NotificationBanner.module.css */
|
|
588
588
|
@layer component {
|
|
589
|
-
.
|
|
589
|
+
.bds017-banner {
|
|
590
590
|
--banner_bg: var(--color_blue--subtle);
|
|
591
591
|
--banner_text: var(--color_on-blue--subtle);
|
|
592
592
|
--banner_border: var(--color_blue);
|
|
@@ -601,33 +601,33 @@
|
|
|
601
601
|
line-height: var(--font_line-height--body);
|
|
602
602
|
width: 100%;
|
|
603
603
|
}
|
|
604
|
-
.
|
|
604
|
+
.bds017---variant_info {
|
|
605
605
|
--banner_bg: var(--color_blue--subtle);
|
|
606
606
|
--banner_text: var(--color_on-blue--subtle);
|
|
607
607
|
--banner_border: var(--color_blue);
|
|
608
608
|
}
|
|
609
|
-
.
|
|
609
|
+
.bds017---variant_success {
|
|
610
610
|
--banner_bg: var(--color_green--subtle);
|
|
611
611
|
--banner_text: var(--color_on-green--subtle);
|
|
612
612
|
--banner_border: var(--color_green);
|
|
613
613
|
}
|
|
614
|
-
.
|
|
614
|
+
.bds017---variant_warning {
|
|
615
615
|
--banner_bg: var(--color_orange--subtle);
|
|
616
616
|
--banner_text: var(--color_on-orange--subtle);
|
|
617
617
|
--banner_border: var(--color_warning);
|
|
618
618
|
}
|
|
619
|
-
.
|
|
619
|
+
.bds017---variant_error {
|
|
620
620
|
--banner_bg: rgb(from var(--color_error) r g b / 12%);
|
|
621
621
|
--banner_text: var(--color_on-bg);
|
|
622
622
|
--banner_border: var(--color_error);
|
|
623
623
|
}
|
|
624
|
-
.
|
|
624
|
+
.bds017-content {
|
|
625
625
|
flex: 1;
|
|
626
626
|
}
|
|
627
|
-
.
|
|
627
|
+
.bds017-action {
|
|
628
628
|
flex-shrink: 0;
|
|
629
629
|
}
|
|
630
|
-
.
|
|
630
|
+
.bds017-dismiss {
|
|
631
631
|
all: unset;
|
|
632
632
|
display: flex;
|
|
633
633
|
align-items: center;
|
|
@@ -639,16 +639,16 @@
|
|
|
639
639
|
border: 1px solid currentcolor;
|
|
640
640
|
transition: var(--animation_transition);
|
|
641
641
|
}
|
|
642
|
-
.
|
|
642
|
+
.bds017-dismiss svg {
|
|
643
643
|
width: 1rem;
|
|
644
644
|
height: 1rem;
|
|
645
645
|
}
|
|
646
|
-
.
|
|
646
|
+
.bds017-dismiss:focus-visible {
|
|
647
647
|
outline: var(--outline_default);
|
|
648
648
|
outline-offset: var(--outline_offset);
|
|
649
649
|
}
|
|
650
650
|
@media (hover: hover) and (pointer: fine) {
|
|
651
|
-
.
|
|
651
|
+
.bds017-dismiss:hover {
|
|
652
652
|
opacity: 0.7;
|
|
653
653
|
}
|
|
654
654
|
}
|
|
@@ -656,11 +656,11 @@
|
|
|
656
656
|
|
|
657
657
|
/* src/components/ui/Pagination/Pagination.module.css */
|
|
658
658
|
@layer component {
|
|
659
|
-
.
|
|
659
|
+
.bds017-pagination {
|
|
660
660
|
display: flex;
|
|
661
661
|
justify-content: center;
|
|
662
662
|
}
|
|
663
|
-
.
|
|
663
|
+
.bds017-list {
|
|
664
664
|
display: flex;
|
|
665
665
|
align-items: center;
|
|
666
666
|
gap: var(--space_xxs);
|
|
@@ -668,7 +668,7 @@
|
|
|
668
668
|
margin: 0;
|
|
669
669
|
padding: 0;
|
|
670
670
|
}
|
|
671
|
-
.
|
|
671
|
+
.bds017-button {
|
|
672
672
|
--btn_bg: transparent;
|
|
673
673
|
--btn_color: var(--color_on-bg);
|
|
674
674
|
--btn_border: var(--color_bg--subtle);
|
|
@@ -690,30 +690,30 @@
|
|
|
690
690
|
transition: var(--animation_transition);
|
|
691
691
|
box-sizing: border-box;
|
|
692
692
|
}
|
|
693
|
-
.
|
|
693
|
+
.bds017-button:disabled {
|
|
694
694
|
opacity: 0.4;
|
|
695
695
|
cursor: not-allowed;
|
|
696
696
|
}
|
|
697
|
-
.
|
|
697
|
+
.bds017-button:focus-visible {
|
|
698
698
|
outline: var(--outline_default);
|
|
699
699
|
outline-offset: var(--outline_offset);
|
|
700
700
|
}
|
|
701
701
|
@media (hover: hover) and (pointer: fine) {
|
|
702
|
-
.
|
|
702
|
+
.bds017-button:not(:disabled, .bds017---active):hover {
|
|
703
703
|
--btn_bg: var(--color_bg--subtle);
|
|
704
704
|
--btn_color: var(--color_interactive);
|
|
705
705
|
}
|
|
706
706
|
}
|
|
707
|
-
.
|
|
707
|
+
.bds017-button.bds017---active {
|
|
708
708
|
--btn_bg: var(--color_interactive);
|
|
709
709
|
--btn_color: var(--color_on-interactive);
|
|
710
710
|
--btn_border: var(--color_interactive);
|
|
711
711
|
}
|
|
712
|
-
.
|
|
712
|
+
.bds017-button.bds017---nav svg {
|
|
713
713
|
width: 1rem;
|
|
714
714
|
height: 1rem;
|
|
715
715
|
}
|
|
716
|
-
.
|
|
716
|
+
.bds017-ellipsis {
|
|
717
717
|
display: inline-flex;
|
|
718
718
|
align-items: center;
|
|
719
719
|
justify-content: center;
|
|
@@ -727,26 +727,26 @@
|
|
|
727
727
|
|
|
728
728
|
/* src/components/ui/Progress/Progress.module.css */
|
|
729
729
|
@layer component {
|
|
730
|
-
.
|
|
730
|
+
.bds017-container {
|
|
731
731
|
display: flex;
|
|
732
732
|
flex-direction: column;
|
|
733
733
|
gap: var(--space_xxs);
|
|
734
734
|
width: 100%;
|
|
735
735
|
}
|
|
736
|
-
.
|
|
736
|
+
.bds017-labelRow {
|
|
737
737
|
display: flex;
|
|
738
738
|
justify-content: space-between;
|
|
739
739
|
align-items: baseline;
|
|
740
740
|
font-size: var(--font_size--body--s);
|
|
741
741
|
color: var(--color_on-bg);
|
|
742
742
|
}
|
|
743
|
-
.
|
|
743
|
+
.bds017-label {
|
|
744
744
|
font-weight: var(--font_weight--semibold);
|
|
745
745
|
}
|
|
746
|
-
.
|
|
746
|
+
.bds017-value {
|
|
747
747
|
font-variant-numeric: tabular-nums;
|
|
748
748
|
}
|
|
749
|
-
.
|
|
749
|
+
.bds017-track {
|
|
750
750
|
--progress_height: var(--space_xs);
|
|
751
751
|
width: 100%;
|
|
752
752
|
height: var(--progress_height);
|
|
@@ -754,23 +754,23 @@
|
|
|
754
754
|
border-radius: 999px;
|
|
755
755
|
overflow: hidden;
|
|
756
756
|
}
|
|
757
|
-
.
|
|
757
|
+
.bds017-track.bds017---size_small {
|
|
758
758
|
--progress_height: var(--space_xxs);
|
|
759
759
|
}
|
|
760
|
-
.
|
|
760
|
+
.bds017-track.bds017---size_medium {
|
|
761
761
|
--progress_height: var(--space_xs);
|
|
762
762
|
}
|
|
763
|
-
.
|
|
763
|
+
.bds017-track.bds017---size_large {
|
|
764
764
|
--progress_height: var(--space_s);
|
|
765
765
|
}
|
|
766
|
-
.
|
|
766
|
+
.bds017-fill {
|
|
767
767
|
height: 100%;
|
|
768
768
|
background-color: var(--color_green);
|
|
769
769
|
border-radius: 999px;
|
|
770
770
|
transition: width var(--animation_transition-duration) var(--animation_easing);
|
|
771
771
|
}
|
|
772
772
|
@media (prefers-reduced-motion: reduce) {
|
|
773
|
-
.
|
|
773
|
+
.bds017-fill {
|
|
774
774
|
transition: none;
|
|
775
775
|
}
|
|
776
776
|
}
|
|
@@ -778,23 +778,23 @@
|
|
|
778
778
|
|
|
779
779
|
/* src/components/ui/ProgressCircle/ProgressCircle.module.css */
|
|
780
780
|
@layer component {
|
|
781
|
-
.
|
|
781
|
+
.bds017-wrapper {
|
|
782
782
|
position: relative;
|
|
783
783
|
display: inline-flex;
|
|
784
784
|
align-items: center;
|
|
785
785
|
justify-content: center;
|
|
786
786
|
}
|
|
787
|
-
.
|
|
787
|
+
.bds017-svg {
|
|
788
788
|
display: block;
|
|
789
789
|
}
|
|
790
|
-
.
|
|
790
|
+
.bds017-track {
|
|
791
791
|
stroke: var(--color_bg--subtle);
|
|
792
792
|
}
|
|
793
|
-
.
|
|
793
|
+
.bds017-fill {
|
|
794
794
|
stroke: var(--color_green);
|
|
795
795
|
transition: stroke-dashoffset var(--animation_transition-duration) var(--animation_easing);
|
|
796
796
|
}
|
|
797
|
-
.
|
|
797
|
+
.bds017-value {
|
|
798
798
|
position: absolute;
|
|
799
799
|
font-size: var(--font_size--body--s);
|
|
800
800
|
font-weight: var(--font_weight--semibold);
|
|
@@ -802,17 +802,17 @@
|
|
|
802
802
|
color: var(--color_on-bg);
|
|
803
803
|
line-height: 1;
|
|
804
804
|
}
|
|
805
|
-
.
|
|
805
|
+
.bds017---size_small .bds017-value {
|
|
806
806
|
font-size: 0.5rem;
|
|
807
807
|
}
|
|
808
|
-
.
|
|
808
|
+
.bds017---size_medium .bds017-value {
|
|
809
809
|
font-size: var(--font_size--body--s);
|
|
810
810
|
}
|
|
811
|
-
.
|
|
811
|
+
.bds017---size_large .bds017-value {
|
|
812
812
|
font-size: var(--font_size--body);
|
|
813
813
|
}
|
|
814
814
|
@media (prefers-reduced-motion: reduce) {
|
|
815
|
-
.
|
|
815
|
+
.bds017-fill {
|
|
816
816
|
transition: none;
|
|
817
817
|
}
|
|
818
818
|
}
|
|
@@ -820,27 +820,25 @@
|
|
|
820
820
|
|
|
821
821
|
/* src/components/ui/Separator/Separator.module.css */
|
|
822
822
|
@layer component {
|
|
823
|
-
.
|
|
823
|
+
.bds017-separator {
|
|
824
824
|
border: none;
|
|
825
825
|
background-color: var(--separator_color, var(--color_on-bg));
|
|
826
826
|
}
|
|
827
|
-
.
|
|
827
|
+
.bds017-separator.bds017---horizontal {
|
|
828
828
|
display: block;
|
|
829
829
|
width: 100%;
|
|
830
830
|
height: var(--separator_thickness, 1px);
|
|
831
|
-
margin-block: var(--space_m);
|
|
832
831
|
}
|
|
833
|
-
.
|
|
832
|
+
.bds017-separator.bds017---vertical {
|
|
834
833
|
display: inline-block;
|
|
835
834
|
width: var(--separator_thickness, 1px);
|
|
836
835
|
align-self: stretch;
|
|
837
|
-
margin-inline: var(--space_m);
|
|
838
836
|
}
|
|
839
837
|
}
|
|
840
838
|
|
|
841
839
|
/* src/components/ui/Skeleton/Skeleton.module.css */
|
|
842
840
|
@layer component {
|
|
843
|
-
.
|
|
841
|
+
.bds017-skeleton {
|
|
844
842
|
background:
|
|
845
843
|
linear-gradient(
|
|
846
844
|
90deg,
|
|
@@ -864,7 +862,7 @@
|
|
|
864
862
|
|
|
865
863
|
/* src/components/ui/SkipLink/SkipLink.module.css */
|
|
866
864
|
@layer component {
|
|
867
|
-
.
|
|
865
|
+
.bds017-skipLink {
|
|
868
866
|
position: absolute;
|
|
869
867
|
inset-block-start: var(--space_s);
|
|
870
868
|
inset-inline-start: var(--space_s);
|
|
@@ -880,13 +878,13 @@
|
|
|
880
878
|
transform: translateY(-200%);
|
|
881
879
|
transition: transform var(--animation_transition-duration) var(--animation_easing);
|
|
882
880
|
}
|
|
883
|
-
.
|
|
881
|
+
.bds017-skipLink:focus-visible {
|
|
884
882
|
transform: translateY(0);
|
|
885
883
|
outline: var(--outline_default);
|
|
886
884
|
outline-offset: var(--outline_offset);
|
|
887
885
|
}
|
|
888
886
|
@media (prefers-reduced-motion: reduce) {
|
|
889
|
-
.
|
|
887
|
+
.bds017-skipLink {
|
|
890
888
|
transition: none;
|
|
891
889
|
}
|
|
892
890
|
}
|
|
@@ -894,29 +892,29 @@
|
|
|
894
892
|
|
|
895
893
|
/* src/components/ui/Table/Table.module.css */
|
|
896
894
|
@layer component {
|
|
897
|
-
.
|
|
895
|
+
.bds017-wrapper {
|
|
898
896
|
width: 100%;
|
|
899
897
|
overflow-x: auto;
|
|
900
898
|
border-radius: var(--border_radius--s);
|
|
901
899
|
border: 1px solid var(--color_bg--subtle);
|
|
902
900
|
}
|
|
903
|
-
.
|
|
901
|
+
.bds017-table {
|
|
904
902
|
width: 100%;
|
|
905
903
|
border-collapse: collapse;
|
|
906
904
|
font-size: var(--font_size--body);
|
|
907
905
|
font-family: var(--font_family--body);
|
|
908
906
|
}
|
|
909
|
-
.
|
|
907
|
+
.bds017-caption {
|
|
910
908
|
caption-side: top;
|
|
911
909
|
text-align: start;
|
|
912
910
|
padding: var(--space_s) var(--space_m);
|
|
913
911
|
font-weight: var(--font_weight--semibold);
|
|
914
912
|
color: var(--color_on-bg);
|
|
915
913
|
}
|
|
916
|
-
.
|
|
914
|
+
.bds017-thead {
|
|
917
915
|
background-color: var(--color_bg--subtle);
|
|
918
916
|
}
|
|
919
|
-
.
|
|
917
|
+
.bds017-th {
|
|
920
918
|
padding: var(--space_s) var(--space_m);
|
|
921
919
|
text-align: start;
|
|
922
920
|
font-weight: var(--font_weight--semibold);
|
|
@@ -925,10 +923,10 @@
|
|
|
925
923
|
white-space: nowrap;
|
|
926
924
|
border-bottom: 1px solid var(--color_bg--subtle);
|
|
927
925
|
}
|
|
928
|
-
.
|
|
926
|
+
.bds017-th.bds017---sortable {
|
|
929
927
|
padding: 0;
|
|
930
928
|
}
|
|
931
|
-
.
|
|
929
|
+
.bds017-sortButton {
|
|
932
930
|
all: unset;
|
|
933
931
|
display: flex;
|
|
934
932
|
align-items: center;
|
|
@@ -942,47 +940,47 @@
|
|
|
942
940
|
transition: var(--animation_transition);
|
|
943
941
|
box-sizing: border-box;
|
|
944
942
|
}
|
|
945
|
-
.
|
|
943
|
+
.bds017-sortButton:focus-visible {
|
|
946
944
|
outline: var(--outline_default);
|
|
947
945
|
outline-offset: calc(var(--outline_offset) * -1);
|
|
948
946
|
}
|
|
949
947
|
@media (hover: hover) and (pointer: fine) {
|
|
950
|
-
.
|
|
948
|
+
.bds017-sortButton:hover {
|
|
951
949
|
color: var(--color_on-bg);
|
|
952
950
|
}
|
|
953
951
|
}
|
|
954
|
-
.
|
|
952
|
+
.bds017-sortIcon {
|
|
955
953
|
width: 1rem;
|
|
956
954
|
height: 1rem;
|
|
957
955
|
opacity: 0.4;
|
|
958
956
|
transition: transform var(--animation_transition-duration) var(--animation_easing), opacity var(--animation_transition-duration) var(--animation_easing);
|
|
959
957
|
}
|
|
960
|
-
.
|
|
958
|
+
.bds017-sortIcon.bds017---sort-active {
|
|
961
959
|
opacity: 1;
|
|
962
960
|
color: var(--color_interactive);
|
|
963
961
|
}
|
|
964
|
-
.
|
|
962
|
+
.bds017-sortIcon.bds017---sort-desc {
|
|
965
963
|
transform: rotate(180deg);
|
|
966
964
|
}
|
|
967
|
-
.
|
|
965
|
+
.bds017-tbody .bds017-tr {
|
|
968
966
|
border-bottom: 1px solid var(--color_bg--subtle);
|
|
969
967
|
transition: var(--animation_transition);
|
|
970
968
|
}
|
|
971
|
-
.
|
|
969
|
+
.bds017-tbody .bds017-tr:last-child {
|
|
972
970
|
border-bottom: none;
|
|
973
971
|
}
|
|
974
972
|
@media (hover: hover) and (pointer: fine) {
|
|
975
|
-
.
|
|
973
|
+
.bds017-tbody .bds017-tr:hover {
|
|
976
974
|
background-color: var(--color_bg--subtle);
|
|
977
975
|
}
|
|
978
976
|
}
|
|
979
|
-
.
|
|
977
|
+
.bds017-td {
|
|
980
978
|
padding: var(--space_s) var(--space_m);
|
|
981
979
|
color: var(--color_on-bg);
|
|
982
980
|
vertical-align: middle;
|
|
983
981
|
}
|
|
984
982
|
@media (prefers-reduced-motion: reduce) {
|
|
985
|
-
.
|
|
983
|
+
.bds017-sortIcon {
|
|
986
984
|
transition: none;
|
|
987
985
|
}
|
|
988
986
|
}
|
|
@@ -990,16 +988,16 @@
|
|
|
990
988
|
|
|
991
989
|
/* src/components/ui/Tabs/Tabs.module.css */
|
|
992
990
|
@layer component {
|
|
993
|
-
.
|
|
991
|
+
.bds017-tabs {
|
|
994
992
|
display: flex;
|
|
995
993
|
flex-direction: column;
|
|
996
994
|
}
|
|
997
|
-
.
|
|
995
|
+
.bds017-tabList {
|
|
998
996
|
display: flex;
|
|
999
997
|
border-bottom: 1px solid var(--color_bg--subtle);
|
|
1000
998
|
gap: var(--space_xxs);
|
|
1001
999
|
}
|
|
1002
|
-
.
|
|
1000
|
+
.bds017-tab {
|
|
1003
1001
|
--tab_color: var(--color_on-bg);
|
|
1004
1002
|
--tab_border-color: transparent;
|
|
1005
1003
|
all: unset;
|
|
@@ -1015,28 +1013,28 @@
|
|
|
1015
1013
|
cursor: pointer;
|
|
1016
1014
|
transition: var(--animation_transition);
|
|
1017
1015
|
}
|
|
1018
|
-
.
|
|
1016
|
+
.bds017-tab.bds017---active {
|
|
1019
1017
|
--tab_color: var(--color_interactive);
|
|
1020
1018
|
--tab_border-color: var(--color_interactive);
|
|
1021
1019
|
}
|
|
1022
|
-
.
|
|
1020
|
+
.bds017-tab:disabled {
|
|
1023
1021
|
opacity: 0.4;
|
|
1024
1022
|
cursor: not-allowed;
|
|
1025
1023
|
}
|
|
1026
|
-
.
|
|
1024
|
+
.bds017-tab:focus-visible {
|
|
1027
1025
|
outline: var(--outline_default);
|
|
1028
1026
|
outline-offset: var(--outline_offset);
|
|
1029
1027
|
border-radius: var(--border_radius--xs);
|
|
1030
1028
|
}
|
|
1031
1029
|
@media (hover: hover) and (pointer: fine) {
|
|
1032
|
-
.
|
|
1030
|
+
.bds017-tab:not(:disabled, .bds017---active):hover {
|
|
1033
1031
|
--tab_color: var(--color_interactive);
|
|
1034
1032
|
}
|
|
1035
1033
|
}
|
|
1036
|
-
.
|
|
1034
|
+
.bds017-panel {
|
|
1037
1035
|
padding-block-start: var(--space_m);
|
|
1038
1036
|
}
|
|
1039
|
-
.
|
|
1037
|
+
.bds017-panel:focus-visible {
|
|
1040
1038
|
outline: var(--outline_default);
|
|
1041
1039
|
outline-offset: var(--outline_offset);
|
|
1042
1040
|
}
|
|
@@ -1044,12 +1042,12 @@
|
|
|
1044
1042
|
|
|
1045
1043
|
/* src/components/ui/Tooltip/Tooltip.module.css */
|
|
1046
1044
|
@layer component {
|
|
1047
|
-
.
|
|
1045
|
+
.bds017-wrapper {
|
|
1048
1046
|
position: relative;
|
|
1049
1047
|
display: inline-flex;
|
|
1050
1048
|
align-items: center;
|
|
1051
1049
|
}
|
|
1052
|
-
.
|
|
1050
|
+
.bds017-tooltip {
|
|
1053
1051
|
--tooltip_bg: var(--color_on-bg);
|
|
1054
1052
|
--tooltip_text: var(--color_bg);
|
|
1055
1053
|
position: absolute;
|
|
@@ -1066,33 +1064,33 @@
|
|
|
1066
1064
|
opacity: 0;
|
|
1067
1065
|
transition: opacity var(--animation_transition-duration) var(--animation_easing);
|
|
1068
1066
|
}
|
|
1069
|
-
.
|
|
1070
|
-
.
|
|
1067
|
+
.bds017-wrapper:hover .bds017-tooltip,
|
|
1068
|
+
.bds017-wrapper:focus-within .bds017-tooltip {
|
|
1071
1069
|
visibility: visible;
|
|
1072
1070
|
opacity: 1;
|
|
1073
1071
|
}
|
|
1074
|
-
.
|
|
1072
|
+
.bds017---placement_top {
|
|
1075
1073
|
bottom: calc(100% + var(--space_xs));
|
|
1076
1074
|
left: 50%;
|
|
1077
1075
|
transform: translateX(-50%);
|
|
1078
1076
|
}
|
|
1079
|
-
.
|
|
1077
|
+
.bds017---placement_bottom {
|
|
1080
1078
|
top: calc(100% + var(--space_xs));
|
|
1081
1079
|
left: 50%;
|
|
1082
1080
|
transform: translateX(-50%);
|
|
1083
1081
|
}
|
|
1084
|
-
.
|
|
1082
|
+
.bds017---placement_left {
|
|
1085
1083
|
right: calc(100% + var(--space_xs));
|
|
1086
1084
|
top: 50%;
|
|
1087
1085
|
transform: translateY(-50%);
|
|
1088
1086
|
}
|
|
1089
|
-
.
|
|
1087
|
+
.bds017---placement_right {
|
|
1090
1088
|
left: calc(100% + var(--space_xs));
|
|
1091
1089
|
top: 50%;
|
|
1092
1090
|
transform: translateY(-50%);
|
|
1093
1091
|
}
|
|
1094
1092
|
@media (prefers-reduced-motion: reduce) {
|
|
1095
|
-
.
|
|
1093
|
+
.bds017-tooltip {
|
|
1096
1094
|
transition: none;
|
|
1097
1095
|
}
|
|
1098
1096
|
}
|
|
@@ -1100,34 +1098,34 @@
|
|
|
1100
1098
|
|
|
1101
1099
|
/* src/components/ui/Typography/Typography.module.css */
|
|
1102
1100
|
@layer component {
|
|
1103
|
-
.
|
|
1101
|
+
.bds017-typography {
|
|
1104
1102
|
margin: 0;
|
|
1105
1103
|
font-family: var(--font_family--body);
|
|
1106
1104
|
color: var(--typography_color, var(--color_on-bg));
|
|
1107
1105
|
}
|
|
1108
|
-
.
|
|
1106
|
+
.bds017---h1 {
|
|
1109
1107
|
font-family: var(--font_family--heading);
|
|
1110
1108
|
font-size: var(--font_size--heading-1);
|
|
1111
1109
|
font-weight: var(--font_weight--bold);
|
|
1112
1110
|
line-height: var(--font_line-height--heading);
|
|
1113
1111
|
}
|
|
1114
|
-
.
|
|
1112
|
+
.bds017---h2 {
|
|
1115
1113
|
font-family: var(--font_family--heading);
|
|
1116
1114
|
font-size: var(--font_size--heading-2);
|
|
1117
1115
|
font-weight: var(--font_weight--semibold);
|
|
1118
1116
|
line-height: var(--font_line-height--heading);
|
|
1119
1117
|
}
|
|
1120
|
-
.
|
|
1118
|
+
.bds017---h3 {
|
|
1121
1119
|
font-family: var(--font_family--heading);
|
|
1122
1120
|
font-size: var(--font_size--heading-3);
|
|
1123
1121
|
font-weight: var(--font_weight--semibold);
|
|
1124
1122
|
line-height: var(--font_line-height--heading);
|
|
1125
1123
|
}
|
|
1126
|
-
.
|
|
1124
|
+
.bds017---body {
|
|
1127
1125
|
font-size: var(--font_size--body);
|
|
1128
1126
|
line-height: var(--font_line-height--body);
|
|
1129
1127
|
}
|
|
1130
|
-
.
|
|
1128
|
+
.bds017---body_s {
|
|
1131
1129
|
font-size: var(--font_size--body--s);
|
|
1132
1130
|
line-height: var(--font_line-height--body);
|
|
1133
1131
|
}
|
|
@@ -1149,8 +1147,8 @@
|
|
|
1149
1147
|
}
|
|
1150
1148
|
}
|
|
1151
1149
|
@layer component {
|
|
1152
|
-
.
|
|
1153
|
-
.
|
|
1150
|
+
.bds017-button,
|
|
1151
|
+
.bds017-button[href] {
|
|
1154
1152
|
--button_height: 3em;
|
|
1155
1153
|
--button_font-size: inherit;
|
|
1156
1154
|
--button_bg: var(--color_cta);
|
|
@@ -1177,69 +1175,69 @@
|
|
|
1177
1175
|
border: 2px solid var(--button_border-color);
|
|
1178
1176
|
transition: var(--animation_transition);
|
|
1179
1177
|
}
|
|
1180
|
-
.
|
|
1178
|
+
.bds017-button.bds017---primary {
|
|
1181
1179
|
--button_bg: var(--color_cta);
|
|
1182
1180
|
--button_text: var(--color_on-cta);
|
|
1183
1181
|
--button_border-color: transparent;
|
|
1184
1182
|
}
|
|
1185
|
-
.
|
|
1183
|
+
.bds017-button.bds017---secondary {
|
|
1186
1184
|
--button_bg: var(--color_bg);
|
|
1187
1185
|
--button_text: var(--color_on-bg);
|
|
1188
1186
|
--button_border-color: var(--button_text);
|
|
1189
1187
|
}
|
|
1190
|
-
.
|
|
1188
|
+
.bds017-button.bds017---size_small {
|
|
1191
1189
|
--button_height: 2.25em;
|
|
1192
1190
|
--button_font-size: var(--font_size--body--s);
|
|
1193
1191
|
padding-inline: var(--space_m);
|
|
1194
1192
|
}
|
|
1195
|
-
.
|
|
1193
|
+
.bds017-button.bds017---size_medium {
|
|
1196
1194
|
--button_height: 3em;
|
|
1197
1195
|
padding-inline: var(--space_l);
|
|
1198
1196
|
}
|
|
1199
|
-
.
|
|
1197
|
+
.bds017-button.bds017---size_large {
|
|
1200
1198
|
--button_height: 3.75em;
|
|
1201
1199
|
--button_font-size: var(--font_size--heading-3);
|
|
1202
1200
|
padding-inline: var(--space_xl);
|
|
1203
1201
|
}
|
|
1204
|
-
.
|
|
1202
|
+
.bds017-button.bds017---hasPulse {
|
|
1205
1203
|
animation: pulse 3s infinite;
|
|
1206
1204
|
}
|
|
1207
|
-
.
|
|
1205
|
+
.bds017-button[href] {
|
|
1208
1206
|
text-decoration: none;
|
|
1209
1207
|
}
|
|
1210
|
-
.
|
|
1208
|
+
.bds017-button svg {
|
|
1211
1209
|
--icon__stroke: currentcolor;
|
|
1212
1210
|
fill: currentcolor;
|
|
1213
1211
|
color: currentcolor;
|
|
1214
1212
|
flex-shrink: 0;
|
|
1215
1213
|
}
|
|
1216
|
-
.
|
|
1214
|
+
.bds017-prefix {
|
|
1217
1215
|
display: flex;
|
|
1218
1216
|
align-items: center;
|
|
1219
1217
|
margin-inline-start: calc(var(--space_s) * -1);
|
|
1220
1218
|
transition: var(--animation_transition);
|
|
1221
1219
|
}
|
|
1222
|
-
.
|
|
1220
|
+
.bds017-suffix {
|
|
1223
1221
|
display: flex;
|
|
1224
1222
|
align-items: center;
|
|
1225
1223
|
margin-inline-end: calc(var(--space_s) * -1);
|
|
1226
1224
|
transition: var(--animation_transition);
|
|
1227
1225
|
}
|
|
1228
1226
|
@media (hover: hover) and (pointer: fine) {
|
|
1229
|
-
.
|
|
1227
|
+
.bds017-button:hover .bds017-prefix svg {
|
|
1230
1228
|
animation: 2s infinite fadeZoom ease-out;
|
|
1231
1229
|
}
|
|
1232
|
-
.
|
|
1230
|
+
.bds017-button:hover .bds017-suffix svg {
|
|
1233
1231
|
animation: 2s infinite fadeZoom ease-out;
|
|
1234
1232
|
}
|
|
1235
1233
|
}
|
|
1236
|
-
.
|
|
1234
|
+
.bds017-button:focus-visible {
|
|
1237
1235
|
outline-offset: var(--outline_offset);
|
|
1238
1236
|
outline: var(--outline_default);
|
|
1239
1237
|
border-radius: var(--border_radius--s);
|
|
1240
1238
|
}
|
|
1241
1239
|
@media (hover: hover) and (pointer: fine) {
|
|
1242
|
-
.
|
|
1240
|
+
.bds017-button:hover {
|
|
1243
1241
|
--button_bg: var(--color_bg);
|
|
1244
1242
|
--button_text: var(--color_interactive);
|
|
1245
1243
|
--button_pulse-color: var(--color_interactive);
|
|
@@ -1250,7 +1248,7 @@
|
|
|
1250
1248
|
|
|
1251
1249
|
/* src/components/interaction/Command/Command.module.css */
|
|
1252
1250
|
@layer component {
|
|
1253
|
-
.
|
|
1251
|
+
.bds017-dialog {
|
|
1254
1252
|
padding: 0;
|
|
1255
1253
|
border: none;
|
|
1256
1254
|
border-radius: var(--border_radius--m);
|
|
@@ -1260,34 +1258,35 @@
|
|
|
1260
1258
|
overflow: visible;
|
|
1261
1259
|
margin-block-start: 10vh;
|
|
1262
1260
|
}
|
|
1263
|
-
.
|
|
1261
|
+
.bds017-dialog::backdrop {
|
|
1264
1262
|
background: rgb(0 0 0 / 50%);
|
|
1265
1263
|
}
|
|
1266
|
-
.
|
|
1264
|
+
.bds017-palette {
|
|
1267
1265
|
display: flex;
|
|
1268
1266
|
flex-direction: column;
|
|
1269
|
-
background-color: var(--color_bg);
|
|
1267
|
+
background-color: var(--command_color, var(--color_bg));
|
|
1268
|
+
color: var(--command_on-color, var(--color_on-bg));
|
|
1270
1269
|
border-radius: var(--border_radius--m);
|
|
1271
1270
|
box-shadow: var(--shadow_xl);
|
|
1272
1271
|
overflow: hidden;
|
|
1273
1272
|
max-height: 70vh;
|
|
1274
|
-
border: 1px solid
|
|
1273
|
+
border: 1px solid currentcolor;
|
|
1275
1274
|
}
|
|
1276
|
-
.
|
|
1275
|
+
.bds017-searchRow {
|
|
1277
1276
|
display: flex;
|
|
1278
1277
|
align-items: center;
|
|
1279
1278
|
gap: var(--space_xs);
|
|
1280
1279
|
padding: var(--space_s) var(--space_m);
|
|
1281
|
-
border-block-end: 1px solid
|
|
1280
|
+
border-block-end: 1px solid currentcolor;
|
|
1282
1281
|
flex-shrink: 0;
|
|
1283
1282
|
}
|
|
1284
|
-
.
|
|
1283
|
+
.bds017-searchIcon {
|
|
1285
1284
|
width: 1.25rem;
|
|
1286
1285
|
height: 1.25rem;
|
|
1287
1286
|
color: var(--color_on-bg--muted);
|
|
1288
1287
|
flex-shrink: 0;
|
|
1289
1288
|
}
|
|
1290
|
-
.
|
|
1289
|
+
.bds017-search {
|
|
1291
1290
|
flex: 1;
|
|
1292
1291
|
border: none;
|
|
1293
1292
|
outline: none;
|
|
@@ -1297,29 +1296,29 @@
|
|
|
1297
1296
|
background: transparent;
|
|
1298
1297
|
min-width: 0;
|
|
1299
1298
|
}
|
|
1300
|
-
.
|
|
1299
|
+
.bds017-search::placeholder {
|
|
1301
1300
|
color: var(--color_on-bg--muted);
|
|
1302
1301
|
}
|
|
1303
|
-
.
|
|
1302
|
+
.bds017-escHint {
|
|
1304
1303
|
font-size: var(--font_size--body--s);
|
|
1305
1304
|
color: var(--color_on-bg--muted);
|
|
1306
|
-
border: 1px solid
|
|
1305
|
+
border: 1px solid currentcolor;
|
|
1307
1306
|
border-radius: var(--border_radius--xs);
|
|
1308
1307
|
padding: 0.1em 0.4em;
|
|
1309
1308
|
flex-shrink: 0;
|
|
1310
1309
|
}
|
|
1311
|
-
.
|
|
1310
|
+
.bds017-list {
|
|
1312
1311
|
overflow-y: auto;
|
|
1313
1312
|
list-style: none;
|
|
1314
1313
|
margin: 0;
|
|
1315
1314
|
padding: var(--space_xs) 0;
|
|
1316
1315
|
}
|
|
1317
|
-
.
|
|
1316
|
+
.bds017-groupList {
|
|
1318
1317
|
list-style: none;
|
|
1319
1318
|
margin: 0;
|
|
1320
1319
|
padding: 0;
|
|
1321
1320
|
}
|
|
1322
|
-
.
|
|
1321
|
+
.bds017-group {
|
|
1323
1322
|
padding: var(--space_xs) var(--space_m);
|
|
1324
1323
|
font-size: var(--font_size--body--s);
|
|
1325
1324
|
font-weight: var(--font_weight--semibold);
|
|
@@ -1327,7 +1326,7 @@
|
|
|
1327
1326
|
text-transform: uppercase;
|
|
1328
1327
|
letter-spacing: 0.05em;
|
|
1329
1328
|
}
|
|
1330
|
-
.
|
|
1329
|
+
.bds017-item {
|
|
1331
1330
|
display: flex;
|
|
1332
1331
|
align-items: center;
|
|
1333
1332
|
gap: var(--space_s);
|
|
@@ -1335,26 +1334,26 @@
|
|
|
1335
1334
|
cursor: pointer;
|
|
1336
1335
|
transition: background-color var(--animation_transition-duration) var(--animation_easing);
|
|
1337
1336
|
}
|
|
1338
|
-
.
|
|
1337
|
+
.bds017-itemActive {
|
|
1339
1338
|
background-color: var(--color_bg--subtle);
|
|
1340
1339
|
}
|
|
1341
|
-
.
|
|
1340
|
+
.bds017-itemLabel {
|
|
1342
1341
|
flex: 1;
|
|
1343
1342
|
font-size: var(--font_size--body);
|
|
1344
1343
|
color: var(--color_on-bg);
|
|
1345
1344
|
}
|
|
1346
|
-
.
|
|
1345
|
+
.bds017-itemDesc {
|
|
1347
1346
|
font-size: var(--font_size--body--s);
|
|
1348
1347
|
color: var(--color_on-bg--muted);
|
|
1349
1348
|
}
|
|
1350
|
-
.
|
|
1349
|
+
.bds017-shortcut {
|
|
1351
1350
|
font-size: var(--font_size--body--s);
|
|
1352
1351
|
color: var(--color_on-bg--muted);
|
|
1353
|
-
border: 1px solid
|
|
1352
|
+
border: 1px solid currentcolor;
|
|
1354
1353
|
border-radius: var(--border_radius--xs);
|
|
1355
1354
|
padding: 0.1em 0.4em;
|
|
1356
1355
|
}
|
|
1357
|
-
.
|
|
1356
|
+
.bds017-empty {
|
|
1358
1357
|
padding: var(--space_l) var(--space_m);
|
|
1359
1358
|
text-align: center;
|
|
1360
1359
|
color: var(--color_on-bg--muted);
|
|
@@ -1364,24 +1363,31 @@
|
|
|
1364
1363
|
|
|
1365
1364
|
/* src/components/interaction/Dialog/Dialog.module.css */
|
|
1366
1365
|
@layer component {
|
|
1367
|
-
.
|
|
1368
|
-
display: grid;
|
|
1369
|
-
gap: var(--grid_gap);
|
|
1366
|
+
.bds017-dialog {
|
|
1370
1367
|
font-size: var(--font_size--body--s);
|
|
1371
1368
|
border: 2px solid currentcolor;
|
|
1372
|
-
background-color: var(--color_grey--subtle);
|
|
1373
|
-
color: var(--color_on-grey--subtle);
|
|
1369
|
+
background-color: var(--dialog_color ,var(--color_grey--subtle));
|
|
1370
|
+
color: var(--dialog_on-color, var(--color_on-grey--subtle));
|
|
1374
1371
|
border-radius: var(--border_radius--m);
|
|
1375
1372
|
padding: var(--space_l);
|
|
1376
|
-
overflow: visible;
|
|
1377
1373
|
max-width: 90svw;
|
|
1374
|
+
max-height: 90svh;
|
|
1375
|
+
display: flex;
|
|
1376
|
+
flex-direction: column;
|
|
1378
1377
|
}
|
|
1379
|
-
.
|
|
1378
|
+
.bds017-dialogContent {
|
|
1379
|
+
display: grid;
|
|
1380
|
+
gap: var(--grid_gap);
|
|
1381
|
+
overflow-y: auto;
|
|
1382
|
+
min-height: 0;
|
|
1383
|
+
flex: 1;
|
|
1384
|
+
}
|
|
1385
|
+
.bds017-closeForm {
|
|
1380
1386
|
position: absolute;
|
|
1381
1387
|
inset-block-start: -1em;
|
|
1382
1388
|
inset-inline-end: -1em;
|
|
1383
1389
|
}
|
|
1384
|
-
.
|
|
1390
|
+
.bds017-closeButton {
|
|
1385
1391
|
all: unset;
|
|
1386
1392
|
width: 2em;
|
|
1387
1393
|
height: 2em;
|
|
@@ -1390,11 +1396,11 @@
|
|
|
1390
1396
|
justify-content: center;
|
|
1391
1397
|
border-radius: 50%;
|
|
1392
1398
|
background-color: var(--color_bg);
|
|
1393
|
-
color:
|
|
1399
|
+
color: currentcolor;
|
|
1394
1400
|
border: 2px solid currentcolor;
|
|
1395
1401
|
cursor: pointer;
|
|
1396
1402
|
}
|
|
1397
|
-
.
|
|
1403
|
+
.bds017-closeButton svg {
|
|
1398
1404
|
width: 1.25em;
|
|
1399
1405
|
height: 1.25em;
|
|
1400
1406
|
}
|
|
@@ -1402,7 +1408,7 @@
|
|
|
1402
1408
|
|
|
1403
1409
|
/* src/components/interaction/Drawer/Drawer.module.css */
|
|
1404
1410
|
@layer component {
|
|
1405
|
-
.
|
|
1411
|
+
.bds017-drawer {
|
|
1406
1412
|
position: fixed;
|
|
1407
1413
|
inset: 0;
|
|
1408
1414
|
margin: 0;
|
|
@@ -1415,43 +1421,43 @@
|
|
|
1415
1421
|
background: transparent;
|
|
1416
1422
|
overflow: hidden;
|
|
1417
1423
|
}
|
|
1418
|
-
.
|
|
1424
|
+
.bds017-drawer::backdrop {
|
|
1419
1425
|
background: rgb(0 0 0 / 50%);
|
|
1420
1426
|
}
|
|
1421
|
-
.
|
|
1427
|
+
.bds017-panel {
|
|
1422
1428
|
position: absolute;
|
|
1423
1429
|
inset-block: 0;
|
|
1424
1430
|
display: flex;
|
|
1425
1431
|
flex-direction: column;
|
|
1426
1432
|
width: min(28rem, 90vw);
|
|
1427
1433
|
height: 100%;
|
|
1428
|
-
background-color: var(--color_bg);
|
|
1429
|
-
color: var(--color_on-bg);
|
|
1434
|
+
background-color: var(--drawer_color, var(--color_bg));
|
|
1435
|
+
color: var(--drawer_on-color, var(--color_on-bg));
|
|
1430
1436
|
box-shadow: var(--shadow_xl);
|
|
1431
1437
|
overflow: hidden;
|
|
1432
1438
|
transition: transform var(--animation_transition-duration) var(--animation_easing);
|
|
1433
1439
|
}
|
|
1434
|
-
.
|
|
1440
|
+
.bds017---side_right .bds017-panel {
|
|
1435
1441
|
inset-inline-end: 0;
|
|
1436
1442
|
}
|
|
1437
|
-
.
|
|
1443
|
+
.bds017---side_left .bds017-panel {
|
|
1438
1444
|
inset-inline-start: 0;
|
|
1439
1445
|
}
|
|
1440
|
-
.
|
|
1446
|
+
.bds017-header {
|
|
1441
1447
|
display: flex;
|
|
1442
1448
|
align-items: center;
|
|
1443
1449
|
justify-content: space-between;
|
|
1444
1450
|
padding: var(--space_m) var(--space_l);
|
|
1445
|
-
border-block-end: 1px solid
|
|
1451
|
+
border-block-end: 1px solid currentcolor;
|
|
1446
1452
|
flex-shrink: 0;
|
|
1447
1453
|
}
|
|
1448
|
-
.
|
|
1454
|
+
.bds017-title {
|
|
1449
1455
|
margin: 0;
|
|
1450
1456
|
font-size: var(--font_size--heading--s);
|
|
1451
1457
|
font-weight: var(--font_weight--semibold);
|
|
1452
1458
|
line-height: var(--font_line-height--heading);
|
|
1453
1459
|
}
|
|
1454
|
-
.
|
|
1460
|
+
.bds017-closeButton {
|
|
1455
1461
|
all: unset;
|
|
1456
1462
|
display: flex;
|
|
1457
1463
|
align-items: center;
|
|
@@ -1460,29 +1466,28 @@
|
|
|
1460
1466
|
height: 2rem;
|
|
1461
1467
|
border-radius: 50%;
|
|
1462
1468
|
cursor: pointer;
|
|
1463
|
-
color: var(--color_on-bg);
|
|
1464
1469
|
transition: var(--animation_transition);
|
|
1465
1470
|
}
|
|
1466
|
-
.
|
|
1471
|
+
.bds017-closeButton svg {
|
|
1467
1472
|
width: 1.25rem;
|
|
1468
1473
|
height: 1.25rem;
|
|
1469
1474
|
}
|
|
1470
|
-
.
|
|
1475
|
+
.bds017-closeButton:focus-visible {
|
|
1471
1476
|
outline: var(--outline_default);
|
|
1472
1477
|
outline-offset: var(--outline_offset);
|
|
1473
1478
|
}
|
|
1474
1479
|
@media (hover: hover) and (pointer: fine) {
|
|
1475
|
-
.
|
|
1480
|
+
.bds017-closeButton:hover {
|
|
1476
1481
|
background-color: var(--color_bg--subtle);
|
|
1477
1482
|
}
|
|
1478
1483
|
}
|
|
1479
|
-
.
|
|
1484
|
+
.bds017-body {
|
|
1480
1485
|
flex: 1;
|
|
1481
1486
|
overflow-y: auto;
|
|
1482
1487
|
padding: var(--space_l);
|
|
1483
1488
|
}
|
|
1484
1489
|
@media (prefers-reduced-motion: reduce) {
|
|
1485
|
-
.
|
|
1490
|
+
.bds017-panel {
|
|
1486
1491
|
transition: none;
|
|
1487
1492
|
}
|
|
1488
1493
|
}
|
|
@@ -1490,35 +1495,37 @@
|
|
|
1490
1495
|
|
|
1491
1496
|
/* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
|
|
1492
1497
|
@layer component {
|
|
1493
|
-
.
|
|
1498
|
+
.bds017-wrapper {
|
|
1494
1499
|
position: relative;
|
|
1495
1500
|
display: inline-flex;
|
|
1496
1501
|
}
|
|
1497
|
-
.
|
|
1502
|
+
.bds017-menu {
|
|
1498
1503
|
position: absolute;
|
|
1499
1504
|
top: calc(100% + var(--space_xxs));
|
|
1500
1505
|
z-index: var(--z-index_dropdown);
|
|
1501
1506
|
min-width: 10rem;
|
|
1502
1507
|
padding: var(--space_xxs) 0;
|
|
1503
1508
|
border-radius: var(--border_radius--s);
|
|
1504
|
-
border: 1px solid
|
|
1505
|
-
background-color: var(--color_bg);
|
|
1509
|
+
border: 1px solid currentcolor;
|
|
1510
|
+
background-color: var(--dropdown_color, var(--color_bg));
|
|
1511
|
+
color: var(--dropdown_on-color, var(--color_on-bg));
|
|
1506
1512
|
box-shadow: var(--shadow_m);
|
|
1507
1513
|
list-style: none;
|
|
1508
1514
|
margin: 0;
|
|
1509
1515
|
}
|
|
1510
|
-
.
|
|
1516
|
+
.bds017---placement_bottom-start {
|
|
1511
1517
|
left: 0;
|
|
1512
1518
|
}
|
|
1513
|
-
.
|
|
1519
|
+
.bds017---placement_bottom-end {
|
|
1514
1520
|
right: 0;
|
|
1515
1521
|
}
|
|
1516
|
-
.
|
|
1522
|
+
.bds017-separator {
|
|
1517
1523
|
border: none;
|
|
1518
|
-
border-top: 1px solid
|
|
1524
|
+
border-top: 1px solid currentcolor;
|
|
1519
1525
|
margin: var(--space_xxs) 0;
|
|
1526
|
+
opacity: 0.15;
|
|
1520
1527
|
}
|
|
1521
|
-
.
|
|
1528
|
+
.bds017-item {
|
|
1522
1529
|
all: unset;
|
|
1523
1530
|
display: flex;
|
|
1524
1531
|
align-items: center;
|
|
@@ -1527,27 +1534,27 @@
|
|
|
1527
1534
|
padding: var(--space_xs) var(--space_m);
|
|
1528
1535
|
font-family: var(--font_family--body);
|
|
1529
1536
|
font-size: var(--font_size--body);
|
|
1530
|
-
color:
|
|
1537
|
+
color: currentcolor;
|
|
1531
1538
|
cursor: pointer;
|
|
1532
1539
|
box-sizing: border-box;
|
|
1533
1540
|
transition: var(--animation_transition);
|
|
1534
1541
|
}
|
|
1535
|
-
.
|
|
1542
|
+
.bds017-item:disabled {
|
|
1536
1543
|
opacity: 0.4;
|
|
1537
1544
|
cursor: not-allowed;
|
|
1538
1545
|
}
|
|
1539
|
-
.
|
|
1546
|
+
.bds017-item:focus-visible {
|
|
1540
1547
|
outline: var(--outline_default);
|
|
1541
1548
|
outline-offset: calc(var(--outline_offset) * -1);
|
|
1542
1549
|
border-radius: var(--border_radius--xs);
|
|
1543
1550
|
}
|
|
1544
1551
|
@media (hover: hover) and (pointer: fine) {
|
|
1545
|
-
.
|
|
1552
|
+
.bds017-item:not(:disabled):hover {
|
|
1546
1553
|
background-color: var(--color_bg--subtle);
|
|
1547
1554
|
color: var(--color_interactive);
|
|
1548
1555
|
}
|
|
1549
1556
|
}
|
|
1550
|
-
.
|
|
1557
|
+
.bds017-icon {
|
|
1551
1558
|
display: flex;
|
|
1552
1559
|
align-items: center;
|
|
1553
1560
|
flex-shrink: 0;
|
|
@@ -1556,35 +1563,35 @@
|
|
|
1556
1563
|
|
|
1557
1564
|
/* src/components/interaction/Popover/Popover.module.css */
|
|
1558
1565
|
@layer component {
|
|
1559
|
-
.
|
|
1566
|
+
.bds017-wrapper {
|
|
1560
1567
|
position: relative;
|
|
1561
1568
|
display: inline-flex;
|
|
1562
1569
|
}
|
|
1563
|
-
.
|
|
1570
|
+
.bds017-panel {
|
|
1564
1571
|
position: absolute;
|
|
1565
1572
|
z-index: var(--z-index_popover);
|
|
1566
1573
|
min-width: 12rem;
|
|
1567
1574
|
padding: var(--space_m);
|
|
1568
1575
|
border-radius: var(--border_radius--s);
|
|
1569
|
-
border: 1px solid
|
|
1570
|
-
background-color: var(--color_bg);
|
|
1576
|
+
border: 1px solid currentcolor;
|
|
1577
|
+
background-color: var(--popover_color, var(--color_bg));
|
|
1571
1578
|
box-shadow: var(--shadow_m);
|
|
1572
|
-
color: var(--color_on-bg);
|
|
1579
|
+
color: var(--popover_on-color, var(--color_on-bg));
|
|
1573
1580
|
font-size: var(--font_size--body);
|
|
1574
1581
|
}
|
|
1575
|
-
.
|
|
1582
|
+
.bds017---placement_bottom {
|
|
1576
1583
|
top: calc(100% + var(--space_xs));
|
|
1577
1584
|
left: 0;
|
|
1578
1585
|
}
|
|
1579
|
-
.
|
|
1586
|
+
.bds017---placement_top {
|
|
1580
1587
|
bottom: calc(100% + var(--space_xs));
|
|
1581
1588
|
left: 0;
|
|
1582
1589
|
}
|
|
1583
|
-
.
|
|
1590
|
+
.bds017---placement_right {
|
|
1584
1591
|
left: calc(100% + var(--space_xs));
|
|
1585
1592
|
top: 0;
|
|
1586
1593
|
}
|
|
1587
|
-
.
|
|
1594
|
+
.bds017---placement_left {
|
|
1588
1595
|
right: calc(100% + var(--space_xs));
|
|
1589
1596
|
top: 0;
|
|
1590
1597
|
}
|
|
@@ -1592,23 +1599,23 @@
|
|
|
1592
1599
|
|
|
1593
1600
|
/* src/components/interaction/Rating/Rating.module.css */
|
|
1594
1601
|
@layer component {
|
|
1595
|
-
.
|
|
1602
|
+
.bds017-rating {
|
|
1596
1603
|
display: inline-flex;
|
|
1597
1604
|
gap: var(--space_xxxs);
|
|
1598
1605
|
color: var(--color_bg);
|
|
1599
1606
|
}
|
|
1600
|
-
.
|
|
1607
|
+
.bds017-star {
|
|
1601
1608
|
width: 1.5em;
|
|
1602
1609
|
height: 1.5em;
|
|
1603
1610
|
}
|
|
1604
|
-
.
|
|
1611
|
+
.bds017---filled {
|
|
1605
1612
|
color: var(--color_warning);
|
|
1606
1613
|
}
|
|
1607
1614
|
}
|
|
1608
1615
|
|
|
1609
1616
|
/* src/components/interaction/Toast/Toast.module.css */
|
|
1610
1617
|
@layer component {
|
|
1611
|
-
.
|
|
1618
|
+
.bds017-toastContainer {
|
|
1612
1619
|
position: fixed;
|
|
1613
1620
|
bottom: var(--space_xl);
|
|
1614
1621
|
right: var(--space_xl);
|
|
@@ -1617,10 +1624,11 @@
|
|
|
1617
1624
|
gap: var(--space_m);
|
|
1618
1625
|
z-index: var(--z-index_toast);
|
|
1619
1626
|
}
|
|
1620
|
-
.
|
|
1627
|
+
.bds017-toast {
|
|
1621
1628
|
padding: var(--space_m) var(--space_l);
|
|
1622
|
-
background-color: var(--color_bg);
|
|
1623
|
-
color: var(--color_on-bg);
|
|
1629
|
+
background-color: var(--toast_color, var(--color_bg));
|
|
1630
|
+
color: var(--toast_on-color, var(--color_on-bg));
|
|
1631
|
+
border: 1px solid currentcolor;
|
|
1624
1632
|
border-radius: var(--border_radius--s);
|
|
1625
1633
|
box-shadow: var(--shadow_s);
|
|
1626
1634
|
display: flex;
|
|
@@ -1629,19 +1637,10 @@
|
|
|
1629
1637
|
min-width: 300px;
|
|
1630
1638
|
animation: slideIn var(--animation_duration--fast) var(--animation_easing);
|
|
1631
1639
|
}
|
|
1632
|
-
.
|
|
1633
|
-
border-left: 4px solid var(--color_success);
|
|
1634
|
-
}
|
|
1635
|
-
.bds015---variant_error {
|
|
1636
|
-
border-left: 4px solid var(--color_error);
|
|
1637
|
-
}
|
|
1638
|
-
.bds015---variant_info {
|
|
1639
|
-
border-left: 4px solid var(--color_interactive);
|
|
1640
|
-
}
|
|
1641
|
-
.bds015-message {
|
|
1640
|
+
.bds017-message {
|
|
1642
1641
|
flex: 1;
|
|
1643
1642
|
}
|
|
1644
|
-
.
|
|
1643
|
+
.bds017-closeButton {
|
|
1645
1644
|
display: flex;
|
|
1646
1645
|
align-items: center;
|
|
1647
1646
|
justify-content: center;
|
|
@@ -1655,10 +1654,10 @@
|
|
|
1655
1654
|
color: inherit;
|
|
1656
1655
|
opacity: 0.6;
|
|
1657
1656
|
}
|
|
1658
|
-
.
|
|
1657
|
+
.bds017-closeButton:hover {
|
|
1659
1658
|
opacity: 1;
|
|
1660
1659
|
}
|
|
1661
|
-
.
|
|
1660
|
+
.bds017-closeButton svg {
|
|
1662
1661
|
width: 1rem;
|
|
1663
1662
|
height: 1rem;
|
|
1664
1663
|
}
|
|
@@ -1676,18 +1675,17 @@
|
|
|
1676
1675
|
|
|
1677
1676
|
/* src/components/interaction/form/Checkbox/Checkbox.module.css */
|
|
1678
1677
|
@layer component {
|
|
1679
|
-
.
|
|
1678
|
+
.bds017-checkboxGroup {
|
|
1680
1679
|
--inputSize: calc(var(--space_s) * 2);
|
|
1681
1680
|
display: flex;
|
|
1682
1681
|
flex-direction: column;
|
|
1683
|
-
margin-block-end: var(--space_m);
|
|
1684
1682
|
}
|
|
1685
|
-
.
|
|
1683
|
+
.bds017-inputWrapper {
|
|
1686
1684
|
display: flex;
|
|
1687
1685
|
align-items: stretch;
|
|
1688
1686
|
gap: var(--space_xs);
|
|
1689
1687
|
}
|
|
1690
|
-
.
|
|
1688
|
+
.bds017-checkbox {
|
|
1691
1689
|
margin-block-start: 0.25em;
|
|
1692
1690
|
width: var(--inputSize);
|
|
1693
1691
|
height: var(--inputSize);
|
|
@@ -1699,12 +1697,12 @@
|
|
|
1699
1697
|
position: relative;
|
|
1700
1698
|
transition: background-color 0.3s ease, border-color 0.3s ease;
|
|
1701
1699
|
}
|
|
1702
|
-
.
|
|
1700
|
+
.bds017-checkbox:checked {
|
|
1703
1701
|
background-color: var(--color_green);
|
|
1704
1702
|
border-color: var(--color_green);
|
|
1705
1703
|
box-shadow: 0 0 0 2px var(--color_green);
|
|
1706
1704
|
}
|
|
1707
|
-
.
|
|
1705
|
+
.bds017-checkbox:checked::after {
|
|
1708
1706
|
content: "";
|
|
1709
1707
|
position: absolute;
|
|
1710
1708
|
left: 0.6em;
|
|
@@ -1715,15 +1713,15 @@
|
|
|
1715
1713
|
border-width: 0 2px 2px 0;
|
|
1716
1714
|
transform: rotate(45deg);
|
|
1717
1715
|
}
|
|
1718
|
-
.
|
|
1716
|
+
.bds017-checkbox:focus {
|
|
1719
1717
|
outline: none;
|
|
1720
1718
|
border-color: var(--color_interactive);
|
|
1721
1719
|
box-shadow: 0 0 0 2px var(--color_green);
|
|
1722
1720
|
}
|
|
1723
|
-
.
|
|
1721
|
+
.bds017-checkboxError {
|
|
1724
1722
|
border-color: var(--color_error);
|
|
1725
1723
|
}
|
|
1726
|
-
.
|
|
1724
|
+
.bds017-checkboxError:focus {
|
|
1727
1725
|
border-color: var(--color_error);
|
|
1728
1726
|
box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
1729
1727
|
}
|
|
@@ -1731,19 +1729,19 @@
|
|
|
1731
1729
|
|
|
1732
1730
|
/* src/components/interaction/form/atoms/Message.module.css */
|
|
1733
1731
|
@layer component {
|
|
1734
|
-
.
|
|
1735
|
-
.
|
|
1732
|
+
.bds017-error,
|
|
1733
|
+
.bds017-hint {
|
|
1736
1734
|
font-size: var(--font_size--body--s);
|
|
1737
1735
|
margin-inline-start: var(--labelPosition);
|
|
1738
1736
|
}
|
|
1739
|
-
.
|
|
1737
|
+
.bds017-error {
|
|
1740
1738
|
color: var(--color_error);
|
|
1741
1739
|
}
|
|
1742
1740
|
}
|
|
1743
1741
|
|
|
1744
1742
|
/* src/components/interaction/form/atoms/Label.module.css */
|
|
1745
1743
|
@layer component {
|
|
1746
|
-
.
|
|
1744
|
+
.bds017-label {
|
|
1747
1745
|
display: flex;
|
|
1748
1746
|
align-items: center;
|
|
1749
1747
|
font-family: var(--font_family--body);
|
|
@@ -1755,7 +1753,7 @@
|
|
|
1755
1753
|
|
|
1756
1754
|
/* src/components/interaction/form/atoms/InputContainer.module.css */
|
|
1757
1755
|
@layer component {
|
|
1758
|
-
.
|
|
1756
|
+
.bds017-container {
|
|
1759
1757
|
--labelPosition: calc(var(--inputSize) + var(--space_m));
|
|
1760
1758
|
display: flex;
|
|
1761
1759
|
flex-direction: column;
|
|
@@ -1765,16 +1763,16 @@
|
|
|
1765
1763
|
|
|
1766
1764
|
/* src/components/interaction/form/Combobox/Combobox.module.css */
|
|
1767
1765
|
@layer component {
|
|
1768
|
-
.
|
|
1766
|
+
.bds017-formGroup {
|
|
1769
1767
|
display: flex;
|
|
1770
1768
|
flex-direction: column;
|
|
1771
1769
|
}
|
|
1772
|
-
.
|
|
1770
|
+
.bds017-inputWrapper {
|
|
1773
1771
|
position: relative;
|
|
1774
1772
|
display: flex;
|
|
1775
1773
|
align-items: center;
|
|
1776
1774
|
}
|
|
1777
|
-
.
|
|
1775
|
+
.bds017-input {
|
|
1778
1776
|
--combobox_border-color: var(--color_on-bg);
|
|
1779
1777
|
--combobox_focus-ring: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
|
|
1780
1778
|
appearance: none;
|
|
@@ -1789,22 +1787,22 @@
|
|
|
1789
1787
|
color: var(--color_on-bg);
|
|
1790
1788
|
transition: var(--animation_transition);
|
|
1791
1789
|
}
|
|
1792
|
-
.
|
|
1790
|
+
.bds017-input:focus {
|
|
1793
1791
|
--combobox_border-color: var(--color_interactive);
|
|
1794
1792
|
outline: none;
|
|
1795
1793
|
box-shadow: var(--combobox_focus-ring);
|
|
1796
1794
|
}
|
|
1797
|
-
.
|
|
1795
|
+
.bds017-input:disabled {
|
|
1798
1796
|
opacity: 0.5;
|
|
1799
1797
|
cursor: not-allowed;
|
|
1800
1798
|
}
|
|
1801
|
-
.
|
|
1799
|
+
.bds017-inputError {
|
|
1802
1800
|
--combobox_border-color: var(--color_error);
|
|
1803
1801
|
}
|
|
1804
|
-
.
|
|
1802
|
+
.bds017-inputError:focus {
|
|
1805
1803
|
--combobox_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
1806
1804
|
}
|
|
1807
|
-
.
|
|
1805
|
+
.bds017-chevron {
|
|
1808
1806
|
position: absolute;
|
|
1809
1807
|
inset-inline-end: var(--space_s);
|
|
1810
1808
|
display: flex;
|
|
@@ -1812,11 +1810,11 @@
|
|
|
1812
1810
|
pointer-events: none;
|
|
1813
1811
|
color: var(--color_on-bg);
|
|
1814
1812
|
}
|
|
1815
|
-
.
|
|
1813
|
+
.bds017-chevron svg {
|
|
1816
1814
|
width: 1rem;
|
|
1817
1815
|
height: 1rem;
|
|
1818
1816
|
}
|
|
1819
|
-
.
|
|
1817
|
+
.bds017-listbox {
|
|
1820
1818
|
position: absolute;
|
|
1821
1819
|
top: calc(100% + var(--space_xxs));
|
|
1822
1820
|
left: 0;
|
|
@@ -1828,11 +1826,12 @@
|
|
|
1828
1826
|
margin: 0;
|
|
1829
1827
|
padding: var(--space_xxs) 0;
|
|
1830
1828
|
border-radius: var(--border_radius--xs);
|
|
1831
|
-
border: 1px solid
|
|
1832
|
-
background-color: var(--color_bg);
|
|
1829
|
+
border: 1px solid currentcolor;
|
|
1830
|
+
background-color: var(--combobox_color, var(--color_bg));
|
|
1831
|
+
color: var(--combobox_on-color, var(--color_on-bg));
|
|
1833
1832
|
box-shadow: var(--shadow_m);
|
|
1834
1833
|
}
|
|
1835
|
-
.
|
|
1834
|
+
.bds017-option {
|
|
1836
1835
|
display: flex;
|
|
1837
1836
|
align-items: center;
|
|
1838
1837
|
padding: var(--space_xs) var(--space_m);
|
|
@@ -1841,14 +1840,14 @@
|
|
|
1841
1840
|
cursor: pointer;
|
|
1842
1841
|
transition: var(--animation_transition);
|
|
1843
1842
|
}
|
|
1844
|
-
.
|
|
1843
|
+
.bds017-option.bds017---highlighted {
|
|
1845
1844
|
background-color: var(--color_bg--subtle);
|
|
1846
1845
|
color: var(--color_interactive);
|
|
1847
1846
|
}
|
|
1848
|
-
.
|
|
1847
|
+
.bds017-option.bds017---selected {
|
|
1849
1848
|
font-weight: var(--font_weight--semibold);
|
|
1850
1849
|
}
|
|
1851
|
-
.
|
|
1850
|
+
.bds017-option.bds017---disabled {
|
|
1852
1851
|
opacity: 0.4;
|
|
1853
1852
|
cursor: not-allowed;
|
|
1854
1853
|
}
|
|
@@ -1856,11 +1855,11 @@
|
|
|
1856
1855
|
|
|
1857
1856
|
/* src/components/interaction/form/FileInput/FileInput.module.css */
|
|
1858
1857
|
@layer component {
|
|
1859
|
-
.
|
|
1858
|
+
.bds017-formGroup {
|
|
1860
1859
|
display: flex;
|
|
1861
1860
|
flex-direction: column;
|
|
1862
1861
|
}
|
|
1863
|
-
.
|
|
1862
|
+
.bds017-dropZone {
|
|
1864
1863
|
display: flex;
|
|
1865
1864
|
flex-direction: column;
|
|
1866
1865
|
align-items: center;
|
|
@@ -1874,40 +1873,40 @@
|
|
|
1874
1873
|
transition: var(--animation_transition);
|
|
1875
1874
|
color: var(--color_on-bg--muted);
|
|
1876
1875
|
}
|
|
1877
|
-
.
|
|
1876
|
+
.bds017-dropZone:focus-within {
|
|
1878
1877
|
outline: var(--outline_default);
|
|
1879
1878
|
outline-offset: var(--outline_offset);
|
|
1880
1879
|
border-color: var(--color_interactive);
|
|
1881
1880
|
}
|
|
1882
|
-
.
|
|
1881
|
+
.bds017-isDragging {
|
|
1883
1882
|
border-color: var(--color_interactive);
|
|
1884
1883
|
background-color: rgb(from var(--color_interactive) r g b / 8%);
|
|
1885
1884
|
}
|
|
1886
|
-
.
|
|
1885
|
+
.bds017-hasError {
|
|
1887
1886
|
border-color: var(--color_error);
|
|
1888
1887
|
}
|
|
1889
|
-
.
|
|
1888
|
+
.bds017-isDisabled {
|
|
1890
1889
|
opacity: 0.5;
|
|
1891
1890
|
cursor: not-allowed;
|
|
1892
1891
|
}
|
|
1893
|
-
.
|
|
1892
|
+
.bds017-icon {
|
|
1894
1893
|
width: 2rem;
|
|
1895
1894
|
height: 2rem;
|
|
1896
1895
|
flex-shrink: 0;
|
|
1897
1896
|
}
|
|
1898
|
-
.
|
|
1897
|
+
.bds017-prompt {
|
|
1899
1898
|
font-size: var(--font_size--body);
|
|
1900
1899
|
color: var(--color_on-bg--muted);
|
|
1901
1900
|
}
|
|
1902
|
-
.
|
|
1901
|
+
.bds017-prompt strong {
|
|
1903
1902
|
color: var(--color_interactive);
|
|
1904
1903
|
font-weight: var(--font_weight--semibold);
|
|
1905
1904
|
}
|
|
1906
|
-
.
|
|
1905
|
+
.bds017-acceptHint {
|
|
1907
1906
|
font-size: var(--font_size--body--s);
|
|
1908
1907
|
color: var(--color_on-bg--muted);
|
|
1909
1908
|
}
|
|
1910
|
-
.
|
|
1909
|
+
.bds017-hiddenInput {
|
|
1911
1910
|
position: absolute;
|
|
1912
1911
|
width: 1px;
|
|
1913
1912
|
height: 1px;
|
|
@@ -1917,7 +1916,7 @@
|
|
|
1917
1916
|
border: 0;
|
|
1918
1917
|
}
|
|
1919
1918
|
@media (hover: hover) and (pointer: fine) {
|
|
1920
|
-
.
|
|
1919
|
+
.bds017-dropZone:not(.bds017-isDisabled):hover {
|
|
1921
1920
|
border-color: var(--color_interactive);
|
|
1922
1921
|
background-color: rgb(from var(--color_interactive) r g b / 4%);
|
|
1923
1922
|
}
|
|
@@ -1926,12 +1925,12 @@
|
|
|
1926
1925
|
|
|
1927
1926
|
/* src/components/interaction/form/FormInput/FormInput.module.css */
|
|
1928
1927
|
@layer component {
|
|
1929
|
-
.
|
|
1928
|
+
.bds017-formGroup {
|
|
1930
1929
|
--labelPosition: 0;
|
|
1931
1930
|
display: flex;
|
|
1932
1931
|
flex-direction: column;
|
|
1933
1932
|
}
|
|
1934
|
-
.
|
|
1933
|
+
.bds017-input {
|
|
1935
1934
|
--input_border-color: var(--color_on-bg);
|
|
1936
1935
|
--input_radius: var(--border_radius--xs);
|
|
1937
1936
|
--input_focus-ring: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
|
|
@@ -1942,26 +1941,26 @@
|
|
|
1942
1941
|
border-radius: var(--input_radius);
|
|
1943
1942
|
transition: var(--animation_transition);
|
|
1944
1943
|
}
|
|
1945
|
-
.
|
|
1944
|
+
.bds017-input:focus {
|
|
1946
1945
|
--input_border-color: var(--color_interactive);
|
|
1947
1946
|
outline: none;
|
|
1948
1947
|
box-shadow: var(--input_focus-ring);
|
|
1949
1948
|
}
|
|
1950
|
-
.
|
|
1949
|
+
.bds017-inputError {
|
|
1951
1950
|
--input_border-color: var(--color_error);
|
|
1952
1951
|
}
|
|
1953
|
-
.
|
|
1952
|
+
.bds017-inputError:focus {
|
|
1954
1953
|
--input_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
1955
1954
|
}
|
|
1956
1955
|
}
|
|
1957
1956
|
|
|
1958
1957
|
/* src/components/interaction/form/NumberInput/NumberInput.module.css */
|
|
1959
1958
|
@layer component {
|
|
1960
|
-
.
|
|
1959
|
+
.bds017-formGroup {
|
|
1961
1960
|
display: flex;
|
|
1962
1961
|
flex-direction: column;
|
|
1963
1962
|
}
|
|
1964
|
-
.
|
|
1963
|
+
.bds017-inputRow {
|
|
1965
1964
|
display: flex;
|
|
1966
1965
|
align-items: stretch;
|
|
1967
1966
|
border: 1px solid var(--color_on-bg);
|
|
@@ -1969,11 +1968,11 @@
|
|
|
1969
1968
|
overflow: hidden;
|
|
1970
1969
|
transition: var(--animation_transition);
|
|
1971
1970
|
}
|
|
1972
|
-
.
|
|
1971
|
+
.bds017-inputRow:focus-within {
|
|
1973
1972
|
border-color: var(--color_interactive);
|
|
1974
1973
|
box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
|
|
1975
1974
|
}
|
|
1976
|
-
.
|
|
1975
|
+
.bds017-input {
|
|
1977
1976
|
flex: 1;
|
|
1978
1977
|
border: none;
|
|
1979
1978
|
outline: none;
|
|
@@ -1986,18 +1985,18 @@
|
|
|
1986
1985
|
min-width: 0;
|
|
1987
1986
|
appearance: textfield;
|
|
1988
1987
|
}
|
|
1989
|
-
.
|
|
1990
|
-
.
|
|
1988
|
+
.bds017-input::-webkit-inner-spin-button,
|
|
1989
|
+
.bds017-input::-webkit-outer-spin-button {
|
|
1991
1990
|
appearance: none;
|
|
1992
1991
|
}
|
|
1993
|
-
.
|
|
1992
|
+
.bds017-inputError {
|
|
1994
1993
|
border-color: var(--color_error);
|
|
1995
1994
|
}
|
|
1996
|
-
.
|
|
1995
|
+
.bds017-inputError:focus-within {
|
|
1997
1996
|
border-color: var(--color_error);
|
|
1998
1997
|
box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
1999
1998
|
}
|
|
2000
|
-
.
|
|
1999
|
+
.bds017-stepper {
|
|
2001
2000
|
all: unset;
|
|
2002
2001
|
display: flex;
|
|
2003
2002
|
align-items: center;
|
|
@@ -2009,16 +2008,16 @@
|
|
|
2009
2008
|
transition: var(--animation_transition);
|
|
2010
2009
|
flex-shrink: 0;
|
|
2011
2010
|
}
|
|
2012
|
-
.
|
|
2011
|
+
.bds017-stepper svg {
|
|
2013
2012
|
width: 1rem;
|
|
2014
2013
|
height: 1rem;
|
|
2015
2014
|
}
|
|
2016
|
-
.
|
|
2015
|
+
.bds017-stepper:disabled {
|
|
2017
2016
|
opacity: 0.4;
|
|
2018
2017
|
cursor: not-allowed;
|
|
2019
2018
|
}
|
|
2020
2019
|
@media (hover: hover) and (pointer: fine) {
|
|
2021
|
-
.
|
|
2020
|
+
.bds017-stepper:not(:disabled):hover {
|
|
2022
2021
|
background-color: var(--color_bg--subtle);
|
|
2023
2022
|
opacity: 0.7;
|
|
2024
2023
|
}
|
|
@@ -2027,18 +2026,18 @@
|
|
|
2027
2026
|
|
|
2028
2027
|
/* src/components/interaction/form/Radio/Radio.module.css */
|
|
2029
2028
|
@layer component {
|
|
2030
|
-
.
|
|
2029
|
+
.bds017-radioGroup {
|
|
2031
2030
|
--inputSize: calc(var(--space_s) * 2);
|
|
2032
2031
|
--labelPosition: calc(var(--inputSize) + var(--space_m));
|
|
2033
2032
|
display: flex;
|
|
2034
2033
|
flex-direction: column;
|
|
2035
2034
|
}
|
|
2036
|
-
.
|
|
2035
|
+
.bds017-inputWrapper {
|
|
2037
2036
|
display: flex;
|
|
2038
2037
|
align-items: stretch;
|
|
2039
2038
|
gap: var(--space_xs);
|
|
2040
2039
|
}
|
|
2041
|
-
.
|
|
2040
|
+
.bds017-radio {
|
|
2042
2041
|
flex-shrink: 0;
|
|
2043
2042
|
margin-block-start: 0.25em;
|
|
2044
2043
|
width: var(--inputSize);
|
|
@@ -2051,12 +2050,12 @@
|
|
|
2051
2050
|
position: relative;
|
|
2052
2051
|
transition: background-color 0.3s ease, border-color 0.3s ease;
|
|
2053
2052
|
}
|
|
2054
|
-
.
|
|
2053
|
+
.bds017-radio:checked {
|
|
2055
2054
|
background-color: var(--color_green);
|
|
2056
2055
|
border-color: var(--color_green);
|
|
2057
2056
|
box-shadow: 0 0 0 2px var(--color_green);
|
|
2058
2057
|
}
|
|
2059
|
-
.
|
|
2058
|
+
.bds017-radio:checked::after {
|
|
2060
2059
|
content: "";
|
|
2061
2060
|
position: absolute;
|
|
2062
2061
|
left: 0.6em;
|
|
@@ -2067,15 +2066,15 @@
|
|
|
2067
2066
|
border-width: 0 2px 2px 0;
|
|
2068
2067
|
transform: rotate(45deg);
|
|
2069
2068
|
}
|
|
2070
|
-
.
|
|
2069
|
+
.bds017-radio:focus {
|
|
2071
2070
|
outline: none;
|
|
2072
2071
|
border-color: var(--color_interactive);
|
|
2073
2072
|
box-shadow: 0 0 0 2px var(--color_green);
|
|
2074
2073
|
}
|
|
2075
|
-
.
|
|
2074
|
+
.bds017-radioError {
|
|
2076
2075
|
border-color: var(--color_error);
|
|
2077
2076
|
}
|
|
2078
|
-
.
|
|
2077
|
+
.bds017-radioError:focus {
|
|
2079
2078
|
border-color: var(--color_error);
|
|
2080
2079
|
box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
2081
2080
|
}
|
|
@@ -2083,16 +2082,16 @@
|
|
|
2083
2082
|
|
|
2084
2083
|
/* src/components/interaction/form/Select/Select.module.css */
|
|
2085
2084
|
@layer component {
|
|
2086
|
-
.
|
|
2085
|
+
.bds017-formGroup {
|
|
2087
2086
|
display: flex;
|
|
2088
2087
|
flex-direction: column;
|
|
2089
2088
|
}
|
|
2090
|
-
.
|
|
2089
|
+
.bds017-selectWrapper {
|
|
2091
2090
|
position: relative;
|
|
2092
2091
|
display: flex;
|
|
2093
2092
|
align-items: center;
|
|
2094
2093
|
}
|
|
2095
|
-
.
|
|
2094
|
+
.bds017-select {
|
|
2096
2095
|
--select_border-color: var(--color_on-bg);
|
|
2097
2096
|
--select_focus-ring: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
|
|
2098
2097
|
appearance: none;
|
|
@@ -2108,22 +2107,22 @@
|
|
|
2108
2107
|
cursor: pointer;
|
|
2109
2108
|
transition: var(--animation_transition);
|
|
2110
2109
|
}
|
|
2111
|
-
.
|
|
2110
|
+
.bds017-select:focus {
|
|
2112
2111
|
--select_border-color: var(--color_interactive);
|
|
2113
2112
|
outline: none;
|
|
2114
2113
|
box-shadow: var(--select_focus-ring);
|
|
2115
2114
|
}
|
|
2116
|
-
.
|
|
2115
|
+
.bds017-select:disabled {
|
|
2117
2116
|
opacity: 0.5;
|
|
2118
2117
|
cursor: not-allowed;
|
|
2119
2118
|
}
|
|
2120
|
-
.
|
|
2119
|
+
.bds017-selectError {
|
|
2121
2120
|
--select_border-color: var(--color_error);
|
|
2122
2121
|
}
|
|
2123
|
-
.
|
|
2122
|
+
.bds017-selectError:focus {
|
|
2124
2123
|
--select_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
2125
2124
|
}
|
|
2126
|
-
.
|
|
2125
|
+
.bds017-chevron {
|
|
2127
2126
|
position: absolute;
|
|
2128
2127
|
inset-inline-end: var(--space_s);
|
|
2129
2128
|
display: flex;
|
|
@@ -2131,7 +2130,7 @@
|
|
|
2131
2130
|
pointer-events: none;
|
|
2132
2131
|
color: var(--color_on-bg);
|
|
2133
2132
|
}
|
|
2134
|
-
.
|
|
2133
|
+
.bds017-chevron svg {
|
|
2135
2134
|
width: 1rem;
|
|
2136
2135
|
height: 1rem;
|
|
2137
2136
|
}
|
|
@@ -2139,22 +2138,22 @@
|
|
|
2139
2138
|
|
|
2140
2139
|
/* src/components/interaction/form/Slider/Slider.module.css */
|
|
2141
2140
|
@layer component {
|
|
2142
|
-
.
|
|
2141
|
+
.bds017-formGroup {
|
|
2143
2142
|
display: flex;
|
|
2144
2143
|
flex-direction: column;
|
|
2145
2144
|
gap: var(--space_xxs);
|
|
2146
2145
|
}
|
|
2147
|
-
.
|
|
2146
|
+
.bds017-labelRow {
|
|
2148
2147
|
display: flex;
|
|
2149
2148
|
justify-content: space-between;
|
|
2150
2149
|
align-items: baseline;
|
|
2151
2150
|
}
|
|
2152
|
-
.
|
|
2151
|
+
.bds017-value {
|
|
2153
2152
|
font-size: var(--font_size--body--s);
|
|
2154
2153
|
font-variant-numeric: tabular-nums;
|
|
2155
2154
|
color: var(--color_on-bg--subtle);
|
|
2156
2155
|
}
|
|
2157
|
-
.
|
|
2156
|
+
.bds017-slider {
|
|
2158
2157
|
--slider_fill: 0%;
|
|
2159
2158
|
--slider_track-height: var(--space_xxs);
|
|
2160
2159
|
--slider_thumb-size: calc(var(--space_s) * 2);
|
|
@@ -2172,16 +2171,16 @@
|
|
|
2172
2171
|
cursor: pointer;
|
|
2173
2172
|
transition: var(--animation_transition);
|
|
2174
2173
|
}
|
|
2175
|
-
.
|
|
2174
|
+
.bds017-slider:focus-visible {
|
|
2176
2175
|
outline: var(--outline_default);
|
|
2177
2176
|
outline-offset: var(--outline_offset);
|
|
2178
2177
|
border-radius: 999px;
|
|
2179
2178
|
}
|
|
2180
|
-
.
|
|
2179
|
+
.bds017-slider:disabled {
|
|
2181
2180
|
opacity: 0.4;
|
|
2182
2181
|
cursor: not-allowed;
|
|
2183
2182
|
}
|
|
2184
|
-
.
|
|
2183
|
+
.bds017-slider::-webkit-slider-thumb {
|
|
2185
2184
|
appearance: none;
|
|
2186
2185
|
width: var(--slider_thumb-size);
|
|
2187
2186
|
height: var(--slider_thumb-size);
|
|
@@ -2191,7 +2190,7 @@
|
|
|
2191
2190
|
transition: var(--animation_transition);
|
|
2192
2191
|
cursor: pointer;
|
|
2193
2192
|
}
|
|
2194
|
-
.
|
|
2193
|
+
.bds017-slider::-moz-range-thumb {
|
|
2195
2194
|
width: var(--slider_thumb-size);
|
|
2196
2195
|
height: var(--slider_thumb-size);
|
|
2197
2196
|
border: none;
|
|
@@ -2200,7 +2199,7 @@
|
|
|
2200
2199
|
box-shadow: var(--shadow_s);
|
|
2201
2200
|
cursor: pointer;
|
|
2202
2201
|
}
|
|
2203
|
-
.
|
|
2202
|
+
.bds017-sliderError {
|
|
2204
2203
|
background:
|
|
2205
2204
|
linear-gradient(
|
|
2206
2205
|
to right,
|
|
@@ -2209,16 +2208,16 @@
|
|
|
2209
2208
|
var(--color_bg--subtle) var(--slider_fill),
|
|
2210
2209
|
var(--color_bg--subtle) 100%);
|
|
2211
2210
|
}
|
|
2212
|
-
.
|
|
2211
|
+
.bds017-sliderError::-webkit-slider-thumb {
|
|
2213
2212
|
background-color: var(--color_error);
|
|
2214
2213
|
}
|
|
2215
|
-
.
|
|
2214
|
+
.bds017-sliderError::-moz-range-thumb {
|
|
2216
2215
|
background-color: var(--color_error);
|
|
2217
2216
|
}
|
|
2218
2217
|
@media (prefers-reduced-motion: reduce) {
|
|
2219
|
-
.
|
|
2220
|
-
.
|
|
2221
|
-
.
|
|
2218
|
+
.bds017-slider,
|
|
2219
|
+
.bds017-slider::-webkit-slider-thumb,
|
|
2220
|
+
.bds017-slider::-moz-range-thumb {
|
|
2222
2221
|
transition: none;
|
|
2223
2222
|
}
|
|
2224
2223
|
}
|
|
@@ -2226,7 +2225,7 @@
|
|
|
2226
2225
|
|
|
2227
2226
|
/* src/components/interaction/form/Switch/Switch.module.css */
|
|
2228
2227
|
@layer component {
|
|
2229
|
-
.
|
|
2228
|
+
.bds017-switchGroup {
|
|
2230
2229
|
--switch_thumb-size: 1.25em;
|
|
2231
2230
|
--switch_track-pad: var(--space_xxxs);
|
|
2232
2231
|
--switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
|
|
@@ -2237,23 +2236,22 @@
|
|
|
2237
2236
|
--thumb_bg--active: var(--color_green--strong);
|
|
2238
2237
|
display: flex;
|
|
2239
2238
|
flex-direction: column;
|
|
2240
|
-
margin-block-end: var(--space_m);
|
|
2241
2239
|
}
|
|
2242
|
-
.
|
|
2240
|
+
.bds017-switchGroup.bds017---size_small {
|
|
2243
2241
|
--switch_thumb-size: 1em;
|
|
2244
2242
|
}
|
|
2245
|
-
.
|
|
2243
|
+
.bds017-switchGroup.bds017---size_medium {
|
|
2246
2244
|
--switch_thumb-size: 1.25em;
|
|
2247
2245
|
}
|
|
2248
|
-
.
|
|
2246
|
+
.bds017-switchGroup.bds017---size_large {
|
|
2249
2247
|
--switch_thumb-size: 1.5em;
|
|
2250
2248
|
}
|
|
2251
|
-
.
|
|
2249
|
+
.bds017-inputWrapper {
|
|
2252
2250
|
display: flex;
|
|
2253
2251
|
align-items: center;
|
|
2254
2252
|
gap: var(--space_xs);
|
|
2255
2253
|
}
|
|
2256
|
-
.
|
|
2254
|
+
.bds017-trackWrapper {
|
|
2257
2255
|
position: relative;
|
|
2258
2256
|
display: inline-flex;
|
|
2259
2257
|
align-items: center;
|
|
@@ -2261,7 +2259,7 @@
|
|
|
2261
2259
|
width: var(--switch_track-width);
|
|
2262
2260
|
height: var(--switch_track-height);
|
|
2263
2261
|
}
|
|
2264
|
-
.
|
|
2262
|
+
.bds017-switch {
|
|
2265
2263
|
position: absolute;
|
|
2266
2264
|
inset: 0;
|
|
2267
2265
|
appearance: none;
|
|
@@ -2272,10 +2270,10 @@
|
|
|
2272
2270
|
cursor: pointer;
|
|
2273
2271
|
z-index: 1;
|
|
2274
2272
|
}
|
|
2275
|
-
.
|
|
2273
|
+
.bds017-switch:disabled {
|
|
2276
2274
|
cursor: not-allowed;
|
|
2277
2275
|
}
|
|
2278
|
-
.
|
|
2276
|
+
.bds017-track {
|
|
2279
2277
|
display: inline-flex;
|
|
2280
2278
|
align-items: center;
|
|
2281
2279
|
width: var(--switch_track-width);
|
|
@@ -2288,7 +2286,7 @@
|
|
|
2288
2286
|
outline: 1px solid var(--thumb_bg);
|
|
2289
2287
|
outline-offset: var(--outline_offset);
|
|
2290
2288
|
}
|
|
2291
|
-
.
|
|
2289
|
+
.bds017-thumb {
|
|
2292
2290
|
display: block;
|
|
2293
2291
|
width: var(--switch_thumb-size);
|
|
2294
2292
|
height: var(--switch_thumb-size);
|
|
@@ -2298,28 +2296,28 @@
|
|
|
2298
2296
|
transition: var(--animation_transition);
|
|
2299
2297
|
transform: translateX(0);
|
|
2300
2298
|
}
|
|
2301
|
-
.
|
|
2299
|
+
.bds017-switch.bds017-switchError + .bds017-track {
|
|
2302
2300
|
outline: 1px solid var(--color_error);
|
|
2303
2301
|
}
|
|
2304
|
-
.
|
|
2302
|
+
.bds017-switch:checked + .bds017-track {
|
|
2305
2303
|
background-color: var(--track_active);
|
|
2306
2304
|
outline-color: var(--thumb_bg--active);
|
|
2307
2305
|
}
|
|
2308
|
-
.
|
|
2306
|
+
.bds017-switch:checked + .bds017-track .bds017-thumb {
|
|
2309
2307
|
background-color: var(--thumb_bg--active);
|
|
2310
2308
|
transform: translateX(var(--switch_thumb-size));
|
|
2311
2309
|
}
|
|
2312
|
-
.
|
|
2310
|
+
.bds017-switch:focus-visible + .bds017-track {
|
|
2313
2311
|
outline: var(--outline_default);
|
|
2314
2312
|
outline-offset: var(--outline_offset);
|
|
2315
2313
|
border-radius: 999px;
|
|
2316
2314
|
}
|
|
2317
|
-
.
|
|
2315
|
+
.bds017-switch:disabled + .bds017-track {
|
|
2318
2316
|
opacity: 0.4;
|
|
2319
2317
|
}
|
|
2320
2318
|
@media (prefers-reduced-motion: reduce) {
|
|
2321
|
-
.
|
|
2322
|
-
.
|
|
2319
|
+
.bds017-track,
|
|
2320
|
+
.bds017-thumb {
|
|
2323
2321
|
transition: none;
|
|
2324
2322
|
}
|
|
2325
2323
|
}
|
|
@@ -2327,11 +2325,11 @@
|
|
|
2327
2325
|
|
|
2328
2326
|
/* src/components/interaction/form/Textarea/Textarea.module.css */
|
|
2329
2327
|
@layer component {
|
|
2330
|
-
.
|
|
2328
|
+
.bds017-formGroup {
|
|
2331
2329
|
display: flex;
|
|
2332
2330
|
flex-direction: column;
|
|
2333
2331
|
}
|
|
2334
|
-
.
|
|
2332
|
+
.bds017-textarea {
|
|
2335
2333
|
--textarea_border-color: var(--color_on-bg);
|
|
2336
2334
|
--textarea_focus-ring: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
|
|
2337
2335
|
font-family: var(--font_family--body);
|
|
@@ -2346,69 +2344,69 @@
|
|
|
2346
2344
|
min-height: calc(var(--space_m) * 5);
|
|
2347
2345
|
transition: var(--animation_transition);
|
|
2348
2346
|
}
|
|
2349
|
-
.
|
|
2347
|
+
.bds017-textarea:focus {
|
|
2350
2348
|
--textarea_border-color: var(--color_interactive);
|
|
2351
2349
|
outline: none;
|
|
2352
2350
|
box-shadow: var(--textarea_focus-ring);
|
|
2353
2351
|
}
|
|
2354
|
-
.
|
|
2352
|
+
.bds017-textarea:disabled {
|
|
2355
2353
|
opacity: 0.5;
|
|
2356
2354
|
cursor: not-allowed;
|
|
2357
2355
|
resize: none;
|
|
2358
2356
|
}
|
|
2359
|
-
.
|
|
2357
|
+
.bds017-textareaError {
|
|
2360
2358
|
--textarea_border-color: var(--color_error);
|
|
2361
2359
|
}
|
|
2362
|
-
.
|
|
2360
|
+
.bds017-textareaError:focus {
|
|
2363
2361
|
--textarea_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
2364
2362
|
}
|
|
2365
2363
|
}
|
|
2366
2364
|
|
|
2367
2365
|
/* src/components/layout/ButtonGroup/ButtonGroup.module.css */
|
|
2368
2366
|
@layer component {
|
|
2369
|
-
.
|
|
2367
|
+
.bds017-buttonGroup {
|
|
2370
2368
|
container-type: inline-size;
|
|
2371
2369
|
container-name: button-group;
|
|
2372
2370
|
grid-column: var(--grid_span-100);
|
|
2373
2371
|
}
|
|
2374
|
-
.
|
|
2372
|
+
.bds017-buttonGroup .bds017-container {
|
|
2375
2373
|
position: relative;
|
|
2376
2374
|
display: flex;
|
|
2377
2375
|
flex-direction: column-reverse;
|
|
2378
2376
|
gap: var(--space_l);
|
|
2379
2377
|
align-items: center;
|
|
2380
2378
|
}
|
|
2381
|
-
.
|
|
2379
|
+
.bds017-buttonGroup.bds017---variant__card .bds017-container {
|
|
2382
2380
|
align-items: stretch;
|
|
2383
2381
|
}
|
|
2384
|
-
.
|
|
2385
|
-
.
|
|
2382
|
+
.bds017-buttonGroup.bds017---variant__flow .bds017-container,
|
|
2383
|
+
.bds017-buttonGroup.bds017---variant__modal .bds017-container {
|
|
2386
2384
|
align-items: center;
|
|
2387
2385
|
}
|
|
2388
|
-
.
|
|
2386
|
+
.bds017-buttonGroup.bds017---variant__content .bds017-container {
|
|
2389
2387
|
align-items: flex-start;
|
|
2390
2388
|
}
|
|
2391
2389
|
@supports (contain: inline-size) {
|
|
2392
2390
|
@container button-group (min-width: 30rem) {
|
|
2393
|
-
.
|
|
2391
|
+
.bds017-buttonGroup .bds017-container {
|
|
2394
2392
|
flex-direction: row;
|
|
2395
2393
|
justify-content: space-between;
|
|
2396
2394
|
}
|
|
2397
|
-
.
|
|
2398
|
-
.
|
|
2395
|
+
.bds017-buttonGroup.bds017---variant__modal .bds017-container > :first-child:last-child,
|
|
2396
|
+
.bds017-buttonGroup.bds017---variant__flow .bds017-container > :first-child:last-child {
|
|
2399
2397
|
margin-inline-start: auto;
|
|
2400
2398
|
}
|
|
2401
|
-
.
|
|
2399
|
+
.bds017-buttonGroup.bds017---variant__card .bds017-container {
|
|
2402
2400
|
justify-content: center;
|
|
2403
2401
|
}
|
|
2404
|
-
.
|
|
2402
|
+
.bds017-buttonGroup.bds017---variant__modal .bds017-container {
|
|
2405
2403
|
justify-content: flex-end;
|
|
2406
2404
|
}
|
|
2407
|
-
.
|
|
2405
|
+
.bds017-buttonGroup.bds017---variant__content .bds017-container {
|
|
2408
2406
|
justify-content: flex-start;
|
|
2409
2407
|
align-items: center;
|
|
2410
2408
|
}
|
|
2411
|
-
.
|
|
2409
|
+
.bds017-buttonGroup.bds017---variant__grid .bds017-container {
|
|
2412
2410
|
justify-content: center;
|
|
2413
2411
|
}
|
|
2414
2412
|
}
|
|
@@ -2417,58 +2415,59 @@
|
|
|
2417
2415
|
|
|
2418
2416
|
/* src/components/layout/Card/Card.module.css */
|
|
2419
2417
|
@layer component {
|
|
2420
|
-
.
|
|
2421
|
-
background-color: var(--color_bg);
|
|
2418
|
+
.bds017-card {
|
|
2419
|
+
background-color: var(--card_color, var(--color_bg));
|
|
2420
|
+
color: var(--card_on-color, var(--color_on-bg));
|
|
2422
2421
|
border-radius: var(--border_radius--m);
|
|
2423
2422
|
transition: all 0.3s ease;
|
|
2424
2423
|
position: relative;
|
|
2425
2424
|
}
|
|
2426
|
-
.
|
|
2425
|
+
.bds017-card.bds017---default {
|
|
2427
2426
|
box-shadow: var(--shadow_s);
|
|
2428
2427
|
}
|
|
2429
|
-
.
|
|
2428
|
+
.bds017-card.bds017---elevated {
|
|
2430
2429
|
box-shadow: var(--shadow_m);
|
|
2431
2430
|
}
|
|
2432
|
-
.
|
|
2433
|
-
border: 1px solid
|
|
2431
|
+
.bds017-card.bds017---outlined {
|
|
2432
|
+
border: 1px solid currentcolor;
|
|
2434
2433
|
box-shadow: var(--shadow_s);
|
|
2435
2434
|
}
|
|
2436
|
-
.
|
|
2435
|
+
.bds017-card.bds017---clickable {
|
|
2437
2436
|
cursor: pointer;
|
|
2438
2437
|
}
|
|
2439
|
-
.
|
|
2438
|
+
.bds017-card.bds017---padding-none {
|
|
2440
2439
|
padding: 0;
|
|
2441
2440
|
}
|
|
2442
|
-
.
|
|
2441
|
+
.bds017-card.bds017---padding-small {
|
|
2443
2442
|
padding: var(--space_s);
|
|
2444
2443
|
}
|
|
2445
|
-
.
|
|
2444
|
+
.bds017-card.bds017---padding-medium {
|
|
2446
2445
|
padding: var(--space_m);
|
|
2447
2446
|
}
|
|
2448
|
-
.
|
|
2447
|
+
.bds017-card.bds017---padding-large {
|
|
2449
2448
|
padding: var(--space_l);
|
|
2450
2449
|
}
|
|
2451
|
-
.
|
|
2450
|
+
.bds017-card.bds017---text-start {
|
|
2452
2451
|
text-align: left;
|
|
2453
2452
|
}
|
|
2454
|
-
.
|
|
2453
|
+
.bds017-card.bds017---text-center {
|
|
2455
2454
|
text-align: center;
|
|
2456
2455
|
}
|
|
2457
|
-
.
|
|
2456
|
+
.bds017-card.bds017---text-end {
|
|
2458
2457
|
text-align: right;
|
|
2459
2458
|
}
|
|
2460
2459
|
@media (hover: hover) and (pointer: fine) {
|
|
2461
|
-
.
|
|
2460
|
+
.bds017-card.bds017---clickable:hover {
|
|
2462
2461
|
transform: translateY(-2px);
|
|
2463
2462
|
box-shadow: var(--shadow_xl);
|
|
2464
2463
|
}
|
|
2465
|
-
.
|
|
2464
|
+
.bds017-card.bds017---default:hover {
|
|
2466
2465
|
box-shadow: var(--shadow_m);
|
|
2467
2466
|
}
|
|
2468
|
-
.
|
|
2467
|
+
.bds017-card.bds017---elevated:hover {
|
|
2469
2468
|
box-shadow: var(--shadow_2xl);
|
|
2470
2469
|
}
|
|
2471
|
-
.
|
|
2470
|
+
.bds017-card.bds017---outlined:hover {
|
|
2472
2471
|
box-shadow: var(--shadow_s);
|
|
2473
2472
|
}
|
|
2474
2473
|
}
|
|
@@ -2476,61 +2475,60 @@
|
|
|
2476
2475
|
|
|
2477
2476
|
/* src/components/layout/SectionHeader/SectionHeader.module.css */
|
|
2478
2477
|
@layer component {
|
|
2479
|
-
.
|
|
2478
|
+
.bds017-sectionHeader {
|
|
2480
2479
|
display: flex;
|
|
2481
2480
|
flex-direction: column;
|
|
2482
2481
|
gap: var(--space_m);
|
|
2483
2482
|
grid-column: var(--grid_span-100);
|
|
2484
|
-
margin-block-end: var(--space_xl);
|
|
2485
2483
|
}
|
|
2486
|
-
.
|
|
2484
|
+
.bds017-title {
|
|
2487
2485
|
color: var(--sectionHeader-title-color, var(--color_on-bg));
|
|
2488
2486
|
margin: 0;
|
|
2489
2487
|
font-family: var(--font_family--body);
|
|
2490
2488
|
}
|
|
2491
|
-
.
|
|
2489
|
+
.bds017-subtitle {
|
|
2492
2490
|
color: var(--sectionHeader_subtitle-color, var(--color_grey--strong));
|
|
2493
2491
|
margin: 0;
|
|
2494
2492
|
font-family: var(--font_family--body);
|
|
2495
2493
|
font-weight: var(--font_weight--medium);
|
|
2496
2494
|
}
|
|
2497
|
-
.
|
|
2495
|
+
.bds017-sectionHeader.bds017---start {
|
|
2498
2496
|
align-items: flex-start;
|
|
2499
2497
|
text-align: left;
|
|
2500
2498
|
}
|
|
2501
|
-
.
|
|
2499
|
+
.bds017-sectionHeader.bds017---center {
|
|
2502
2500
|
align-items: center;
|
|
2503
2501
|
text-align: center;
|
|
2504
2502
|
}
|
|
2505
|
-
.
|
|
2503
|
+
.bds017-sectionHeader.bds017---end {
|
|
2506
2504
|
align-items: flex-end;
|
|
2507
2505
|
text-align: right;
|
|
2508
2506
|
}
|
|
2509
|
-
.
|
|
2507
|
+
.bds017-sectionHeader.bds017---small .bds017-title {
|
|
2510
2508
|
font-size: var(--font_size--heading-1);
|
|
2511
2509
|
line-height: var(--font_line-height--heading);
|
|
2512
2510
|
font-weight: var(--font_weight--bold);
|
|
2513
2511
|
}
|
|
2514
|
-
.
|
|
2512
|
+
.bds017-sectionHeader.bds017---small .bds017-subtitle {
|
|
2515
2513
|
font-size: var(--font_size--body);
|
|
2516
2514
|
line-height: 1.4;
|
|
2517
2515
|
}
|
|
2518
|
-
.
|
|
2516
|
+
.bds017-sectionHeader.bds017---medium .bds017-title {
|
|
2519
2517
|
font-size: var(--font_size--display);
|
|
2520
2518
|
line-height: var(--font_line-height--display);
|
|
2521
2519
|
font-weight: var(--font_weight--bold);
|
|
2522
2520
|
}
|
|
2523
|
-
.
|
|
2521
|
+
.bds017-sectionHeader.bds017---medium .bds017-subtitle {
|
|
2524
2522
|
font-size: var(--font_size--heading-3);
|
|
2525
2523
|
line-height: 1.3;
|
|
2526
2524
|
}
|
|
2527
|
-
.
|
|
2525
|
+
.bds017-sectionHeader.bds017---large .bds017-title {
|
|
2528
2526
|
font-size: var(--font_size--display);
|
|
2529
2527
|
line-height: var(--font_line-height--display);
|
|
2530
2528
|
font-weight: var(--font_weight--bold);
|
|
2531
2529
|
letter-spacing: var(--font_tracking--tight);
|
|
2532
2530
|
}
|
|
2533
|
-
.
|
|
2531
|
+
.bds017-sectionHeader.bds017---large .bds017-subtitle {
|
|
2534
2532
|
font-size: var(--font_size--heading-2);
|
|
2535
2533
|
line-height: 1.3;
|
|
2536
2534
|
font-weight: var(--font_weight--medium);
|
|
@@ -2539,7 +2537,7 @@
|
|
|
2539
2537
|
|
|
2540
2538
|
/* src/components/layout/IconWrapper/IconWrapper.module.css */
|
|
2541
2539
|
@layer component {
|
|
2542
|
-
.
|
|
2540
|
+
.bds017-wrapper {
|
|
2543
2541
|
width: 2em;
|
|
2544
2542
|
height: 2em;
|
|
2545
2543
|
font-size: 3em;
|
|
@@ -2554,7 +2552,7 @@
|
|
|
2554
2552
|
position: relative;
|
|
2555
2553
|
transition: var(--animation_transition);
|
|
2556
2554
|
}
|
|
2557
|
-
.
|
|
2555
|
+
.bds017-wrapper svg {
|
|
2558
2556
|
fill: currentcolor;
|
|
2559
2557
|
}
|
|
2560
2558
|
}
|