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