@cloudscape-design/components-themeable 3.0.1186 → 3.0.1187
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/internal/components/selectable-item/styles.scss +170 -102
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/scss/slider/mixins.scss +26 -10
- package/lib/internal/scss/slider/styles.scss +52 -16
- package/lib/internal/template/internal/base-component/styles.scoped.css +65 -18
- package/lib/internal/template/internal/components/selectable-item/styles.css.js +22 -23
- package/lib/internal/template/internal/components/selectable-item/styles.scoped.css +102 -109
- package/lib/internal/template/internal/components/selectable-item/styles.selectors.js +22 -23
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/generated/styles/tokens.d.ts +8 -2
- package/lib/internal/template/internal/generated/styles/tokens.js +8 -2
- package/lib/internal/template/internal/generated/theming/index.cjs +234 -48
- package/lib/internal/template/internal/generated/theming/index.js +234 -48
- package/lib/internal/template/internal/hooks/use-virtual/index.d.ts.map +1 -1
- package/lib/internal/template/internal/hooks/use-virtual/index.js +6 -1
- package/lib/internal/template/internal/hooks/use-virtual/index.js.map +1 -1
- package/lib/internal/template/select/parts/virtual-list.d.ts.map +1 -1
- package/lib/internal/template/select/parts/virtual-list.js +1 -1
- package/lib/internal/template/select/parts/virtual-list.js.map +1 -1
- package/lib/internal/template/select/utils/render-options.js +1 -1
- package/lib/internal/template/select/utils/render-options.js.map +1 -1
- package/lib/internal/template/slider/styles.css.js +26 -26
- package/lib/internal/template/slider/styles.scoped.css +112 -112
- package/lib/internal/template/slider/styles.selectors.js +26 -26
- package/package.json +1 -1
|
@@ -6,42 +6,114 @@
|
|
|
6
6
|
@use '../../styles' as styles;
|
|
7
7
|
@use '../../styles/tokens' as awsui;
|
|
8
8
|
|
|
9
|
+
// Box-shadow spread values for simulating borders without layout shifts
|
|
10
|
+
$border-offset: awsui.$border-item-width;
|
|
11
|
+
$border-offset-double: calc(2 * #{awsui.$border-item-width});
|
|
12
|
+
|
|
13
|
+
// Divider widths (and negative) for reuse
|
|
14
|
+
$divider-w: awsui.$border-divider-list-width;
|
|
15
|
+
$neg-divider-w: calc(-1 * #{$divider-w});
|
|
16
|
+
|
|
17
|
+
@mixin logical-radius($radius) {
|
|
18
|
+
border-start-start-radius: $radius;
|
|
19
|
+
border-start-end-radius: $radius;
|
|
20
|
+
border-end-start-radius: $radius;
|
|
21
|
+
border-end-end-radius: $radius;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@function add-offset($value, $offset: $border-offset) {
|
|
25
|
+
@return calc(#{$value} + #{$offset});
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@mixin content-pad($block, $inline) {
|
|
29
|
+
padding-block: $block;
|
|
30
|
+
padding-inline: $inline;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@mixin option-content-pad($v, $h) {
|
|
34
|
+
> .selectable-item-content {
|
|
35
|
+
padding-block: $v;
|
|
36
|
+
padding-inline: $h;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@mixin option-content-pad-with-offset($v, $h, $offset: $border-offset) {
|
|
41
|
+
> .selectable-item-content {
|
|
42
|
+
padding-block: add-offset($v, $offset);
|
|
43
|
+
padding-inline: add-offset($h, $offset);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@mixin divider-shadow($top-color, $bottom-color) {
|
|
48
|
+
box-shadow:
|
|
49
|
+
inset 0 $divider-w 0 0 $top-color,
|
|
50
|
+
inset 0 $neg-divider-w 0 0 $bottom-color;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@mixin divider {
|
|
54
|
+
@include divider-shadow(awsui.$color-border-dropdown-item-default, awsui.$color-border-dropdown-item-default);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@mixin border-padding {
|
|
58
|
+
border-width: 0;
|
|
59
|
+
padding-block: 0;
|
|
60
|
+
padding-inline: 0;
|
|
61
|
+
@include option-content-pad-with-offset(styles.$option-padding-vertical, styles.$control-padding-horizontal);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@mixin highlighted-shadow {
|
|
65
|
+
box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-hover;
|
|
66
|
+
&.is-keyboard {
|
|
67
|
+
box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-focused;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@mixin selected-shadow {
|
|
72
|
+
box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-selected;
|
|
73
|
+
&.highlighted {
|
|
74
|
+
box-shadow:
|
|
75
|
+
inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-selected,
|
|
76
|
+
inset 0 0 0 $border-offset-double awsui.$color-border-dropdown-item-hover;
|
|
77
|
+
&.is-keyboard {
|
|
78
|
+
box-shadow:
|
|
79
|
+
inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-selected,
|
|
80
|
+
inset 0 0 0 $border-offset-double awsui.$color-border-dropdown-item-focused;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
9
85
|
// Outer borders of adjacent cells overlap and we want selected option border
|
|
10
86
|
// to take precedence over the other ones, hence negative margins and z-indices
|
|
11
87
|
.selectable-item {
|
|
12
88
|
@include styles.default-text-style;
|
|
89
|
+
|
|
13
90
|
position: relative;
|
|
14
91
|
list-style: none;
|
|
15
92
|
z-index: 1;
|
|
16
93
|
|
|
17
|
-
border-
|
|
18
|
-
border-inline: awsui.$border-divider-list-width solid transparent;
|
|
19
|
-
border-block-start-color: awsui.$color-border-dropdown-item-default;
|
|
20
|
-
border-block-end-color: awsui.$color-border-dropdown-item-default;
|
|
94
|
+
border-width: 0;
|
|
21
95
|
background-color: awsui.$color-background-dropdown-item-default;
|
|
22
96
|
color: awsui.$color-text-dropdown-item-default;
|
|
23
97
|
|
|
24
|
-
|
|
25
|
-
border-inline-start-width: 0;
|
|
26
|
-
border-inline-end-width: 0;
|
|
27
|
-
// to compensate for the loss of padding due to the removal of the left and right borders
|
|
28
|
-
// and differences in default divider + selected border widths (visual refresh)
|
|
29
|
-
padding-block: calc(#{awsui.$border-item-width} - #{awsui.$border-divider-list-width});
|
|
30
|
-
padding-inline: awsui.$border-item-width;
|
|
98
|
+
@include content-pad(awsui.$border-item-width, awsui.$border-item-width);
|
|
31
99
|
|
|
32
|
-
// For custom styles and background on the selectable-item-content, the
|
|
100
|
+
// For custom styles and background on the selectable-item-content, the
|
|
101
|
+
// content should not clip through the selectable-item borders.
|
|
33
102
|
overflow: hidden;
|
|
34
103
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
104
|
+
@include divider;
|
|
105
|
+
&.parent.interactiveGroups:not(.highlighted):not(.selected) {
|
|
106
|
+
// kept explicitly to preserve cascade/overrides
|
|
107
|
+
@include divider;
|
|
38
108
|
}
|
|
39
109
|
|
|
110
|
+
@include option-content-pad(styles.$option-padding-vertical, styles.$control-padding-horizontal);
|
|
111
|
+
|
|
40
112
|
&.pad-bottom {
|
|
41
|
-
padding-block-end:
|
|
42
|
-
border-
|
|
113
|
+
padding-block-end: awsui.$border-item-width;
|
|
114
|
+
box-shadow: inset 0 $divider-w 0 0 awsui.$color-border-dropdown-item-default;
|
|
43
115
|
> .selectable-item-content {
|
|
44
|
-
padding-block-end:
|
|
116
|
+
padding-block-end: add-offset(styles.$option-padding-vertical, awsui.$space-xxxs);
|
|
45
117
|
}
|
|
46
118
|
}
|
|
47
119
|
|
|
@@ -67,76 +139,44 @@
|
|
|
67
139
|
&.highlighted,
|
|
68
140
|
&.selected {
|
|
69
141
|
color: awsui.$color-text-dropdown-item-highlighted;
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
border-end-end-radius: awsui.$border-radius-item;
|
|
75
|
-
padding-block: 0;
|
|
76
|
-
padding-inline: 0;
|
|
77
|
-
|
|
78
|
-
> .selectable-item-content {
|
|
79
|
-
padding-block: styles.$option-padding-vertical;
|
|
80
|
-
padding-inline: styles.$control-padding-horizontal;
|
|
142
|
+
@include logical-radius(awsui.$border-radius-item);
|
|
143
|
+
@include border-padding;
|
|
144
|
+
&.child > .selectable-item-content {
|
|
145
|
+
padding-inline-start: add-offset(awsui.$space-xxl);
|
|
81
146
|
}
|
|
82
|
-
&.
|
|
83
|
-
padding-
|
|
84
|
-
> .selectable-item-content {
|
|
85
|
-
padding-inline-start: awsui.$space-xxl;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
&.pad-bottom {
|
|
89
|
-
padding-block-end: 0;
|
|
90
|
-
> .selectable-item-content {
|
|
91
|
-
padding-block-end: (calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs}));
|
|
92
|
-
}
|
|
147
|
+
&.pad-bottom > .selectable-item-content {
|
|
148
|
+
padding-block-end: calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs} + #{$border-offset});
|
|
93
149
|
}
|
|
94
150
|
}
|
|
95
151
|
|
|
96
152
|
&.highlighted {
|
|
97
153
|
z-index: 3;
|
|
98
154
|
background-color: awsui.$color-background-dropdown-item-hover;
|
|
99
|
-
|
|
155
|
+
@include highlighted-shadow;
|
|
100
156
|
&.disabled {
|
|
101
|
-
|
|
157
|
+
box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-dimmed-hover;
|
|
102
158
|
background-color: awsui.$color-background-dropdown-item-dimmed;
|
|
103
159
|
> .selectable-item-content {
|
|
104
160
|
color: awsui.$color-text-dropdown-item-dimmed;
|
|
105
161
|
}
|
|
106
162
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
&:not(.visual-refresh) {
|
|
110
|
-
box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
|
|
111
|
-
}
|
|
163
|
+
&:not(.visual-refresh).is-keyboard {
|
|
164
|
+
box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
|
|
112
165
|
}
|
|
113
166
|
}
|
|
114
167
|
|
|
115
168
|
&.selected {
|
|
116
169
|
z-index: 2;
|
|
117
170
|
background-color: awsui.$color-background-dropdown-item-selected;
|
|
118
|
-
|
|
119
|
-
// smooth adjacent selected borders to avoid bubble effect (visual refresh)
|
|
171
|
+
@include selected-shadow;
|
|
120
172
|
&.next-item-selected {
|
|
121
173
|
border-end-start-radius: 0;
|
|
122
174
|
border-end-end-radius: 0;
|
|
123
175
|
}
|
|
124
|
-
&.highlighted {
|
|
125
|
-
|
|
126
|
-
z-index: 3;
|
|
127
|
-
outline: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
|
|
128
|
-
outline-offset: calc(-2 * #{awsui.$border-item-width});
|
|
176
|
+
&.highlighted:not(.visual-refresh) {
|
|
177
|
+
box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-hover;
|
|
129
178
|
&.is-keyboard {
|
|
130
|
-
|
|
131
|
-
outline-color: awsui.$color-border-dropdown-item-focused;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
&:not(.visual-refresh) {
|
|
135
|
-
border-color: awsui.$color-border-dropdown-item-hover;
|
|
136
|
-
outline: none;
|
|
137
|
-
&.is-keyboard {
|
|
138
|
-
border-color: awsui.$color-border-dropdown-item-focused;
|
|
139
|
-
}
|
|
179
|
+
box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-focused;
|
|
140
180
|
}
|
|
141
181
|
}
|
|
142
182
|
}
|
|
@@ -154,12 +194,10 @@
|
|
|
154
194
|
}
|
|
155
195
|
}
|
|
156
196
|
&:not(.interactiveGroups) {
|
|
157
|
-
border-
|
|
158
|
-
|
|
159
|
-
padding-inline: 0;
|
|
197
|
+
@include divider-shadow(awsui.$color-border-dropdown-group, awsui.$color-border-dropdown-item-default);
|
|
198
|
+
@include content-pad(0, 0);
|
|
160
199
|
&:not(:has(> .selectable-item-content)) {
|
|
161
|
-
|
|
162
|
-
padding-inline: awsui.$border-item-width;
|
|
200
|
+
@include content-pad(awsui.$border-item-width, awsui.$border-item-width);
|
|
163
201
|
}
|
|
164
202
|
|
|
165
203
|
> .selectable-item-content {
|
|
@@ -179,42 +217,62 @@
|
|
|
179
217
|
}
|
|
180
218
|
&.highlighted,
|
|
181
219
|
&.selected {
|
|
182
|
-
padding
|
|
183
|
-
padding-inline: 0;
|
|
220
|
+
@include border-padding;
|
|
184
221
|
> .selectable-item-content {
|
|
185
|
-
padding-block: styles.$group-option-padding-vertical;
|
|
186
|
-
padding-inline: styles.$control-padding-horizontal;
|
|
222
|
+
padding-block: add-offset(styles.$group-option-padding-vertical);
|
|
223
|
+
padding-inline: add-offset(styles.$control-padding-horizontal);
|
|
187
224
|
}
|
|
188
225
|
}
|
|
189
226
|
}
|
|
190
227
|
}
|
|
191
228
|
|
|
229
|
+
// Remove top divider from the first item after a sticky item to avoid double
|
|
230
|
+
// borders. Exclude highlighted/selected states to preserve their box-shadow.
|
|
231
|
+
&:not(.disabled):not(.parent),
|
|
232
|
+
&.interactiveGroups:not(.disabled) {
|
|
233
|
+
cursor: pointer;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
&.sticky + &:not(.sticky):not(.highlighted):not(.selected) {
|
|
237
|
+
box-shadow: inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default;
|
|
238
|
+
}
|
|
239
|
+
|
|
192
240
|
&.sticky {
|
|
193
241
|
position: sticky;
|
|
194
242
|
inset-block-start: 0;
|
|
195
243
|
|
|
196
|
-
// Push the next option down to prevent its border in highlighted or
|
|
197
|
-
|
|
244
|
+
// Push the next option down to prevent its border in highlighted or
|
|
245
|
+
// selected state from being partially covered by the sticky option
|
|
246
|
+
margin-block-end: awsui.$border-item-width;
|
|
198
247
|
|
|
199
248
|
// Stay on top of the other options when they are scrolled up
|
|
200
249
|
z-index: 4;
|
|
201
250
|
|
|
251
|
+
// Keep padding consistent to prevent visual shift on hover
|
|
252
|
+
padding-inline: awsui.$border-item-width;
|
|
253
|
+
|
|
254
|
+
&.highlighted,
|
|
255
|
+
&.selected {
|
|
256
|
+
padding-inline: awsui.$border-item-width;
|
|
257
|
+
}
|
|
258
|
+
// stylelint-disable-next-line no-descending-specificity
|
|
259
|
+
> .selectable-item-content {
|
|
260
|
+
padding-inline: styles.$control-padding-horizontal;
|
|
261
|
+
}
|
|
262
|
+
|
|
202
263
|
&:not(.highlighted):not(.selected) {
|
|
203
264
|
// Prevent covering the list border despite the higher z-index
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
> .selectable-item-content {
|
|
209
|
-
padding-inline: styles.$control-padding-horizontal;
|
|
210
|
-
}
|
|
265
|
+
box-shadow:
|
|
266
|
+
inset 0 $divider-w 0 0 awsui.$color-border-dropdown-item-default,
|
|
267
|
+
inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default,
|
|
268
|
+
inset awsui.$border-width-popover 0 0 0 awsui.$color-border-dropdown-container;
|
|
211
269
|
|
|
212
270
|
&:not(.with-scrollbar) {
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
271
|
+
box-shadow:
|
|
272
|
+
inset 0 $divider-w 0 0 awsui.$color-border-dropdown-item-default,
|
|
273
|
+
inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default,
|
|
274
|
+
inset awsui.$border-width-popover 0 0 0 awsui.$color-border-dropdown-container,
|
|
275
|
+
inset calc(-1 * #{awsui.$border-width-popover}) 0 0 0 awsui.$color-border-dropdown-container;
|
|
218
276
|
}
|
|
219
277
|
|
|
220
278
|
// Only display top border when not being rendered after the filter
|
|
@@ -225,25 +283,26 @@
|
|
|
225
283
|
}
|
|
226
284
|
}
|
|
227
285
|
&.after-header {
|
|
228
|
-
|
|
286
|
+
box-shadow:
|
|
287
|
+
inset 0 $divider-w 0 0 awsui.$color-background-dropdown-item-default,
|
|
288
|
+
inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default,
|
|
289
|
+
inset awsui.$border-width-popover 0 0 0 awsui.$color-border-dropdown-container;
|
|
290
|
+
&:not(.with-scrollbar) {
|
|
291
|
+
box-shadow:
|
|
292
|
+
inset 0 $divider-w 0 0 awsui.$color-background-dropdown-item-default,
|
|
293
|
+
inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default,
|
|
294
|
+
inset awsui.$border-width-popover 0 0 0 awsui.$color-border-dropdown-container,
|
|
295
|
+
inset calc(-1 * #{awsui.$border-width-popover}) 0 0 0 awsui.$color-border-dropdown-container;
|
|
296
|
+
}
|
|
229
297
|
}
|
|
230
298
|
}
|
|
231
299
|
|
|
232
300
|
&.disabled.highlighted,
|
|
233
301
|
&.disabled.selected {
|
|
234
|
-
|
|
235
|
-
border-block-start-color: transparent;
|
|
236
|
-
border-inline-start-color: transparent;
|
|
237
|
-
border-inline-end-color: transparent;
|
|
302
|
+
box-shadow: none;
|
|
238
303
|
}
|
|
239
304
|
}
|
|
240
305
|
|
|
241
|
-
&:not(.disabled):not(.parent) {
|
|
242
|
-
cursor: pointer;
|
|
243
|
-
}
|
|
244
|
-
&.interactiveGroups:not(.disabled) {
|
|
245
|
-
cursor: pointer;
|
|
246
|
-
}
|
|
247
306
|
&.virtual {
|
|
248
307
|
position: absolute;
|
|
249
308
|
inset-block-start: awsui.$border-dropdown-virtual-offset-width;
|
|
@@ -251,7 +310,16 @@
|
|
|
251
310
|
inline-size: 100%;
|
|
252
311
|
box-sizing: border-box;
|
|
253
312
|
&:first-of-type:not(.selected, .highlighted) {
|
|
254
|
-
|
|
313
|
+
box-shadow:
|
|
314
|
+
inset 0 $divider-w 0 0 awsui.$color-border-dropdown-item-top,
|
|
315
|
+
inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
// Adds top border between option group and previous element
|
|
319
|
+
&.parent:not(.interactiveGroups) {
|
|
320
|
+
box-shadow:
|
|
321
|
+
inset 0 $divider-w 0 0 awsui.$color-border-dropdown-group,
|
|
322
|
+
inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default;
|
|
255
323
|
}
|
|
256
324
|
}
|
|
257
325
|
}
|
|
@@ -263,9 +331,9 @@
|
|
|
263
331
|
inline-size: 100%;
|
|
264
332
|
inset-block-start: 0;
|
|
265
333
|
inset-inline-start: 0;
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
334
|
+
|
|
335
|
+
.selectable-item.virtual > & {
|
|
336
|
+
block-size: calc(100% - #{$border-offset});
|
|
269
337
|
}
|
|
270
338
|
}
|
|
271
339
|
|
|
@@ -83,41 +83,57 @@ $border-radius-slider-thumb: 50%;
|
|
|
83
83
|
@mixin error-thumb-focus-styles {
|
|
84
84
|
background-color: var(
|
|
85
85
|
#{custom-props.$styleSliderHandleBackgroundActive},
|
|
86
|
-
awsui.$color-background-slider-error-
|
|
86
|
+
awsui.$color-background-slider-handle-error-active
|
|
87
87
|
);
|
|
88
88
|
border-block-width: 2px;
|
|
89
89
|
border-inline-width: 2px;
|
|
90
|
-
border-color: var(
|
|
90
|
+
border-color: var(
|
|
91
|
+
#{custom-props.$styleSliderHandleBackgroundActive},
|
|
92
|
+
awsui.$color-background-slider-handle-error-active
|
|
93
|
+
);
|
|
91
94
|
|
|
92
95
|
box-shadow:
|
|
93
96
|
0px 0 0 2px awsui.$color-background-slider-handle-ring,
|
|
94
|
-
0 0 0 4px
|
|
97
|
+
0 0 0 4px
|
|
98
|
+
var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-error-active);
|
|
95
99
|
}
|
|
96
100
|
|
|
97
101
|
@mixin warning-thumb-focus-styles {
|
|
98
102
|
background-color: var(
|
|
99
103
|
#{custom-props.$styleSliderHandleBackgroundActive},
|
|
100
|
-
awsui.$color-background-slider-warning-
|
|
104
|
+
awsui.$color-background-slider-handle-warning-active
|
|
101
105
|
);
|
|
102
106
|
border-block-width: 2px;
|
|
103
107
|
border-inline-width: 2px;
|
|
104
|
-
border-color: var(
|
|
108
|
+
border-color: var(
|
|
109
|
+
#{custom-props.$styleSliderHandleBackgroundActive},
|
|
110
|
+
awsui.$color-background-slider-handle-warning-active
|
|
111
|
+
);
|
|
105
112
|
|
|
106
113
|
box-shadow:
|
|
107
114
|
0px 0 0 2px awsui.$color-background-slider-handle-ring,
|
|
108
|
-
0 0 0 4px
|
|
115
|
+
0 0 0 4px
|
|
116
|
+
var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-warning-active);
|
|
109
117
|
}
|
|
110
118
|
|
|
111
119
|
@mixin error-thumb-hover-styles {
|
|
112
|
-
background-color: var(
|
|
120
|
+
background-color: var(
|
|
121
|
+
#{custom-props.$styleSliderHandleBackgroundDefault},
|
|
122
|
+
awsui.$color-background-slider-handle-error-active
|
|
123
|
+
);
|
|
113
124
|
box-shadow:
|
|
114
125
|
0px 0 0 2px awsui.$color-background-slider-handle-ring,
|
|
115
|
-
0 0 0 4px
|
|
126
|
+
0 0 0 4px
|
|
127
|
+
var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-active);
|
|
116
128
|
}
|
|
117
129
|
|
|
118
130
|
@mixin warning-thumb-hover-styles {
|
|
119
|
-
background-color: var(
|
|
131
|
+
background-color: var(
|
|
132
|
+
#{custom-props.$styleSliderHandleBackgroundDefault},
|
|
133
|
+
awsui.$color-background-slider-handle-warning-active
|
|
134
|
+
);
|
|
120
135
|
box-shadow:
|
|
121
136
|
0px 0 0 2px awsui.$color-background-slider-handle-ring,
|
|
122
|
-
0 0 0 4px
|
|
137
|
+
0 0 0 4px
|
|
138
|
+
var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-active);
|
|
123
139
|
}
|
|
@@ -62,11 +62,17 @@
|
|
|
62
62
|
inline-size: calc(var(#{custom-props.$sliderRangeInlineSize}) + mixins.$thumb-size);
|
|
63
63
|
|
|
64
64
|
&.error {
|
|
65
|
-
background-color: var(
|
|
65
|
+
background-color: var(
|
|
66
|
+
#{custom-props.$styleSliderRangeBackgroundDefault},
|
|
67
|
+
awsui.$color-background-slider-range-error-default
|
|
68
|
+
);
|
|
66
69
|
}
|
|
67
70
|
|
|
68
71
|
&.warning {
|
|
69
|
-
background-color: var(
|
|
72
|
+
background-color: var(
|
|
73
|
+
#{custom-props.$styleSliderRangeBackgroundDefault},
|
|
74
|
+
awsui.$color-background-slider-range-warning-default
|
|
75
|
+
);
|
|
70
76
|
}
|
|
71
77
|
|
|
72
78
|
&.active {
|
|
@@ -79,14 +85,14 @@
|
|
|
79
85
|
&.error-active {
|
|
80
86
|
background-color: var(
|
|
81
87
|
#{custom-props.$styleSliderRangeBackgroundActive},
|
|
82
|
-
awsui.$color-background-slider-error-
|
|
88
|
+
awsui.$color-background-slider-range-error-active
|
|
83
89
|
);
|
|
84
90
|
}
|
|
85
91
|
|
|
86
92
|
&.warning-active {
|
|
87
93
|
background-color: var(
|
|
88
94
|
#{custom-props.$styleSliderRangeBackgroundActive},
|
|
89
|
-
awsui.$color-background-slider-warning-
|
|
95
|
+
awsui.$color-background-slider-range-warning-active
|
|
90
96
|
);
|
|
91
97
|
}
|
|
92
98
|
|
|
@@ -213,24 +219,30 @@
|
|
|
213
219
|
}
|
|
214
220
|
|
|
215
221
|
&.error {
|
|
216
|
-
background: var(
|
|
222
|
+
background: var(
|
|
223
|
+
#{custom-props.$styleSliderTrackBackgroundColor},
|
|
224
|
+
awsui.$color-background-slider-range-error-default
|
|
225
|
+
);
|
|
217
226
|
}
|
|
218
227
|
|
|
219
228
|
&.warning {
|
|
220
|
-
background: var(
|
|
229
|
+
background: var(
|
|
230
|
+
#{custom-props.$styleSliderTrackBackgroundColor},
|
|
231
|
+
awsui.$color-background-slider-range-warning-default
|
|
232
|
+
);
|
|
221
233
|
}
|
|
222
234
|
|
|
223
235
|
&.error-active {
|
|
224
236
|
background-color: var(
|
|
225
237
|
#{custom-props.$styleSliderRangeBackgroundActive},
|
|
226
|
-
awsui.$color-background-slider-error-
|
|
238
|
+
awsui.$color-background-slider-range-error-active
|
|
227
239
|
);
|
|
228
240
|
}
|
|
229
241
|
|
|
230
242
|
&.warning-active {
|
|
231
243
|
background-color: var(
|
|
232
244
|
#{custom-props.$styleSliderRangeBackgroundActive},
|
|
233
|
-
awsui.$color-background-slider-warning-
|
|
245
|
+
awsui.$color-background-slider-range-warning-active
|
|
234
246
|
);
|
|
235
247
|
}
|
|
236
248
|
|
|
@@ -330,13 +342,25 @@
|
|
|
330
342
|
|
|
331
343
|
.error {
|
|
332
344
|
&::-webkit-slider-thumb {
|
|
333
|
-
background-color: var(
|
|
334
|
-
|
|
345
|
+
background-color: var(
|
|
346
|
+
#{custom-props.$styleSliderHandleBackgroundDefault},
|
|
347
|
+
awsui.$color-background-slider-handle-error-default
|
|
348
|
+
);
|
|
349
|
+
border-color: var(
|
|
350
|
+
#{custom-props.$styleSliderHandleBackgroundDefault},
|
|
351
|
+
awsui.$color-background-slider-handle-error-default
|
|
352
|
+
);
|
|
335
353
|
}
|
|
336
354
|
|
|
337
355
|
&::-moz-range-thumb {
|
|
338
|
-
background-color: var(
|
|
339
|
-
|
|
356
|
+
background-color: var(
|
|
357
|
+
#{custom-props.$styleSliderHandleBackgroundDefault},
|
|
358
|
+
awsui.$color-background-slider-handle-error-default
|
|
359
|
+
);
|
|
360
|
+
border-color: var(
|
|
361
|
+
#{custom-props.$styleSliderHandleBackgroundDefault},
|
|
362
|
+
awsui.$color-background-slider-handle-error-default
|
|
363
|
+
);
|
|
340
364
|
}
|
|
341
365
|
&:hover::-webkit-slider-thumb {
|
|
342
366
|
@include mixins.error-thumb-hover-styles;
|
|
@@ -359,13 +383,25 @@
|
|
|
359
383
|
|
|
360
384
|
.warning {
|
|
361
385
|
&::-webkit-slider-thumb {
|
|
362
|
-
background-color: var(
|
|
363
|
-
|
|
386
|
+
background-color: var(
|
|
387
|
+
#{custom-props.$styleSliderHandleBackgroundDefault},
|
|
388
|
+
awsui.$color-background-slider-handle-warning-default
|
|
389
|
+
);
|
|
390
|
+
border-color: var(
|
|
391
|
+
#{custom-props.$styleSliderHandleBackgroundDefault},
|
|
392
|
+
awsui.$color-background-slider-handle-warning-default
|
|
393
|
+
);
|
|
364
394
|
}
|
|
365
395
|
|
|
366
396
|
&::-moz-range-thumb {
|
|
367
|
-
background-color: var(
|
|
368
|
-
|
|
397
|
+
background-color: var(
|
|
398
|
+
#{custom-props.$styleSliderHandleBackgroundDefault},
|
|
399
|
+
awsui.$color-background-slider-handle-warning-default
|
|
400
|
+
);
|
|
401
|
+
border-color: var(
|
|
402
|
+
#{custom-props.$styleSliderHandleBackgroundDefault},
|
|
403
|
+
awsui.$color-background-slider-handle-warning-default
|
|
404
|
+
);
|
|
369
405
|
}
|
|
370
406
|
&:hover::-webkit-slider-thumb {
|
|
371
407
|
@include mixins.warning-thumb-hover-styles;
|