@boostdev/design-system-components 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +19 -17
- package/dist/client.cjs +50 -50
- package/dist/client.css +719 -700
- package/dist/client.js +50 -50
- package/dist/index.cjs +50 -50
- package/dist/index.css +719 -700
- package/dist/index.js +50 -50
- package/package.json +3 -3
- package/src/components/interaction/Button/Button.module.css +8 -8
- package/src/components/interaction/Command/Command.module.css +12 -12
- package/src/components/interaction/Dialog/Dialog.module.css +3 -3
- package/src/components/interaction/Drawer/Drawer.module.css +3 -3
- package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +4 -4
- package/src/components/interaction/Popover/Popover.module.css +2 -2
- package/src/components/interaction/Rating/Rating.module.css +2 -2
- package/src/components/interaction/Toast/Toast.module.css +10 -10
- package/src/components/interaction/form/Checkbox/Checkbox.module.css +5 -5
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css +2 -2
- package/src/components/interaction/form/Combobox/Combobox.module.css +8 -8
- package/src/components/interaction/form/FileInput/FileInput.module.css +8 -8
- package/src/components/interaction/form/FormInput/FormInput.module.css +2 -2
- package/src/components/interaction/form/NumberInput/NumberInput.module.css +4 -4
- package/src/components/interaction/form/Radio/Radio.module.css +6 -6
- package/src/components/interaction/form/RadioGroup/RadioGroup.module.css +2 -2
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css +6 -6
- package/src/components/interaction/form/Select/Select.module.css +3 -3
- package/src/components/interaction/form/Slider/Slider.module.css +14 -14
- package/src/components/interaction/form/Switch/Switch.module.css +8 -8
- package/src/components/interaction/form/Textarea/Textarea.module.css +2 -2
- package/src/components/interaction/form/atoms/Label.module.css +1 -1
- package/src/components/interaction/form/atoms/Message.module.css +1 -1
- package/src/components/layout/Card/Card.module.css +2 -2
- package/src/components/layout/IconWrapper/IconWrapper.module.css +3 -3
- package/src/components/layout/SectionHeader/SectionHeader.module.css +2 -2
- package/src/components/ui/Accordion/Accordion.module.css +5 -5
- package/src/components/ui/Alert/Alert.module.css +15 -15
- package/src/components/ui/Avatar/Avatar.module.css +2 -2
- package/src/components/ui/Badge/Badge.module.css +12 -12
- package/src/components/ui/Breadcrumb/Breadcrumb.module.css +3 -3
- package/src/components/ui/Calendar/Calendar.module.css +11 -11
- package/src/components/ui/Carousel/Carousel.module.css +4 -4
- package/src/components/ui/Collapsible/Collapsible.module.css +6 -6
- package/src/components/ui/DescriptionList/DescriptionList.module.css +3 -3
- package/src/components/ui/Link/Link.module.css +8 -8
- package/src/components/ui/Loading/Loading.module.css +2 -2
- package/src/components/ui/NotificationBanner/NotificationBanner.module.css +15 -15
- package/src/components/ui/Pagination/Pagination.module.css +8 -8
- package/src/components/ui/Progress/Progress.module.css +3 -3
- package/src/components/ui/ProgressCircle/ProgressCircle.module.css +3 -3
- package/src/components/ui/Separator/Separator.module.css +1 -1
- package/src/components/ui/Skeleton/Skeleton.module.css +3 -3
- package/src/components/ui/SkipLink/SkipLink.module.css +3 -3
- package/src/components/ui/Table/Table.module.css +11 -11
- package/src/components/ui/Tabs/Tabs.module.css +5 -5
- package/src/components/ui/Tooltip/Tooltip.module.css +2 -2
- package/src/components/ui/Typography/Typography.module.css +1 -1
- package/src/css/bdc.css +2 -2
- package/src/index.ts +2 -0
- package/src/stories/DesignSystem/Borders.mdx +7 -7
- package/src/stories/DesignSystem/Colors.mdx +28 -29
- package/src/stories/DesignSystem/Elevation.mdx +4 -4
- package/src/stories/DesignSystem/Grid.mdx +5 -5
- package/src/stories/DesignSystem/Motion.mdx +2 -2
- package/src/stories/DesignSystem/Overview.mdx +1 -1
- package/src/stories/DesignSystem/Spacing.mdx +3 -3
- package/src/stories/DesignSystem/Typography.mdx +6 -6
package/dist/index.css
CHANGED
|
@@ -1,26 +1,45 @@
|
|
|
1
|
+
/* src/css/bdc.css */
|
|
2
|
+
@property --bdc_color { syntax: "<color>"; inherits: false; initial-value: currentcolor; }
|
|
3
|
+
@property --bdc-outline_width { syntax: "<length>"; inherits: false; initial-value: 1px; }
|
|
4
|
+
@property --bdc-outline_offset { syntax: "<length>"; inherits: false; initial-value: -1px; }
|
|
5
|
+
@property --bdc-outline_radius { syntax: "<length-percentage>"; inherits: false; initial-value: 0; }
|
|
6
|
+
@property --bdc-outline_shadow { syntax: "*"; inherits: false; initial-value: none; }
|
|
7
|
+
@layer component {
|
|
8
|
+
:root {
|
|
9
|
+
--bdc-outline_border: none;
|
|
10
|
+
--bdc_color: currentcolor;
|
|
11
|
+
--bdc_color--focus: var(--bds-color_interactive);
|
|
12
|
+
--bdc_color--error: var(--bds-color_error);
|
|
13
|
+
--bdc-outline_width: 1px;
|
|
14
|
+
--bdc-outline_offset: -1px;
|
|
15
|
+
--bdc-outline_radius: var(--bds-border_radius--xs);
|
|
16
|
+
--bdc-outline_shadow: none;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
1
20
|
/* src/components/ui/Accordion/Accordion.module.css */
|
|
2
21
|
@layer component {
|
|
3
|
-
.
|
|
22
|
+
.bds103Accordion-accordion {
|
|
4
23
|
display: flex;
|
|
5
24
|
flex-direction: column;
|
|
6
25
|
border: var(--accordion_border, none);
|
|
7
|
-
--bdc_color: var(--bds-
|
|
26
|
+
--bdc_color: var(--bds-color_bg--subtle);
|
|
8
27
|
--bdc-outline_radius: var(--bds-border_radius--s);
|
|
9
28
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
10
29
|
outline-offset: var(--bdc-outline_offset);
|
|
11
30
|
border-radius: var(--accordion_radius, var(--bdc-outline_radius));
|
|
12
31
|
overflow: hidden;
|
|
13
32
|
}
|
|
14
|
-
.
|
|
15
|
-
border-bottom: 1px solid var(--bds-
|
|
33
|
+
.bds103Accordion-item {
|
|
34
|
+
border-bottom: 1px solid var(--bds-color_bg--subtle);
|
|
16
35
|
}
|
|
17
|
-
.
|
|
36
|
+
.bds103Accordion-item:last-child {
|
|
18
37
|
border-bottom: none;
|
|
19
38
|
}
|
|
20
|
-
.
|
|
39
|
+
.bds103Accordion-heading {
|
|
21
40
|
margin: 0;
|
|
22
41
|
}
|
|
23
|
-
.
|
|
42
|
+
.bds103Accordion-trigger {
|
|
24
43
|
all: unset;
|
|
25
44
|
display: flex;
|
|
26
45
|
align-items: center;
|
|
@@ -30,49 +49,49 @@
|
|
|
30
49
|
font-family: var(--bds-font_family--body);
|
|
31
50
|
font-size: var(--bds-font_size--body);
|
|
32
51
|
font-weight: var(--bds-font_weight--semibold);
|
|
33
|
-
color: var(--bds-
|
|
52
|
+
color: var(--bds-color_on-bg);
|
|
34
53
|
cursor: pointer;
|
|
35
54
|
transition: var(--bds-animation_transition);
|
|
36
55
|
box-sizing: border-box;
|
|
37
56
|
}
|
|
38
|
-
.
|
|
57
|
+
.bds103Accordion-trigger:disabled {
|
|
39
58
|
opacity: 0.4;
|
|
40
59
|
cursor: not-allowed;
|
|
41
60
|
}
|
|
42
|
-
.
|
|
61
|
+
.bds103Accordion-trigger:focus-visible {
|
|
43
62
|
outline: var(--bds-outline_default);
|
|
44
63
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
45
64
|
border-radius: var(--bds-border_radius--xs);
|
|
46
65
|
}
|
|
47
66
|
@media (hover: hover) and (pointer: fine) {
|
|
48
|
-
.
|
|
49
|
-
background-color: var(--bds-
|
|
67
|
+
.bds103Accordion-trigger:not(:disabled):hover {
|
|
68
|
+
background-color: var(--bds-color_bg--subtle);
|
|
50
69
|
}
|
|
51
70
|
}
|
|
52
|
-
.
|
|
71
|
+
.bds103Accordion-triggerLabel {
|
|
53
72
|
flex: 1;
|
|
54
73
|
text-align: start;
|
|
55
74
|
}
|
|
56
|
-
.
|
|
75
|
+
.bds103Accordion-chevron {
|
|
57
76
|
width: 1.25rem;
|
|
58
77
|
height: 1.25rem;
|
|
59
78
|
flex-shrink: 0;
|
|
60
79
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
61
80
|
}
|
|
62
|
-
.
|
|
81
|
+
.bds103Accordion-item.bds103Accordion---open .bds103Accordion-chevron {
|
|
63
82
|
transform: rotate(180deg);
|
|
64
83
|
}
|
|
65
|
-
.
|
|
84
|
+
.bds103Accordion-panel {
|
|
66
85
|
overflow: hidden;
|
|
67
86
|
}
|
|
68
|
-
.
|
|
87
|
+
.bds103Accordion-panelContent {
|
|
69
88
|
padding: 0 var(--bds-space_m) var(--bds-space_m);
|
|
70
|
-
color: var(--bds-
|
|
89
|
+
color: var(--bds-color_on-bg);
|
|
71
90
|
font-size: var(--bds-font_size--body);
|
|
72
91
|
line-height: var(--bds-font_line-height--body);
|
|
73
92
|
}
|
|
74
93
|
@media (prefers-reduced-motion: reduce) {
|
|
75
|
-
.
|
|
94
|
+
.bds103Accordion-chevron {
|
|
76
95
|
transition: none;
|
|
77
96
|
}
|
|
78
97
|
}
|
|
@@ -80,55 +99,55 @@
|
|
|
80
99
|
|
|
81
100
|
/* src/components/ui/Alert/Alert.module.css */
|
|
82
101
|
@layer component {
|
|
83
|
-
.
|
|
102
|
+
.bds103Alert-alert {
|
|
84
103
|
display: flex;
|
|
85
104
|
align-items: flex-start;
|
|
86
105
|
gap: var(--bds-space_s);
|
|
87
106
|
padding: var(--bds-space_m);
|
|
88
107
|
border-radius: var(--bds-border_radius--s);
|
|
89
|
-
border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--bds-
|
|
90
|
-
background-color: var(--alert_bg, var(--bds-
|
|
91
|
-
color: var(--alert_text, var(--bds-
|
|
108
|
+
border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--bds-color_blue));
|
|
109
|
+
background-color: var(--alert_bg, var(--bds-color_blue--subtle));
|
|
110
|
+
color: var(--alert_text, var(--bds-color_on-blue--subtle));
|
|
92
111
|
font-size: var(--bds-font_size--body);
|
|
93
112
|
line-height: var(--bds-font_line-height--body);
|
|
94
113
|
}
|
|
95
|
-
.
|
|
96
|
-
--alert_bg: var(--bds-
|
|
97
|
-
--alert_text: var(--bds-
|
|
98
|
-
--alert_border: var(--bds-
|
|
114
|
+
.bds103Alert---variant_info {
|
|
115
|
+
--alert_bg: var(--bds-color_blue--subtle);
|
|
116
|
+
--alert_text: var(--bds-color_on-blue--subtle);
|
|
117
|
+
--alert_border: var(--bds-color_blue);
|
|
99
118
|
}
|
|
100
|
-
.
|
|
101
|
-
--alert_bg: var(--bds-
|
|
102
|
-
--alert_text: var(--bds-
|
|
103
|
-
--alert_border: var(--bds-
|
|
119
|
+
.bds103Alert---variant_success {
|
|
120
|
+
--alert_bg: var(--bds-color_success--subtle);
|
|
121
|
+
--alert_text: var(--bds-color_on-success--subtle);
|
|
122
|
+
--alert_border: var(--bds-color_success);
|
|
104
123
|
}
|
|
105
|
-
.
|
|
106
|
-
--alert_bg: var(--bds-
|
|
107
|
-
--alert_text: var(--bds-
|
|
108
|
-
--alert_border: var(--bds-
|
|
124
|
+
.bds103Alert---variant_warning {
|
|
125
|
+
--alert_bg: var(--bds-color_orange--subtle);
|
|
126
|
+
--alert_text: var(--bds-color_on-orange--subtle);
|
|
127
|
+
--alert_border: var(--bds-color_warning);
|
|
109
128
|
}
|
|
110
|
-
.
|
|
111
|
-
--alert_bg: rgb(from var(--bds-
|
|
112
|
-
--alert_text: var(--bds-
|
|
113
|
-
--alert_border: var(--bds-
|
|
129
|
+
.bds103Alert---variant_error {
|
|
130
|
+
--alert_bg: rgb(from var(--bds-color_error) r g b / 12%);
|
|
131
|
+
--alert_text: var(--bds-color_on-bg);
|
|
132
|
+
--alert_border: var(--bds-color_error);
|
|
114
133
|
}
|
|
115
|
-
.
|
|
134
|
+
.bds103Alert-icon {
|
|
116
135
|
display: flex;
|
|
117
136
|
align-items: center;
|
|
118
137
|
flex-shrink: 0;
|
|
119
138
|
margin-block-start: 0.1em;
|
|
120
139
|
}
|
|
121
|
-
.
|
|
140
|
+
.bds103Alert-content {
|
|
122
141
|
flex: 1;
|
|
123
142
|
display: flex;
|
|
124
143
|
flex-direction: column;
|
|
125
144
|
gap: var(--bds-space_xxs);
|
|
126
145
|
}
|
|
127
|
-
.
|
|
146
|
+
.bds103Alert-title {
|
|
128
147
|
font-weight: var(--bds-font_weight--semibold);
|
|
129
148
|
font-size: var(--bds-font_size--body);
|
|
130
149
|
}
|
|
131
|
-
.
|
|
150
|
+
.bds103Alert-dismiss {
|
|
132
151
|
all: unset;
|
|
133
152
|
display: flex;
|
|
134
153
|
align-items: center;
|
|
@@ -143,16 +162,16 @@
|
|
|
143
162
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
144
163
|
outline-offset: var(--bdc-outline_offset);
|
|
145
164
|
}
|
|
146
|
-
.
|
|
165
|
+
.bds103Alert-dismiss svg {
|
|
147
166
|
width: 1rem;
|
|
148
167
|
height: 1rem;
|
|
149
168
|
}
|
|
150
|
-
.
|
|
169
|
+
.bds103Alert-dismiss:focus-visible {
|
|
151
170
|
outline: var(--bds-outline_default);
|
|
152
171
|
outline-offset: var(--bds-outline_offset);
|
|
153
172
|
}
|
|
154
173
|
@media (hover: hover) and (pointer: fine) {
|
|
155
|
-
.
|
|
174
|
+
.bds103Alert-dismiss:hover {
|
|
156
175
|
opacity: 0.7;
|
|
157
176
|
}
|
|
158
177
|
}
|
|
@@ -160,7 +179,7 @@
|
|
|
160
179
|
|
|
161
180
|
/* src/components/ui/Avatar/Avatar.module.css */
|
|
162
181
|
@layer component {
|
|
163
|
-
.
|
|
182
|
+
.bds103Avatar-avatar {
|
|
164
183
|
display: inline-flex;
|
|
165
184
|
align-items: center;
|
|
166
185
|
justify-content: center;
|
|
@@ -170,42 +189,42 @@
|
|
|
170
189
|
overflow: hidden;
|
|
171
190
|
flex-shrink: 0;
|
|
172
191
|
}
|
|
173
|
-
.
|
|
174
|
-
background-color: var(--avatar_bg, var(--bds-
|
|
175
|
-
color: var(--avatar_text, var(--bds-
|
|
192
|
+
.bds103Avatar-avatar.bds103Avatar---fallback {
|
|
193
|
+
background-color: var(--avatar_bg, var(--bds-color_blue));
|
|
194
|
+
color: var(--avatar_text, var(--bds-color_on-blue));
|
|
176
195
|
font-weight: var(--bds-font_weight--semibold);
|
|
177
196
|
}
|
|
178
|
-
.
|
|
197
|
+
.bds103Avatar-avatar.bds103Avatar---size_small {
|
|
179
198
|
--avatar_size: 2em;
|
|
180
199
|
}
|
|
181
|
-
.
|
|
200
|
+
.bds103Avatar-avatar.bds103Avatar---size_medium {
|
|
182
201
|
--avatar_size: 3em;
|
|
183
202
|
}
|
|
184
|
-
.
|
|
203
|
+
.bds103Avatar-avatar.bds103Avatar---size_large {
|
|
185
204
|
--avatar_size: 4.5em;
|
|
186
205
|
}
|
|
187
|
-
.
|
|
206
|
+
.bds103Avatar-image {
|
|
188
207
|
width: 100%;
|
|
189
208
|
height: 100%;
|
|
190
209
|
object-fit: cover;
|
|
191
210
|
display: block;
|
|
192
211
|
}
|
|
193
|
-
.
|
|
212
|
+
.bds103Avatar-initials {
|
|
194
213
|
line-height: 1;
|
|
195
214
|
user-select: none;
|
|
196
215
|
font-size: var(--bds-font_size--body);
|
|
197
216
|
}
|
|
198
|
-
.
|
|
217
|
+
.bds103Avatar-avatar.bds103Avatar---size_small .bds103Avatar-initials {
|
|
199
218
|
font-size: var(--bds-font_size--body--s);
|
|
200
219
|
}
|
|
201
|
-
.
|
|
220
|
+
.bds103Avatar-avatar.bds103Avatar---size_large .bds103Avatar-initials {
|
|
202
221
|
font-size: var(--bds-font_size--heading-3);
|
|
203
222
|
}
|
|
204
223
|
}
|
|
205
224
|
|
|
206
225
|
/* src/components/ui/Badge/Badge.module.css */
|
|
207
226
|
@layer component {
|
|
208
|
-
.
|
|
227
|
+
.bds103Badge-badge {
|
|
209
228
|
display: inline-flex;
|
|
210
229
|
align-items: center;
|
|
211
230
|
justify-content: center;
|
|
@@ -215,37 +234,37 @@
|
|
|
215
234
|
font-weight: var(--bds-font_weight--semibold);
|
|
216
235
|
line-height: 1;
|
|
217
236
|
white-space: nowrap;
|
|
218
|
-
background-color: var(--badge_bg, var(--bds-
|
|
219
|
-
color: var(--badge_text, var(--bds-
|
|
237
|
+
background-color: var(--badge_bg, var(--bds-color_blue));
|
|
238
|
+
color: var(--badge_text, var(--bds-color_on-blue));
|
|
220
239
|
}
|
|
221
|
-
.
|
|
222
|
-
--badge_bg: var(--bds-
|
|
223
|
-
--badge_text: var(--bds-
|
|
240
|
+
.bds103Badge---variant_primary {
|
|
241
|
+
--badge_bg: var(--bds-color_interactive);
|
|
242
|
+
--badge_text: var(--bds-color_on-interactive);
|
|
224
243
|
}
|
|
225
|
-
.
|
|
226
|
-
--badge_bg: var(--bds-
|
|
227
|
-
--badge_text: var(--bds-
|
|
244
|
+
.bds103Badge---variant_secondary {
|
|
245
|
+
--badge_bg: var(--bds-color_bg);
|
|
246
|
+
--badge_text: var(--bds-color_on-bg);
|
|
228
247
|
}
|
|
229
|
-
.
|
|
230
|
-
--badge_bg: var(--bds-
|
|
231
|
-
--badge_text: var(--bds-
|
|
248
|
+
.bds103Badge---variant_success {
|
|
249
|
+
--badge_bg: var(--bds-color_success);
|
|
250
|
+
--badge_text: var(--bds-color_on-success);
|
|
232
251
|
}
|
|
233
|
-
.
|
|
234
|
-
--badge_bg: var(--bds-
|
|
235
|
-
--badge_text: var(--bds-
|
|
252
|
+
.bds103Badge---variant_error {
|
|
253
|
+
--badge_bg: var(--bds-color_error);
|
|
254
|
+
--badge_text: var(--bds-color_on-error);
|
|
236
255
|
}
|
|
237
|
-
.
|
|
238
|
-
--badge_bg: var(--bds-
|
|
239
|
-
--badge_text: var(--bds-
|
|
256
|
+
.bds103Badge---variant_warning {
|
|
257
|
+
--badge_bg: var(--bds-color_warning);
|
|
258
|
+
--badge_text: var(--bds-color_on-warning);
|
|
240
259
|
}
|
|
241
260
|
}
|
|
242
261
|
|
|
243
262
|
/* src/components/ui/Breadcrumb/Breadcrumb.module.css */
|
|
244
263
|
@layer component {
|
|
245
|
-
.
|
|
264
|
+
.bds103Breadcrumb-breadcrumb {
|
|
246
265
|
font-size: var(--bds-font_size--body--s);
|
|
247
266
|
}
|
|
248
|
-
.
|
|
267
|
+
.bds103Breadcrumb-list {
|
|
249
268
|
display: flex;
|
|
250
269
|
flex-wrap: wrap;
|
|
251
270
|
align-items: center;
|
|
@@ -254,45 +273,45 @@
|
|
|
254
273
|
margin: 0;
|
|
255
274
|
padding: 0;
|
|
256
275
|
}
|
|
257
|
-
.
|
|
276
|
+
.bds103Breadcrumb-item {
|
|
258
277
|
display: flex;
|
|
259
278
|
align-items: center;
|
|
260
279
|
gap: var(--bds-space_xxs);
|
|
261
280
|
}
|
|
262
|
-
.
|
|
263
|
-
color: var(--bds-
|
|
281
|
+
.bds103Breadcrumb-link {
|
|
282
|
+
color: var(--bds-color_interactive_on-bg);
|
|
264
283
|
text-decoration: none;
|
|
265
284
|
transition: var(--bds-animation_transition);
|
|
266
285
|
}
|
|
267
|
-
.
|
|
286
|
+
.bds103Breadcrumb-link:focus-visible {
|
|
268
287
|
outline: var(--bds-outline_default);
|
|
269
288
|
outline-offset: var(--bds-outline_offset);
|
|
270
289
|
border-radius: var(--bds-border_radius--xs);
|
|
271
290
|
}
|
|
272
291
|
@media (hover: hover) and (pointer: fine) {
|
|
273
|
-
.
|
|
292
|
+
.bds103Breadcrumb-link:hover {
|
|
274
293
|
text-decoration: underline;
|
|
275
294
|
text-underline-offset: 0.2em;
|
|
276
295
|
}
|
|
277
296
|
}
|
|
278
|
-
.
|
|
279
|
-
color: var(--bds-
|
|
297
|
+
.bds103Breadcrumb-separator {
|
|
298
|
+
color: var(--bds-color_on-bg--subtle);
|
|
280
299
|
user-select: none;
|
|
281
300
|
}
|
|
282
|
-
.
|
|
283
|
-
color: var(--bds-
|
|
301
|
+
.bds103Breadcrumb-current {
|
|
302
|
+
color: var(--bds-color_on-bg--subtle);
|
|
284
303
|
font-weight: var(--bds-font_weight--semibold);
|
|
285
304
|
}
|
|
286
305
|
}
|
|
287
306
|
|
|
288
307
|
/* src/components/ui/Collapsible/Collapsible.module.css */
|
|
289
308
|
@layer component {
|
|
290
|
-
.
|
|
291
|
-
border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-
|
|
309
|
+
.bds103Collapsible-collapsible {
|
|
310
|
+
border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
|
|
292
311
|
border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
|
|
293
312
|
overflow: hidden;
|
|
294
313
|
}
|
|
295
|
-
.
|
|
314
|
+
.bds103Collapsible-summary {
|
|
296
315
|
list-style: none;
|
|
297
316
|
display: flex;
|
|
298
317
|
align-items: center;
|
|
@@ -302,30 +321,30 @@
|
|
|
302
321
|
cursor: pointer;
|
|
303
322
|
font-weight: var(--bds-font_weight--semibold);
|
|
304
323
|
font-size: var(--bds-font_size--body);
|
|
305
|
-
color: var(--collapsible_color, var(--bds-
|
|
306
|
-
background-color: var(--collapsible_bg, var(--bds-
|
|
324
|
+
color: var(--collapsible_color, var(--bds-color_on-bg));
|
|
325
|
+
background-color: var(--collapsible_bg, var(--bds-color_bg));
|
|
307
326
|
user-select: none;
|
|
308
327
|
transition: var(--bds-animation_transition);
|
|
309
328
|
}
|
|
310
|
-
.
|
|
329
|
+
.bds103Collapsible-summary::-webkit-details-marker {
|
|
311
330
|
display: none;
|
|
312
331
|
}
|
|
313
|
-
.
|
|
332
|
+
.bds103Collapsible-summary:focus-visible {
|
|
314
333
|
outline: var(--bds-outline_default);
|
|
315
334
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
316
335
|
}
|
|
317
336
|
@media (hover: hover) and (pointer: fine) {
|
|
318
|
-
.
|
|
319
|
-
background-color: var(--collapsible_bg--hover, var(--bds-
|
|
337
|
+
.bds103Collapsible-summary:hover {
|
|
338
|
+
background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
|
|
320
339
|
}
|
|
321
340
|
}
|
|
322
|
-
.
|
|
323
|
-
border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-
|
|
341
|
+
.bds103Collapsible-collapsible[open] > .bds103Collapsible-summary {
|
|
342
|
+
border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
|
|
324
343
|
}
|
|
325
|
-
.
|
|
344
|
+
.bds103Collapsible-summaryContent {
|
|
326
345
|
flex: 1;
|
|
327
346
|
}
|
|
328
|
-
.
|
|
347
|
+
.bds103Collapsible-icon {
|
|
329
348
|
width: 0.5rem;
|
|
330
349
|
height: 0.5rem;
|
|
331
350
|
border-right: 2px solid currentcolor;
|
|
@@ -334,17 +353,17 @@
|
|
|
334
353
|
flex-shrink: 0;
|
|
335
354
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
336
355
|
}
|
|
337
|
-
.
|
|
356
|
+
.bds103Collapsible-collapsible[open] > .bds103Collapsible-summary .bds103Collapsible-icon {
|
|
338
357
|
transform: rotate(-135deg);
|
|
339
358
|
}
|
|
340
|
-
.
|
|
359
|
+
.bds103Collapsible-content {
|
|
341
360
|
padding: var(--bds-space_m);
|
|
342
|
-
color: var(--collapsible_on-color, var(--bds-
|
|
361
|
+
color: var(--collapsible_on-color, var(--bds-color_on-bg));
|
|
343
362
|
font-size: var(--bds-font_size--body);
|
|
344
363
|
line-height: var(--bds-font_line-height--body);
|
|
345
364
|
}
|
|
346
365
|
@media (prefers-reduced-motion: reduce) {
|
|
347
|
-
.
|
|
366
|
+
.bds103Collapsible-icon {
|
|
348
367
|
transition: none;
|
|
349
368
|
}
|
|
350
369
|
}
|
|
@@ -352,13 +371,13 @@
|
|
|
352
371
|
|
|
353
372
|
/* src/components/ui/Calendar/Calendar.module.css */
|
|
354
373
|
@layer component {
|
|
355
|
-
.
|
|
374
|
+
.bds103Calendar-calendar {
|
|
356
375
|
display: inline-flex;
|
|
357
376
|
flex-direction: column;
|
|
358
377
|
gap: var(--bds-space_s);
|
|
359
|
-
background-color: var(--bds-
|
|
378
|
+
background-color: var(--bds-color_bg);
|
|
360
379
|
border: var(--calendar_border, none);
|
|
361
|
-
--bdc_color: var(--bds-
|
|
380
|
+
--bdc_color: var(--bds-color_bg--subtle);
|
|
362
381
|
--bdc-outline_radius: var(--bds-border_radius--m);
|
|
363
382
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
364
383
|
outline-offset: var(--bdc-outline_offset);
|
|
@@ -367,17 +386,17 @@
|
|
|
367
386
|
box-shadow: var(--calendar_shadow, var(--bds-shadow_s));
|
|
368
387
|
width: 20rem;
|
|
369
388
|
}
|
|
370
|
-
.
|
|
389
|
+
.bds103Calendar-header {
|
|
371
390
|
display: flex;
|
|
372
391
|
align-items: center;
|
|
373
392
|
justify-content: space-between;
|
|
374
393
|
}
|
|
375
|
-
.
|
|
394
|
+
.bds103Calendar-monthYear {
|
|
376
395
|
font-size: var(--bds-font_size--body);
|
|
377
396
|
font-weight: var(--bds-font_weight--semibold);
|
|
378
|
-
color: var(--bds-
|
|
397
|
+
color: var(--bds-color_on-bg);
|
|
379
398
|
}
|
|
380
|
-
.
|
|
399
|
+
.bds103Calendar-navBtn {
|
|
381
400
|
all: unset;
|
|
382
401
|
display: flex;
|
|
383
402
|
align-items: center;
|
|
@@ -386,38 +405,38 @@
|
|
|
386
405
|
height: 2rem;
|
|
387
406
|
border-radius: 50%;
|
|
388
407
|
cursor: pointer;
|
|
389
|
-
color: var(--bds-
|
|
408
|
+
color: var(--bds-color_on-bg);
|
|
390
409
|
transition: var(--bds-animation_transition);
|
|
391
410
|
}
|
|
392
|
-
.
|
|
411
|
+
.bds103Calendar-navBtn svg {
|
|
393
412
|
width: 1rem;
|
|
394
413
|
height: 1rem;
|
|
395
414
|
}
|
|
396
|
-
.
|
|
415
|
+
.bds103Calendar-navBtn:focus-visible {
|
|
397
416
|
outline: var(--bds-outline_default);
|
|
398
417
|
outline-offset: var(--bds-outline_offset);
|
|
399
418
|
}
|
|
400
419
|
@media (hover: hover) and (pointer: fine) {
|
|
401
|
-
.
|
|
402
|
-
background-color: var(--bds-
|
|
420
|
+
.bds103Calendar-navBtn:hover {
|
|
421
|
+
background-color: var(--bds-color_bg--subtle);
|
|
403
422
|
}
|
|
404
423
|
}
|
|
405
|
-
.
|
|
424
|
+
.bds103Calendar-grid {
|
|
406
425
|
border-collapse: collapse;
|
|
407
426
|
width: 100%;
|
|
408
427
|
table-layout: fixed;
|
|
409
428
|
}
|
|
410
|
-
.
|
|
429
|
+
.bds103Calendar-weekday {
|
|
411
430
|
font-size: var(--bds-font_size--body--s);
|
|
412
431
|
font-weight: var(--bds-font_weight--semibold);
|
|
413
|
-
color: var(--bds-
|
|
432
|
+
color: var(--bds-color_on-bg);
|
|
414
433
|
text-align: center;
|
|
415
434
|
padding-block-end: var(--bds-space_xs);
|
|
416
435
|
}
|
|
417
|
-
.
|
|
436
|
+
.bds103Calendar-empty {
|
|
418
437
|
padding: 0;
|
|
419
438
|
}
|
|
420
|
-
.
|
|
439
|
+
.bds103Calendar-day {
|
|
421
440
|
all: unset;
|
|
422
441
|
display: flex;
|
|
423
442
|
align-items: center;
|
|
@@ -426,38 +445,38 @@
|
|
|
426
445
|
aspect-ratio: 1;
|
|
427
446
|
border-radius: 50%;
|
|
428
447
|
font-size: var(--bds-font_size--body--s);
|
|
429
|
-
color: var(--bds-
|
|
448
|
+
color: var(--bds-color_on-bg);
|
|
430
449
|
cursor: pointer;
|
|
431
450
|
transition: var(--bds-animation_transition);
|
|
432
451
|
box-sizing: border-box;
|
|
433
452
|
}
|
|
434
|
-
.
|
|
453
|
+
.bds103Calendar-day:focus-visible {
|
|
435
454
|
outline: var(--bds-outline_default);
|
|
436
455
|
outline-offset: var(--bds-outline_offset);
|
|
437
456
|
}
|
|
438
457
|
@media (hover: hover) and (pointer: fine) {
|
|
439
|
-
.
|
|
440
|
-
background-color: var(--bds-
|
|
458
|
+
.bds103Calendar-day:not(.bds103Calendar-disabled, .bds103Calendar-selected):hover {
|
|
459
|
+
background-color: var(--bds-color_bg--subtle);
|
|
441
460
|
}
|
|
442
461
|
}
|
|
443
|
-
.
|
|
462
|
+
.bds103Calendar-today {
|
|
444
463
|
font-weight: var(--bds-font_weight--semibold);
|
|
445
|
-
--bdc_color: var(--bds-
|
|
464
|
+
--bdc_color: var(--bds-color_interactive);
|
|
446
465
|
border: var(--calendar_today-border, none);
|
|
447
466
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
448
467
|
outline-offset: var(--bdc-outline_offset);
|
|
449
468
|
}
|
|
450
|
-
.
|
|
451
|
-
background-color: var(--bds-
|
|
452
|
-
color: var(--bds-
|
|
469
|
+
.bds103Calendar-selected {
|
|
470
|
+
background-color: var(--bds-color_interactive);
|
|
471
|
+
color: var(--bds-color_on-interactive);
|
|
453
472
|
font-weight: var(--bds-font_weight--semibold);
|
|
454
473
|
}
|
|
455
|
-
.
|
|
474
|
+
.bds103Calendar-disabled {
|
|
456
475
|
opacity: 0.35;
|
|
457
476
|
cursor: not-allowed;
|
|
458
477
|
}
|
|
459
478
|
@media (prefers-reduced-motion: reduce) {
|
|
460
|
-
.
|
|
479
|
+
.bds103Calendar-day {
|
|
461
480
|
transition: none;
|
|
462
481
|
}
|
|
463
482
|
}
|
|
@@ -465,13 +484,13 @@
|
|
|
465
484
|
|
|
466
485
|
/* src/components/ui/Carousel/Carousel.module.css */
|
|
467
486
|
@layer component {
|
|
468
|
-
.
|
|
487
|
+
.bds103Carousel-carousel {
|
|
469
488
|
position: relative;
|
|
470
489
|
display: flex;
|
|
471
490
|
align-items: center;
|
|
472
491
|
gap: var(--bds-space_xs);
|
|
473
492
|
}
|
|
474
|
-
.
|
|
493
|
+
.bds103Carousel-track {
|
|
475
494
|
display: flex;
|
|
476
495
|
gap: var(--bds-space_m);
|
|
477
496
|
overflow-x: auto;
|
|
@@ -480,14 +499,14 @@
|
|
|
480
499
|
flex: 1;
|
|
481
500
|
scroll-behavior: smooth;
|
|
482
501
|
}
|
|
483
|
-
.
|
|
502
|
+
.bds103Carousel-track::-webkit-scrollbar {
|
|
484
503
|
display: none;
|
|
485
504
|
}
|
|
486
|
-
.
|
|
505
|
+
.bds103Carousel-slide {
|
|
487
506
|
scroll-snap-align: start;
|
|
488
507
|
flex-shrink: 0;
|
|
489
508
|
}
|
|
490
|
-
.
|
|
509
|
+
.bds103Carousel-navBtn {
|
|
491
510
|
all: unset;
|
|
492
511
|
display: flex;
|
|
493
512
|
align-items: center;
|
|
@@ -495,9 +514,9 @@
|
|
|
495
514
|
width: 2.5rem;
|
|
496
515
|
height: 2.5rem;
|
|
497
516
|
border-radius: 50%;
|
|
498
|
-
background-color: var(--bds-
|
|
499
|
-
color: var(--bds-
|
|
500
|
-
--bdc_color: var(--bds-
|
|
517
|
+
background-color: var(--bds-color_bg);
|
|
518
|
+
color: var(--bds-color_on-bg);
|
|
519
|
+
--bdc_color: var(--bds-color_on-bg);
|
|
501
520
|
border: none;
|
|
502
521
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
503
522
|
outline-offset: var(--bdc-outline_offset);
|
|
@@ -506,21 +525,21 @@
|
|
|
506
525
|
transition: var(--bds-animation_transition);
|
|
507
526
|
box-shadow: var(--bds-shadow_s);
|
|
508
527
|
}
|
|
509
|
-
.
|
|
528
|
+
.bds103Carousel-navBtn svg {
|
|
510
529
|
width: 1.25rem;
|
|
511
530
|
height: 1.25rem;
|
|
512
531
|
}
|
|
513
|
-
.
|
|
532
|
+
.bds103Carousel-navBtn:focus-visible {
|
|
514
533
|
outline: var(--bds-outline_default);
|
|
515
534
|
outline-offset: var(--bds-outline_offset);
|
|
516
535
|
}
|
|
517
536
|
@media (hover: hover) and (pointer: fine) {
|
|
518
|
-
.
|
|
519
|
-
background-color: var(--bds-
|
|
537
|
+
.bds103Carousel-navBtn:hover {
|
|
538
|
+
background-color: var(--bds-color_bg--subtle);
|
|
520
539
|
}
|
|
521
540
|
}
|
|
522
541
|
@media (prefers-reduced-motion: reduce) {
|
|
523
|
-
.
|
|
542
|
+
.bds103Carousel-track {
|
|
524
543
|
scroll-behavior: auto;
|
|
525
544
|
}
|
|
526
545
|
}
|
|
@@ -528,72 +547,72 @@
|
|
|
528
547
|
|
|
529
548
|
/* src/components/ui/DescriptionList/DescriptionList.module.css */
|
|
530
549
|
@layer component {
|
|
531
|
-
.
|
|
550
|
+
.bds103DescriptionList-list {
|
|
532
551
|
display: flex;
|
|
533
552
|
flex-direction: column;
|
|
534
553
|
gap: var(--bds-space_s);
|
|
535
554
|
margin: 0;
|
|
536
555
|
padding: 0;
|
|
537
556
|
font-size: var(--bds-font_size--body);
|
|
538
|
-
color: var(--bds-
|
|
557
|
+
color: var(--bds-color_on-bg);
|
|
539
558
|
}
|
|
540
|
-
.
|
|
559
|
+
.bds103DescriptionList-group {
|
|
541
560
|
display: flex;
|
|
542
561
|
flex-direction: column;
|
|
543
562
|
gap: var(--bds-space_xxs);
|
|
544
563
|
}
|
|
545
|
-
.
|
|
564
|
+
.bds103DescriptionList-term {
|
|
546
565
|
font-weight: var(--bds-font_weight--semibold);
|
|
547
|
-
color: var(--bds-
|
|
566
|
+
color: var(--bds-color_on-bg);
|
|
548
567
|
}
|
|
549
|
-
.
|
|
568
|
+
.bds103DescriptionList-details {
|
|
550
569
|
margin: 0;
|
|
551
|
-
color: var(--bds-
|
|
570
|
+
color: var(--bds-color_on-bg);
|
|
552
571
|
}
|
|
553
|
-
.
|
|
572
|
+
.bds103DescriptionList---layout_inline .bds103DescriptionList-group {
|
|
554
573
|
display: grid;
|
|
555
574
|
grid-template-columns: minmax(8rem, 1fr) 2fr;
|
|
556
575
|
gap: var(--bds-space_xs);
|
|
557
576
|
align-items: baseline;
|
|
558
577
|
}
|
|
559
|
-
.
|
|
578
|
+
.bds103DescriptionList---layout_inline .bds103DescriptionList-term {
|
|
560
579
|
grid-column: 1;
|
|
561
580
|
}
|
|
562
|
-
.
|
|
581
|
+
.bds103DescriptionList---layout_inline .bds103DescriptionList-details {
|
|
563
582
|
grid-column: 2;
|
|
564
583
|
}
|
|
565
584
|
}
|
|
566
585
|
|
|
567
586
|
/* src/components/ui/Link/Link.module.css */
|
|
568
587
|
@layer component {
|
|
569
|
-
.
|
|
570
|
-
color: var(--link_color, var(--bds-
|
|
588
|
+
.bds103Link-link {
|
|
589
|
+
color: var(--link_color, var(--bds-color_interactive_on-bg));
|
|
571
590
|
text-decoration: underline;
|
|
572
591
|
text-underline-offset: 0.2em;
|
|
573
592
|
transition: var(--bds-animation_transition);
|
|
574
593
|
cursor: pointer;
|
|
575
594
|
}
|
|
576
|
-
.
|
|
595
|
+
.bds103Link-link:focus-visible {
|
|
577
596
|
outline: var(--bds-outline_default);
|
|
578
597
|
outline-offset: var(--bds-outline_offset);
|
|
579
598
|
border-radius: var(--bds-border_radius--xs);
|
|
580
599
|
}
|
|
581
600
|
@media (hover: hover) and (pointer: fine) {
|
|
582
|
-
.
|
|
583
|
-
--link_color: var(--link_color-hover, var(--bds-
|
|
601
|
+
.bds103Link-link:hover {
|
|
602
|
+
--link_color: var(--link_color-hover, var(--bds-color_blue--strong));
|
|
584
603
|
}
|
|
585
604
|
}
|
|
586
|
-
.
|
|
587
|
-
--link_color: var(--bds-
|
|
588
|
-
--link_color-hover: var(--bds-
|
|
605
|
+
.bds103Link---variant_default {
|
|
606
|
+
--link_color: var(--bds-color_interactive_on-bg);
|
|
607
|
+
--link_color-hover: var(--bds-color_blue--strong);
|
|
589
608
|
}
|
|
590
|
-
.
|
|
591
|
-
--link_color: var(--bds-
|
|
592
|
-
--link_color-hover: var(--bds-
|
|
609
|
+
.bds103Link---variant_subtle {
|
|
610
|
+
--link_color: var(--bds-color_on-bg);
|
|
611
|
+
--link_color-hover: var(--bds-color_interactive_on-bg);
|
|
593
612
|
}
|
|
594
|
-
.
|
|
595
|
-
--link_color: var(--bds-
|
|
596
|
-
--link_color-hover: var(--bds-
|
|
613
|
+
.bds103Link---variant_standalone {
|
|
614
|
+
--link_color: var(--bds-color_interactive_on-bg);
|
|
615
|
+
--link_color-hover: var(--bds-color_blue--strong);
|
|
597
616
|
display: inline-flex;
|
|
598
617
|
align-items: center;
|
|
599
618
|
gap: var(--bds-space_xxs);
|
|
@@ -601,12 +620,12 @@
|
|
|
601
620
|
text-decoration: none;
|
|
602
621
|
}
|
|
603
622
|
@media (hover: hover) and (pointer: fine) {
|
|
604
|
-
.
|
|
623
|
+
.bds103Link---variant_standalone:hover {
|
|
605
624
|
text-decoration: underline;
|
|
606
625
|
text-underline-offset: 0.2em;
|
|
607
626
|
}
|
|
608
627
|
}
|
|
609
|
-
.
|
|
628
|
+
.bds103Link-externalLabel {
|
|
610
629
|
position: absolute;
|
|
611
630
|
width: 1px;
|
|
612
631
|
height: 1px;
|
|
@@ -621,25 +640,25 @@
|
|
|
621
640
|
|
|
622
641
|
/* src/components/ui/Loading/Loading.module.css */
|
|
623
642
|
@layer component {
|
|
624
|
-
.
|
|
643
|
+
.bds103Loading-loading {
|
|
625
644
|
display: flex;
|
|
626
645
|
justify-content: center;
|
|
627
646
|
align-items: center;
|
|
628
647
|
}
|
|
629
|
-
.
|
|
648
|
+
.bds103Loading-spinner {
|
|
630
649
|
width: 2.5em;
|
|
631
650
|
height: 2.5em;
|
|
632
|
-
border: 4px solid var(--bds-
|
|
633
|
-
border-top: 4px solid var(--bds-
|
|
651
|
+
border: 4px solid var(--bds-color_bg);
|
|
652
|
+
border-top: 4px solid var(--bds-color_interactive);
|
|
634
653
|
border-radius: 50%;
|
|
635
654
|
animation: spin 1s linear infinite;
|
|
636
655
|
}
|
|
637
|
-
.
|
|
656
|
+
.bds103Loading---size_small .bds103Loading-spinner {
|
|
638
657
|
width: 1.5em;
|
|
639
658
|
height: 1.5em;
|
|
640
659
|
border-width: 2px;
|
|
641
660
|
}
|
|
642
|
-
.
|
|
661
|
+
.bds103Loading---size_large .bds103Loading-spinner {
|
|
643
662
|
width: 4em;
|
|
644
663
|
height: 4em;
|
|
645
664
|
border-width: 6px;
|
|
@@ -654,52 +673,52 @@
|
|
|
654
673
|
}
|
|
655
674
|
}
|
|
656
675
|
@media (prefers-reduced-motion: reduce) {
|
|
657
|
-
.
|
|
676
|
+
.bds103Loading-spinner {
|
|
658
677
|
animation: none;
|
|
659
678
|
}
|
|
660
679
|
}
|
|
661
680
|
|
|
662
681
|
/* src/components/ui/NotificationBanner/NotificationBanner.module.css */
|
|
663
682
|
@layer component {
|
|
664
|
-
.
|
|
683
|
+
.bds103NotificationBanner-banner {
|
|
665
684
|
display: flex;
|
|
666
685
|
align-items: center;
|
|
667
686
|
gap: var(--bds-space_m);
|
|
668
687
|
padding: var(--bds-space_s) var(--bds-space_m);
|
|
669
|
-
background-color: var(--banner_bg, var(--bds-
|
|
670
|
-
color: var(--banner_text, var(--bds-
|
|
671
|
-
border-block-end: 3px solid var(--banner_border, var(--bds-
|
|
688
|
+
background-color: var(--banner_bg, var(--bds-color_blue--subtle));
|
|
689
|
+
color: var(--banner_text, var(--bds-color_on-blue--subtle));
|
|
690
|
+
border-block-end: 3px solid var(--banner_border, var(--bds-color_blue));
|
|
672
691
|
font-size: var(--bds-font_size--body);
|
|
673
692
|
line-height: var(--bds-font_line-height--body);
|
|
674
693
|
width: 100%;
|
|
675
694
|
}
|
|
676
|
-
.
|
|
677
|
-
--banner_bg: var(--bds-
|
|
678
|
-
--banner_text: var(--bds-
|
|
679
|
-
--banner_border: var(--bds-
|
|
695
|
+
.bds103NotificationBanner---variant_info {
|
|
696
|
+
--banner_bg: var(--bds-color_blue--subtle);
|
|
697
|
+
--banner_text: var(--bds-color_on-blue--subtle);
|
|
698
|
+
--banner_border: var(--bds-color_blue);
|
|
680
699
|
}
|
|
681
|
-
.
|
|
682
|
-
--banner_bg: var(--bds-
|
|
683
|
-
--banner_text: var(--bds-
|
|
684
|
-
--banner_border: var(--bds-
|
|
700
|
+
.bds103NotificationBanner---variant_success {
|
|
701
|
+
--banner_bg: var(--bds-color_success--subtle);
|
|
702
|
+
--banner_text: var(--bds-color_on-success--subtle);
|
|
703
|
+
--banner_border: var(--bds-color_success);
|
|
685
704
|
}
|
|
686
|
-
.
|
|
687
|
-
--banner_bg: var(--bds-
|
|
688
|
-
--banner_text: var(--bds-
|
|
689
|
-
--banner_border: var(--bds-
|
|
705
|
+
.bds103NotificationBanner---variant_warning {
|
|
706
|
+
--banner_bg: var(--bds-color_orange--subtle);
|
|
707
|
+
--banner_text: var(--bds-color_on-orange--subtle);
|
|
708
|
+
--banner_border: var(--bds-color_warning);
|
|
690
709
|
}
|
|
691
|
-
.
|
|
692
|
-
--banner_bg: rgb(from var(--bds-
|
|
693
|
-
--banner_text: var(--bds-
|
|
694
|
-
--banner_border: var(--bds-
|
|
710
|
+
.bds103NotificationBanner---variant_error {
|
|
711
|
+
--banner_bg: rgb(from var(--bds-color_error) r g b / 12%);
|
|
712
|
+
--banner_text: var(--bds-color_on-bg);
|
|
713
|
+
--banner_border: var(--bds-color_error);
|
|
695
714
|
}
|
|
696
|
-
.
|
|
715
|
+
.bds103NotificationBanner-content {
|
|
697
716
|
flex: 1;
|
|
698
717
|
}
|
|
699
|
-
.
|
|
718
|
+
.bds103NotificationBanner-action {
|
|
700
719
|
flex-shrink: 0;
|
|
701
720
|
}
|
|
702
|
-
.
|
|
721
|
+
.bds103NotificationBanner-dismiss {
|
|
703
722
|
all: unset;
|
|
704
723
|
display: flex;
|
|
705
724
|
align-items: center;
|
|
@@ -714,16 +733,16 @@
|
|
|
714
733
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
715
734
|
outline-offset: var(--bdc-outline_offset);
|
|
716
735
|
}
|
|
717
|
-
.
|
|
736
|
+
.bds103NotificationBanner-dismiss svg {
|
|
718
737
|
width: 1rem;
|
|
719
738
|
height: 1rem;
|
|
720
739
|
}
|
|
721
|
-
.
|
|
740
|
+
.bds103NotificationBanner-dismiss:focus-visible {
|
|
722
741
|
outline: var(--bds-outline_default);
|
|
723
742
|
outline-offset: var(--bds-outline_offset);
|
|
724
743
|
}
|
|
725
744
|
@media (hover: hover) and (pointer: fine) {
|
|
726
|
-
.
|
|
745
|
+
.bds103NotificationBanner-dismiss:hover {
|
|
727
746
|
opacity: 0.7;
|
|
728
747
|
}
|
|
729
748
|
}
|
|
@@ -731,11 +750,11 @@
|
|
|
731
750
|
|
|
732
751
|
/* src/components/ui/Pagination/Pagination.module.css */
|
|
733
752
|
@layer component {
|
|
734
|
-
.
|
|
753
|
+
.bds103Pagination-pagination {
|
|
735
754
|
display: flex;
|
|
736
755
|
justify-content: center;
|
|
737
756
|
}
|
|
738
|
-
.
|
|
757
|
+
.bds103Pagination-list {
|
|
739
758
|
display: flex;
|
|
740
759
|
align-items: center;
|
|
741
760
|
gap: var(--bds-space_xxs);
|
|
@@ -743,7 +762,7 @@
|
|
|
743
762
|
margin: 0;
|
|
744
763
|
padding: 0;
|
|
745
764
|
}
|
|
746
|
-
.
|
|
765
|
+
.bds103Pagination-button {
|
|
747
766
|
all: unset;
|
|
748
767
|
display: inline-flex;
|
|
749
768
|
align-items: center;
|
|
@@ -753,11 +772,11 @@
|
|
|
753
772
|
padding-inline: var(--bds-space_xs);
|
|
754
773
|
border-radius: var(--bds-border_radius--xs);
|
|
755
774
|
background-color: var(--btn_bg, transparent);
|
|
756
|
-
--bdc_color: var(--btn_border, var(--bds-
|
|
775
|
+
--bdc_color: var(--btn_border, var(--bds-color_bg--subtle));
|
|
757
776
|
border: none;
|
|
758
777
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
759
778
|
outline-offset: var(--bdc-outline_offset);
|
|
760
|
-
color: var(--btn_color, var(--bds-
|
|
779
|
+
color: var(--btn_color, var(--bds-color_on-bg));
|
|
761
780
|
font-family: var(--bds-font_family--body);
|
|
762
781
|
font-size: var(--bds-font_size--body);
|
|
763
782
|
font-variant-numeric: tabular-nums;
|
|
@@ -765,36 +784,36 @@
|
|
|
765
784
|
transition: var(--bds-animation_transition);
|
|
766
785
|
box-sizing: border-box;
|
|
767
786
|
}
|
|
768
|
-
.
|
|
787
|
+
.bds103Pagination-button:disabled {
|
|
769
788
|
opacity: 0.4;
|
|
770
789
|
cursor: not-allowed;
|
|
771
790
|
}
|
|
772
|
-
.
|
|
791
|
+
.bds103Pagination-button:focus-visible {
|
|
773
792
|
outline: var(--bds-outline_default);
|
|
774
793
|
outline-offset: var(--bds-outline_offset);
|
|
775
794
|
}
|
|
776
795
|
@media (hover: hover) and (pointer: fine) {
|
|
777
|
-
.
|
|
778
|
-
--btn_bg: var(--bds-
|
|
779
|
-
--btn_color: var(--bds-
|
|
796
|
+
.bds103Pagination-button:not(:disabled, .bds103Pagination---active):hover {
|
|
797
|
+
--btn_bg: var(--bds-color_bg--subtle);
|
|
798
|
+
--btn_color: var(--bds-color_interactive);
|
|
780
799
|
}
|
|
781
800
|
}
|
|
782
|
-
.
|
|
783
|
-
--btn_bg: var(--bds-
|
|
784
|
-
--btn_color: var(--bds-
|
|
785
|
-
--btn_border: var(--bds-
|
|
801
|
+
.bds103Pagination-button.bds103Pagination---active {
|
|
802
|
+
--btn_bg: var(--bds-color_interactive);
|
|
803
|
+
--btn_color: var(--bds-color_on-interactive);
|
|
804
|
+
--btn_border: var(--bds-color_interactive);
|
|
786
805
|
}
|
|
787
|
-
.
|
|
806
|
+
.bds103Pagination-button.bds103Pagination---nav svg {
|
|
788
807
|
width: 1rem;
|
|
789
808
|
height: 1rem;
|
|
790
809
|
}
|
|
791
|
-
.
|
|
810
|
+
.bds103Pagination-ellipsis {
|
|
792
811
|
display: inline-flex;
|
|
793
812
|
align-items: center;
|
|
794
813
|
justify-content: center;
|
|
795
814
|
min-width: 2.25rem;
|
|
796
815
|
height: 2.25rem;
|
|
797
|
-
color: var(--bds-
|
|
816
|
+
color: var(--bds-color_on-bg--subtle);
|
|
798
817
|
font-size: var(--bds-font_size--body);
|
|
799
818
|
user-select: none;
|
|
800
819
|
}
|
|
@@ -802,46 +821,46 @@
|
|
|
802
821
|
|
|
803
822
|
/* src/components/ui/Progress/Progress.module.css */
|
|
804
823
|
@layer component {
|
|
805
|
-
.
|
|
824
|
+
.bds103Progress-container {
|
|
806
825
|
display: flex;
|
|
807
826
|
flex-direction: column;
|
|
808
827
|
gap: var(--bds-space_xxs);
|
|
809
828
|
width: 100%;
|
|
810
829
|
}
|
|
811
|
-
.
|
|
830
|
+
.bds103Progress-labelRow {
|
|
812
831
|
display: flex;
|
|
813
832
|
justify-content: space-between;
|
|
814
833
|
align-items: baseline;
|
|
815
834
|
font-size: var(--bds-font_size--body--s);
|
|
816
|
-
color: var(--bds-
|
|
835
|
+
color: var(--bds-color_on-bg);
|
|
817
836
|
}
|
|
818
|
-
.
|
|
837
|
+
.bds103Progress-value {
|
|
819
838
|
font-variant-numeric: tabular-nums;
|
|
820
839
|
}
|
|
821
|
-
.
|
|
840
|
+
.bds103Progress-track {
|
|
822
841
|
width: 100%;
|
|
823
842
|
height: var(--progress_height, var(--bds-space_xs));
|
|
824
|
-
background-color: var(--bds-
|
|
843
|
+
background-color: var(--bds-color_bg--subtle);
|
|
825
844
|
border-radius: 999px;
|
|
826
845
|
overflow: hidden;
|
|
827
846
|
}
|
|
828
|
-
.
|
|
847
|
+
.bds103Progress-track.bds103Progress---size_small {
|
|
829
848
|
--progress_height: var(--bds-space_xxs);
|
|
830
849
|
}
|
|
831
|
-
.
|
|
850
|
+
.bds103Progress-track.bds103Progress---size_medium {
|
|
832
851
|
--progress_height: var(--bds-space_xs);
|
|
833
852
|
}
|
|
834
|
-
.
|
|
853
|
+
.bds103Progress-track.bds103Progress---size_large {
|
|
835
854
|
--progress_height: var(--bds-space_s);
|
|
836
855
|
}
|
|
837
|
-
.
|
|
856
|
+
.bds103Progress-fill {
|
|
838
857
|
height: 100%;
|
|
839
|
-
background-color: var(--progress_color-active, var(--bds-
|
|
858
|
+
background-color: var(--progress_color-active, var(--bds-color_green));
|
|
840
859
|
border-radius: 999px;
|
|
841
860
|
transition: width var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
842
861
|
}
|
|
843
862
|
@media (prefers-reduced-motion: reduce) {
|
|
844
|
-
.
|
|
863
|
+
.bds103Progress-fill {
|
|
845
864
|
transition: none;
|
|
846
865
|
}
|
|
847
866
|
}
|
|
@@ -849,41 +868,41 @@
|
|
|
849
868
|
|
|
850
869
|
/* src/components/ui/ProgressCircle/ProgressCircle.module.css */
|
|
851
870
|
@layer component {
|
|
852
|
-
.
|
|
871
|
+
.bds103ProgressCircle-wrapper {
|
|
853
872
|
position: relative;
|
|
854
873
|
display: inline-flex;
|
|
855
874
|
align-items: center;
|
|
856
875
|
justify-content: center;
|
|
857
876
|
}
|
|
858
|
-
.
|
|
877
|
+
.bds103ProgressCircle-svg {
|
|
859
878
|
display: block;
|
|
860
879
|
}
|
|
861
|
-
.
|
|
862
|
-
stroke: var(--bds-
|
|
880
|
+
.bds103ProgressCircle-track {
|
|
881
|
+
stroke: var(--bds-color_bg--subtle);
|
|
863
882
|
}
|
|
864
|
-
.
|
|
865
|
-
stroke: var(--progressCircle_color-active, var(--bds-
|
|
883
|
+
.bds103ProgressCircle-fill {
|
|
884
|
+
stroke: var(--progressCircle_color-active, var(--bds-color_green));
|
|
866
885
|
transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
867
886
|
}
|
|
868
|
-
.
|
|
887
|
+
.bds103ProgressCircle-value {
|
|
869
888
|
position: absolute;
|
|
870
889
|
font-size: var(--bds-font_size--body--s);
|
|
871
890
|
font-weight: var(--bds-font_weight--semibold);
|
|
872
891
|
font-variant-numeric: tabular-nums;
|
|
873
|
-
color: var(--bds-
|
|
892
|
+
color: var(--bds-color_on-bg);
|
|
874
893
|
line-height: 1;
|
|
875
894
|
}
|
|
876
|
-
.
|
|
895
|
+
.bds103ProgressCircle---size_small .bds103ProgressCircle-value {
|
|
877
896
|
font-size: 0.5rem;
|
|
878
897
|
}
|
|
879
|
-
.
|
|
898
|
+
.bds103ProgressCircle---size_medium .bds103ProgressCircle-value {
|
|
880
899
|
font-size: var(--bds-font_size--body--s);
|
|
881
900
|
}
|
|
882
|
-
.
|
|
901
|
+
.bds103ProgressCircle---size_large .bds103ProgressCircle-value {
|
|
883
902
|
font-size: var(--bds-font_size--body);
|
|
884
903
|
}
|
|
885
904
|
@media (prefers-reduced-motion: reduce) {
|
|
886
|
-
.
|
|
905
|
+
.bds103ProgressCircle-fill {
|
|
887
906
|
transition: none;
|
|
888
907
|
}
|
|
889
908
|
}
|
|
@@ -891,16 +910,16 @@
|
|
|
891
910
|
|
|
892
911
|
/* src/components/ui/Separator/Separator.module.css */
|
|
893
912
|
@layer component {
|
|
894
|
-
.
|
|
913
|
+
.bds103Separator-separator {
|
|
895
914
|
border: none;
|
|
896
|
-
background-color: var(--separator_color, var(--bds-
|
|
915
|
+
background-color: var(--separator_color, var(--bds-color_on-bg));
|
|
897
916
|
}
|
|
898
|
-
.
|
|
917
|
+
.bds103Separator-separator.bds103Separator---horizontal {
|
|
899
918
|
display: block;
|
|
900
919
|
width: 100%;
|
|
901
920
|
height: var(--separator_thickness, 1px);
|
|
902
921
|
}
|
|
903
|
-
.
|
|
922
|
+
.bds103Separator-separator.bds103Separator---vertical {
|
|
904
923
|
display: inline-block;
|
|
905
924
|
width: var(--separator_thickness, 1px);
|
|
906
925
|
align-self: stretch;
|
|
@@ -909,13 +928,13 @@
|
|
|
909
928
|
|
|
910
929
|
/* src/components/ui/Skeleton/Skeleton.module.css */
|
|
911
930
|
@layer component {
|
|
912
|
-
.
|
|
931
|
+
.bds103Skeleton-skeleton {
|
|
913
932
|
background:
|
|
914
933
|
linear-gradient(
|
|
915
934
|
90deg,
|
|
916
|
-
var(--bds-
|
|
917
|
-
var(--bds-
|
|
918
|
-
var(--bds-
|
|
935
|
+
var(--bds-color_grey--subtle) 25%,
|
|
936
|
+
var(--bds-color_bg) 50%,
|
|
937
|
+
var(--bds-color_grey--subtle) 75%);
|
|
919
938
|
background-size: 200% 100%;
|
|
920
939
|
animation: shimmer 1.5s infinite;
|
|
921
940
|
border-radius: var(--bds-border_radius--xs);
|
|
@@ -933,32 +952,32 @@
|
|
|
933
952
|
|
|
934
953
|
/* src/components/ui/SkipLink/SkipLink.module.css */
|
|
935
954
|
@layer component {
|
|
936
|
-
.
|
|
955
|
+
.bds103SkipLink-skipLink {
|
|
937
956
|
position: absolute;
|
|
938
957
|
inset-block-start: var(--bds-space_s);
|
|
939
958
|
inset-inline-start: var(--bds-space_s);
|
|
940
959
|
z-index: var(--z_overlay);
|
|
941
960
|
padding: var(--bds-space_xs) var(--bds-space_m);
|
|
942
|
-
background-color: var(--bds-
|
|
943
|
-
color: var(--bds-
|
|
961
|
+
background-color: var(--bds-color_bg);
|
|
962
|
+
color: var(--bds-color_on-bg);
|
|
944
963
|
font-size: var(--bds-font_size--body);
|
|
945
964
|
font-weight: var(--bds-font_weight--semibold);
|
|
946
965
|
border-radius: var(--bds-border_radius--s);
|
|
947
966
|
text-decoration: none;
|
|
948
|
-
--bdc_color: var(--color_focus, var(--bds-
|
|
967
|
+
--bdc_color: var(--color_focus, var(--bds-color_interactive));
|
|
949
968
|
border: var(--skip-link_border, none);
|
|
950
969
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
951
970
|
outline-offset: var(--bdc-outline_offset);
|
|
952
971
|
transform: translateY(-200%);
|
|
953
972
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
954
973
|
}
|
|
955
|
-
.
|
|
974
|
+
.bds103SkipLink-skipLink:focus-visible {
|
|
956
975
|
transform: translateY(0);
|
|
957
976
|
outline: var(--bds-outline_default);
|
|
958
977
|
outline-offset: var(--bds-outline_offset);
|
|
959
978
|
}
|
|
960
979
|
@media (prefers-reduced-motion: reduce) {
|
|
961
|
-
.
|
|
980
|
+
.bds103SkipLink-skipLink {
|
|
962
981
|
transition: none;
|
|
963
982
|
}
|
|
964
983
|
}
|
|
@@ -966,45 +985,45 @@
|
|
|
966
985
|
|
|
967
986
|
/* src/components/ui/Table/Table.module.css */
|
|
968
987
|
@layer component {
|
|
969
|
-
.
|
|
988
|
+
.bds103Table-wrapper {
|
|
970
989
|
width: 100%;
|
|
971
990
|
overflow-x: auto;
|
|
972
991
|
border: var(--table_border, none);
|
|
973
|
-
--bdc_color: var(--bds-
|
|
992
|
+
--bdc_color: var(--bds-color_bg--subtle);
|
|
974
993
|
--bdc-outline_radius: var(--bds-border_radius--s);
|
|
975
994
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
976
995
|
outline-offset: var(--bdc-outline_offset);
|
|
977
996
|
border-radius: var(--table_radius, var(--bdc-outline_radius));
|
|
978
997
|
}
|
|
979
|
-
.
|
|
998
|
+
.bds103Table-table {
|
|
980
999
|
width: 100%;
|
|
981
1000
|
border-collapse: collapse;
|
|
982
1001
|
font-size: var(--bds-font_size--body);
|
|
983
1002
|
font-family: var(--bds-font_family--body);
|
|
984
1003
|
}
|
|
985
|
-
.
|
|
1004
|
+
.bds103Table-caption {
|
|
986
1005
|
caption-side: top;
|
|
987
1006
|
text-align: start;
|
|
988
1007
|
padding: var(--bds-space_s) var(--bds-space_m);
|
|
989
1008
|
font-weight: var(--bds-font_weight--semibold);
|
|
990
|
-
color: var(--bds-
|
|
1009
|
+
color: var(--bds-color_on-bg);
|
|
991
1010
|
}
|
|
992
|
-
.
|
|
993
|
-
background-color: var(--bds-
|
|
1011
|
+
.bds103Table-thead {
|
|
1012
|
+
background-color: var(--bds-color_bg--subtle);
|
|
994
1013
|
}
|
|
995
|
-
.
|
|
1014
|
+
.bds103Table-th {
|
|
996
1015
|
padding: var(--bds-space_s) var(--bds-space_m);
|
|
997
1016
|
text-align: start;
|
|
998
1017
|
font-weight: var(--bds-font_weight--semibold);
|
|
999
1018
|
font-size: var(--bds-font_size--body--s);
|
|
1000
|
-
color: var(--bds-
|
|
1019
|
+
color: var(--bds-color_on-bg--subtle);
|
|
1001
1020
|
white-space: nowrap;
|
|
1002
|
-
border-bottom: 1px solid var(--bds-
|
|
1021
|
+
border-bottom: 1px solid var(--bds-color_bg--subtle);
|
|
1003
1022
|
}
|
|
1004
|
-
.
|
|
1023
|
+
.bds103Table-th.bds103Table---sortable {
|
|
1005
1024
|
padding: 0;
|
|
1006
1025
|
}
|
|
1007
|
-
.
|
|
1026
|
+
.bds103Table-sortButton {
|
|
1008
1027
|
all: unset;
|
|
1009
1028
|
display: flex;
|
|
1010
1029
|
align-items: center;
|
|
@@ -1012,53 +1031,53 @@
|
|
|
1012
1031
|
padding: var(--bds-space_s) var(--bds-space_m);
|
|
1013
1032
|
width: 100%;
|
|
1014
1033
|
cursor: pointer;
|
|
1015
|
-
color: var(--bds-
|
|
1034
|
+
color: var(--bds-color_on-bg--subtle);
|
|
1016
1035
|
font-weight: var(--bds-font_weight--semibold);
|
|
1017
1036
|
font-size: var(--bds-font_size--body--s);
|
|
1018
1037
|
transition: var(--bds-animation_transition);
|
|
1019
1038
|
box-sizing: border-box;
|
|
1020
1039
|
}
|
|
1021
|
-
.
|
|
1040
|
+
.bds103Table-sortButton:focus-visible {
|
|
1022
1041
|
outline: var(--bds-outline_default);
|
|
1023
1042
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
1024
1043
|
}
|
|
1025
1044
|
@media (hover: hover) and (pointer: fine) {
|
|
1026
|
-
.
|
|
1027
|
-
color: var(--bds-
|
|
1045
|
+
.bds103Table-sortButton:hover {
|
|
1046
|
+
color: var(--bds-color_on-bg);
|
|
1028
1047
|
}
|
|
1029
1048
|
}
|
|
1030
|
-
.
|
|
1049
|
+
.bds103Table-sortIcon {
|
|
1031
1050
|
width: 1rem;
|
|
1032
1051
|
height: 1rem;
|
|
1033
1052
|
opacity: 0.4;
|
|
1034
1053
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing), opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1035
1054
|
}
|
|
1036
|
-
.
|
|
1055
|
+
.bds103Table-sortIcon.bds103Table---sort-active {
|
|
1037
1056
|
opacity: 1;
|
|
1038
|
-
color: var(--bds-
|
|
1057
|
+
color: var(--bds-color_interactive);
|
|
1039
1058
|
}
|
|
1040
|
-
.
|
|
1059
|
+
.bds103Table-sortIcon.bds103Table---sort-desc {
|
|
1041
1060
|
transform: rotate(180deg);
|
|
1042
1061
|
}
|
|
1043
|
-
.
|
|
1044
|
-
border-bottom: 1px solid var(--bds-
|
|
1062
|
+
.bds103Table-tbody .bds103Table-tr {
|
|
1063
|
+
border-bottom: 1px solid var(--bds-color_bg--subtle);
|
|
1045
1064
|
transition: var(--bds-animation_transition);
|
|
1046
1065
|
}
|
|
1047
|
-
.
|
|
1066
|
+
.bds103Table-tbody .bds103Table-tr:last-child {
|
|
1048
1067
|
border-bottom: none;
|
|
1049
1068
|
}
|
|
1050
1069
|
@media (hover: hover) and (pointer: fine) {
|
|
1051
|
-
.
|
|
1052
|
-
background-color: var(--bds-
|
|
1070
|
+
.bds103Table-tbody .bds103Table-tr:hover {
|
|
1071
|
+
background-color: var(--bds-color_bg--subtle);
|
|
1053
1072
|
}
|
|
1054
1073
|
}
|
|
1055
|
-
.
|
|
1074
|
+
.bds103Table-td {
|
|
1056
1075
|
padding: var(--bds-space_s) var(--bds-space_m);
|
|
1057
|
-
color: var(--bds-
|
|
1076
|
+
color: var(--bds-color_on-bg);
|
|
1058
1077
|
vertical-align: middle;
|
|
1059
1078
|
}
|
|
1060
1079
|
@media (prefers-reduced-motion: reduce) {
|
|
1061
|
-
.
|
|
1080
|
+
.bds103Table-sortIcon {
|
|
1062
1081
|
transition: none;
|
|
1063
1082
|
}
|
|
1064
1083
|
}
|
|
@@ -1066,16 +1085,16 @@
|
|
|
1066
1085
|
|
|
1067
1086
|
/* src/components/ui/Tabs/Tabs.module.css */
|
|
1068
1087
|
@layer component {
|
|
1069
|
-
.
|
|
1088
|
+
.bds103Tabs-tabs {
|
|
1070
1089
|
display: flex;
|
|
1071
1090
|
flex-direction: column;
|
|
1072
1091
|
}
|
|
1073
|
-
.
|
|
1092
|
+
.bds103Tabs-tabList {
|
|
1074
1093
|
display: flex;
|
|
1075
|
-
border-bottom: 1px solid var(--bds-
|
|
1094
|
+
border-bottom: 1px solid var(--bds-color_bg--subtle);
|
|
1076
1095
|
gap: var(--bds-space_xxs);
|
|
1077
1096
|
}
|
|
1078
|
-
.
|
|
1097
|
+
.bds103Tabs-tab {
|
|
1079
1098
|
all: unset;
|
|
1080
1099
|
display: inline-flex;
|
|
1081
1100
|
align-items: center;
|
|
@@ -1083,34 +1102,34 @@
|
|
|
1083
1102
|
font-family: var(--bds-font_family--body);
|
|
1084
1103
|
font-size: var(--bds-font_size--body);
|
|
1085
1104
|
font-weight: var(--bds-font_weight--semibold);
|
|
1086
|
-
color: var(--tab_color, var(--bds-
|
|
1105
|
+
color: var(--tab_color, var(--bds-color_on-bg));
|
|
1087
1106
|
border-bottom: 2px solid var(--tab_border-color, transparent);
|
|
1088
1107
|
margin-bottom: -1px;
|
|
1089
1108
|
cursor: pointer;
|
|
1090
1109
|
transition: var(--bds-animation_transition);
|
|
1091
1110
|
}
|
|
1092
|
-
.
|
|
1093
|
-
--tab_color: var(--bds-
|
|
1094
|
-
--tab_border-color: var(--bds-
|
|
1111
|
+
.bds103Tabs-tab.bds103Tabs---active {
|
|
1112
|
+
--tab_color: var(--bds-color_interactive_on-bg);
|
|
1113
|
+
--tab_border-color: var(--bds-color_interactive);
|
|
1095
1114
|
}
|
|
1096
|
-
.
|
|
1115
|
+
.bds103Tabs-tab:disabled {
|
|
1097
1116
|
opacity: 0.4;
|
|
1098
1117
|
cursor: not-allowed;
|
|
1099
1118
|
}
|
|
1100
|
-
.
|
|
1119
|
+
.bds103Tabs-tab:focus-visible {
|
|
1101
1120
|
outline: var(--bds-outline_default);
|
|
1102
1121
|
outline-offset: var(--bds-outline_offset);
|
|
1103
1122
|
border-radius: var(--bds-border_radius--xs);
|
|
1104
1123
|
}
|
|
1105
1124
|
@media (hover: hover) and (pointer: fine) {
|
|
1106
|
-
.
|
|
1107
|
-
--tab_color: var(--bds-
|
|
1125
|
+
.bds103Tabs-tab:not(:disabled, .bds103Tabs---active):hover {
|
|
1126
|
+
--tab_color: var(--bds-color_interactive_on-bg);
|
|
1108
1127
|
}
|
|
1109
1128
|
}
|
|
1110
|
-
.
|
|
1129
|
+
.bds103Tabs-panel {
|
|
1111
1130
|
padding-block-start: var(--bds-space_m);
|
|
1112
1131
|
}
|
|
1113
|
-
.
|
|
1132
|
+
.bds103Tabs-panel:focus-visible {
|
|
1114
1133
|
outline: var(--bds-outline_default);
|
|
1115
1134
|
outline-offset: var(--bds-outline_offset);
|
|
1116
1135
|
}
|
|
@@ -1118,18 +1137,18 @@
|
|
|
1118
1137
|
|
|
1119
1138
|
/* src/components/ui/Tooltip/Tooltip.module.css */
|
|
1120
1139
|
@layer component {
|
|
1121
|
-
.
|
|
1140
|
+
.bds103Tooltip-wrapper {
|
|
1122
1141
|
position: relative;
|
|
1123
1142
|
display: inline-flex;
|
|
1124
1143
|
align-items: center;
|
|
1125
1144
|
}
|
|
1126
|
-
.
|
|
1145
|
+
.bds103Tooltip-tooltip {
|
|
1127
1146
|
position: absolute;
|
|
1128
1147
|
z-index: var(--bds-z-index_popover);
|
|
1129
1148
|
padding: var(--bds-space_xxs) var(--bds-space_xs);
|
|
1130
1149
|
border-radius: var(--bds-border_radius--xs);
|
|
1131
|
-
background-color: var(--tooltip_bg, var(--bds-
|
|
1132
|
-
color: var(--tooltip_text, var(--bds-
|
|
1150
|
+
background-color: var(--tooltip_bg, var(--bds-color_on-bg));
|
|
1151
|
+
color: var(--tooltip_text, var(--bds-color_bg));
|
|
1133
1152
|
font-size: var(--bds-font_size--body--s);
|
|
1134
1153
|
line-height: var(--bds-font_line-height--body);
|
|
1135
1154
|
white-space: nowrap;
|
|
@@ -1138,33 +1157,33 @@
|
|
|
1138
1157
|
opacity: 0;
|
|
1139
1158
|
transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1140
1159
|
}
|
|
1141
|
-
.
|
|
1142
|
-
.
|
|
1160
|
+
.bds103Tooltip-wrapper:hover .bds103Tooltip-tooltip,
|
|
1161
|
+
.bds103Tooltip-wrapper:focus-within .bds103Tooltip-tooltip {
|
|
1143
1162
|
visibility: visible;
|
|
1144
1163
|
opacity: 1;
|
|
1145
1164
|
}
|
|
1146
|
-
.
|
|
1165
|
+
.bds103Tooltip---placement_top {
|
|
1147
1166
|
bottom: calc(100% + var(--bds-space_xs));
|
|
1148
1167
|
left: 50%;
|
|
1149
1168
|
transform: translateX(-50%);
|
|
1150
1169
|
}
|
|
1151
|
-
.
|
|
1170
|
+
.bds103Tooltip---placement_bottom {
|
|
1152
1171
|
top: calc(100% + var(--bds-space_xs));
|
|
1153
1172
|
left: 50%;
|
|
1154
1173
|
transform: translateX(-50%);
|
|
1155
1174
|
}
|
|
1156
|
-
.
|
|
1175
|
+
.bds103Tooltip---placement_left {
|
|
1157
1176
|
right: calc(100% + var(--bds-space_xs));
|
|
1158
1177
|
top: 50%;
|
|
1159
1178
|
transform: translateY(-50%);
|
|
1160
1179
|
}
|
|
1161
|
-
.
|
|
1180
|
+
.bds103Tooltip---placement_right {
|
|
1162
1181
|
left: calc(100% + var(--bds-space_xs));
|
|
1163
1182
|
top: 50%;
|
|
1164
1183
|
transform: translateY(-50%);
|
|
1165
1184
|
}
|
|
1166
1185
|
@media (prefers-reduced-motion: reduce) {
|
|
1167
|
-
.
|
|
1186
|
+
.bds103Tooltip-tooltip {
|
|
1168
1187
|
transition: none;
|
|
1169
1188
|
}
|
|
1170
1189
|
}
|
|
@@ -1172,34 +1191,34 @@
|
|
|
1172
1191
|
|
|
1173
1192
|
/* src/components/ui/Typography/Typography.module.css */
|
|
1174
1193
|
@layer component {
|
|
1175
|
-
.
|
|
1194
|
+
.bds103Typography-typography {
|
|
1176
1195
|
margin: 0;
|
|
1177
1196
|
font-family: var(--bds-font_family--body);
|
|
1178
|
-
color: var(--typography_color, var(--bds-
|
|
1197
|
+
color: var(--typography_color, var(--bds-color_on-bg));
|
|
1179
1198
|
}
|
|
1180
|
-
.
|
|
1199
|
+
.bds103Typography---h1 {
|
|
1181
1200
|
font-family: var(--bds-font_family--heading);
|
|
1182
1201
|
font-size: var(--bds-font_size--heading-1);
|
|
1183
1202
|
font-weight: var(--bds-font_weight--bold);
|
|
1184
1203
|
line-height: var(--bds-font_line-height--heading);
|
|
1185
1204
|
}
|
|
1186
|
-
.
|
|
1205
|
+
.bds103Typography---h2 {
|
|
1187
1206
|
font-family: var(--bds-font_family--heading);
|
|
1188
1207
|
font-size: var(--bds-font_size--heading-2);
|
|
1189
1208
|
font-weight: var(--bds-font_weight--semibold);
|
|
1190
1209
|
line-height: var(--bds-font_line-height--heading);
|
|
1191
1210
|
}
|
|
1192
|
-
.
|
|
1211
|
+
.bds103Typography---h3 {
|
|
1193
1212
|
font-family: var(--bds-font_family--heading);
|
|
1194
1213
|
font-size: var(--bds-font_size--heading-3);
|
|
1195
1214
|
font-weight: var(--bds-font_weight--semibold);
|
|
1196
1215
|
line-height: var(--bds-font_line-height--heading);
|
|
1197
1216
|
}
|
|
1198
|
-
.
|
|
1217
|
+
.bds103Typography---body {
|
|
1199
1218
|
font-size: var(--bds-font_size--body);
|
|
1200
1219
|
line-height: var(--bds-font_line-height--body);
|
|
1201
1220
|
}
|
|
1202
|
-
.
|
|
1221
|
+
.bds103Typography---body_s {
|
|
1203
1222
|
font-size: var(--bds-font_size--body--s);
|
|
1204
1223
|
line-height: var(--bds-font_line-height--body);
|
|
1205
1224
|
}
|
|
@@ -1219,20 +1238,20 @@
|
|
|
1219
1238
|
@keyframes pulse {
|
|
1220
1239
|
0% {
|
|
1221
1240
|
transform: scale(1);
|
|
1222
|
-
box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-
|
|
1241
|
+
box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 50%);
|
|
1223
1242
|
}
|
|
1224
1243
|
70% {
|
|
1225
1244
|
transform: scale(1.01);
|
|
1226
|
-
box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-
|
|
1245
|
+
box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%);
|
|
1227
1246
|
}
|
|
1228
1247
|
100% {
|
|
1229
1248
|
transform: scale(1);
|
|
1230
|
-
box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-
|
|
1249
|
+
box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%);
|
|
1231
1250
|
}
|
|
1232
1251
|
}
|
|
1233
1252
|
@layer component {
|
|
1234
|
-
.
|
|
1235
|
-
.
|
|
1253
|
+
.bds103Button-button,
|
|
1254
|
+
.bds103Button-button[href] {
|
|
1236
1255
|
all: unset;
|
|
1237
1256
|
position: relative;
|
|
1238
1257
|
font: inherit;
|
|
@@ -1248,8 +1267,8 @@
|
|
|
1248
1267
|
font-size: var(--button_font-size, inherit);
|
|
1249
1268
|
white-space: nowrap;
|
|
1250
1269
|
line-height: 1;
|
|
1251
|
-
--button_color: var(--bds-
|
|
1252
|
-
--button_on-color: var(--bds-
|
|
1270
|
+
--button_color: var(--bds-color_green);
|
|
1271
|
+
--button_on-color: var(--bds-color_on-green);
|
|
1253
1272
|
background-color: var(--button_bg, var(--button_color));
|
|
1254
1273
|
color: var(--button_text, var(--button_on-color));
|
|
1255
1274
|
border: var(--button_border, none);
|
|
@@ -1258,75 +1277,75 @@
|
|
|
1258
1277
|
outline-offset: var(--bdc-outline_offset);
|
|
1259
1278
|
transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1260
1279
|
}
|
|
1261
|
-
.
|
|
1280
|
+
.bds103Button-button.bds103Button---default {
|
|
1262
1281
|
}
|
|
1263
|
-
.
|
|
1282
|
+
.bds103Button-button.bds103Button---ghost {
|
|
1264
1283
|
--button_bg: transparent;
|
|
1265
1284
|
--button_text: var(--button_color);
|
|
1266
1285
|
--bdc_color: var(--button_color);
|
|
1267
1286
|
}
|
|
1268
|
-
.
|
|
1287
|
+
.bds103Button-button.bds103Button---size_small {
|
|
1269
1288
|
--button_height: 2.25em;
|
|
1270
1289
|
--button_font-size: var(--bds-font_size--body--s);
|
|
1271
1290
|
--button_border_radius--s: var(--bds-border_radius--xs);
|
|
1272
1291
|
padding-inline: var(--bds-space_m);
|
|
1273
1292
|
}
|
|
1274
|
-
.
|
|
1293
|
+
.bds103Button-button.bds103Button---size_medium {
|
|
1275
1294
|
--button_height: 3em;
|
|
1276
1295
|
padding-inline: var(--bds-space_l);
|
|
1277
1296
|
}
|
|
1278
|
-
.
|
|
1297
|
+
.bds103Button-button.bds103Button---size_large {
|
|
1279
1298
|
--button_font-size: var(--bds-font_size--heading-3);
|
|
1280
1299
|
--button_border_radius--s: var(--bds-border_radius--m);
|
|
1281
1300
|
padding-inline: var(--bds-space_xl);
|
|
1282
1301
|
}
|
|
1283
|
-
.
|
|
1302
|
+
.bds103Button-button.bds103Button---hasPulse {
|
|
1284
1303
|
animation: pulse 3s infinite;
|
|
1285
1304
|
}
|
|
1286
|
-
.
|
|
1305
|
+
.bds103Button-button[href] {
|
|
1287
1306
|
text-decoration: none;
|
|
1288
1307
|
}
|
|
1289
|
-
.
|
|
1308
|
+
.bds103Button-button svg {
|
|
1290
1309
|
--icon__stroke: currentcolor;
|
|
1291
1310
|
fill: currentcolor;
|
|
1292
1311
|
color: currentcolor;
|
|
1293
1312
|
flex-shrink: 0;
|
|
1294
1313
|
}
|
|
1295
|
-
.
|
|
1314
|
+
.bds103Button-iconStart {
|
|
1296
1315
|
display: flex;
|
|
1297
1316
|
align-items: center;
|
|
1298
1317
|
margin-inline-start: calc(var(--bds-space_s) * -1);
|
|
1299
1318
|
transition: var(--bds-animation_transition);
|
|
1300
1319
|
}
|
|
1301
|
-
.
|
|
1320
|
+
.bds103Button-iconEnd {
|
|
1302
1321
|
display: flex;
|
|
1303
1322
|
align-items: center;
|
|
1304
1323
|
margin-inline-end: calc(var(--bds-space_s) * -1);
|
|
1305
1324
|
transition: var(--bds-animation_transition);
|
|
1306
1325
|
}
|
|
1307
1326
|
@media (hover: hover) and (pointer: fine) {
|
|
1308
|
-
.
|
|
1327
|
+
.bds103Button-button:hover .bds103Button-iconStart svg {
|
|
1309
1328
|
animation: fadeZoom 2s ease-out infinite;
|
|
1310
1329
|
}
|
|
1311
|
-
.
|
|
1330
|
+
.bds103Button-button:hover .bds103Button-iconEnd svg {
|
|
1312
1331
|
animation: fadeZoom 2s ease-out infinite;
|
|
1313
1332
|
}
|
|
1314
1333
|
}
|
|
1315
|
-
.
|
|
1334
|
+
.bds103Button-button:focus-visible {
|
|
1316
1335
|
outline: var(--bds-outline_default);
|
|
1317
1336
|
outline-offset: var(--bds-outline_offset);
|
|
1318
1337
|
border-radius: var(--bds-border_radius--s);
|
|
1319
1338
|
}
|
|
1320
1339
|
@media (hover: hover) and (pointer: fine) {
|
|
1321
|
-
.
|
|
1322
|
-
--button_bg: var(--bds-
|
|
1323
|
-
--button_text: var(--bds-
|
|
1324
|
-
--button_pulse-color: var(--bds-
|
|
1340
|
+
.bds103Button-button.bds103Button---default:hover {
|
|
1341
|
+
--button_bg: var(--bds-color_bg);
|
|
1342
|
+
--button_text: var(--bds-color_interactive);
|
|
1343
|
+
--button_pulse-color: var(--bds-color_interactive);
|
|
1325
1344
|
--bdc_color: currentcolor;
|
|
1326
1345
|
}
|
|
1327
1346
|
}
|
|
1328
1347
|
@media (hover: hover) and (pointer: fine) {
|
|
1329
|
-
.
|
|
1348
|
+
.bds103Button-button.bds103Button---ghost:hover {
|
|
1330
1349
|
--button_bg: var(--button_color);
|
|
1331
1350
|
--button_text: var(--button_on-color);
|
|
1332
1351
|
--bdc_color: transparent;
|
|
@@ -1336,7 +1355,7 @@
|
|
|
1336
1355
|
|
|
1337
1356
|
/* src/components/interaction/Command/Command.module.css */
|
|
1338
1357
|
@layer component {
|
|
1339
|
-
.
|
|
1358
|
+
.bds103Command-dialog {
|
|
1340
1359
|
padding: 0;
|
|
1341
1360
|
border: none;
|
|
1342
1361
|
border-radius: var(--bds-border_radius--m);
|
|
@@ -1346,15 +1365,15 @@
|
|
|
1346
1365
|
overflow: visible;
|
|
1347
1366
|
margin-block-start: 10vh;
|
|
1348
1367
|
}
|
|
1349
|
-
.
|
|
1368
|
+
.bds103Command-dialog::backdrop {
|
|
1350
1369
|
background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
|
|
1351
1370
|
backdrop-filter: blur(3px);
|
|
1352
1371
|
}
|
|
1353
|
-
.
|
|
1372
|
+
.bds103Command-palette {
|
|
1354
1373
|
display: flex;
|
|
1355
1374
|
flex-direction: column;
|
|
1356
|
-
background-color: var(--command_color, var(--bds-
|
|
1357
|
-
color: var(--command_on-color, var(--bds-
|
|
1375
|
+
background-color: var(--command_color, var(--bds-color_bg));
|
|
1376
|
+
color: var(--command_on-color, var(--bds-color_on-bg));
|
|
1358
1377
|
border-radius: var(--bds-border_radius--m);
|
|
1359
1378
|
box-shadow: var(--command_shadow, var(--bds-shadow_xl));
|
|
1360
1379
|
overflow: hidden;
|
|
@@ -1365,7 +1384,7 @@
|
|
|
1365
1384
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
1366
1385
|
outline-offset: var(--bdc-outline_offset);
|
|
1367
1386
|
}
|
|
1368
|
-
.
|
|
1387
|
+
.bds103Command-searchRow {
|
|
1369
1388
|
display: flex;
|
|
1370
1389
|
align-items: center;
|
|
1371
1390
|
gap: var(--bds-space_xs);
|
|
@@ -1373,28 +1392,28 @@
|
|
|
1373
1392
|
border-block-end: 1px solid currentcolor;
|
|
1374
1393
|
flex-shrink: 0;
|
|
1375
1394
|
}
|
|
1376
|
-
.
|
|
1395
|
+
.bds103Command-searchIcon {
|
|
1377
1396
|
width: 1.25rem;
|
|
1378
1397
|
height: 1.25rem;
|
|
1379
|
-
color: var(--bds-
|
|
1398
|
+
color: var(--bds-color_on-bg);
|
|
1380
1399
|
flex-shrink: 0;
|
|
1381
1400
|
}
|
|
1382
|
-
.
|
|
1401
|
+
.bds103Command-search {
|
|
1383
1402
|
flex: 1;
|
|
1384
1403
|
border: none;
|
|
1385
1404
|
outline: none;
|
|
1386
1405
|
font-family: var(--bds-font_family--body);
|
|
1387
1406
|
font-size: var(--bds-font_size--body);
|
|
1388
|
-
color: var(--bds-
|
|
1407
|
+
color: var(--bds-color_on-bg);
|
|
1389
1408
|
background: transparent;
|
|
1390
1409
|
min-width: 0;
|
|
1391
1410
|
}
|
|
1392
|
-
.
|
|
1393
|
-
color: var(--bds-
|
|
1411
|
+
.bds103Command-search::placeholder {
|
|
1412
|
+
color: var(--bds-color_on-bg);
|
|
1394
1413
|
}
|
|
1395
|
-
.
|
|
1414
|
+
.bds103Command-escHint {
|
|
1396
1415
|
font-size: var(--bds-font_size--body--s);
|
|
1397
|
-
color: var(--bds-
|
|
1416
|
+
color: var(--bds-color_on-bg);
|
|
1398
1417
|
border-radius: var(--bds-border_radius--xs);
|
|
1399
1418
|
padding: 0.1em 0.4em;
|
|
1400
1419
|
flex-shrink: 0;
|
|
@@ -1403,26 +1422,26 @@
|
|
|
1403
1422
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
1404
1423
|
outline-offset: var(--bdc-outline_offset);
|
|
1405
1424
|
}
|
|
1406
|
-
.
|
|
1425
|
+
.bds103Command-list {
|
|
1407
1426
|
overflow-y: auto;
|
|
1408
1427
|
list-style: none;
|
|
1409
1428
|
margin: 0;
|
|
1410
1429
|
padding: var(--bds-space_xs) 0;
|
|
1411
1430
|
}
|
|
1412
|
-
.
|
|
1431
|
+
.bds103Command-groupList {
|
|
1413
1432
|
list-style: none;
|
|
1414
1433
|
margin: 0;
|
|
1415
1434
|
padding: 0;
|
|
1416
1435
|
}
|
|
1417
|
-
.
|
|
1436
|
+
.bds103Command-group {
|
|
1418
1437
|
padding: var(--bds-space_xs) var(--bds-space_m);
|
|
1419
1438
|
font-size: var(--bds-font_size--body--s);
|
|
1420
1439
|
font-weight: var(--bds-font_weight--semibold);
|
|
1421
|
-
color: var(--bds-
|
|
1440
|
+
color: var(--bds-color_on-bg);
|
|
1422
1441
|
text-transform: uppercase;
|
|
1423
1442
|
letter-spacing: 0.05em;
|
|
1424
1443
|
}
|
|
1425
|
-
.
|
|
1444
|
+
.bds103Command-item {
|
|
1426
1445
|
display: flex;
|
|
1427
1446
|
align-items: center;
|
|
1428
1447
|
gap: var(--bds-space_s);
|
|
@@ -1430,21 +1449,21 @@
|
|
|
1430
1449
|
cursor: pointer;
|
|
1431
1450
|
transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1432
1451
|
}
|
|
1433
|
-
.
|
|
1434
|
-
background-color: var(--bds-
|
|
1452
|
+
.bds103Command-itemActive {
|
|
1453
|
+
background-color: var(--bds-color_bg--subtle);
|
|
1435
1454
|
}
|
|
1436
|
-
.
|
|
1455
|
+
.bds103Command-itemLabel {
|
|
1437
1456
|
flex: 1;
|
|
1438
1457
|
font-size: var(--bds-font_size--body);
|
|
1439
|
-
color: var(--bds-
|
|
1458
|
+
color: var(--bds-color_on-bg);
|
|
1440
1459
|
}
|
|
1441
|
-
.
|
|
1460
|
+
.bds103Command-itemDesc {
|
|
1442
1461
|
font-size: var(--bds-font_size--body--s);
|
|
1443
|
-
color: var(--bds-
|
|
1462
|
+
color: var(--bds-color_on-bg);
|
|
1444
1463
|
}
|
|
1445
|
-
.
|
|
1464
|
+
.bds103Command-shortcut {
|
|
1446
1465
|
font-size: var(--bds-font_size--body--s);
|
|
1447
|
-
color: var(--bds-
|
|
1466
|
+
color: var(--bds-color_on-bg);
|
|
1448
1467
|
border-radius: var(--bds-border_radius--xs);
|
|
1449
1468
|
padding: 0.1em 0.4em;
|
|
1450
1469
|
--bdc_color: currentcolor;
|
|
@@ -1452,17 +1471,17 @@
|
|
|
1452
1471
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
1453
1472
|
outline-offset: var(--bdc-outline_offset);
|
|
1454
1473
|
}
|
|
1455
|
-
.
|
|
1474
|
+
.bds103Command-empty {
|
|
1456
1475
|
padding: var(--bds-space_l) var(--bds-space_m);
|
|
1457
1476
|
text-align: center;
|
|
1458
|
-
color: var(--bds-
|
|
1477
|
+
color: var(--bds-color_on-bg);
|
|
1459
1478
|
font-size: var(--bds-font_size--body);
|
|
1460
1479
|
}
|
|
1461
1480
|
}
|
|
1462
1481
|
|
|
1463
1482
|
/* src/components/interaction/Dialog/Dialog.module.css */
|
|
1464
1483
|
@layer component {
|
|
1465
|
-
.
|
|
1484
|
+
.bds103Dialog-dialog {
|
|
1466
1485
|
font-size: var(--bds-font_size--body--s);
|
|
1467
1486
|
border: var(--dialog_border, none);
|
|
1468
1487
|
--bdc_color: currentcolor;
|
|
@@ -1471,26 +1490,26 @@
|
|
|
1471
1490
|
outline-offset: var(--bdc-outline_offset);
|
|
1472
1491
|
border-radius: var(--dialog_radius, var(--bdc-outline_radius));
|
|
1473
1492
|
box-shadow: var(--dialog_shadow, var(--bdc-outline_shadow));
|
|
1474
|
-
background-color: var(--dialog_color ,var(--bds-
|
|
1475
|
-
color: var(--dialog_on-color, var(--bds-
|
|
1493
|
+
background-color: var(--dialog_color ,var(--bds-color_grey--subtle));
|
|
1494
|
+
color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
|
|
1476
1495
|
padding: var(--bds-space_l);
|
|
1477
1496
|
max-width: 90svw;
|
|
1478
1497
|
max-height: 90svh;
|
|
1479
1498
|
overflow: visible;
|
|
1480
1499
|
}
|
|
1481
|
-
.
|
|
1500
|
+
.bds103Dialog-dialogContent {
|
|
1482
1501
|
display: grid;
|
|
1483
1502
|
gap: var(--bds-grid_gap);
|
|
1484
1503
|
overflow-y: auto;
|
|
1485
1504
|
min-height: 0;
|
|
1486
1505
|
flex: 1;
|
|
1487
1506
|
}
|
|
1488
|
-
.
|
|
1507
|
+
.bds103Dialog-closeForm {
|
|
1489
1508
|
position: absolute;
|
|
1490
1509
|
inset-block-start: -1em;
|
|
1491
1510
|
inset-inline-end: -1em;
|
|
1492
1511
|
}
|
|
1493
|
-
.
|
|
1512
|
+
.bds103Dialog-closeButton {
|
|
1494
1513
|
all: unset;
|
|
1495
1514
|
width: 2em;
|
|
1496
1515
|
height: 2em;
|
|
@@ -1498,7 +1517,7 @@
|
|
|
1498
1517
|
align-items: center;
|
|
1499
1518
|
justify-content: center;
|
|
1500
1519
|
border-radius: 50%;
|
|
1501
|
-
background-color: var(--bds-
|
|
1520
|
+
background-color: var(--bds-color_bg);
|
|
1502
1521
|
color: currentcolor;
|
|
1503
1522
|
border: var(--dialog_close-border, none);
|
|
1504
1523
|
--bdc_color: currentcolor;
|
|
@@ -1506,11 +1525,11 @@
|
|
|
1506
1525
|
outline-offset: var(--bdc-outline_offset);
|
|
1507
1526
|
cursor: pointer;
|
|
1508
1527
|
}
|
|
1509
|
-
.
|
|
1528
|
+
.bds103Dialog-closeButton svg {
|
|
1510
1529
|
width: 1.25em;
|
|
1511
1530
|
height: 1.25em;
|
|
1512
1531
|
}
|
|
1513
|
-
.
|
|
1532
|
+
.bds103Dialog-dialog::backdrop {
|
|
1514
1533
|
background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
|
|
1515
1534
|
backdrop-filter: blur(3px);
|
|
1516
1535
|
}
|
|
@@ -1518,7 +1537,7 @@
|
|
|
1518
1537
|
|
|
1519
1538
|
/* src/components/interaction/Drawer/Drawer.module.css */
|
|
1520
1539
|
@layer component {
|
|
1521
|
-
.
|
|
1540
|
+
.bds103Drawer-drawer {
|
|
1522
1541
|
position: fixed;
|
|
1523
1542
|
inset: 0;
|
|
1524
1543
|
margin: 0;
|
|
@@ -1531,30 +1550,30 @@
|
|
|
1531
1550
|
background: transparent;
|
|
1532
1551
|
overflow: hidden;
|
|
1533
1552
|
}
|
|
1534
|
-
.
|
|
1553
|
+
.bds103Drawer-drawer::backdrop {
|
|
1535
1554
|
background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
|
|
1536
1555
|
backdrop-filter: blur(3px);
|
|
1537
1556
|
}
|
|
1538
|
-
.
|
|
1557
|
+
.bds103Drawer-panel {
|
|
1539
1558
|
position: absolute;
|
|
1540
1559
|
inset-block: 0;
|
|
1541
1560
|
display: flex;
|
|
1542
1561
|
flex-direction: column;
|
|
1543
1562
|
width: min(28rem, 90vw);
|
|
1544
1563
|
height: 100%;
|
|
1545
|
-
background-color: var(--drawer_color, var(--bds-
|
|
1546
|
-
color: var(--drawer_on-color, var(--bds-
|
|
1564
|
+
background-color: var(--drawer_color, var(--bds-color_bg));
|
|
1565
|
+
color: var(--drawer_on-color, var(--bds-color_on-bg));
|
|
1547
1566
|
box-shadow: var(--bds-shadow_xl);
|
|
1548
1567
|
overflow: hidden;
|
|
1549
1568
|
transition: var(--bds-animation_transition);
|
|
1550
1569
|
}
|
|
1551
|
-
.
|
|
1570
|
+
.bds103Drawer---side_right .bds103Drawer-panel {
|
|
1552
1571
|
inset-inline-end: 0;
|
|
1553
1572
|
}
|
|
1554
|
-
.
|
|
1573
|
+
.bds103Drawer---side_left .bds103Drawer-panel {
|
|
1555
1574
|
inset-inline-start: 0;
|
|
1556
1575
|
}
|
|
1557
|
-
.
|
|
1576
|
+
.bds103Drawer-header {
|
|
1558
1577
|
display: flex;
|
|
1559
1578
|
align-items: center;
|
|
1560
1579
|
justify-content: space-between;
|
|
@@ -1562,7 +1581,7 @@
|
|
|
1562
1581
|
border-block-end: 1px solid currentcolor;
|
|
1563
1582
|
flex-shrink: 0;
|
|
1564
1583
|
}
|
|
1565
|
-
.
|
|
1584
|
+
.bds103Drawer-closeButton {
|
|
1566
1585
|
all: unset;
|
|
1567
1586
|
display: flex;
|
|
1568
1587
|
align-items: center;
|
|
@@ -1573,20 +1592,20 @@
|
|
|
1573
1592
|
cursor: pointer;
|
|
1574
1593
|
transition: var(--bds-animation_transition);
|
|
1575
1594
|
}
|
|
1576
|
-
.
|
|
1595
|
+
.bds103Drawer-closeButton svg {
|
|
1577
1596
|
width: 1.25rem;
|
|
1578
1597
|
height: 1.25rem;
|
|
1579
1598
|
}
|
|
1580
|
-
.
|
|
1599
|
+
.bds103Drawer-closeButton:focus-visible {
|
|
1581
1600
|
outline: var(--bds-outline_default);
|
|
1582
1601
|
outline-offset: var(--bds-outline_offset);
|
|
1583
1602
|
}
|
|
1584
1603
|
@media (hover: hover) and (pointer: fine) {
|
|
1585
|
-
.
|
|
1586
|
-
background-color: var(--bds-
|
|
1604
|
+
.bds103Drawer-closeButton:hover {
|
|
1605
|
+
background-color: var(--bds-color_bg--subtle);
|
|
1587
1606
|
}
|
|
1588
1607
|
}
|
|
1589
|
-
.
|
|
1608
|
+
.bds103Drawer-body {
|
|
1590
1609
|
flex: 1;
|
|
1591
1610
|
overflow-y: auto;
|
|
1592
1611
|
padding: var(--bds-space_l);
|
|
@@ -1594,7 +1613,7 @@
|
|
|
1594
1613
|
flex-direction: column;
|
|
1595
1614
|
}
|
|
1596
1615
|
@media (prefers-reduced-motion: reduce) {
|
|
1597
|
-
.
|
|
1616
|
+
.bds103Drawer-panel {
|
|
1598
1617
|
transition: none;
|
|
1599
1618
|
}
|
|
1600
1619
|
}
|
|
@@ -1602,11 +1621,11 @@
|
|
|
1602
1621
|
|
|
1603
1622
|
/* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
|
|
1604
1623
|
@layer component {
|
|
1605
|
-
.
|
|
1624
|
+
.bds103DropdownMenu-wrapper {
|
|
1606
1625
|
position: relative;
|
|
1607
1626
|
display: inline-flex;
|
|
1608
1627
|
}
|
|
1609
|
-
.
|
|
1628
|
+
.bds103DropdownMenu-menu {
|
|
1610
1629
|
position: absolute;
|
|
1611
1630
|
top: calc(100% + var(--bds-space_xxs));
|
|
1612
1631
|
z-index: var(--bds-z-index_dropdown);
|
|
@@ -1618,25 +1637,25 @@
|
|
|
1618
1637
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
1619
1638
|
outline-offset: var(--bdc-outline_offset);
|
|
1620
1639
|
border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
|
|
1621
|
-
background-color: var(--dropdown_color, var(--bds-
|
|
1622
|
-
color: var(--dropdown_on-color, var(--bds-
|
|
1640
|
+
background-color: var(--dropdown_color, var(--bds-color_bg));
|
|
1641
|
+
color: var(--dropdown_on-color, var(--bds-color_on-bg));
|
|
1623
1642
|
box-shadow: var(--dropdown_shadow, var(--bds-shadow_m));
|
|
1624
1643
|
list-style: none;
|
|
1625
1644
|
margin: 0;
|
|
1626
1645
|
}
|
|
1627
|
-
.
|
|
1646
|
+
.bds103DropdownMenu---placement_bottom-start {
|
|
1628
1647
|
left: 0;
|
|
1629
1648
|
}
|
|
1630
|
-
.
|
|
1649
|
+
.bds103DropdownMenu---placement_bottom-end {
|
|
1631
1650
|
right: 0;
|
|
1632
1651
|
}
|
|
1633
|
-
.
|
|
1652
|
+
.bds103DropdownMenu-separator {
|
|
1634
1653
|
border: none;
|
|
1635
1654
|
border-top: 1px solid currentcolor;
|
|
1636
1655
|
margin: var(--bds-space_xxs) 0;
|
|
1637
1656
|
opacity: 0.15;
|
|
1638
1657
|
}
|
|
1639
|
-
.
|
|
1658
|
+
.bds103DropdownMenu-item {
|
|
1640
1659
|
all: unset;
|
|
1641
1660
|
display: flex;
|
|
1642
1661
|
align-items: center;
|
|
@@ -1650,22 +1669,22 @@
|
|
|
1650
1669
|
box-sizing: border-box;
|
|
1651
1670
|
transition: var(--bds-animation_transition);
|
|
1652
1671
|
}
|
|
1653
|
-
.
|
|
1672
|
+
.bds103DropdownMenu-item:disabled {
|
|
1654
1673
|
opacity: 0.4;
|
|
1655
1674
|
cursor: not-allowed;
|
|
1656
1675
|
}
|
|
1657
|
-
.
|
|
1676
|
+
.bds103DropdownMenu-item:focus-visible {
|
|
1658
1677
|
outline: var(--bds-outline_default);
|
|
1659
1678
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
1660
1679
|
border-radius: var(--bds-border_radius--xs);
|
|
1661
1680
|
}
|
|
1662
1681
|
@media (hover: hover) and (pointer: fine) {
|
|
1663
|
-
.
|
|
1664
|
-
background-color: var(--bds-
|
|
1665
|
-
color: var(--bds-
|
|
1682
|
+
.bds103DropdownMenu-item:not(:disabled):hover {
|
|
1683
|
+
background-color: var(--bds-color_bg--subtle);
|
|
1684
|
+
color: var(--bds-color_interactive_on-bg);
|
|
1666
1685
|
}
|
|
1667
1686
|
}
|
|
1668
|
-
.
|
|
1687
|
+
.bds103DropdownMenu-icon {
|
|
1669
1688
|
display: flex;
|
|
1670
1689
|
align-items: center;
|
|
1671
1690
|
flex-shrink: 0;
|
|
@@ -1674,11 +1693,11 @@
|
|
|
1674
1693
|
|
|
1675
1694
|
/* src/components/interaction/Popover/Popover.module.css */
|
|
1676
1695
|
@layer component {
|
|
1677
|
-
.
|
|
1696
|
+
.bds103Popover-wrapper {
|
|
1678
1697
|
position: relative;
|
|
1679
1698
|
display: inline-flex;
|
|
1680
1699
|
}
|
|
1681
|
-
.
|
|
1700
|
+
.bds103Popover-panel {
|
|
1682
1701
|
position: absolute;
|
|
1683
1702
|
z-index: var(--bds-z-index_popover);
|
|
1684
1703
|
min-width: 12rem;
|
|
@@ -1689,24 +1708,24 @@
|
|
|
1689
1708
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
1690
1709
|
outline-offset: var(--bdc-outline_offset);
|
|
1691
1710
|
border-radius: var(--popover_radius, var(--bdc-outline_radius));
|
|
1692
|
-
background-color: var(--popover_color, var(--bds-
|
|
1711
|
+
background-color: var(--popover_color, var(--bds-color_bg));
|
|
1693
1712
|
box-shadow: var(--popover_shadow, var(--bds-shadow_m));
|
|
1694
|
-
color: var(--popover_on-color, var(--bds-
|
|
1713
|
+
color: var(--popover_on-color, var(--bds-color_on-bg));
|
|
1695
1714
|
font-size: var(--bds-font_size--body);
|
|
1696
1715
|
}
|
|
1697
|
-
.
|
|
1716
|
+
.bds103Popover---placement_bottom {
|
|
1698
1717
|
top: calc(100% + var(--bds-space_xs));
|
|
1699
1718
|
left: 0;
|
|
1700
1719
|
}
|
|
1701
|
-
.
|
|
1720
|
+
.bds103Popover---placement_top {
|
|
1702
1721
|
bottom: calc(100% + var(--bds-space_xs));
|
|
1703
1722
|
left: 0;
|
|
1704
1723
|
}
|
|
1705
|
-
.
|
|
1724
|
+
.bds103Popover---placement_right {
|
|
1706
1725
|
left: calc(100% + var(--bds-space_xs));
|
|
1707
1726
|
top: 0;
|
|
1708
1727
|
}
|
|
1709
|
-
.
|
|
1728
|
+
.bds103Popover---placement_left {
|
|
1710
1729
|
right: calc(100% + var(--bds-space_xs));
|
|
1711
1730
|
top: 0;
|
|
1712
1731
|
}
|
|
@@ -1714,23 +1733,23 @@
|
|
|
1714
1733
|
|
|
1715
1734
|
/* src/components/interaction/Rating/Rating.module.css */
|
|
1716
1735
|
@layer component {
|
|
1717
|
-
.
|
|
1736
|
+
.bds103Rating-rating {
|
|
1718
1737
|
display: inline-flex;
|
|
1719
1738
|
gap: var(--bds-space_xxxs);
|
|
1720
|
-
color: var(--bds-
|
|
1739
|
+
color: var(--bds-color_bg);
|
|
1721
1740
|
}
|
|
1722
|
-
.
|
|
1741
|
+
.bds103Rating-star {
|
|
1723
1742
|
width: 1.5em;
|
|
1724
1743
|
height: 1.5em;
|
|
1725
1744
|
}
|
|
1726
|
-
.
|
|
1727
|
-
color: var(--bds-
|
|
1745
|
+
.bds103Rating---filled {
|
|
1746
|
+
color: var(--bds-color_warning);
|
|
1728
1747
|
}
|
|
1729
1748
|
}
|
|
1730
1749
|
|
|
1731
1750
|
/* src/components/interaction/Toast/Toast.module.css */
|
|
1732
1751
|
@layer component {
|
|
1733
|
-
.
|
|
1752
|
+
.bds103Toast-toastContainer {
|
|
1734
1753
|
position: fixed;
|
|
1735
1754
|
bottom: var(--bds-space_xl);
|
|
1736
1755
|
right: var(--bds-space_xl);
|
|
@@ -1739,10 +1758,10 @@
|
|
|
1739
1758
|
gap: var(--bds-space_m);
|
|
1740
1759
|
z-index: var(--bds-z-index_toast);
|
|
1741
1760
|
}
|
|
1742
|
-
.
|
|
1761
|
+
.bds103Toast-toast {
|
|
1743
1762
|
padding: var(--bds-space_m) var(--bds-space_l);
|
|
1744
|
-
background-color: var(--toast_color, var(--bds-
|
|
1745
|
-
color: var(--toast_on-color, var(--bds-
|
|
1763
|
+
background-color: var(--toast_color, var(--bds-color_bg));
|
|
1764
|
+
color: var(--toast_on-color, var(--bds-color_on-bg));
|
|
1746
1765
|
border-radius: var(--bds-border_radius--s);
|
|
1747
1766
|
box-shadow: var(--bds-shadow_s);
|
|
1748
1767
|
display: flex;
|
|
@@ -1751,26 +1770,26 @@
|
|
|
1751
1770
|
min-width: 300px;
|
|
1752
1771
|
animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
|
|
1753
1772
|
}
|
|
1754
|
-
.
|
|
1755
|
-
--toast_color: var(--bds-
|
|
1756
|
-
--toast_on-color: var(--bds-
|
|
1773
|
+
.bds103Toast-toast.bds103Toast---variant_success {
|
|
1774
|
+
--toast_color: var(--bds-color_success);
|
|
1775
|
+
--toast_on-color: var(--bds-color_on-success);
|
|
1757
1776
|
}
|
|
1758
|
-
.
|
|
1759
|
-
--toast_color: var(--bds-
|
|
1760
|
-
--toast_on-color: var(--bds-
|
|
1777
|
+
.bds103Toast-toast.bds103Toast---variant_warning {
|
|
1778
|
+
--toast_color: var(--bds-color_warning);
|
|
1779
|
+
--toast_on-color: var(--bds-color_on-warning);
|
|
1761
1780
|
}
|
|
1762
|
-
.
|
|
1763
|
-
--toast_color: var(--bds-
|
|
1764
|
-
--toast_on-color: var(--bds-
|
|
1781
|
+
.bds103Toast-toast.bds103Toast---variant_info {
|
|
1782
|
+
--toast_color: var(--bds-color_bg--subtle);
|
|
1783
|
+
--toast_on-color: var(--bds-color_on-bg--subtle);
|
|
1765
1784
|
}
|
|
1766
|
-
.
|
|
1767
|
-
--toast_color: var(--bds-
|
|
1768
|
-
--toast_on-color: var(--bds-
|
|
1785
|
+
.bds103Toast-toast.bds103Toast---variant_error {
|
|
1786
|
+
--toast_color: var(--bds-color_error);
|
|
1787
|
+
--toast_on-color: var(--bds-color_on-error);
|
|
1769
1788
|
}
|
|
1770
|
-
.
|
|
1789
|
+
.bds103Toast-message {
|
|
1771
1790
|
flex: 1;
|
|
1772
1791
|
}
|
|
1773
|
-
.
|
|
1792
|
+
.bds103Toast-closeButton {
|
|
1774
1793
|
display: flex;
|
|
1775
1794
|
align-items: center;
|
|
1776
1795
|
justify-content: center;
|
|
@@ -1783,7 +1802,7 @@
|
|
|
1783
1802
|
cursor: pointer;
|
|
1784
1803
|
color: var(--toast_on-color);
|
|
1785
1804
|
}
|
|
1786
|
-
.
|
|
1805
|
+
.bds103Toast-closeButton svg {
|
|
1787
1806
|
width: 1rem;
|
|
1788
1807
|
height: 1rem;
|
|
1789
1808
|
}
|
|
@@ -1801,21 +1820,21 @@
|
|
|
1801
1820
|
|
|
1802
1821
|
/* src/components/interaction/form/Checkbox/Checkbox.module.css */
|
|
1803
1822
|
@layer component {
|
|
1804
|
-
.
|
|
1823
|
+
.bds103Checkbox-checkboxGroup {
|
|
1805
1824
|
--inputSize: calc(var(--bds-space_s) * 2);
|
|
1806
1825
|
display: flex;
|
|
1807
1826
|
flex-direction: column;
|
|
1808
1827
|
}
|
|
1809
|
-
.
|
|
1828
|
+
.bds103Checkbox-inputWrapper {
|
|
1810
1829
|
display: flex;
|
|
1811
1830
|
align-items: stretch;
|
|
1812
1831
|
gap: var(--bds-space_xs);
|
|
1813
1832
|
}
|
|
1814
|
-
.
|
|
1833
|
+
.bds103Checkbox-checkbox {
|
|
1815
1834
|
margin-block-start: 0.25em;
|
|
1816
1835
|
width: var(--inputSize);
|
|
1817
1836
|
height: var(--inputSize);
|
|
1818
|
-
color: var(--checkbox_color, var(--bds-
|
|
1837
|
+
color: var(--checkbox_color, var(--bds-color_on-bg));
|
|
1819
1838
|
border: var(--checkbox_border, none);
|
|
1820
1839
|
--bdc_color: currentcolor;
|
|
1821
1840
|
--bdc-outline_radius: var(--bds-border_radius--xs);
|
|
@@ -1824,64 +1843,64 @@
|
|
|
1824
1843
|
border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
|
|
1825
1844
|
box-shadow: var(--checkbox_shadow, var(--bdc-outline_shadow));
|
|
1826
1845
|
appearance: none;
|
|
1827
|
-
background-color: var(--checkbox_color_bg, var(--bds-
|
|
1846
|
+
background-color: var(--checkbox_color_bg, var(--bds-color_bg));
|
|
1828
1847
|
cursor: pointer;
|
|
1829
1848
|
position: relative;
|
|
1830
1849
|
transition: --bdc_color 0.3s ease, background-color 0.3s ease;
|
|
1831
1850
|
}
|
|
1832
|
-
.
|
|
1833
|
-
background-color: var(--checkbox_color-active, var(--bds-
|
|
1834
|
-
--bdc_color: var(--checkbox_color-active, var(--bds-
|
|
1851
|
+
.bds103Checkbox-checkbox:checked {
|
|
1852
|
+
background-color: var(--checkbox_color-active, var(--bds-color_green));
|
|
1853
|
+
--bdc_color: var(--checkbox_color-active, var(--bds-color_green));
|
|
1835
1854
|
}
|
|
1836
|
-
.
|
|
1855
|
+
.bds103Checkbox-checkbox:checked::after {
|
|
1837
1856
|
content: "";
|
|
1838
1857
|
position: absolute;
|
|
1839
1858
|
left: 0.6em;
|
|
1840
1859
|
top: 0.2em;
|
|
1841
1860
|
width: 0.5em;
|
|
1842
1861
|
height: 1em;
|
|
1843
|
-
border: solid var(--checkbox_color-on-active, var(--bds-
|
|
1862
|
+
border: solid var(--checkbox_color-on-active, var(--bds-color_on-green));
|
|
1844
1863
|
border-width: 0 2px 2px 0;
|
|
1845
1864
|
transform: rotate(45deg);
|
|
1846
1865
|
}
|
|
1847
|
-
.
|
|
1866
|
+
.bds103Checkbox-checkbox:focus {
|
|
1848
1867
|
--bdc_color: var(--bdc_color--focus);
|
|
1849
1868
|
}
|
|
1850
|
-
.
|
|
1869
|
+
.bds103Checkbox-checkbox:focus-visible {
|
|
1851
1870
|
outline: var(--bds-outline_default);
|
|
1852
1871
|
outline-offset: var(--bds-outline_offset);
|
|
1853
1872
|
}
|
|
1854
|
-
.
|
|
1873
|
+
.bds103Checkbox-checkboxError {
|
|
1855
1874
|
--bdc_color: var(--bdc_color--error);
|
|
1856
1875
|
}
|
|
1857
1876
|
}
|
|
1858
1877
|
|
|
1859
1878
|
/* src/components/interaction/form/atoms/Message.module.css */
|
|
1860
1879
|
@layer component {
|
|
1861
|
-
.
|
|
1862
|
-
.
|
|
1880
|
+
.bds103Message-error,
|
|
1881
|
+
.bds103Message-hint {
|
|
1863
1882
|
font-size: var(--bds-font_size--body--s);
|
|
1864
1883
|
margin-inline-start: var(--labelPosition);
|
|
1865
1884
|
}
|
|
1866
|
-
.
|
|
1867
|
-
color: var(--bds-
|
|
1885
|
+
.bds103Message-error {
|
|
1886
|
+
color: var(--bds-color_error_on-bg);
|
|
1868
1887
|
}
|
|
1869
1888
|
}
|
|
1870
1889
|
|
|
1871
1890
|
/* src/components/interaction/form/atoms/Label.module.css */
|
|
1872
1891
|
@layer component {
|
|
1873
|
-
.
|
|
1892
|
+
.bds103Label-label {
|
|
1874
1893
|
display: flex;
|
|
1875
1894
|
align-items: center;
|
|
1876
1895
|
font-family: var(--bds-font_family--body);
|
|
1877
|
-
color: var(--bds-
|
|
1896
|
+
color: var(--bds-color_on-bg);
|
|
1878
1897
|
cursor: pointer;
|
|
1879
1898
|
}
|
|
1880
1899
|
}
|
|
1881
1900
|
|
|
1882
1901
|
/* src/components/interaction/form/atoms/InputContainer.module.css */
|
|
1883
1902
|
@layer component {
|
|
1884
|
-
.
|
|
1903
|
+
.bds103InputContainer-container {
|
|
1885
1904
|
--labelPosition: calc(var(--inputSize) + var(--bds-space_m));
|
|
1886
1905
|
display: flex;
|
|
1887
1906
|
flex-direction: column;
|
|
@@ -1891,7 +1910,7 @@
|
|
|
1891
1910
|
|
|
1892
1911
|
/* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
|
|
1893
1912
|
@layer component {
|
|
1894
|
-
.
|
|
1913
|
+
.bds103CheckboxGroup-group {
|
|
1895
1914
|
border: none;
|
|
1896
1915
|
padding: 0;
|
|
1897
1916
|
margin: 0;
|
|
@@ -1899,18 +1918,18 @@
|
|
|
1899
1918
|
flex-direction: column;
|
|
1900
1919
|
gap: var(--bds-space_xs);
|
|
1901
1920
|
}
|
|
1902
|
-
.
|
|
1921
|
+
.bds103CheckboxGroup-legend {
|
|
1903
1922
|
font-family: var(--bds-font_family--body);
|
|
1904
1923
|
font-size: var(--bds-font_size--body--s);
|
|
1905
1924
|
font-weight: var(--bds-font_weight--medium);
|
|
1906
|
-
color: var(--bds-
|
|
1925
|
+
color: var(--bds-color_on-bg);
|
|
1907
1926
|
padding: 0;
|
|
1908
1927
|
margin-block-end: var(--bds-space_xs);
|
|
1909
1928
|
}
|
|
1910
|
-
.
|
|
1911
|
-
color: var(--bds-
|
|
1929
|
+
.bds103CheckboxGroup-required {
|
|
1930
|
+
color: var(--bds-color_error);
|
|
1912
1931
|
}
|
|
1913
|
-
.
|
|
1932
|
+
.bds103CheckboxGroup-items {
|
|
1914
1933
|
display: flex;
|
|
1915
1934
|
flex-direction: column;
|
|
1916
1935
|
gap: var(--bds-space_xs);
|
|
@@ -1919,16 +1938,16 @@
|
|
|
1919
1938
|
|
|
1920
1939
|
/* src/components/interaction/form/Combobox/Combobox.module.css */
|
|
1921
1940
|
@layer component {
|
|
1922
|
-
.
|
|
1941
|
+
.bds103Combobox-formGroup {
|
|
1923
1942
|
display: flex;
|
|
1924
1943
|
flex-direction: column;
|
|
1925
1944
|
}
|
|
1926
|
-
.
|
|
1945
|
+
.bds103Combobox-inputWrapper {
|
|
1927
1946
|
position: relative;
|
|
1928
1947
|
display: flex;
|
|
1929
1948
|
align-items: center;
|
|
1930
1949
|
}
|
|
1931
|
-
.
|
|
1950
|
+
.bds103Combobox-input {
|
|
1932
1951
|
appearance: none;
|
|
1933
1952
|
width: 100%;
|
|
1934
1953
|
font-family: var(--bds-font_family--body);
|
|
@@ -1942,37 +1961,37 @@
|
|
|
1942
1961
|
outline-offset: var(--bdc-outline_offset);
|
|
1943
1962
|
border-radius: var(--combobox_radius, var(--bdc-outline_radius));
|
|
1944
1963
|
box-shadow: var(--combobox_shadow, var(--bdc-outline_shadow));
|
|
1945
|
-
background-color: var(--combobox_color_bg, var(--bds-
|
|
1946
|
-
color: var(--combobox_color, var(--bds-
|
|
1964
|
+
background-color: var(--combobox_color_bg, var(--bds-color_bg));
|
|
1965
|
+
color: var(--combobox_color, var(--bds-color_on-bg));
|
|
1947
1966
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1948
1967
|
}
|
|
1949
|
-
.
|
|
1968
|
+
.bds103Combobox-input:focus {
|
|
1950
1969
|
--bdc_color: var(--bdc_color--focus);
|
|
1951
1970
|
}
|
|
1952
|
-
.
|
|
1971
|
+
.bds103Combobox-input:focus-visible {
|
|
1953
1972
|
outline: var(--bds-outline_default);
|
|
1954
1973
|
outline-offset: var(--bds-outline_offset);
|
|
1955
1974
|
}
|
|
1956
|
-
.
|
|
1975
|
+
.bds103Combobox-input:disabled {
|
|
1957
1976
|
opacity: 0.5;
|
|
1958
1977
|
cursor: not-allowed;
|
|
1959
1978
|
}
|
|
1960
|
-
.
|
|
1979
|
+
.bds103Combobox-inputError {
|
|
1961
1980
|
--bdc_color: var(--bdc_color--error);
|
|
1962
1981
|
}
|
|
1963
|
-
.
|
|
1982
|
+
.bds103Combobox-chevron {
|
|
1964
1983
|
position: absolute;
|
|
1965
1984
|
inset-inline-end: var(--bds-space_s);
|
|
1966
1985
|
display: flex;
|
|
1967
1986
|
align-items: center;
|
|
1968
1987
|
pointer-events: none;
|
|
1969
|
-
color: var(--combobox_color, var(--bds-
|
|
1988
|
+
color: var(--combobox_color, var(--bds-color_on-bg));
|
|
1970
1989
|
}
|
|
1971
|
-
.
|
|
1990
|
+
.bds103Combobox-chevron svg {
|
|
1972
1991
|
width: 1rem;
|
|
1973
1992
|
height: 1rem;
|
|
1974
1993
|
}
|
|
1975
|
-
.
|
|
1994
|
+
.bds103Combobox-listbox {
|
|
1976
1995
|
position: absolute;
|
|
1977
1996
|
top: calc(100% + var(--bds-space_xxs));
|
|
1978
1997
|
left: 0;
|
|
@@ -1989,27 +2008,27 @@
|
|
|
1989
2008
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
1990
2009
|
outline-offset: var(--bdc-outline_offset);
|
|
1991
2010
|
border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
|
|
1992
|
-
background-color: var(--combobox_color, var(--bds-
|
|
1993
|
-
color: var(--combobox_on-color, var(--bds-
|
|
2011
|
+
background-color: var(--combobox_color, var(--bds-color_bg));
|
|
2012
|
+
color: var(--combobox_on-color, var(--bds-color_on-bg));
|
|
1994
2013
|
box-shadow: var(--combobox_listbox-shadow, var(--bds-shadow_m));
|
|
1995
2014
|
}
|
|
1996
|
-
.
|
|
2015
|
+
.bds103Combobox-option {
|
|
1997
2016
|
display: flex;
|
|
1998
2017
|
align-items: center;
|
|
1999
2018
|
padding: var(--bds-space_xs) var(--bds-space_m);
|
|
2000
2019
|
font-size: var(--bds-font_size--body);
|
|
2001
|
-
color: var(--combobox_color, var(--bds-
|
|
2020
|
+
color: var(--combobox_color, var(--bds-color_on-bg));
|
|
2002
2021
|
cursor: pointer;
|
|
2003
2022
|
transition: var(--bds-animation_transition);
|
|
2004
2023
|
}
|
|
2005
|
-
.
|
|
2006
|
-
background-color: var(--bds-
|
|
2007
|
-
color: var(--bds-
|
|
2024
|
+
.bds103Combobox-option.bds103Combobox---highlighted {
|
|
2025
|
+
background-color: var(--bds-color_bg--subtle);
|
|
2026
|
+
color: var(--bds-color_interactive);
|
|
2008
2027
|
}
|
|
2009
|
-
.
|
|
2028
|
+
.bds103Combobox-option.bds103Combobox---selected {
|
|
2010
2029
|
font-weight: var(--bds-font_weight--semibold);
|
|
2011
2030
|
}
|
|
2012
|
-
.
|
|
2031
|
+
.bds103Combobox-option.bds103Combobox---disabled {
|
|
2013
2032
|
opacity: 0.4;
|
|
2014
2033
|
cursor: not-allowed;
|
|
2015
2034
|
}
|
|
@@ -2017,18 +2036,18 @@
|
|
|
2017
2036
|
|
|
2018
2037
|
/* src/components/interaction/form/FileInput/FileInput.module.css */
|
|
2019
2038
|
@layer component {
|
|
2020
|
-
.
|
|
2039
|
+
.bds103FileInput-formGroup {
|
|
2021
2040
|
display: flex;
|
|
2022
2041
|
flex-direction: column;
|
|
2023
2042
|
}
|
|
2024
|
-
.
|
|
2043
|
+
.bds103FileInput-fieldLabel {
|
|
2025
2044
|
display: flex;
|
|
2026
2045
|
align-items: center;
|
|
2027
2046
|
font-family: var(--bds-font_family--body);
|
|
2028
|
-
color: var(--bds-
|
|
2047
|
+
color: var(--bds-color_on-bg);
|
|
2029
2048
|
margin-block-end: var(--bds-space_xs);
|
|
2030
2049
|
}
|
|
2031
|
-
.
|
|
2050
|
+
.bds103FileInput-dropZone {
|
|
2032
2051
|
display: flex;
|
|
2033
2052
|
flex-direction: column;
|
|
2034
2053
|
align-items: center;
|
|
@@ -2037,45 +2056,45 @@
|
|
|
2037
2056
|
padding: var(--bds-space_l) var(--bds-space_m);
|
|
2038
2057
|
border: 2px dashed currentcolor;
|
|
2039
2058
|
border-radius: var(--bds-border_radius--s);
|
|
2040
|
-
color: var(--fileInput_color, var(--bds-
|
|
2059
|
+
color: var(--fileInput_color, var(--bds-color_on-bg));
|
|
2041
2060
|
cursor: pointer;
|
|
2042
2061
|
text-align: center;
|
|
2043
2062
|
transition: var(--bds-animation_transition);
|
|
2044
2063
|
}
|
|
2045
|
-
.
|
|
2064
|
+
.bds103FileInput-dropZone:focus-within {
|
|
2046
2065
|
outline: var(--bds-outline_default);
|
|
2047
2066
|
outline-offset: var(--bds-outline_offset);
|
|
2048
2067
|
border-color: var(--fileInput_border-color, currentcolor);
|
|
2049
2068
|
}
|
|
2050
|
-
.
|
|
2069
|
+
.bds103FileInput-isDragging {
|
|
2051
2070
|
border-color: currentcolor;
|
|
2052
2071
|
background-color: rgb(from currentcolor r g b / 8%);
|
|
2053
2072
|
}
|
|
2054
|
-
.
|
|
2055
|
-
border-color: var(--bds-
|
|
2073
|
+
.bds103FileInput-hasError {
|
|
2074
|
+
border-color: var(--bds-color_error);
|
|
2056
2075
|
}
|
|
2057
|
-
.
|
|
2076
|
+
.bds103FileInput-isDisabled {
|
|
2058
2077
|
opacity: 0.5;
|
|
2059
2078
|
cursor: not-allowed;
|
|
2060
2079
|
}
|
|
2061
|
-
.
|
|
2080
|
+
.bds103FileInput-icon {
|
|
2062
2081
|
width: 2rem;
|
|
2063
2082
|
height: 2rem;
|
|
2064
2083
|
flex-shrink: 0;
|
|
2065
2084
|
}
|
|
2066
|
-
.
|
|
2085
|
+
.bds103FileInput-prompt {
|
|
2067
2086
|
font-size: var(--bds-font_size--body);
|
|
2068
|
-
color: var(--bds-
|
|
2087
|
+
color: var(--bds-color_on-bg);
|
|
2069
2088
|
}
|
|
2070
|
-
.
|
|
2071
|
-
color: var(--bds-
|
|
2089
|
+
.bds103FileInput-prompt strong {
|
|
2090
|
+
color: var(--bds-color_interactive);
|
|
2072
2091
|
font-weight: var(--bds-font_weight--semibold);
|
|
2073
2092
|
}
|
|
2074
|
-
.
|
|
2093
|
+
.bds103FileInput-acceptHint {
|
|
2075
2094
|
font-size: var(--bds-font_size--body--s);
|
|
2076
|
-
color: var(--bds-
|
|
2095
|
+
color: var(--bds-color_on-bg);
|
|
2077
2096
|
}
|
|
2078
|
-
.
|
|
2097
|
+
.bds103FileInput-hiddenInput {
|
|
2079
2098
|
position: absolute;
|
|
2080
2099
|
width: 1px;
|
|
2081
2100
|
height: 1px;
|
|
@@ -2085,21 +2104,21 @@
|
|
|
2085
2104
|
border: 0;
|
|
2086
2105
|
}
|
|
2087
2106
|
@media (hover: hover) and (pointer: fine) {
|
|
2088
|
-
.
|
|
2089
|
-
border-color: var(--bds-
|
|
2090
|
-
background-color: rgb(from var(--bds-
|
|
2107
|
+
.bds103FileInput-dropZone:not(.bds103FileInput-isDisabled):hover {
|
|
2108
|
+
border-color: var(--bds-color_interactive);
|
|
2109
|
+
background-color: rgb(from var(--bds-color_interactive) r g b / 4%);
|
|
2091
2110
|
}
|
|
2092
2111
|
}
|
|
2093
2112
|
}
|
|
2094
2113
|
|
|
2095
2114
|
/* src/components/interaction/form/FormInput/FormInput.module.css */
|
|
2096
2115
|
@layer component {
|
|
2097
|
-
.
|
|
2116
|
+
.bds103FormInput-formGroup {
|
|
2098
2117
|
--labelPosition: 0;
|
|
2099
2118
|
display: flex;
|
|
2100
2119
|
flex-direction: column;
|
|
2101
2120
|
}
|
|
2102
|
-
.
|
|
2121
|
+
.bds103FormInput-input {
|
|
2103
2122
|
font-family: var(--bds-font_family--body);
|
|
2104
2123
|
font-size: var(--bds-font_size--body);
|
|
2105
2124
|
padding: var(--bds-space_s);
|
|
@@ -2110,29 +2129,29 @@
|
|
|
2110
2129
|
outline-offset: var(--bdc-outline_offset);
|
|
2111
2130
|
border-radius: var(--input_radius, var(--bdc-outline_radius));
|
|
2112
2131
|
box-shadow: var(--input_shadow, var(--bdc-outline_shadow));
|
|
2113
|
-
color: var(--input_color, var(--bds-
|
|
2114
|
-
background-color: var(--input_color_bg, var(--bds-
|
|
2132
|
+
color: var(--input_color, var(--bds-color_on-bg));
|
|
2133
|
+
background-color: var(--input_color_bg, var(--bds-color_bg));
|
|
2115
2134
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2116
2135
|
}
|
|
2117
|
-
.
|
|
2136
|
+
.bds103FormInput-input:focus {
|
|
2118
2137
|
--bdc_color: var(--bdc_color--focus);
|
|
2119
2138
|
}
|
|
2120
|
-
.
|
|
2139
|
+
.bds103FormInput-input:focus-visible {
|
|
2121
2140
|
outline: var(--bds-outline_default);
|
|
2122
2141
|
outline-offset: var(--bds-outline_offset);
|
|
2123
2142
|
}
|
|
2124
|
-
.
|
|
2143
|
+
.bds103FormInput-inputError {
|
|
2125
2144
|
--bdc_color: var(--bdc_color--error);
|
|
2126
2145
|
}
|
|
2127
2146
|
}
|
|
2128
2147
|
|
|
2129
2148
|
/* src/components/interaction/form/NumberInput/NumberInput.module.css */
|
|
2130
2149
|
@layer component {
|
|
2131
|
-
.
|
|
2150
|
+
.bds103NumberInput-formGroup {
|
|
2132
2151
|
display: flex;
|
|
2133
2152
|
flex-direction: column;
|
|
2134
2153
|
}
|
|
2135
|
-
.
|
|
2154
|
+
.bds103NumberInput-inputRow {
|
|
2136
2155
|
display: flex;
|
|
2137
2156
|
align-items: stretch;
|
|
2138
2157
|
border: var(--numberInput_border, none);
|
|
@@ -2145,14 +2164,14 @@
|
|
|
2145
2164
|
overflow: hidden;
|
|
2146
2165
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2147
2166
|
}
|
|
2148
|
-
.
|
|
2167
|
+
.bds103NumberInput-inputRow:focus-within {
|
|
2149
2168
|
--bdc_color: var(--bdc_color--focus);
|
|
2150
2169
|
}
|
|
2151
|
-
.
|
|
2170
|
+
.bds103NumberInput-inputRow:focus-within:has(:focus-visible) {
|
|
2152
2171
|
outline: var(--bds-outline_default);
|
|
2153
2172
|
outline-offset: var(--bds-outline_offset);
|
|
2154
2173
|
}
|
|
2155
|
-
.
|
|
2174
|
+
.bds103NumberInput-input {
|
|
2156
2175
|
flex: 1;
|
|
2157
2176
|
border: none;
|
|
2158
2177
|
outline: none;
|
|
@@ -2161,40 +2180,40 @@
|
|
|
2161
2180
|
text-align: center;
|
|
2162
2181
|
padding: var(--bds-space_s);
|
|
2163
2182
|
background: transparent;
|
|
2164
|
-
color: var(--numberInput_color, var(--bds-
|
|
2183
|
+
color: var(--numberInput_color, var(--bds-color_on-bg));
|
|
2165
2184
|
min-width: 0;
|
|
2166
2185
|
appearance: textfield;
|
|
2167
2186
|
}
|
|
2168
|
-
.
|
|
2169
|
-
.
|
|
2187
|
+
.bds103NumberInput-input::-webkit-inner-spin-button,
|
|
2188
|
+
.bds103NumberInput-input::-webkit-outer-spin-button {
|
|
2170
2189
|
appearance: none;
|
|
2171
2190
|
}
|
|
2172
|
-
.
|
|
2191
|
+
.bds103NumberInput-inputError {
|
|
2173
2192
|
--bdc_color: var(--bdc_color--error);
|
|
2174
2193
|
}
|
|
2175
|
-
.
|
|
2194
|
+
.bds103NumberInput-stepper {
|
|
2176
2195
|
all: unset;
|
|
2177
2196
|
display: flex;
|
|
2178
2197
|
align-items: center;
|
|
2179
2198
|
justify-content: center;
|
|
2180
2199
|
padding: var(--bds-space_xs);
|
|
2181
|
-
background-color: var(--bds-
|
|
2182
|
-
color: var(--numberInput_color, var(--bds-
|
|
2200
|
+
background-color: var(--bds-color_bg--subtle);
|
|
2201
|
+
color: var(--numberInput_color, var(--bds-color_on-bg));
|
|
2183
2202
|
cursor: pointer;
|
|
2184
2203
|
transition: var(--bds-animation_transition);
|
|
2185
2204
|
flex-shrink: 0;
|
|
2186
2205
|
}
|
|
2187
|
-
.
|
|
2206
|
+
.bds103NumberInput-stepper svg {
|
|
2188
2207
|
width: 1rem;
|
|
2189
2208
|
height: 1rem;
|
|
2190
2209
|
}
|
|
2191
|
-
.
|
|
2210
|
+
.bds103NumberInput-stepper:disabled {
|
|
2192
2211
|
opacity: 0.4;
|
|
2193
2212
|
cursor: not-allowed;
|
|
2194
2213
|
}
|
|
2195
2214
|
@media (hover: hover) and (pointer: fine) {
|
|
2196
|
-
.
|
|
2197
|
-
background-color: var(--bds-
|
|
2215
|
+
.bds103NumberInput-stepper:not(:disabled):hover {
|
|
2216
|
+
background-color: var(--bds-color_bg--subtle);
|
|
2198
2217
|
opacity: 0.7;
|
|
2199
2218
|
}
|
|
2200
2219
|
}
|
|
@@ -2202,34 +2221,34 @@
|
|
|
2202
2221
|
|
|
2203
2222
|
/* src/components/interaction/form/Radio/Radio.module.css */
|
|
2204
2223
|
@layer component {
|
|
2205
|
-
.
|
|
2224
|
+
.bds103Radio-radioGroup {
|
|
2206
2225
|
--inputSize: calc(var(--bds-space_s) * 2);
|
|
2207
2226
|
--labelPosition: calc(var(--inputSize) + var(--bds-space_m));
|
|
2208
2227
|
display: flex;
|
|
2209
2228
|
flex-direction: column;
|
|
2210
2229
|
}
|
|
2211
|
-
.
|
|
2230
|
+
.bds103Radio-inputWrapper {
|
|
2212
2231
|
display: flex;
|
|
2213
2232
|
align-items: flex-start;
|
|
2214
2233
|
gap: var(--bds-space_xs);
|
|
2215
2234
|
}
|
|
2216
|
-
.
|
|
2235
|
+
.bds103Radio-textWrapper {
|
|
2217
2236
|
display: flex;
|
|
2218
2237
|
flex-direction: column;
|
|
2219
2238
|
gap: var(--bds-space_xxxs);
|
|
2220
2239
|
padding-block-start: var(--bds-space_xxxs);
|
|
2221
2240
|
}
|
|
2222
|
-
.
|
|
2241
|
+
.bds103Radio-description {
|
|
2223
2242
|
font-size: var(--bds-font_size--body--s);
|
|
2224
|
-
color: var(--radio_description-color, var(--bds-
|
|
2243
|
+
color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
|
|
2225
2244
|
line-height: var(--bds-font_line-height--body);
|
|
2226
2245
|
}
|
|
2227
|
-
.
|
|
2246
|
+
.bds103Radio-radio {
|
|
2228
2247
|
flex-shrink: 0;
|
|
2229
2248
|
margin-block-start: 0.2em;
|
|
2230
2249
|
width: var(--inputSize);
|
|
2231
2250
|
height: var(--inputSize);
|
|
2232
|
-
color: var(--radio_color, var(--bds-
|
|
2251
|
+
color: var(--radio_color, var(--bds-color_on-bg));
|
|
2233
2252
|
border: var(--radio_border, none);
|
|
2234
2253
|
--bdc_color: currentcolor;
|
|
2235
2254
|
--bdc-outline_radius: 50%;
|
|
@@ -2238,16 +2257,16 @@
|
|
|
2238
2257
|
border-radius: var(--radio_radius, var(--bdc-outline_radius));
|
|
2239
2258
|
box-shadow: var(--radio_shadow, var(--bdc-outline_shadow));
|
|
2240
2259
|
appearance: none;
|
|
2241
|
-
background-color: var(--radio_color_bg, var(--bds-
|
|
2260
|
+
background-color: var(--radio_color_bg, var(--bds-color_bg));
|
|
2242
2261
|
cursor: pointer;
|
|
2243
2262
|
position: relative;
|
|
2244
2263
|
transition: --bdc_color 0.2s ease, background-color 0.2s ease;
|
|
2245
2264
|
}
|
|
2246
|
-
.
|
|
2247
|
-
background-color: var(--radio_color-active, var(--bds-
|
|
2248
|
-
--bdc_color: var(--radio_color-active, var(--bds-
|
|
2265
|
+
.bds103Radio-radio:checked {
|
|
2266
|
+
background-color: var(--radio_color-active, var(--bds-color_green));
|
|
2267
|
+
--bdc_color: var(--radio_color-active, var(--bds-color_green));
|
|
2249
2268
|
}
|
|
2250
|
-
.
|
|
2269
|
+
.bds103Radio-radio:checked::after {
|
|
2251
2270
|
content: "";
|
|
2252
2271
|
position: absolute;
|
|
2253
2272
|
left: 50%;
|
|
@@ -2256,23 +2275,23 @@
|
|
|
2256
2275
|
width: 0.4em;
|
|
2257
2276
|
height: 0.4em;
|
|
2258
2277
|
border-radius: 50%;
|
|
2259
|
-
background-color: var(--radio_color-on-active, var(--bds-
|
|
2278
|
+
background-color: var(--radio_color-on-active, var(--bds-color_on-green));
|
|
2260
2279
|
}
|
|
2261
|
-
.
|
|
2280
|
+
.bds103Radio-radio:focus {
|
|
2262
2281
|
--bdc_color: var(--bdc_color--focus);
|
|
2263
2282
|
}
|
|
2264
|
-
.
|
|
2283
|
+
.bds103Radio-radio:focus-visible {
|
|
2265
2284
|
outline: var(--bds-outline_default);
|
|
2266
2285
|
outline-offset: var(--bds-outline_offset);
|
|
2267
2286
|
}
|
|
2268
|
-
.
|
|
2287
|
+
.bds103Radio-radioError {
|
|
2269
2288
|
--bdc_color: var(--bdc_color--error);
|
|
2270
2289
|
}
|
|
2271
2290
|
}
|
|
2272
2291
|
|
|
2273
2292
|
/* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
|
|
2274
2293
|
@layer component {
|
|
2275
|
-
.
|
|
2294
|
+
.bds103RadioGroup-group {
|
|
2276
2295
|
border: none;
|
|
2277
2296
|
padding: 0;
|
|
2278
2297
|
margin: 0;
|
|
@@ -2280,18 +2299,18 @@
|
|
|
2280
2299
|
flex-direction: column;
|
|
2281
2300
|
gap: var(--bds-space_xs);
|
|
2282
2301
|
}
|
|
2283
|
-
.
|
|
2302
|
+
.bds103RadioGroup-legend {
|
|
2284
2303
|
font-family: var(--bds-font_family--body);
|
|
2285
2304
|
font-size: var(--bds-font_size--body--s);
|
|
2286
2305
|
font-weight: var(--bds-font_weight--medium);
|
|
2287
|
-
color: var(--bds-
|
|
2306
|
+
color: var(--bds-color_on-bg);
|
|
2288
2307
|
padding: 0;
|
|
2289
2308
|
margin-block-end: var(--bds-space_xs);
|
|
2290
2309
|
}
|
|
2291
|
-
.
|
|
2292
|
-
color: var(--bds-
|
|
2310
|
+
.bds103RadioGroup-required {
|
|
2311
|
+
color: var(--bds-color_error);
|
|
2293
2312
|
}
|
|
2294
|
-
.
|
|
2313
|
+
.bds103RadioGroup-items {
|
|
2295
2314
|
display: flex;
|
|
2296
2315
|
flex-direction: column;
|
|
2297
2316
|
gap: var(--bds-space_xs);
|
|
@@ -2300,30 +2319,30 @@
|
|
|
2300
2319
|
|
|
2301
2320
|
/* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
|
|
2302
2321
|
@layer component {
|
|
2303
|
-
.
|
|
2322
|
+
.bds103SegmentedControl-control {
|
|
2304
2323
|
position: relative;
|
|
2305
2324
|
display: inline-grid;
|
|
2306
2325
|
grid-auto-flow: column;
|
|
2307
2326
|
grid-auto-columns: 1fr;
|
|
2308
2327
|
padding: var(--bds-space_xxxs);
|
|
2309
|
-
background-color: var(--control_track-bg, var(--bds-
|
|
2328
|
+
background-color: var(--control_track-bg, var(--bds-color_bg--subtle));
|
|
2310
2329
|
border-radius: var(--bds-border_radius--m);
|
|
2311
2330
|
gap: 0;
|
|
2312
2331
|
}
|
|
2313
|
-
.
|
|
2332
|
+
.bds103SegmentedControl-thumb {
|
|
2314
2333
|
position: absolute;
|
|
2315
2334
|
top: var(--bds-space_xxxs);
|
|
2316
2335
|
bottom: var(--bds-space_xxxs);
|
|
2317
2336
|
left: var(--bds-space_xxxs);
|
|
2318
2337
|
width: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
|
|
2319
2338
|
border-radius: var(--bds-border_radius--s);
|
|
2320
|
-
background-color: var(--control_thumb-bg, var(--bds-
|
|
2339
|
+
background-color: var(--control_thumb-bg, var(--bds-color_bg));
|
|
2321
2340
|
box-shadow: var(--bds-shadow_s);
|
|
2322
2341
|
pointer-events: none;
|
|
2323
2342
|
transform: translateX(calc(var(--control_selected-index, 0) * 100%));
|
|
2324
2343
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2325
2344
|
}
|
|
2326
|
-
.
|
|
2345
|
+
.bds103SegmentedControl-item {
|
|
2327
2346
|
position: relative;
|
|
2328
2347
|
z-index: 1;
|
|
2329
2348
|
display: flex;
|
|
@@ -2333,55 +2352,55 @@
|
|
|
2333
2352
|
border-radius: var(--bds-border_radius--s);
|
|
2334
2353
|
transition: var(--bds-animation_transition);
|
|
2335
2354
|
}
|
|
2336
|
-
.
|
|
2337
|
-
opacity: 0.
|
|
2355
|
+
.bds103SegmentedControl-item.bds103SegmentedControl---disabled {
|
|
2356
|
+
opacity: 0.5;
|
|
2338
2357
|
cursor: not-allowed;
|
|
2339
2358
|
}
|
|
2340
|
-
.
|
|
2359
|
+
.bds103SegmentedControl-radio {
|
|
2341
2360
|
position: absolute;
|
|
2342
2361
|
opacity: 0;
|
|
2343
2362
|
width: 0;
|
|
2344
2363
|
height: 0;
|
|
2345
2364
|
margin: 0;
|
|
2346
2365
|
}
|
|
2347
|
-
.
|
|
2366
|
+
.bds103SegmentedControl-label {
|
|
2348
2367
|
display: block;
|
|
2349
2368
|
padding: var(--bds-space_xs) var(--bds-space_m);
|
|
2350
2369
|
white-space: nowrap;
|
|
2351
2370
|
font-size: var(--bds-font_size--body);
|
|
2352
2371
|
line-height: var(--bds-font_line-height--body);
|
|
2353
|
-
color: var(--control_label-color, var(--bds-
|
|
2372
|
+
color: var(--control_label-color, var(--bds-color_on-bg--subtle));
|
|
2354
2373
|
transition: color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2355
2374
|
pointer-events: none;
|
|
2356
2375
|
user-select: none;
|
|
2357
2376
|
}
|
|
2358
|
-
.
|
|
2377
|
+
.bds103SegmentedControl-control.bds103SegmentedControl---size_small .bds103SegmentedControl-label {
|
|
2359
2378
|
padding: var(--bds-space_xxs) var(--bds-space_s);
|
|
2360
2379
|
font-size: var(--bds-font_size--body--s);
|
|
2361
2380
|
}
|
|
2362
|
-
.
|
|
2381
|
+
.bds103SegmentedControl-control.bds103SegmentedControl---size_large .bds103SegmentedControl-label {
|
|
2363
2382
|
padding: var(--bds-space_s) var(--bds-space_m);
|
|
2364
2383
|
white-space: normal;
|
|
2365
2384
|
text-align: center;
|
|
2366
2385
|
}
|
|
2367
|
-
.
|
|
2368
|
-
color: var(--control_label-color--active, var(--bds-
|
|
2386
|
+
.bds103SegmentedControl-item.bds103SegmentedControl---active .bds103SegmentedControl-label {
|
|
2387
|
+
color: var(--control_label-color--active, var(--bds-color_on-bg));
|
|
2369
2388
|
}
|
|
2370
|
-
.
|
|
2389
|
+
.bds103SegmentedControl-radio:focus-visible ~ .bds103SegmentedControl-label {
|
|
2371
2390
|
outline: var(--bds-outline_default);
|
|
2372
2391
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
2373
2392
|
border-radius: var(--bds-border_radius--s);
|
|
2374
2393
|
}
|
|
2375
2394
|
@media (hover: hover) and (pointer: fine) {
|
|
2376
|
-
.
|
|
2377
|
-
color: var(--control_label-color--hover, var(--bds-
|
|
2395
|
+
.bds103SegmentedControl-item:not(.bds103SegmentedControl---active, .bds103SegmentedControl---disabled):hover .bds103SegmentedControl-label {
|
|
2396
|
+
color: var(--control_label-color--hover, var(--bds-color_on-bg));
|
|
2378
2397
|
}
|
|
2379
2398
|
}
|
|
2380
2399
|
@media (prefers-reduced-motion: reduce) {
|
|
2381
|
-
.
|
|
2400
|
+
.bds103SegmentedControl-thumb {
|
|
2382
2401
|
transition: none;
|
|
2383
2402
|
}
|
|
2384
|
-
.
|
|
2403
|
+
.bds103SegmentedControl-label {
|
|
2385
2404
|
transition: none;
|
|
2386
2405
|
}
|
|
2387
2406
|
}
|
|
@@ -2389,16 +2408,16 @@
|
|
|
2389
2408
|
|
|
2390
2409
|
/* src/components/interaction/form/Select/Select.module.css */
|
|
2391
2410
|
@layer component {
|
|
2392
|
-
.
|
|
2411
|
+
.bds103Select-formGroup {
|
|
2393
2412
|
display: flex;
|
|
2394
2413
|
flex-direction: column;
|
|
2395
2414
|
}
|
|
2396
|
-
.
|
|
2415
|
+
.bds103Select-selectWrapper {
|
|
2397
2416
|
position: relative;
|
|
2398
2417
|
display: flex;
|
|
2399
2418
|
align-items: center;
|
|
2400
2419
|
}
|
|
2401
|
-
.
|
|
2420
|
+
.bds103Select-select {
|
|
2402
2421
|
appearance: none;
|
|
2403
2422
|
width: 100%;
|
|
2404
2423
|
font-family: var(--bds-font_family--body);
|
|
@@ -2412,34 +2431,34 @@
|
|
|
2412
2431
|
outline-offset: var(--bdc-outline_offset);
|
|
2413
2432
|
border-radius: var(--select_radius, var(--bdc-outline_radius));
|
|
2414
2433
|
box-shadow: var(--select_shadow, var(--bdc-outline_shadow));
|
|
2415
|
-
background-color: var(--select_color_bg, var(--bds-
|
|
2416
|
-
color: var(--select_color, var(--bds-
|
|
2434
|
+
background-color: var(--select_color_bg, var(--bds-color_bg));
|
|
2435
|
+
color: var(--select_color, var(--bds-color_on-bg));
|
|
2417
2436
|
cursor: pointer;
|
|
2418
2437
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2419
2438
|
}
|
|
2420
|
-
.
|
|
2439
|
+
.bds103Select-select:focus {
|
|
2421
2440
|
--bdc_color: var(--bdc_color--focus);
|
|
2422
2441
|
}
|
|
2423
|
-
.
|
|
2442
|
+
.bds103Select-select:focus-visible {
|
|
2424
2443
|
outline: var(--bds-outline_default);
|
|
2425
2444
|
outline-offset: var(--bds-outline_offset);
|
|
2426
2445
|
}
|
|
2427
|
-
.
|
|
2446
|
+
.bds103Select-select:disabled {
|
|
2428
2447
|
opacity: 0.5;
|
|
2429
2448
|
cursor: not-allowed;
|
|
2430
2449
|
}
|
|
2431
|
-
.
|
|
2450
|
+
.bds103Select-selectError {
|
|
2432
2451
|
--bdc_color: var(--bdc_color--error);
|
|
2433
2452
|
}
|
|
2434
|
-
.
|
|
2453
|
+
.bds103Select-chevron {
|
|
2435
2454
|
position: absolute;
|
|
2436
2455
|
inset-inline-end: var(--bds-space_s);
|
|
2437
2456
|
display: flex;
|
|
2438
2457
|
align-items: center;
|
|
2439
2458
|
pointer-events: none;
|
|
2440
|
-
color: var(--select_color, var(--bds-
|
|
2459
|
+
color: var(--select_color, var(--bds-color_on-bg));
|
|
2441
2460
|
}
|
|
2442
|
-
.
|
|
2461
|
+
.bds103Select-chevron svg {
|
|
2443
2462
|
width: 1rem;
|
|
2444
2463
|
height: 1rem;
|
|
2445
2464
|
}
|
|
@@ -2447,26 +2466,26 @@
|
|
|
2447
2466
|
|
|
2448
2467
|
/* src/components/interaction/form/Slider/Slider.module.css */
|
|
2449
2468
|
@layer component {
|
|
2450
|
-
.
|
|
2469
|
+
.bds103Slider-formGroup {
|
|
2451
2470
|
display: flex;
|
|
2452
2471
|
flex-direction: column;
|
|
2453
2472
|
gap: var(--bds-space_xxs);
|
|
2454
2473
|
}
|
|
2455
|
-
.
|
|
2474
|
+
.bds103Slider-labelRow {
|
|
2456
2475
|
display: flex;
|
|
2457
2476
|
justify-content: space-between;
|
|
2458
2477
|
align-items: baseline;
|
|
2459
2478
|
}
|
|
2460
|
-
.
|
|
2479
|
+
.bds103Slider-value {
|
|
2461
2480
|
font-size: var(--bds-font_size--body--s);
|
|
2462
2481
|
font-variant-numeric: tabular-nums;
|
|
2463
|
-
color: var(--bds-
|
|
2482
|
+
color: var(--bds-color_on-bg--subtle);
|
|
2464
2483
|
}
|
|
2465
|
-
.
|
|
2484
|
+
.bds103Slider-slider {
|
|
2466
2485
|
--slider_fill: 0%;
|
|
2467
2486
|
--slider_track-height: var(--bds-space_xxs);
|
|
2468
2487
|
--slider_thumb-size: calc(var(--bds-space_s) * 2);
|
|
2469
|
-
color: var(--slider_color, var(--bds-
|
|
2488
|
+
color: var(--slider_color, var(--bds-color_on-bg));
|
|
2470
2489
|
appearance: none;
|
|
2471
2490
|
width: 100%;
|
|
2472
2491
|
height: var(--slider_track-height);
|
|
@@ -2474,60 +2493,60 @@
|
|
|
2474
2493
|
background:
|
|
2475
2494
|
linear-gradient(
|
|
2476
2495
|
to right,
|
|
2477
|
-
var(--slider_color-active, var(--bds-
|
|
2478
|
-
var(--slider_color-active, var(--bds-
|
|
2479
|
-
var(--bds-
|
|
2480
|
-
var(--bds-
|
|
2496
|
+
var(--slider_color-active, var(--bds-color_green)) 0%,
|
|
2497
|
+
var(--slider_color-active, var(--bds-color_green)) var(--slider_fill),
|
|
2498
|
+
var(--bds-color_bg--subtle) var(--slider_fill),
|
|
2499
|
+
var(--bds-color_bg--subtle) 100%);
|
|
2481
2500
|
cursor: pointer;
|
|
2482
2501
|
transition: var(--bds-animation_transition);
|
|
2483
2502
|
}
|
|
2484
|
-
.
|
|
2503
|
+
.bds103Slider-slider:focus-visible {
|
|
2485
2504
|
outline: var(--bds-outline_default);
|
|
2486
2505
|
outline-offset: var(--bds-outline_offset);
|
|
2487
2506
|
border-radius: 999px;
|
|
2488
2507
|
}
|
|
2489
|
-
.
|
|
2508
|
+
.bds103Slider-slider:disabled {
|
|
2490
2509
|
opacity: 0.4;
|
|
2491
2510
|
cursor: not-allowed;
|
|
2492
2511
|
}
|
|
2493
|
-
.
|
|
2512
|
+
.bds103Slider-slider::-webkit-slider-thumb {
|
|
2494
2513
|
appearance: none;
|
|
2495
2514
|
width: var(--slider_thumb-size);
|
|
2496
2515
|
height: var(--slider_thumb-size);
|
|
2497
2516
|
border-radius: 50%;
|
|
2498
|
-
background-color: var(--slider_color-active, var(--bds-
|
|
2517
|
+
background-color: var(--slider_color-active, var(--bds-color_green));
|
|
2499
2518
|
box-shadow: var(--bds-shadow_s);
|
|
2500
2519
|
transition: var(--bds-animation_transition);
|
|
2501
2520
|
cursor: pointer;
|
|
2502
2521
|
}
|
|
2503
|
-
.
|
|
2522
|
+
.bds103Slider-slider::-moz-range-thumb {
|
|
2504
2523
|
width: var(--slider_thumb-size);
|
|
2505
2524
|
height: var(--slider_thumb-size);
|
|
2506
2525
|
border: none;
|
|
2507
2526
|
border-radius: 50%;
|
|
2508
|
-
background-color: var(--slider_color-active, var(--bds-
|
|
2527
|
+
background-color: var(--slider_color-active, var(--bds-color_green));
|
|
2509
2528
|
box-shadow: var(--bds-shadow_s);
|
|
2510
2529
|
cursor: pointer;
|
|
2511
2530
|
}
|
|
2512
|
-
.
|
|
2531
|
+
.bds103Slider-sliderError {
|
|
2513
2532
|
background:
|
|
2514
2533
|
linear-gradient(
|
|
2515
2534
|
to right,
|
|
2516
|
-
var(--bds-
|
|
2517
|
-
var(--bds-
|
|
2518
|
-
var(--bds-
|
|
2519
|
-
var(--bds-
|
|
2535
|
+
var(--bds-color_error) 0%,
|
|
2536
|
+
var(--bds-color_error) var(--slider_fill),
|
|
2537
|
+
var(--bds-color_bg--subtle) var(--slider_fill),
|
|
2538
|
+
var(--bds-color_bg--subtle) 100%);
|
|
2520
2539
|
}
|
|
2521
|
-
.
|
|
2522
|
-
background-color: var(--bds-
|
|
2540
|
+
.bds103Slider-sliderError::-webkit-slider-thumb {
|
|
2541
|
+
background-color: var(--bds-color_error);
|
|
2523
2542
|
}
|
|
2524
|
-
.
|
|
2525
|
-
background-color: var(--bds-
|
|
2543
|
+
.bds103Slider-sliderError::-moz-range-thumb {
|
|
2544
|
+
background-color: var(--bds-color_error);
|
|
2526
2545
|
}
|
|
2527
2546
|
@media (prefers-reduced-motion: reduce) {
|
|
2528
|
-
.
|
|
2529
|
-
.
|
|
2530
|
-
.
|
|
2547
|
+
.bds103Slider-slider,
|
|
2548
|
+
.bds103Slider-slider::-webkit-slider-thumb,
|
|
2549
|
+
.bds103Slider-slider::-moz-range-thumb {
|
|
2531
2550
|
transition: none;
|
|
2532
2551
|
}
|
|
2533
2552
|
}
|
|
@@ -2535,30 +2554,30 @@
|
|
|
2535
2554
|
|
|
2536
2555
|
/* src/components/interaction/form/Switch/Switch.module.css */
|
|
2537
2556
|
@layer component {
|
|
2538
|
-
.
|
|
2557
|
+
.bds103Switch-switchGroup {
|
|
2539
2558
|
--switch_thumb-size: 1.25em;
|
|
2540
2559
|
--switch_track-pad: var(--bds-space_xxxs);
|
|
2541
2560
|
--switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
|
|
2542
2561
|
--switch_track-width: calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
|
|
2543
|
-
color: var(--switch_color, var(--bds-
|
|
2562
|
+
color: var(--switch_color, var(--bds-color_on-bg));
|
|
2544
2563
|
display: flex;
|
|
2545
2564
|
flex-direction: column;
|
|
2546
2565
|
}
|
|
2547
|
-
.
|
|
2566
|
+
.bds103Switch-switchGroup.bds103Switch---size_small {
|
|
2548
2567
|
--switch_thumb-size: 1em;
|
|
2549
2568
|
}
|
|
2550
|
-
.
|
|
2569
|
+
.bds103Switch-switchGroup.bds103Switch---size_medium {
|
|
2551
2570
|
--switch_thumb-size: 1.25em;
|
|
2552
2571
|
}
|
|
2553
|
-
.
|
|
2572
|
+
.bds103Switch-switchGroup.bds103Switch---size_large {
|
|
2554
2573
|
--switch_thumb-size: 1.5em;
|
|
2555
2574
|
}
|
|
2556
|
-
.
|
|
2575
|
+
.bds103Switch-inputWrapper {
|
|
2557
2576
|
display: flex;
|
|
2558
2577
|
align-items: center;
|
|
2559
2578
|
gap: var(--bds-space_xs);
|
|
2560
2579
|
}
|
|
2561
|
-
.
|
|
2580
|
+
.bds103Switch-trackWrapper {
|
|
2562
2581
|
position: relative;
|
|
2563
2582
|
display: inline-flex;
|
|
2564
2583
|
align-items: center;
|
|
@@ -2566,7 +2585,7 @@
|
|
|
2566
2585
|
width: var(--switch_track-width);
|
|
2567
2586
|
height: var(--switch_track-height);
|
|
2568
2587
|
}
|
|
2569
|
-
.
|
|
2588
|
+
.bds103Switch-switch {
|
|
2570
2589
|
position: absolute;
|
|
2571
2590
|
inset: 0;
|
|
2572
2591
|
appearance: none;
|
|
@@ -2577,16 +2596,16 @@
|
|
|
2577
2596
|
cursor: pointer;
|
|
2578
2597
|
z-index: 1;
|
|
2579
2598
|
}
|
|
2580
|
-
.
|
|
2599
|
+
.bds103Switch-switch:disabled {
|
|
2581
2600
|
cursor: not-allowed;
|
|
2582
2601
|
}
|
|
2583
|
-
.
|
|
2602
|
+
.bds103Switch-track {
|
|
2584
2603
|
display: inline-flex;
|
|
2585
2604
|
align-items: center;
|
|
2586
2605
|
width: var(--switch_track-width);
|
|
2587
2606
|
height: var(--switch_track-height);
|
|
2588
2607
|
border-radius: 999px;
|
|
2589
|
-
background-color: var(--switch_track-bg, var(--bds-
|
|
2608
|
+
background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
|
|
2590
2609
|
padding-inline: var(--switch_track-pad);
|
|
2591
2610
|
pointer-events: none;
|
|
2592
2611
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
@@ -2596,40 +2615,40 @@
|
|
|
2596
2615
|
--bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
|
|
2597
2616
|
background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
|
|
2598
2617
|
transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2599
|
-
--bdc_color: var(--switch_thumb-bg, var(--bds-
|
|
2618
|
+
--bdc_color: var(--switch_thumb-bg, var(--bds-color_grey));
|
|
2600
2619
|
}
|
|
2601
|
-
.
|
|
2620
|
+
.bds103Switch-thumb {
|
|
2602
2621
|
display: block;
|
|
2603
2622
|
width: var(--switch_thumb-size);
|
|
2604
2623
|
height: var(--switch_thumb-size);
|
|
2605
2624
|
border-radius: 50%;
|
|
2606
|
-
background-color: var(--switch_thumb-bg, var(--bds-
|
|
2625
|
+
background-color: var(--switch_thumb-bg, var(--bds-color_grey));
|
|
2607
2626
|
box-shadow: var(--bds-shadow_s);
|
|
2608
2627
|
transition: var(--bds-animation_transition);
|
|
2609
2628
|
transform: translateX(0);
|
|
2610
2629
|
}
|
|
2611
|
-
.
|
|
2612
|
-
--bdc_color: var(--bds-
|
|
2630
|
+
.bds103Switch-switch.bds103Switch-switchError + .bds103Switch-track {
|
|
2631
|
+
--bdc_color: var(--bds-color_error);
|
|
2613
2632
|
}
|
|
2614
|
-
.
|
|
2615
|
-
background-color: var(--switch_track-bg--active, var(--bds-
|
|
2616
|
-
--bdc_color: var(--switch_thumb-bg--active, var(--bds-
|
|
2633
|
+
.bds103Switch-switch:checked + .bds103Switch-track {
|
|
2634
|
+
background-color: var(--switch_track-bg--active, var(--bds-color_green--subtle));
|
|
2635
|
+
--bdc_color: var(--switch_thumb-bg--active, var(--bds-color_green--strong));
|
|
2617
2636
|
}
|
|
2618
|
-
.
|
|
2619
|
-
background-color: var(--switch_thumb-bg--active, var(--bds-
|
|
2637
|
+
.bds103Switch-switch:checked + .bds103Switch-track .bds103Switch-thumb {
|
|
2638
|
+
background-color: var(--switch_thumb-bg--active, var(--bds-color_green--strong));
|
|
2620
2639
|
transform: translateX(var(--switch_thumb-size));
|
|
2621
2640
|
}
|
|
2622
|
-
.
|
|
2641
|
+
.bds103Switch-switch:focus-visible + .bds103Switch-track {
|
|
2623
2642
|
outline: var(--bds-outline_default);
|
|
2624
2643
|
outline-offset: var(--bds-outline_offset);
|
|
2625
2644
|
border-radius: 999px;
|
|
2626
2645
|
}
|
|
2627
|
-
.
|
|
2646
|
+
.bds103Switch-switch:disabled + .bds103Switch-track {
|
|
2628
2647
|
opacity: 0.4;
|
|
2629
2648
|
}
|
|
2630
2649
|
@media (prefers-reduced-motion: reduce) {
|
|
2631
|
-
.
|
|
2632
|
-
.
|
|
2650
|
+
.bds103Switch-track,
|
|
2651
|
+
.bds103Switch-thumb {
|
|
2633
2652
|
transition: none;
|
|
2634
2653
|
}
|
|
2635
2654
|
}
|
|
@@ -2637,11 +2656,11 @@
|
|
|
2637
2656
|
|
|
2638
2657
|
/* src/components/interaction/form/Textarea/Textarea.module.css */
|
|
2639
2658
|
@layer component {
|
|
2640
|
-
.
|
|
2659
|
+
.bds103Textarea-formGroup {
|
|
2641
2660
|
display: flex;
|
|
2642
2661
|
flex-direction: column;
|
|
2643
2662
|
}
|
|
2644
|
-
.
|
|
2663
|
+
.bds103Textarea-textarea {
|
|
2645
2664
|
font-family: var(--bds-font_family--body);
|
|
2646
2665
|
font-size: var(--bds-font_size--body);
|
|
2647
2666
|
line-height: var(--bds-font_line-height--body);
|
|
@@ -2653,74 +2672,74 @@
|
|
|
2653
2672
|
outline-offset: var(--bdc-outline_offset);
|
|
2654
2673
|
border-radius: var(--textarea_radius, var(--bdc-outline_radius));
|
|
2655
2674
|
box-shadow: var(--textarea_shadow, var(--bdc-outline_shadow));
|
|
2656
|
-
background-color: var(--textarea_color_bg, var(--bds-
|
|
2657
|
-
color: var(--textarea_color, var(--bds-
|
|
2675
|
+
background-color: var(--textarea_color_bg, var(--bds-color_bg));
|
|
2676
|
+
color: var(--textarea_color, var(--bds-color_on-bg));
|
|
2658
2677
|
resize: vertical;
|
|
2659
2678
|
min-height: calc(var(--bds-space_m) * 5);
|
|
2660
2679
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2661
2680
|
}
|
|
2662
|
-
.
|
|
2681
|
+
.bds103Textarea-textarea:focus {
|
|
2663
2682
|
--bdc_color: var(--bdc_color--focus);
|
|
2664
2683
|
}
|
|
2665
|
-
.
|
|
2684
|
+
.bds103Textarea-textarea:focus-visible {
|
|
2666
2685
|
outline: var(--bds-outline_default);
|
|
2667
2686
|
outline-offset: var(--bds-outline_offset);
|
|
2668
2687
|
}
|
|
2669
|
-
.
|
|
2688
|
+
.bds103Textarea-textarea:disabled {
|
|
2670
2689
|
opacity: 0.5;
|
|
2671
2690
|
cursor: not-allowed;
|
|
2672
2691
|
resize: none;
|
|
2673
2692
|
}
|
|
2674
|
-
.
|
|
2693
|
+
.bds103Textarea-textareaError {
|
|
2675
2694
|
--bdc_color: var(--bdc_color--error);
|
|
2676
2695
|
}
|
|
2677
2696
|
}
|
|
2678
2697
|
|
|
2679
2698
|
/* src/components/layout/ButtonGroup/ButtonGroup.module.css */
|
|
2680
2699
|
@layer component {
|
|
2681
|
-
.
|
|
2700
|
+
.bds103ButtonGroup-buttonGroup {
|
|
2682
2701
|
container-type: inline-size;
|
|
2683
2702
|
container-name: button-group;
|
|
2684
2703
|
grid-column: var(--bds-grid_span-100);
|
|
2685
2704
|
}
|
|
2686
|
-
.
|
|
2705
|
+
.bds103ButtonGroup-buttonGroup .bds103ButtonGroup-container {
|
|
2687
2706
|
position: relative;
|
|
2688
2707
|
display: flex;
|
|
2689
2708
|
flex-direction: column-reverse;
|
|
2690
2709
|
gap: var(--bds-space_l);
|
|
2691
2710
|
align-items: center;
|
|
2692
2711
|
}
|
|
2693
|
-
.
|
|
2712
|
+
.bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_card .bds103ButtonGroup-container {
|
|
2694
2713
|
align-items: stretch;
|
|
2695
2714
|
}
|
|
2696
|
-
.
|
|
2697
|
-
.
|
|
2715
|
+
.bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_flow .bds103ButtonGroup-container,
|
|
2716
|
+
.bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_modal .bds103ButtonGroup-container {
|
|
2698
2717
|
align-items: center;
|
|
2699
2718
|
}
|
|
2700
|
-
.
|
|
2719
|
+
.bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_content .bds103ButtonGroup-container {
|
|
2701
2720
|
align-items: flex-start;
|
|
2702
2721
|
}
|
|
2703
2722
|
@supports (contain: inline-size) {
|
|
2704
2723
|
@container button-group (min-width: 30rem) {
|
|
2705
|
-
.
|
|
2724
|
+
.bds103ButtonGroup-buttonGroup .bds103ButtonGroup-container {
|
|
2706
2725
|
flex-direction: row;
|
|
2707
2726
|
justify-content: space-between;
|
|
2708
2727
|
}
|
|
2709
|
-
.
|
|
2710
|
-
.
|
|
2728
|
+
.bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_modal .bds103ButtonGroup-container > :first-child:last-child,
|
|
2729
|
+
.bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_flow .bds103ButtonGroup-container > :first-child:last-child {
|
|
2711
2730
|
margin-inline-start: auto;
|
|
2712
2731
|
}
|
|
2713
|
-
.
|
|
2732
|
+
.bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_card .bds103ButtonGroup-container {
|
|
2714
2733
|
justify-content: center;
|
|
2715
2734
|
}
|
|
2716
|
-
.
|
|
2735
|
+
.bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_modal .bds103ButtonGroup-container {
|
|
2717
2736
|
justify-content: flex-end;
|
|
2718
2737
|
}
|
|
2719
|
-
.
|
|
2738
|
+
.bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_content .bds103ButtonGroup-container {
|
|
2720
2739
|
justify-content: flex-start;
|
|
2721
2740
|
align-items: center;
|
|
2722
2741
|
}
|
|
2723
|
-
.
|
|
2742
|
+
.bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_grid .bds103ButtonGroup-container {
|
|
2724
2743
|
justify-content: center;
|
|
2725
2744
|
}
|
|
2726
2745
|
}
|
|
@@ -2729,70 +2748,70 @@
|
|
|
2729
2748
|
|
|
2730
2749
|
/* src/components/layout/Card/Card.module.css */
|
|
2731
2750
|
@layer component {
|
|
2732
|
-
.
|
|
2733
|
-
background-color: var(--card_color, var(--bds-
|
|
2734
|
-
color: var(--card_on-color, var(--bds-
|
|
2751
|
+
.bds103Card-card {
|
|
2752
|
+
background-color: var(--card_color, var(--bds-color_bg));
|
|
2753
|
+
color: var(--card_on-color, var(--bds-color_on-bg));
|
|
2735
2754
|
border-radius: var(--bds-border_radius--m);
|
|
2736
2755
|
transition: all 0.3s ease;
|
|
2737
2756
|
position: relative;
|
|
2738
2757
|
}
|
|
2739
|
-
.
|
|
2758
|
+
.bds103Card-card.bds103Card---default {
|
|
2740
2759
|
box-shadow: var(--bds-shadow_s);
|
|
2741
2760
|
}
|
|
2742
|
-
.
|
|
2761
|
+
.bds103Card-card.bds103Card---elevated {
|
|
2743
2762
|
box-shadow: var(--bds-shadow_m);
|
|
2744
2763
|
}
|
|
2745
|
-
.
|
|
2764
|
+
.bds103Card-card.bds103Card---outlined {
|
|
2746
2765
|
border: var(--card_border, none);
|
|
2747
2766
|
--bdc_color: currentcolor;
|
|
2748
2767
|
outline: var(--bdc-outline_width) solid var(--bdc_color);
|
|
2749
2768
|
outline-offset: var(--bdc-outline_offset);
|
|
2750
2769
|
box-shadow: var(--bds-shadow_s);
|
|
2751
2770
|
}
|
|
2752
|
-
.
|
|
2771
|
+
.bds103Card-card.bds103Card---clickable {
|
|
2753
2772
|
cursor: pointer;
|
|
2754
2773
|
}
|
|
2755
|
-
.
|
|
2774
|
+
.bds103Card-card.bds103Card---padding-none {
|
|
2756
2775
|
padding: 0;
|
|
2757
2776
|
}
|
|
2758
|
-
.
|
|
2777
|
+
.bds103Card-card.bds103Card---padding-small {
|
|
2759
2778
|
padding: var(--bds-space_s);
|
|
2760
2779
|
}
|
|
2761
|
-
.
|
|
2780
|
+
.bds103Card-card.bds103Card---padding-medium {
|
|
2762
2781
|
padding: var(--bds-space_m);
|
|
2763
2782
|
}
|
|
2764
|
-
.
|
|
2783
|
+
.bds103Card-card.bds103Card---padding-large {
|
|
2765
2784
|
padding: var(--bds-space_l);
|
|
2766
2785
|
}
|
|
2767
|
-
.
|
|
2786
|
+
.bds103Card-card.bds103Card---text-start {
|
|
2768
2787
|
text-align: start;
|
|
2769
2788
|
}
|
|
2770
|
-
.
|
|
2789
|
+
.bds103Card-card.bds103Card---text-center {
|
|
2771
2790
|
text-align: center;
|
|
2772
2791
|
}
|
|
2773
|
-
.
|
|
2792
|
+
.bds103Card-card.bds103Card---text-end {
|
|
2774
2793
|
text-align: end;
|
|
2775
2794
|
}
|
|
2776
|
-
.
|
|
2795
|
+
.bds103Card-card.bds103Card---clickable:focus-visible {
|
|
2777
2796
|
outline: 2px solid var(--color_focus, currentcolor);
|
|
2778
2797
|
outline-offset: 2px;
|
|
2779
2798
|
}
|
|
2780
|
-
.
|
|
2799
|
+
.bds103Card-card.bds103Card---clickable:active {
|
|
2781
2800
|
transform: translateY(0);
|
|
2782
2801
|
box-shadow: var(--bds-shadow_s);
|
|
2783
2802
|
}
|
|
2784
2803
|
@media (hover: hover) and (pointer: fine) {
|
|
2785
|
-
.
|
|
2804
|
+
.bds103Card-card.bds103Card---clickable:hover {
|
|
2786
2805
|
transform: translateY(-2px);
|
|
2787
2806
|
box-shadow: var(--bds-shadow_xl);
|
|
2788
2807
|
}
|
|
2789
|
-
.
|
|
2808
|
+
.bds103Card-card.bds103Card---default:hover {
|
|
2790
2809
|
box-shadow: var(--bds-shadow_m);
|
|
2791
2810
|
}
|
|
2792
|
-
.
|
|
2811
|
+
.bds103Card-card.bds103Card---elevated:hover {
|
|
2793
2812
|
box-shadow: var(--bds-shadow_2xl);
|
|
2794
2813
|
}
|
|
2795
|
-
.
|
|
2814
|
+
.bds103Card-card.bds103Card---outlined:hover {
|
|
2796
2815
|
box-shadow: var(--bds-shadow_s);
|
|
2797
2816
|
}
|
|
2798
2817
|
}
|
|
@@ -2800,60 +2819,60 @@
|
|
|
2800
2819
|
|
|
2801
2820
|
/* src/components/layout/SectionHeader/SectionHeader.module.css */
|
|
2802
2821
|
@layer component {
|
|
2803
|
-
.
|
|
2822
|
+
.bds103SectionHeader-sectionHeader {
|
|
2804
2823
|
display: flex;
|
|
2805
2824
|
flex-direction: column;
|
|
2806
2825
|
gap: var(--bds-space_m);
|
|
2807
2826
|
grid-column: var(--bds-grid_span-100);
|
|
2808
2827
|
}
|
|
2809
|
-
.
|
|
2810
|
-
color: var(--sectionHeader-title-color, var(--bds-
|
|
2828
|
+
.bds103SectionHeader-title {
|
|
2829
|
+
color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
|
|
2811
2830
|
margin: 0;
|
|
2812
2831
|
font-family: var(--bds-font_family--body);
|
|
2813
2832
|
}
|
|
2814
|
-
.
|
|
2815
|
-
color: var(--sectionHeader_subtitle-color, var(--bds-
|
|
2833
|
+
.bds103SectionHeader-subtitle {
|
|
2834
|
+
color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
|
|
2816
2835
|
margin: 0;
|
|
2817
2836
|
font-family: var(--bds-font_family--body);
|
|
2818
2837
|
font-weight: var(--bds-font_weight--medium);
|
|
2819
2838
|
}
|
|
2820
|
-
.
|
|
2839
|
+
.bds103SectionHeader-sectionHeader.bds103SectionHeader---start {
|
|
2821
2840
|
align-items: flex-start;
|
|
2822
2841
|
text-align: start;
|
|
2823
2842
|
}
|
|
2824
|
-
.
|
|
2843
|
+
.bds103SectionHeader-sectionHeader.bds103SectionHeader---center {
|
|
2825
2844
|
align-items: center;
|
|
2826
2845
|
text-align: center;
|
|
2827
2846
|
}
|
|
2828
|
-
.
|
|
2847
|
+
.bds103SectionHeader-sectionHeader.bds103SectionHeader---end {
|
|
2829
2848
|
align-items: flex-end;
|
|
2830
2849
|
text-align: end;
|
|
2831
2850
|
}
|
|
2832
|
-
.
|
|
2851
|
+
.bds103SectionHeader-sectionHeader.bds103SectionHeader---small .bds103SectionHeader-title {
|
|
2833
2852
|
font-size: var(--bds-font_size--heading-1);
|
|
2834
2853
|
line-height: var(--bds-font_line-height--heading);
|
|
2835
2854
|
font-weight: var(--bds-font_weight--bold);
|
|
2836
2855
|
}
|
|
2837
|
-
.
|
|
2856
|
+
.bds103SectionHeader-sectionHeader.bds103SectionHeader---small .bds103SectionHeader-subtitle {
|
|
2838
2857
|
font-size: var(--bds-font_size--body);
|
|
2839
2858
|
line-height: 1.4;
|
|
2840
2859
|
}
|
|
2841
|
-
.
|
|
2860
|
+
.bds103SectionHeader-sectionHeader.bds103SectionHeader---medium .bds103SectionHeader-title {
|
|
2842
2861
|
font-size: var(--bds-font_size--display);
|
|
2843
2862
|
line-height: var(--bds-font_line-height--display);
|
|
2844
2863
|
font-weight: var(--bds-font_weight--bold);
|
|
2845
2864
|
}
|
|
2846
|
-
.
|
|
2865
|
+
.bds103SectionHeader-sectionHeader.bds103SectionHeader---medium .bds103SectionHeader-subtitle {
|
|
2847
2866
|
font-size: var(--bds-font_size--heading-3);
|
|
2848
2867
|
line-height: 1.3;
|
|
2849
2868
|
}
|
|
2850
|
-
.
|
|
2869
|
+
.bds103SectionHeader-sectionHeader.bds103SectionHeader---large .bds103SectionHeader-title {
|
|
2851
2870
|
font-size: var(--bds-font_size--display);
|
|
2852
2871
|
line-height: var(--bds-font_line-height--display);
|
|
2853
2872
|
font-weight: var(--bds-font_weight--bold);
|
|
2854
2873
|
letter-spacing: var(--bds-font_tracking--tight);
|
|
2855
2874
|
}
|
|
2856
|
-
.
|
|
2875
|
+
.bds103SectionHeader-sectionHeader.bds103SectionHeader---large .bds103SectionHeader-subtitle {
|
|
2857
2876
|
font-size: var(--bds-font_size--heading-2);
|
|
2858
2877
|
line-height: 1.3;
|
|
2859
2878
|
font-weight: var(--bds-font_weight--medium);
|
|
@@ -2862,7 +2881,7 @@
|
|
|
2862
2881
|
|
|
2863
2882
|
/* src/components/layout/IconWrapper/IconWrapper.module.css */
|
|
2864
2883
|
@layer component {
|
|
2865
|
-
.
|
|
2884
|
+
.bds103IconWrapper-wrapper {
|
|
2866
2885
|
width: 2em;
|
|
2867
2886
|
height: 2em;
|
|
2868
2887
|
font-size: 3em;
|
|
@@ -2871,13 +2890,13 @@
|
|
|
2871
2890
|
align-items: center;
|
|
2872
2891
|
justify-content: center;
|
|
2873
2892
|
margin: var(--bds-space_l) auto var(--bds-space_m);
|
|
2874
|
-
background: var(--icon-wrapper-color, var(--bds-
|
|
2875
|
-
color: var(--bds-on-icon-wrapper-color, var(--bds-
|
|
2876
|
-
fill: var(--bds-on-icon-wrapper-color, var(--bds-
|
|
2893
|
+
background: var(--icon-wrapper-color, var(--bds-color_bg));
|
|
2894
|
+
color: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
|
|
2895
|
+
fill: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
|
|
2877
2896
|
position: relative;
|
|
2878
2897
|
transition: var(--bds-animation_transition);
|
|
2879
2898
|
}
|
|
2880
|
-
.
|
|
2899
|
+
.bds103IconWrapper-wrapper svg {
|
|
2881
2900
|
fill: currentcolor;
|
|
2882
2901
|
}
|
|
2883
2902
|
}
|