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