@boostdev/design-system-components 0.1.12 → 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 +14 -2
- package/README.md +35 -5
- package/dist/client.cjs +54 -50
- package/dist/client.css +498 -509
- 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 +498 -509
- package/dist/index.d.cts +5 -3
- package/dist/index.d.ts +5 -3
- package/dist/index.js +54 -50
- package/package.json +6 -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 +6 -0
- 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/client.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));
|
|
@@ -1372,20 +1343,21 @@
|
|
|
1372
1343
|
padding: var(--space_l);
|
|
1373
1344
|
max-width: 90svw;
|
|
1374
1345
|
max-height: 90svh;
|
|
1346
|
+
overflow: visible;
|
|
1375
1347
|
}
|
|
1376
|
-
.
|
|
1348
|
+
.bds0114Dialog-dialogContent {
|
|
1377
1349
|
display: grid;
|
|
1378
1350
|
gap: var(--grid_gap);
|
|
1379
1351
|
overflow-y: auto;
|
|
1380
1352
|
min-height: 0;
|
|
1381
1353
|
flex: 1;
|
|
1382
1354
|
}
|
|
1383
|
-
.
|
|
1355
|
+
.bds0114Dialog-closeForm {
|
|
1384
1356
|
position: absolute;
|
|
1385
1357
|
inset-block-start: -1em;
|
|
1386
1358
|
inset-inline-end: -1em;
|
|
1387
1359
|
}
|
|
1388
|
-
.
|
|
1360
|
+
.bds0114Dialog-closeButton {
|
|
1389
1361
|
all: unset;
|
|
1390
1362
|
width: 2em;
|
|
1391
1363
|
height: 2em;
|
|
@@ -1398,15 +1370,19 @@
|
|
|
1398
1370
|
border: 2px solid currentcolor;
|
|
1399
1371
|
cursor: pointer;
|
|
1400
1372
|
}
|
|
1401
|
-
.
|
|
1373
|
+
.bds0114Dialog-closeButton svg {
|
|
1402
1374
|
width: 1.25em;
|
|
1403
1375
|
height: 1.25em;
|
|
1404
1376
|
}
|
|
1377
|
+
.bds0114Dialog-dialog::backdrop {
|
|
1378
|
+
background-color: var(--dialog_backdrop-color, rgb(0 0 0 / 50%));
|
|
1379
|
+
backdrop-filter: blur(3px);
|
|
1380
|
+
}
|
|
1405
1381
|
}
|
|
1406
1382
|
|
|
1407
1383
|
/* src/components/interaction/Drawer/Drawer.module.css */
|
|
1408
1384
|
@layer component {
|
|
1409
|
-
.
|
|
1385
|
+
.bds0114Drawer-drawer {
|
|
1410
1386
|
position: fixed;
|
|
1411
1387
|
inset: 0;
|
|
1412
1388
|
margin: 0;
|
|
@@ -1419,10 +1395,11 @@
|
|
|
1419
1395
|
background: transparent;
|
|
1420
1396
|
overflow: hidden;
|
|
1421
1397
|
}
|
|
1422
|
-
.
|
|
1423
|
-
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);
|
|
1424
1401
|
}
|
|
1425
|
-
.
|
|
1402
|
+
.bds0114Drawer-panel {
|
|
1426
1403
|
position: absolute;
|
|
1427
1404
|
inset-block: 0;
|
|
1428
1405
|
display: flex;
|
|
@@ -1433,15 +1410,15 @@
|
|
|
1433
1410
|
color: var(--drawer_on-color, var(--color_on-bg));
|
|
1434
1411
|
box-shadow: var(--shadow_xl);
|
|
1435
1412
|
overflow: hidden;
|
|
1436
|
-
transition:
|
|
1413
|
+
transition: var(--animation_transition);
|
|
1437
1414
|
}
|
|
1438
|
-
.
|
|
1415
|
+
.bds0114Drawer---side_right .bds0114Drawer-panel {
|
|
1439
1416
|
inset-inline-end: 0;
|
|
1440
1417
|
}
|
|
1441
|
-
.
|
|
1418
|
+
.bds0114Drawer---side_left .bds0114Drawer-panel {
|
|
1442
1419
|
inset-inline-start: 0;
|
|
1443
1420
|
}
|
|
1444
|
-
.
|
|
1421
|
+
.bds0114Drawer-header {
|
|
1445
1422
|
display: flex;
|
|
1446
1423
|
align-items: center;
|
|
1447
1424
|
justify-content: space-between;
|
|
@@ -1449,13 +1426,7 @@
|
|
|
1449
1426
|
border-block-end: 1px solid currentcolor;
|
|
1450
1427
|
flex-shrink: 0;
|
|
1451
1428
|
}
|
|
1452
|
-
.
|
|
1453
|
-
margin: 0;
|
|
1454
|
-
font-size: var(--font_size--heading--s);
|
|
1455
|
-
font-weight: var(--font_weight--semibold);
|
|
1456
|
-
line-height: var(--font_line-height--heading);
|
|
1457
|
-
}
|
|
1458
|
-
.bds0112Drawer-closeButton {
|
|
1429
|
+
.bds0114Drawer-closeButton {
|
|
1459
1430
|
all: unset;
|
|
1460
1431
|
display: flex;
|
|
1461
1432
|
align-items: center;
|
|
@@ -1466,26 +1437,26 @@
|
|
|
1466
1437
|
cursor: pointer;
|
|
1467
1438
|
transition: var(--animation_transition);
|
|
1468
1439
|
}
|
|
1469
|
-
.
|
|
1440
|
+
.bds0114Drawer-closeButton svg {
|
|
1470
1441
|
width: 1.25rem;
|
|
1471
1442
|
height: 1.25rem;
|
|
1472
1443
|
}
|
|
1473
|
-
.
|
|
1444
|
+
.bds0114Drawer-closeButton:focus-visible {
|
|
1474
1445
|
outline: var(--outline_default);
|
|
1475
1446
|
outline-offset: var(--outline_offset);
|
|
1476
1447
|
}
|
|
1477
1448
|
@media (hover: hover) and (pointer: fine) {
|
|
1478
|
-
.
|
|
1449
|
+
.bds0114Drawer-closeButton:hover {
|
|
1479
1450
|
background-color: var(--color_bg--subtle);
|
|
1480
1451
|
}
|
|
1481
1452
|
}
|
|
1482
|
-
.
|
|
1453
|
+
.bds0114Drawer-body {
|
|
1483
1454
|
flex: 1;
|
|
1484
1455
|
overflow-y: auto;
|
|
1485
1456
|
padding: var(--space_l);
|
|
1486
1457
|
}
|
|
1487
1458
|
@media (prefers-reduced-motion: reduce) {
|
|
1488
|
-
.
|
|
1459
|
+
.bds0114Drawer-panel {
|
|
1489
1460
|
transition: none;
|
|
1490
1461
|
}
|
|
1491
1462
|
}
|
|
@@ -1493,11 +1464,11 @@
|
|
|
1493
1464
|
|
|
1494
1465
|
/* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
|
|
1495
1466
|
@layer component {
|
|
1496
|
-
.
|
|
1467
|
+
.bds0114DropdownMenu-wrapper {
|
|
1497
1468
|
position: relative;
|
|
1498
1469
|
display: inline-flex;
|
|
1499
1470
|
}
|
|
1500
|
-
.
|
|
1471
|
+
.bds0114DropdownMenu-menu {
|
|
1501
1472
|
position: absolute;
|
|
1502
1473
|
top: calc(100% + var(--space_xxs));
|
|
1503
1474
|
z-index: var(--z-index_dropdown);
|
|
@@ -1511,19 +1482,19 @@
|
|
|
1511
1482
|
list-style: none;
|
|
1512
1483
|
margin: 0;
|
|
1513
1484
|
}
|
|
1514
|
-
.
|
|
1485
|
+
.bds0114DropdownMenu---placement_bottom-start {
|
|
1515
1486
|
left: 0;
|
|
1516
1487
|
}
|
|
1517
|
-
.
|
|
1488
|
+
.bds0114DropdownMenu---placement_bottom-end {
|
|
1518
1489
|
right: 0;
|
|
1519
1490
|
}
|
|
1520
|
-
.
|
|
1491
|
+
.bds0114DropdownMenu-separator {
|
|
1521
1492
|
border: none;
|
|
1522
1493
|
border-top: 1px solid currentcolor;
|
|
1523
1494
|
margin: var(--space_xxs) 0;
|
|
1524
1495
|
opacity: 0.15;
|
|
1525
1496
|
}
|
|
1526
|
-
.
|
|
1497
|
+
.bds0114DropdownMenu-item {
|
|
1527
1498
|
all: unset;
|
|
1528
1499
|
display: flex;
|
|
1529
1500
|
align-items: center;
|
|
@@ -1537,22 +1508,22 @@
|
|
|
1537
1508
|
box-sizing: border-box;
|
|
1538
1509
|
transition: var(--animation_transition);
|
|
1539
1510
|
}
|
|
1540
|
-
.
|
|
1511
|
+
.bds0114DropdownMenu-item:disabled {
|
|
1541
1512
|
opacity: 0.4;
|
|
1542
1513
|
cursor: not-allowed;
|
|
1543
1514
|
}
|
|
1544
|
-
.
|
|
1515
|
+
.bds0114DropdownMenu-item:focus-visible {
|
|
1545
1516
|
outline: var(--outline_default);
|
|
1546
1517
|
outline-offset: calc(var(--outline_offset) * -1);
|
|
1547
1518
|
border-radius: var(--border_radius--xs);
|
|
1548
1519
|
}
|
|
1549
1520
|
@media (hover: hover) and (pointer: fine) {
|
|
1550
|
-
.
|
|
1521
|
+
.bds0114DropdownMenu-item:not(:disabled):hover {
|
|
1551
1522
|
background-color: var(--color_bg--subtle);
|
|
1552
1523
|
color: var(--color_interactive);
|
|
1553
1524
|
}
|
|
1554
1525
|
}
|
|
1555
|
-
.
|
|
1526
|
+
.bds0114DropdownMenu-icon {
|
|
1556
1527
|
display: flex;
|
|
1557
1528
|
align-items: center;
|
|
1558
1529
|
flex-shrink: 0;
|
|
@@ -1561,11 +1532,11 @@
|
|
|
1561
1532
|
|
|
1562
1533
|
/* src/components/interaction/Popover/Popover.module.css */
|
|
1563
1534
|
@layer component {
|
|
1564
|
-
.
|
|
1535
|
+
.bds0114Popover-wrapper {
|
|
1565
1536
|
position: relative;
|
|
1566
1537
|
display: inline-flex;
|
|
1567
1538
|
}
|
|
1568
|
-
.
|
|
1539
|
+
.bds0114Popover-panel {
|
|
1569
1540
|
position: absolute;
|
|
1570
1541
|
z-index: var(--z-index_popover);
|
|
1571
1542
|
min-width: 12rem;
|
|
@@ -1577,19 +1548,19 @@
|
|
|
1577
1548
|
color: var(--popover_on-color, var(--color_on-bg));
|
|
1578
1549
|
font-size: var(--font_size--body);
|
|
1579
1550
|
}
|
|
1580
|
-
.
|
|
1551
|
+
.bds0114Popover---placement_bottom {
|
|
1581
1552
|
top: calc(100% + var(--space_xs));
|
|
1582
1553
|
left: 0;
|
|
1583
1554
|
}
|
|
1584
|
-
.
|
|
1555
|
+
.bds0114Popover---placement_top {
|
|
1585
1556
|
bottom: calc(100% + var(--space_xs));
|
|
1586
1557
|
left: 0;
|
|
1587
1558
|
}
|
|
1588
|
-
.
|
|
1559
|
+
.bds0114Popover---placement_right {
|
|
1589
1560
|
left: calc(100% + var(--space_xs));
|
|
1590
1561
|
top: 0;
|
|
1591
1562
|
}
|
|
1592
|
-
.
|
|
1563
|
+
.bds0114Popover---placement_left {
|
|
1593
1564
|
right: calc(100% + var(--space_xs));
|
|
1594
1565
|
top: 0;
|
|
1595
1566
|
}
|
|
@@ -1597,23 +1568,23 @@
|
|
|
1597
1568
|
|
|
1598
1569
|
/* src/components/interaction/Rating/Rating.module.css */
|
|
1599
1570
|
@layer component {
|
|
1600
|
-
.
|
|
1571
|
+
.bds0114Rating-rating {
|
|
1601
1572
|
display: inline-flex;
|
|
1602
1573
|
gap: var(--space_xxxs);
|
|
1603
1574
|
color: var(--color_bg);
|
|
1604
1575
|
}
|
|
1605
|
-
.
|
|
1576
|
+
.bds0114Rating-star {
|
|
1606
1577
|
width: 1.5em;
|
|
1607
1578
|
height: 1.5em;
|
|
1608
1579
|
}
|
|
1609
|
-
.
|
|
1580
|
+
.bds0114Rating---filled {
|
|
1610
1581
|
color: var(--color_warning);
|
|
1611
1582
|
}
|
|
1612
1583
|
}
|
|
1613
1584
|
|
|
1614
1585
|
/* src/components/interaction/Toast/Toast.module.css */
|
|
1615
1586
|
@layer component {
|
|
1616
|
-
.
|
|
1587
|
+
.bds0114Toast-toastContainer {
|
|
1617
1588
|
position: fixed;
|
|
1618
1589
|
bottom: var(--space_xl);
|
|
1619
1590
|
right: var(--space_xl);
|
|
@@ -1622,11 +1593,10 @@
|
|
|
1622
1593
|
gap: var(--space_m);
|
|
1623
1594
|
z-index: var(--z-index_toast);
|
|
1624
1595
|
}
|
|
1625
|
-
.
|
|
1596
|
+
.bds0114Toast-toast {
|
|
1626
1597
|
padding: var(--space_m) var(--space_l);
|
|
1627
1598
|
background-color: var(--toast_color, var(--color_bg));
|
|
1628
1599
|
color: var(--toast_on-color, var(--color_on-bg));
|
|
1629
|
-
border: 1px solid currentcolor;
|
|
1630
1600
|
border-radius: var(--border_radius--s);
|
|
1631
1601
|
box-shadow: var(--shadow_s);
|
|
1632
1602
|
display: flex;
|
|
@@ -1635,10 +1605,26 @@
|
|
|
1635
1605
|
min-width: 300px;
|
|
1636
1606
|
animation: slideIn var(--animation_duration--fast) var(--animation_easing);
|
|
1637
1607
|
}
|
|
1638
|
-
.
|
|
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 {
|
|
1639
1625
|
flex: 1;
|
|
1640
1626
|
}
|
|
1641
|
-
.
|
|
1627
|
+
.bds0114Toast-closeButton {
|
|
1642
1628
|
display: flex;
|
|
1643
1629
|
align-items: center;
|
|
1644
1630
|
justify-content: center;
|
|
@@ -1649,13 +1635,9 @@
|
|
|
1649
1635
|
background: none;
|
|
1650
1636
|
border: none;
|
|
1651
1637
|
cursor: pointer;
|
|
1652
|
-
color:
|
|
1653
|
-
opacity: 0.6;
|
|
1654
|
-
}
|
|
1655
|
-
.bds0112Toast-closeButton:hover {
|
|
1656
|
-
opacity: 1;
|
|
1638
|
+
color: var(--toast_on-color);
|
|
1657
1639
|
}
|
|
1658
|
-
.
|
|
1640
|
+
.bds0114Toast-closeButton svg {
|
|
1659
1641
|
width: 1rem;
|
|
1660
1642
|
height: 1rem;
|
|
1661
1643
|
}
|
|
@@ -1673,17 +1655,17 @@
|
|
|
1673
1655
|
|
|
1674
1656
|
/* src/components/interaction/form/Checkbox/Checkbox.module.css */
|
|
1675
1657
|
@layer component {
|
|
1676
|
-
.
|
|
1658
|
+
.bds0114Checkbox-checkboxGroup {
|
|
1677
1659
|
--inputSize: calc(var(--space_s) * 2);
|
|
1678
1660
|
display: flex;
|
|
1679
1661
|
flex-direction: column;
|
|
1680
1662
|
}
|
|
1681
|
-
.
|
|
1663
|
+
.bds0114Checkbox-inputWrapper {
|
|
1682
1664
|
display: flex;
|
|
1683
1665
|
align-items: stretch;
|
|
1684
1666
|
gap: var(--space_xs);
|
|
1685
1667
|
}
|
|
1686
|
-
.
|
|
1668
|
+
.bds0114Checkbox-checkbox {
|
|
1687
1669
|
margin-block-start: 0.25em;
|
|
1688
1670
|
width: var(--inputSize);
|
|
1689
1671
|
height: var(--inputSize);
|
|
@@ -1696,11 +1678,11 @@
|
|
|
1696
1678
|
position: relative;
|
|
1697
1679
|
transition: background-color 0.3s ease, border-color 0.3s ease;
|
|
1698
1680
|
}
|
|
1699
|
-
.
|
|
1681
|
+
.bds0114Checkbox-checkbox:checked {
|
|
1700
1682
|
background-color: var(--checkbox_color-active, var(--color_active));
|
|
1701
1683
|
border-color: var(--checkbox_color-active, var(--color_active));
|
|
1702
1684
|
}
|
|
1703
|
-
.
|
|
1685
|
+
.bds0114Checkbox-checkbox:checked::after {
|
|
1704
1686
|
content: "";
|
|
1705
1687
|
position: absolute;
|
|
1706
1688
|
left: 0.6em;
|
|
@@ -1711,15 +1693,15 @@
|
|
|
1711
1693
|
border-width: 0 2px 2px 0;
|
|
1712
1694
|
transform: rotate(45deg);
|
|
1713
1695
|
}
|
|
1714
|
-
.
|
|
1696
|
+
.bds0114Checkbox-checkbox:focus {
|
|
1715
1697
|
outline: none;
|
|
1716
1698
|
border-color: var(--color_interactive);
|
|
1717
1699
|
box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
|
|
1718
1700
|
}
|
|
1719
|
-
.
|
|
1701
|
+
.bds0114Checkbox-checkboxError {
|
|
1720
1702
|
border-color: var(--color_error);
|
|
1721
1703
|
}
|
|
1722
|
-
.
|
|
1704
|
+
.bds0114Checkbox-checkboxError:focus {
|
|
1723
1705
|
border-color: var(--color_error);
|
|
1724
1706
|
box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
1725
1707
|
}
|
|
@@ -1727,19 +1709,19 @@
|
|
|
1727
1709
|
|
|
1728
1710
|
/* src/components/interaction/form/atoms/Message.module.css */
|
|
1729
1711
|
@layer component {
|
|
1730
|
-
.
|
|
1731
|
-
.
|
|
1712
|
+
.bds0114Message-error,
|
|
1713
|
+
.bds0114Message-hint {
|
|
1732
1714
|
font-size: var(--font_size--body--s);
|
|
1733
1715
|
margin-inline-start: var(--labelPosition);
|
|
1734
1716
|
}
|
|
1735
|
-
.
|
|
1717
|
+
.bds0114Message-error {
|
|
1736
1718
|
color: var(--color_error);
|
|
1737
1719
|
}
|
|
1738
1720
|
}
|
|
1739
1721
|
|
|
1740
1722
|
/* src/components/interaction/form/atoms/Label.module.css */
|
|
1741
1723
|
@layer component {
|
|
1742
|
-
.
|
|
1724
|
+
.bds0114Label-label {
|
|
1743
1725
|
display: flex;
|
|
1744
1726
|
align-items: center;
|
|
1745
1727
|
font-family: var(--font_family--body);
|
|
@@ -1751,7 +1733,7 @@
|
|
|
1751
1733
|
|
|
1752
1734
|
/* src/components/interaction/form/atoms/InputContainer.module.css */
|
|
1753
1735
|
@layer component {
|
|
1754
|
-
.
|
|
1736
|
+
.bds0114InputContainer-container {
|
|
1755
1737
|
--labelPosition: calc(var(--inputSize) + var(--space_m));
|
|
1756
1738
|
display: flex;
|
|
1757
1739
|
flex-direction: column;
|
|
@@ -1761,16 +1743,16 @@
|
|
|
1761
1743
|
|
|
1762
1744
|
/* src/components/interaction/form/Combobox/Combobox.module.css */
|
|
1763
1745
|
@layer component {
|
|
1764
|
-
.
|
|
1746
|
+
.bds0114Combobox-formGroup {
|
|
1765
1747
|
display: flex;
|
|
1766
1748
|
flex-direction: column;
|
|
1767
1749
|
}
|
|
1768
|
-
.
|
|
1750
|
+
.bds0114Combobox-inputWrapper {
|
|
1769
1751
|
position: relative;
|
|
1770
1752
|
display: flex;
|
|
1771
1753
|
align-items: center;
|
|
1772
1754
|
}
|
|
1773
|
-
.
|
|
1755
|
+
.bds0114Combobox-input {
|
|
1774
1756
|
appearance: none;
|
|
1775
1757
|
width: 100%;
|
|
1776
1758
|
font-family: var(--font_family--body);
|
|
@@ -1783,22 +1765,22 @@
|
|
|
1783
1765
|
color: var(--combobox_color, var(--color_on-bg));
|
|
1784
1766
|
transition: var(--animation_transition);
|
|
1785
1767
|
}
|
|
1786
|
-
.
|
|
1768
|
+
.bds0114Combobox-input:focus {
|
|
1787
1769
|
--combobox_border-color: var(--color_interactive);
|
|
1788
1770
|
outline: none;
|
|
1789
1771
|
box-shadow: var(--combobox_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
|
|
1790
1772
|
}
|
|
1791
|
-
.
|
|
1773
|
+
.bds0114Combobox-input:disabled {
|
|
1792
1774
|
opacity: 0.5;
|
|
1793
1775
|
cursor: not-allowed;
|
|
1794
1776
|
}
|
|
1795
|
-
.
|
|
1777
|
+
.bds0114Combobox-inputError {
|
|
1796
1778
|
--combobox_border-color: var(--color_error);
|
|
1797
1779
|
}
|
|
1798
|
-
.
|
|
1780
|
+
.bds0114Combobox-inputError:focus {
|
|
1799
1781
|
--combobox_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
1800
1782
|
}
|
|
1801
|
-
.
|
|
1783
|
+
.bds0114Combobox-chevron {
|
|
1802
1784
|
position: absolute;
|
|
1803
1785
|
inset-inline-end: var(--space_s);
|
|
1804
1786
|
display: flex;
|
|
@@ -1806,11 +1788,11 @@
|
|
|
1806
1788
|
pointer-events: none;
|
|
1807
1789
|
color: var(--combobox_color, var(--color_on-bg));
|
|
1808
1790
|
}
|
|
1809
|
-
.
|
|
1791
|
+
.bds0114Combobox-chevron svg {
|
|
1810
1792
|
width: 1rem;
|
|
1811
1793
|
height: 1rem;
|
|
1812
1794
|
}
|
|
1813
|
-
.
|
|
1795
|
+
.bds0114Combobox-listbox {
|
|
1814
1796
|
position: absolute;
|
|
1815
1797
|
top: calc(100% + var(--space_xxs));
|
|
1816
1798
|
left: 0;
|
|
@@ -1827,7 +1809,7 @@
|
|
|
1827
1809
|
color: var(--combobox_on-color, var(--color_on-bg));
|
|
1828
1810
|
box-shadow: var(--shadow_m);
|
|
1829
1811
|
}
|
|
1830
|
-
.
|
|
1812
|
+
.bds0114Combobox-option {
|
|
1831
1813
|
display: flex;
|
|
1832
1814
|
align-items: center;
|
|
1833
1815
|
padding: var(--space_xs) var(--space_m);
|
|
@@ -1836,14 +1818,14 @@
|
|
|
1836
1818
|
cursor: pointer;
|
|
1837
1819
|
transition: var(--animation_transition);
|
|
1838
1820
|
}
|
|
1839
|
-
.
|
|
1821
|
+
.bds0114Combobox-option.bds0114Combobox---highlighted {
|
|
1840
1822
|
background-color: var(--color_bg--subtle);
|
|
1841
1823
|
color: var(--color_interactive);
|
|
1842
1824
|
}
|
|
1843
|
-
.
|
|
1825
|
+
.bds0114Combobox-option.bds0114Combobox---selected {
|
|
1844
1826
|
font-weight: var(--font_weight--semibold);
|
|
1845
1827
|
}
|
|
1846
|
-
.
|
|
1828
|
+
.bds0114Combobox-option.bds0114Combobox---disabled {
|
|
1847
1829
|
opacity: 0.4;
|
|
1848
1830
|
cursor: not-allowed;
|
|
1849
1831
|
}
|
|
@@ -1851,11 +1833,11 @@
|
|
|
1851
1833
|
|
|
1852
1834
|
/* src/components/interaction/form/FileInput/FileInput.module.css */
|
|
1853
1835
|
@layer component {
|
|
1854
|
-
.
|
|
1836
|
+
.bds0114FileInput-formGroup {
|
|
1855
1837
|
display: flex;
|
|
1856
1838
|
flex-direction: column;
|
|
1857
1839
|
}
|
|
1858
|
-
.
|
|
1840
|
+
.bds0114FileInput-dropZone {
|
|
1859
1841
|
display: flex;
|
|
1860
1842
|
flex-direction: column;
|
|
1861
1843
|
align-items: center;
|
|
@@ -1869,40 +1851,40 @@
|
|
|
1869
1851
|
text-align: center;
|
|
1870
1852
|
transition: var(--animation_transition);
|
|
1871
1853
|
}
|
|
1872
|
-
.
|
|
1854
|
+
.bds0114FileInput-dropZone:focus-within {
|
|
1873
1855
|
outline: var(--outline_default);
|
|
1874
1856
|
outline-offset: var(--outline_offset);
|
|
1875
1857
|
border-color: var(--fileInput_border-color, currentcolor);
|
|
1876
1858
|
}
|
|
1877
|
-
.
|
|
1859
|
+
.bds0114FileInput-isDragging {
|
|
1878
1860
|
border-color: currentcolor;
|
|
1879
1861
|
background-color: rgb(from currentcolor r g b / 8%);
|
|
1880
1862
|
}
|
|
1881
|
-
.
|
|
1863
|
+
.bds0114FileInput-hasError {
|
|
1882
1864
|
border-color: var(--color_error);
|
|
1883
1865
|
}
|
|
1884
|
-
.
|
|
1866
|
+
.bds0114FileInput-isDisabled {
|
|
1885
1867
|
opacity: 0.5;
|
|
1886
1868
|
cursor: not-allowed;
|
|
1887
1869
|
}
|
|
1888
|
-
.
|
|
1870
|
+
.bds0114FileInput-icon {
|
|
1889
1871
|
width: 2rem;
|
|
1890
1872
|
height: 2rem;
|
|
1891
1873
|
flex-shrink: 0;
|
|
1892
1874
|
}
|
|
1893
|
-
.
|
|
1875
|
+
.bds0114FileInput-prompt {
|
|
1894
1876
|
font-size: var(--font_size--body);
|
|
1895
1877
|
color: var(--color_on-bg--muted);
|
|
1896
1878
|
}
|
|
1897
|
-
.
|
|
1879
|
+
.bds0114FileInput-prompt strong {
|
|
1898
1880
|
color: var(--color_interactive);
|
|
1899
1881
|
font-weight: var(--font_weight--semibold);
|
|
1900
1882
|
}
|
|
1901
|
-
.
|
|
1883
|
+
.bds0114FileInput-acceptHint {
|
|
1902
1884
|
font-size: var(--font_size--body--s);
|
|
1903
1885
|
color: var(--color_on-bg--muted);
|
|
1904
1886
|
}
|
|
1905
|
-
.
|
|
1887
|
+
.bds0114FileInput-hiddenInput {
|
|
1906
1888
|
position: absolute;
|
|
1907
1889
|
width: 1px;
|
|
1908
1890
|
height: 1px;
|
|
@@ -1912,7 +1894,7 @@
|
|
|
1912
1894
|
border: 0;
|
|
1913
1895
|
}
|
|
1914
1896
|
@media (hover: hover) and (pointer: fine) {
|
|
1915
|
-
.
|
|
1897
|
+
.bds0114FileInput-dropZone:not(.bds0114FileInput-isDisabled):hover {
|
|
1916
1898
|
border-color: var(--color_interactive);
|
|
1917
1899
|
background-color: rgb(from var(--color_interactive) r g b / 4%);
|
|
1918
1900
|
}
|
|
@@ -1921,12 +1903,12 @@
|
|
|
1921
1903
|
|
|
1922
1904
|
/* src/components/interaction/form/FormInput/FormInput.module.css */
|
|
1923
1905
|
@layer component {
|
|
1924
|
-
.
|
|
1906
|
+
.bds0114FormInput-formGroup {
|
|
1925
1907
|
--labelPosition: 0;
|
|
1926
1908
|
display: flex;
|
|
1927
1909
|
flex-direction: column;
|
|
1928
1910
|
}
|
|
1929
|
-
.
|
|
1911
|
+
.bds0114FormInput-input {
|
|
1930
1912
|
font-family: var(--font_family--body);
|
|
1931
1913
|
font-size: var(--font_size--body);
|
|
1932
1914
|
padding: var(--space_s);
|
|
@@ -1936,26 +1918,26 @@
|
|
|
1936
1918
|
color: var(--input_color, var(--color_on-bg));
|
|
1937
1919
|
background-color: var(--input_color_bg, var(--color_bg));
|
|
1938
1920
|
}
|
|
1939
|
-
.
|
|
1921
|
+
.bds0114FormInput-input:focus {
|
|
1940
1922
|
--input_border-color: var(--color_interactive);
|
|
1941
1923
|
outline: none;
|
|
1942
1924
|
box-shadow: var(--input_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
|
|
1943
1925
|
}
|
|
1944
|
-
.
|
|
1926
|
+
.bds0114FormInput-inputError {
|
|
1945
1927
|
--input_border-color: var(--color_error);
|
|
1946
1928
|
}
|
|
1947
|
-
.
|
|
1929
|
+
.bds0114FormInput-inputError:focus {
|
|
1948
1930
|
--input_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
1949
1931
|
}
|
|
1950
1932
|
}
|
|
1951
1933
|
|
|
1952
1934
|
/* src/components/interaction/form/NumberInput/NumberInput.module.css */
|
|
1953
1935
|
@layer component {
|
|
1954
|
-
.
|
|
1936
|
+
.bds0114NumberInput-formGroup {
|
|
1955
1937
|
display: flex;
|
|
1956
1938
|
flex-direction: column;
|
|
1957
1939
|
}
|
|
1958
|
-
.
|
|
1940
|
+
.bds0114NumberInput-inputRow {
|
|
1959
1941
|
display: flex;
|
|
1960
1942
|
align-items: stretch;
|
|
1961
1943
|
border: 1px solid currentcolor;
|
|
@@ -1963,11 +1945,11 @@
|
|
|
1963
1945
|
overflow: hidden;
|
|
1964
1946
|
transition: var(--animation_transition);
|
|
1965
1947
|
}
|
|
1966
|
-
.
|
|
1948
|
+
.bds0114NumberInput-inputRow:focus-within {
|
|
1967
1949
|
border-color: var(--numberInput_border-color, var(--color_interactive));
|
|
1968
1950
|
box-shadow: var(--numberInput_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
|
|
1969
1951
|
}
|
|
1970
|
-
.
|
|
1952
|
+
.bds0114NumberInput-input {
|
|
1971
1953
|
flex: 1;
|
|
1972
1954
|
border: none;
|
|
1973
1955
|
outline: none;
|
|
@@ -1980,17 +1962,17 @@
|
|
|
1980
1962
|
min-width: 0;
|
|
1981
1963
|
appearance: textfield;
|
|
1982
1964
|
}
|
|
1983
|
-
.
|
|
1984
|
-
.
|
|
1965
|
+
.bds0114NumberInput-input::-webkit-inner-spin-button,
|
|
1966
|
+
.bds0114NumberInput-input::-webkit-outer-spin-button {
|
|
1985
1967
|
appearance: none;
|
|
1986
1968
|
}
|
|
1987
|
-
.
|
|
1969
|
+
.bds0114NumberInput-inputError {
|
|
1988
1970
|
--numberInput_border-color: var(--color_error);
|
|
1989
1971
|
}
|
|
1990
|
-
.
|
|
1972
|
+
.bds0114NumberInput-inputError:focus-within {
|
|
1991
1973
|
--numberInput_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
1992
1974
|
}
|
|
1993
|
-
.
|
|
1975
|
+
.bds0114NumberInput-stepper {
|
|
1994
1976
|
all: unset;
|
|
1995
1977
|
display: flex;
|
|
1996
1978
|
align-items: center;
|
|
@@ -2002,16 +1984,16 @@
|
|
|
2002
1984
|
transition: var(--animation_transition);
|
|
2003
1985
|
flex-shrink: 0;
|
|
2004
1986
|
}
|
|
2005
|
-
.
|
|
1987
|
+
.bds0114NumberInput-stepper svg {
|
|
2006
1988
|
width: 1rem;
|
|
2007
1989
|
height: 1rem;
|
|
2008
1990
|
}
|
|
2009
|
-
.
|
|
1991
|
+
.bds0114NumberInput-stepper:disabled {
|
|
2010
1992
|
opacity: 0.4;
|
|
2011
1993
|
cursor: not-allowed;
|
|
2012
1994
|
}
|
|
2013
1995
|
@media (hover: hover) and (pointer: fine) {
|
|
2014
|
-
.
|
|
1996
|
+
.bds0114NumberInput-stepper:not(:disabled):hover {
|
|
2015
1997
|
background-color: var(--color_bg--subtle);
|
|
2016
1998
|
opacity: 0.7;
|
|
2017
1999
|
}
|
|
@@ -2020,55 +2002,66 @@
|
|
|
2020
2002
|
|
|
2021
2003
|
/* src/components/interaction/form/Radio/Radio.module.css */
|
|
2022
2004
|
@layer component {
|
|
2023
|
-
.
|
|
2005
|
+
.bds0114Radio-radioGroup {
|
|
2024
2006
|
--inputSize: calc(var(--space_s) * 2);
|
|
2025
2007
|
--labelPosition: calc(var(--inputSize) + var(--space_m));
|
|
2026
2008
|
display: flex;
|
|
2027
2009
|
flex-direction: column;
|
|
2028
2010
|
}
|
|
2029
|
-
.
|
|
2011
|
+
.bds0114Radio-inputWrapper {
|
|
2030
2012
|
display: flex;
|
|
2031
|
-
align-items:
|
|
2013
|
+
align-items: flex-start;
|
|
2032
2014
|
gap: var(--space_xs);
|
|
2033
2015
|
}
|
|
2034
|
-
.
|
|
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 {
|
|
2035
2028
|
flex-shrink: 0;
|
|
2036
|
-
margin-block-start: 0.
|
|
2029
|
+
margin-block-start: 0.2em;
|
|
2037
2030
|
width: var(--inputSize);
|
|
2038
2031
|
height: var(--inputSize);
|
|
2039
2032
|
color: var(--radio_color, var(--color_on-bg));
|
|
2040
|
-
border:
|
|
2033
|
+
border: 1.5px solid currentcolor;
|
|
2041
2034
|
border-radius: 50%;
|
|
2042
2035
|
appearance: none;
|
|
2043
2036
|
background-color: var(--radio_color_bg, var(--color_bg));
|
|
2044
2037
|
cursor: pointer;
|
|
2045
2038
|
position: relative;
|
|
2046
|
-
transition: background-color 0.
|
|
2039
|
+
transition: background-color 0.2s ease, border-color 0.2s ease;
|
|
2047
2040
|
}
|
|
2048
|
-
.
|
|
2041
|
+
.bds0114Radio-radio:checked {
|
|
2049
2042
|
background-color: var(--radio_color-active, var(--color_active));
|
|
2050
2043
|
border-color: var(--radio_color-active, var(--color_active));
|
|
2051
2044
|
}
|
|
2052
|
-
.
|
|
2045
|
+
.bds0114Radio-radio:checked::after {
|
|
2053
2046
|
content: "";
|
|
2054
2047
|
position: absolute;
|
|
2055
|
-
left:
|
|
2056
|
-
top:
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
border-
|
|
2061
|
-
|
|
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));
|
|
2062
2055
|
}
|
|
2063
|
-
.
|
|
2056
|
+
.bds0114Radio-radio:focus {
|
|
2064
2057
|
outline: none;
|
|
2065
2058
|
border-color: var(--color_interactive);
|
|
2066
2059
|
box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
|
|
2067
2060
|
}
|
|
2068
|
-
.
|
|
2061
|
+
.bds0114Radio-radioError {
|
|
2069
2062
|
border-color: var(--color_error);
|
|
2070
2063
|
}
|
|
2071
|
-
.
|
|
2064
|
+
.bds0114Radio-radioError:focus {
|
|
2072
2065
|
border-color: var(--color_error);
|
|
2073
2066
|
box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
2074
2067
|
}
|
|
@@ -2076,16 +2069,16 @@
|
|
|
2076
2069
|
|
|
2077
2070
|
/* src/components/interaction/form/Select/Select.module.css */
|
|
2078
2071
|
@layer component {
|
|
2079
|
-
.
|
|
2072
|
+
.bds0114Select-formGroup {
|
|
2080
2073
|
display: flex;
|
|
2081
2074
|
flex-direction: column;
|
|
2082
2075
|
}
|
|
2083
|
-
.
|
|
2076
|
+
.bds0114Select-selectWrapper {
|
|
2084
2077
|
position: relative;
|
|
2085
2078
|
display: flex;
|
|
2086
2079
|
align-items: center;
|
|
2087
2080
|
}
|
|
2088
|
-
.
|
|
2081
|
+
.bds0114Select-select {
|
|
2089
2082
|
appearance: none;
|
|
2090
2083
|
width: 100%;
|
|
2091
2084
|
font-family: var(--font_family--body);
|
|
@@ -2099,22 +2092,22 @@
|
|
|
2099
2092
|
cursor: pointer;
|
|
2100
2093
|
transition: var(--animation_transition);
|
|
2101
2094
|
}
|
|
2102
|
-
.
|
|
2095
|
+
.bds0114Select-select:focus {
|
|
2103
2096
|
--select_border-color: var(--color_interactive);
|
|
2104
2097
|
outline: none;
|
|
2105
2098
|
box-shadow: var(--select_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
|
|
2106
2099
|
}
|
|
2107
|
-
.
|
|
2100
|
+
.bds0114Select-select:disabled {
|
|
2108
2101
|
opacity: 0.5;
|
|
2109
2102
|
cursor: not-allowed;
|
|
2110
2103
|
}
|
|
2111
|
-
.
|
|
2104
|
+
.bds0114Select-selectError {
|
|
2112
2105
|
--select_border-color: var(--color_error);
|
|
2113
2106
|
}
|
|
2114
|
-
.
|
|
2107
|
+
.bds0114Select-selectError:focus {
|
|
2115
2108
|
--select_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
2116
2109
|
}
|
|
2117
|
-
.
|
|
2110
|
+
.bds0114Select-chevron {
|
|
2118
2111
|
position: absolute;
|
|
2119
2112
|
inset-inline-end: var(--space_s);
|
|
2120
2113
|
display: flex;
|
|
@@ -2122,7 +2115,7 @@
|
|
|
2122
2115
|
pointer-events: none;
|
|
2123
2116
|
color: var(--select_color, var(--color_on-bg));
|
|
2124
2117
|
}
|
|
2125
|
-
.
|
|
2118
|
+
.bds0114Select-chevron svg {
|
|
2126
2119
|
width: 1rem;
|
|
2127
2120
|
height: 1rem;
|
|
2128
2121
|
}
|
|
@@ -2130,22 +2123,22 @@
|
|
|
2130
2123
|
|
|
2131
2124
|
/* src/components/interaction/form/Slider/Slider.module.css */
|
|
2132
2125
|
@layer component {
|
|
2133
|
-
.
|
|
2126
|
+
.bds0114Slider-formGroup {
|
|
2134
2127
|
display: flex;
|
|
2135
2128
|
flex-direction: column;
|
|
2136
2129
|
gap: var(--space_xxs);
|
|
2137
2130
|
}
|
|
2138
|
-
.
|
|
2131
|
+
.bds0114Slider-labelRow {
|
|
2139
2132
|
display: flex;
|
|
2140
2133
|
justify-content: space-between;
|
|
2141
2134
|
align-items: baseline;
|
|
2142
2135
|
}
|
|
2143
|
-
.
|
|
2136
|
+
.bds0114Slider-value {
|
|
2144
2137
|
font-size: var(--font_size--body--s);
|
|
2145
2138
|
font-variant-numeric: tabular-nums;
|
|
2146
2139
|
color: var(--color_on-bg--subtle);
|
|
2147
2140
|
}
|
|
2148
|
-
.
|
|
2141
|
+
.bds0114Slider-slider {
|
|
2149
2142
|
--slider_fill: 0%;
|
|
2150
2143
|
--slider_track-height: var(--space_xxs);
|
|
2151
2144
|
--slider_thumb-size: calc(var(--space_s) * 2);
|
|
@@ -2164,16 +2157,16 @@
|
|
|
2164
2157
|
cursor: pointer;
|
|
2165
2158
|
transition: var(--animation_transition);
|
|
2166
2159
|
}
|
|
2167
|
-
.
|
|
2160
|
+
.bds0114Slider-slider:focus-visible {
|
|
2168
2161
|
outline: var(--outline_default);
|
|
2169
2162
|
outline-offset: var(--outline_offset);
|
|
2170
2163
|
border-radius: 999px;
|
|
2171
2164
|
}
|
|
2172
|
-
.
|
|
2165
|
+
.bds0114Slider-slider:disabled {
|
|
2173
2166
|
opacity: 0.4;
|
|
2174
2167
|
cursor: not-allowed;
|
|
2175
2168
|
}
|
|
2176
|
-
.
|
|
2169
|
+
.bds0114Slider-slider::-webkit-slider-thumb {
|
|
2177
2170
|
appearance: none;
|
|
2178
2171
|
width: var(--slider_thumb-size);
|
|
2179
2172
|
height: var(--slider_thumb-size);
|
|
@@ -2183,7 +2176,7 @@
|
|
|
2183
2176
|
transition: var(--animation_transition);
|
|
2184
2177
|
cursor: pointer;
|
|
2185
2178
|
}
|
|
2186
|
-
.
|
|
2179
|
+
.bds0114Slider-slider::-moz-range-thumb {
|
|
2187
2180
|
width: var(--slider_thumb-size);
|
|
2188
2181
|
height: var(--slider_thumb-size);
|
|
2189
2182
|
border: none;
|
|
@@ -2192,7 +2185,7 @@
|
|
|
2192
2185
|
box-shadow: var(--shadow_s);
|
|
2193
2186
|
cursor: pointer;
|
|
2194
2187
|
}
|
|
2195
|
-
.
|
|
2188
|
+
.bds0114Slider-sliderError {
|
|
2196
2189
|
background:
|
|
2197
2190
|
linear-gradient(
|
|
2198
2191
|
to right,
|
|
@@ -2201,16 +2194,16 @@
|
|
|
2201
2194
|
var(--color_bg--subtle) var(--slider_fill),
|
|
2202
2195
|
var(--color_bg--subtle) 100%);
|
|
2203
2196
|
}
|
|
2204
|
-
.
|
|
2197
|
+
.bds0114Slider-sliderError::-webkit-slider-thumb {
|
|
2205
2198
|
background-color: var(--color_error);
|
|
2206
2199
|
}
|
|
2207
|
-
.
|
|
2200
|
+
.bds0114Slider-sliderError::-moz-range-thumb {
|
|
2208
2201
|
background-color: var(--color_error);
|
|
2209
2202
|
}
|
|
2210
2203
|
@media (prefers-reduced-motion: reduce) {
|
|
2211
|
-
.
|
|
2212
|
-
.
|
|
2213
|
-
.
|
|
2204
|
+
.bds0114Slider-slider,
|
|
2205
|
+
.bds0114Slider-slider::-webkit-slider-thumb,
|
|
2206
|
+
.bds0114Slider-slider::-moz-range-thumb {
|
|
2214
2207
|
transition: none;
|
|
2215
2208
|
}
|
|
2216
2209
|
}
|
|
@@ -2218,34 +2211,30 @@
|
|
|
2218
2211
|
|
|
2219
2212
|
/* src/components/interaction/form/Switch/Switch.module.css */
|
|
2220
2213
|
@layer component {
|
|
2221
|
-
.
|
|
2214
|
+
.bds0114Switch-switchGroup {
|
|
2222
2215
|
--switch_thumb-size: 1.25em;
|
|
2223
2216
|
--switch_track-pad: var(--space_xxxs);
|
|
2224
2217
|
--switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
|
|
2225
2218
|
--switch_track-width: calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
|
|
2226
|
-
--track_bg: var(--color_grey--subtle);
|
|
2227
|
-
--track_active: var(--color_active--subtle);
|
|
2228
|
-
--thumb_bg: var(--color_grey);
|
|
2229
|
-
--thumb_bg--active: var(--color_active--strong);
|
|
2230
2219
|
color: var(--switch_color, var(--color_on-bg));
|
|
2231
2220
|
display: flex;
|
|
2232
2221
|
flex-direction: column;
|
|
2233
2222
|
}
|
|
2234
|
-
.
|
|
2223
|
+
.bds0114Switch-switchGroup.bds0114Switch---size_small {
|
|
2235
2224
|
--switch_thumb-size: 1em;
|
|
2236
2225
|
}
|
|
2237
|
-
.
|
|
2226
|
+
.bds0114Switch-switchGroup.bds0114Switch---size_medium {
|
|
2238
2227
|
--switch_thumb-size: 1.25em;
|
|
2239
2228
|
}
|
|
2240
|
-
.
|
|
2229
|
+
.bds0114Switch-switchGroup.bds0114Switch---size_large {
|
|
2241
2230
|
--switch_thumb-size: 1.5em;
|
|
2242
2231
|
}
|
|
2243
|
-
.
|
|
2232
|
+
.bds0114Switch-inputWrapper {
|
|
2244
2233
|
display: flex;
|
|
2245
2234
|
align-items: center;
|
|
2246
2235
|
gap: var(--space_xs);
|
|
2247
2236
|
}
|
|
2248
|
-
.
|
|
2237
|
+
.bds0114Switch-trackWrapper {
|
|
2249
2238
|
position: relative;
|
|
2250
2239
|
display: inline-flex;
|
|
2251
2240
|
align-items: center;
|
|
@@ -2253,7 +2242,7 @@
|
|
|
2253
2242
|
width: var(--switch_track-width);
|
|
2254
2243
|
height: var(--switch_track-height);
|
|
2255
2244
|
}
|
|
2256
|
-
.
|
|
2245
|
+
.bds0114Switch-switch {
|
|
2257
2246
|
position: absolute;
|
|
2258
2247
|
inset: 0;
|
|
2259
2248
|
appearance: none;
|
|
@@ -2264,54 +2253,54 @@
|
|
|
2264
2253
|
cursor: pointer;
|
|
2265
2254
|
z-index: 1;
|
|
2266
2255
|
}
|
|
2267
|
-
.
|
|
2256
|
+
.bds0114Switch-switch:disabled {
|
|
2268
2257
|
cursor: not-allowed;
|
|
2269
2258
|
}
|
|
2270
|
-
.
|
|
2259
|
+
.bds0114Switch-track {
|
|
2271
2260
|
display: inline-flex;
|
|
2272
2261
|
align-items: center;
|
|
2273
2262
|
width: var(--switch_track-width);
|
|
2274
2263
|
height: var(--switch_track-height);
|
|
2275
2264
|
border-radius: 999px;
|
|
2276
|
-
background-color: var(--track_bg);
|
|
2265
|
+
background-color: var(--track_bg, var(--color_grey--subtle));
|
|
2277
2266
|
padding-inline: var(--switch_track-pad);
|
|
2278
2267
|
pointer-events: none;
|
|
2279
2268
|
transition: var(--animation_transition);
|
|
2280
|
-
outline: 1px solid var(--thumb_bg);
|
|
2269
|
+
outline: 1px solid var(--thumb_bg, var(--color_grey));
|
|
2281
2270
|
outline-offset: var(--outline_offset);
|
|
2282
2271
|
}
|
|
2283
|
-
.
|
|
2272
|
+
.bds0114Switch-thumb {
|
|
2284
2273
|
display: block;
|
|
2285
2274
|
width: var(--switch_thumb-size);
|
|
2286
2275
|
height: var(--switch_thumb-size);
|
|
2287
2276
|
border-radius: 50%;
|
|
2288
|
-
background-color: var(--thumb_bg);
|
|
2277
|
+
background-color: var(--thumb_bg, var(--color_grey));
|
|
2289
2278
|
box-shadow: var(--shadow_s);
|
|
2290
2279
|
transition: var(--animation_transition);
|
|
2291
2280
|
transform: translateX(0);
|
|
2292
2281
|
}
|
|
2293
|
-
.
|
|
2282
|
+
.bds0114Switch-switch.bds0114Switch-switchError + .bds0114Switch-track {
|
|
2294
2283
|
outline: 1px solid var(--color_error);
|
|
2295
2284
|
}
|
|
2296
|
-
.
|
|
2297
|
-
background-color: var(--track_active);
|
|
2298
|
-
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));
|
|
2299
2288
|
}
|
|
2300
|
-
.
|
|
2301
|
-
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));
|
|
2302
2291
|
transform: translateX(var(--switch_thumb-size));
|
|
2303
2292
|
}
|
|
2304
|
-
.
|
|
2293
|
+
.bds0114Switch-switch:focus-visible + .bds0114Switch-track {
|
|
2305
2294
|
outline: var(--outline_default);
|
|
2306
2295
|
outline-offset: var(--outline_offset);
|
|
2307
2296
|
border-radius: 999px;
|
|
2308
2297
|
}
|
|
2309
|
-
.
|
|
2298
|
+
.bds0114Switch-switch:disabled + .bds0114Switch-track {
|
|
2310
2299
|
opacity: 0.4;
|
|
2311
2300
|
}
|
|
2312
2301
|
@media (prefers-reduced-motion: reduce) {
|
|
2313
|
-
.
|
|
2314
|
-
.
|
|
2302
|
+
.bds0114Switch-track,
|
|
2303
|
+
.bds0114Switch-thumb {
|
|
2315
2304
|
transition: none;
|
|
2316
2305
|
}
|
|
2317
2306
|
}
|
|
@@ -2319,11 +2308,11 @@
|
|
|
2319
2308
|
|
|
2320
2309
|
/* src/components/interaction/form/Textarea/Textarea.module.css */
|
|
2321
2310
|
@layer component {
|
|
2322
|
-
.
|
|
2311
|
+
.bds0114Textarea-formGroup {
|
|
2323
2312
|
display: flex;
|
|
2324
2313
|
flex-direction: column;
|
|
2325
2314
|
}
|
|
2326
|
-
.
|
|
2315
|
+
.bds0114Textarea-textarea {
|
|
2327
2316
|
font-family: var(--font_family--body);
|
|
2328
2317
|
font-size: var(--font_size--body);
|
|
2329
2318
|
line-height: var(--font_line-height--body);
|
|
@@ -2336,69 +2325,69 @@
|
|
|
2336
2325
|
min-height: calc(var(--space_m) * 5);
|
|
2337
2326
|
transition: var(--animation_transition);
|
|
2338
2327
|
}
|
|
2339
|
-
.
|
|
2328
|
+
.bds0114Textarea-textarea:focus {
|
|
2340
2329
|
--textarea_border-color: var(--color_interactive);
|
|
2341
2330
|
outline: none;
|
|
2342
2331
|
box-shadow: var(--textarea_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
|
|
2343
2332
|
}
|
|
2344
|
-
.
|
|
2333
|
+
.bds0114Textarea-textarea:disabled {
|
|
2345
2334
|
opacity: 0.5;
|
|
2346
2335
|
cursor: not-allowed;
|
|
2347
2336
|
resize: none;
|
|
2348
2337
|
}
|
|
2349
|
-
.
|
|
2338
|
+
.bds0114Textarea-textareaError {
|
|
2350
2339
|
--textarea_border-color: var(--color_error);
|
|
2351
2340
|
}
|
|
2352
|
-
.
|
|
2341
|
+
.bds0114Textarea-textareaError:focus {
|
|
2353
2342
|
--textarea_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
|
|
2354
2343
|
}
|
|
2355
2344
|
}
|
|
2356
2345
|
|
|
2357
2346
|
/* src/components/layout/ButtonGroup/ButtonGroup.module.css */
|
|
2358
2347
|
@layer component {
|
|
2359
|
-
.
|
|
2348
|
+
.bds0114ButtonGroup-buttonGroup {
|
|
2360
2349
|
container-type: inline-size;
|
|
2361
2350
|
container-name: button-group;
|
|
2362
2351
|
grid-column: var(--grid_span-100);
|
|
2363
2352
|
}
|
|
2364
|
-
.
|
|
2353
|
+
.bds0114ButtonGroup-buttonGroup .bds0114ButtonGroup-container {
|
|
2365
2354
|
position: relative;
|
|
2366
2355
|
display: flex;
|
|
2367
2356
|
flex-direction: column-reverse;
|
|
2368
2357
|
gap: var(--space_l);
|
|
2369
2358
|
align-items: center;
|
|
2370
2359
|
}
|
|
2371
|
-
.
|
|
2360
|
+
.bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_card .bds0114ButtonGroup-container {
|
|
2372
2361
|
align-items: stretch;
|
|
2373
2362
|
}
|
|
2374
|
-
.
|
|
2375
|
-
.
|
|
2363
|
+
.bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_flow .bds0114ButtonGroup-container,
|
|
2364
|
+
.bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_modal .bds0114ButtonGroup-container {
|
|
2376
2365
|
align-items: center;
|
|
2377
2366
|
}
|
|
2378
|
-
.
|
|
2367
|
+
.bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_content .bds0114ButtonGroup-container {
|
|
2379
2368
|
align-items: flex-start;
|
|
2380
2369
|
}
|
|
2381
2370
|
@supports (contain: inline-size) {
|
|
2382
2371
|
@container button-group (min-width: 30rem) {
|
|
2383
|
-
.
|
|
2372
|
+
.bds0114ButtonGroup-buttonGroup .bds0114ButtonGroup-container {
|
|
2384
2373
|
flex-direction: row;
|
|
2385
2374
|
justify-content: space-between;
|
|
2386
2375
|
}
|
|
2387
|
-
.
|
|
2388
|
-
.
|
|
2376
|
+
.bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_modal .bds0114ButtonGroup-container > :first-child:last-child,
|
|
2377
|
+
.bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_flow .bds0114ButtonGroup-container > :first-child:last-child {
|
|
2389
2378
|
margin-inline-start: auto;
|
|
2390
2379
|
}
|
|
2391
|
-
.
|
|
2380
|
+
.bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_card .bds0114ButtonGroup-container {
|
|
2392
2381
|
justify-content: center;
|
|
2393
2382
|
}
|
|
2394
|
-
.
|
|
2383
|
+
.bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_modal .bds0114ButtonGroup-container {
|
|
2395
2384
|
justify-content: flex-end;
|
|
2396
2385
|
}
|
|
2397
|
-
.
|
|
2386
|
+
.bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_content .bds0114ButtonGroup-container {
|
|
2398
2387
|
justify-content: flex-start;
|
|
2399
2388
|
align-items: center;
|
|
2400
2389
|
}
|
|
2401
|
-
.
|
|
2390
|
+
.bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_grid .bds0114ButtonGroup-container {
|
|
2402
2391
|
justify-content: center;
|
|
2403
2392
|
}
|
|
2404
2393
|
}
|
|
@@ -2407,59 +2396,59 @@
|
|
|
2407
2396
|
|
|
2408
2397
|
/* src/components/layout/Card/Card.module.css */
|
|
2409
2398
|
@layer component {
|
|
2410
|
-
.
|
|
2399
|
+
.bds0114Card-card {
|
|
2411
2400
|
background-color: var(--card_color, var(--color_bg));
|
|
2412
2401
|
color: var(--card_on-color, var(--color_on-bg));
|
|
2413
2402
|
border-radius: var(--border_radius--m);
|
|
2414
2403
|
transition: all 0.3s ease;
|
|
2415
2404
|
position: relative;
|
|
2416
2405
|
}
|
|
2417
|
-
.
|
|
2406
|
+
.bds0114Card-card.bds0114Card---default {
|
|
2418
2407
|
box-shadow: var(--shadow_s);
|
|
2419
2408
|
}
|
|
2420
|
-
.
|
|
2409
|
+
.bds0114Card-card.bds0114Card---elevated {
|
|
2421
2410
|
box-shadow: var(--shadow_m);
|
|
2422
2411
|
}
|
|
2423
|
-
.
|
|
2412
|
+
.bds0114Card-card.bds0114Card---outlined {
|
|
2424
2413
|
border: 1px solid currentcolor;
|
|
2425
2414
|
box-shadow: var(--shadow_s);
|
|
2426
2415
|
}
|
|
2427
|
-
.
|
|
2416
|
+
.bds0114Card-card.bds0114Card---clickable {
|
|
2428
2417
|
cursor: pointer;
|
|
2429
2418
|
}
|
|
2430
|
-
.
|
|
2419
|
+
.bds0114Card-card.bds0114Card---padding-none {
|
|
2431
2420
|
padding: 0;
|
|
2432
2421
|
}
|
|
2433
|
-
.
|
|
2422
|
+
.bds0114Card-card.bds0114Card---padding-small {
|
|
2434
2423
|
padding: var(--space_s);
|
|
2435
2424
|
}
|
|
2436
|
-
.
|
|
2425
|
+
.bds0114Card-card.bds0114Card---padding-medium {
|
|
2437
2426
|
padding: var(--space_m);
|
|
2438
2427
|
}
|
|
2439
|
-
.
|
|
2428
|
+
.bds0114Card-card.bds0114Card---padding-large {
|
|
2440
2429
|
padding: var(--space_l);
|
|
2441
2430
|
}
|
|
2442
|
-
.
|
|
2431
|
+
.bds0114Card-card.bds0114Card---text-start {
|
|
2443
2432
|
text-align: left;
|
|
2444
2433
|
}
|
|
2445
|
-
.
|
|
2434
|
+
.bds0114Card-card.bds0114Card---text-center {
|
|
2446
2435
|
text-align: center;
|
|
2447
2436
|
}
|
|
2448
|
-
.
|
|
2437
|
+
.bds0114Card-card.bds0114Card---text-end {
|
|
2449
2438
|
text-align: right;
|
|
2450
2439
|
}
|
|
2451
2440
|
@media (hover: hover) and (pointer: fine) {
|
|
2452
|
-
.
|
|
2441
|
+
.bds0114Card-card.bds0114Card---clickable:hover {
|
|
2453
2442
|
transform: translateY(-2px);
|
|
2454
2443
|
box-shadow: var(--shadow_xl);
|
|
2455
2444
|
}
|
|
2456
|
-
.
|
|
2445
|
+
.bds0114Card-card.bds0114Card---default:hover {
|
|
2457
2446
|
box-shadow: var(--shadow_m);
|
|
2458
2447
|
}
|
|
2459
|
-
.
|
|
2448
|
+
.bds0114Card-card.bds0114Card---elevated:hover {
|
|
2460
2449
|
box-shadow: var(--shadow_2xl);
|
|
2461
2450
|
}
|
|
2462
|
-
.
|
|
2451
|
+
.bds0114Card-card.bds0114Card---outlined:hover {
|
|
2463
2452
|
box-shadow: var(--shadow_s);
|
|
2464
2453
|
}
|
|
2465
2454
|
}
|
|
@@ -2467,60 +2456,60 @@
|
|
|
2467
2456
|
|
|
2468
2457
|
/* src/components/layout/SectionHeader/SectionHeader.module.css */
|
|
2469
2458
|
@layer component {
|
|
2470
|
-
.
|
|
2459
|
+
.bds0114SectionHeader-sectionHeader {
|
|
2471
2460
|
display: flex;
|
|
2472
2461
|
flex-direction: column;
|
|
2473
2462
|
gap: var(--space_m);
|
|
2474
2463
|
grid-column: var(--grid_span-100);
|
|
2475
2464
|
}
|
|
2476
|
-
.
|
|
2465
|
+
.bds0114SectionHeader-title {
|
|
2477
2466
|
color: var(--sectionHeader-title-color, var(--color_on-bg));
|
|
2478
2467
|
margin: 0;
|
|
2479
2468
|
font-family: var(--font_family--body);
|
|
2480
2469
|
}
|
|
2481
|
-
.
|
|
2470
|
+
.bds0114SectionHeader-subtitle {
|
|
2482
2471
|
color: var(--sectionHeader_subtitle-color, var(--color_grey--strong));
|
|
2483
2472
|
margin: 0;
|
|
2484
2473
|
font-family: var(--font_family--body);
|
|
2485
2474
|
font-weight: var(--font_weight--medium);
|
|
2486
2475
|
}
|
|
2487
|
-
.
|
|
2476
|
+
.bds0114SectionHeader-sectionHeader.bds0114SectionHeader---start {
|
|
2488
2477
|
align-items: flex-start;
|
|
2489
2478
|
text-align: left;
|
|
2490
2479
|
}
|
|
2491
|
-
.
|
|
2480
|
+
.bds0114SectionHeader-sectionHeader.bds0114SectionHeader---center {
|
|
2492
2481
|
align-items: center;
|
|
2493
2482
|
text-align: center;
|
|
2494
2483
|
}
|
|
2495
|
-
.
|
|
2484
|
+
.bds0114SectionHeader-sectionHeader.bds0114SectionHeader---end {
|
|
2496
2485
|
align-items: flex-end;
|
|
2497
2486
|
text-align: right;
|
|
2498
2487
|
}
|
|
2499
|
-
.
|
|
2488
|
+
.bds0114SectionHeader-sectionHeader.bds0114SectionHeader---small .bds0114SectionHeader-title {
|
|
2500
2489
|
font-size: var(--font_size--heading-1);
|
|
2501
2490
|
line-height: var(--font_line-height--heading);
|
|
2502
2491
|
font-weight: var(--font_weight--bold);
|
|
2503
2492
|
}
|
|
2504
|
-
.
|
|
2493
|
+
.bds0114SectionHeader-sectionHeader.bds0114SectionHeader---small .bds0114SectionHeader-subtitle {
|
|
2505
2494
|
font-size: var(--font_size--body);
|
|
2506
2495
|
line-height: 1.4;
|
|
2507
2496
|
}
|
|
2508
|
-
.
|
|
2497
|
+
.bds0114SectionHeader-sectionHeader.bds0114SectionHeader---medium .bds0114SectionHeader-title {
|
|
2509
2498
|
font-size: var(--font_size--display);
|
|
2510
2499
|
line-height: var(--font_line-height--display);
|
|
2511
2500
|
font-weight: var(--font_weight--bold);
|
|
2512
2501
|
}
|
|
2513
|
-
.
|
|
2502
|
+
.bds0114SectionHeader-sectionHeader.bds0114SectionHeader---medium .bds0114SectionHeader-subtitle {
|
|
2514
2503
|
font-size: var(--font_size--heading-3);
|
|
2515
2504
|
line-height: 1.3;
|
|
2516
2505
|
}
|
|
2517
|
-
.
|
|
2506
|
+
.bds0114SectionHeader-sectionHeader.bds0114SectionHeader---large .bds0114SectionHeader-title {
|
|
2518
2507
|
font-size: var(--font_size--display);
|
|
2519
2508
|
line-height: var(--font_line-height--display);
|
|
2520
2509
|
font-weight: var(--font_weight--bold);
|
|
2521
2510
|
letter-spacing: var(--font_tracking--tight);
|
|
2522
2511
|
}
|
|
2523
|
-
.
|
|
2512
|
+
.bds0114SectionHeader-sectionHeader.bds0114SectionHeader---large .bds0114SectionHeader-subtitle {
|
|
2524
2513
|
font-size: var(--font_size--heading-2);
|
|
2525
2514
|
line-height: 1.3;
|
|
2526
2515
|
font-weight: var(--font_weight--medium);
|
|
@@ -2529,7 +2518,7 @@
|
|
|
2529
2518
|
|
|
2530
2519
|
/* src/components/layout/IconWrapper/IconWrapper.module.css */
|
|
2531
2520
|
@layer component {
|
|
2532
|
-
.
|
|
2521
|
+
.bds0114IconWrapper-wrapper {
|
|
2533
2522
|
width: 2em;
|
|
2534
2523
|
height: 2em;
|
|
2535
2524
|
font-size: 3em;
|
|
@@ -2544,7 +2533,7 @@
|
|
|
2544
2533
|
position: relative;
|
|
2545
2534
|
transition: var(--animation_transition);
|
|
2546
2535
|
}
|
|
2547
|
-
.
|
|
2536
|
+
.bds0114IconWrapper-wrapper svg {
|
|
2548
2537
|
fill: currentcolor;
|
|
2549
2538
|
}
|
|
2550
2539
|
}
|