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