@cloudscape-design/components 3.0.223 → 3.0.224
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/app-layout/styles.css.js +26 -26
- package/app-layout/styles.scoped.css +34 -33
- package/app-layout/styles.selectors.js +26 -26
- package/app-layout/visual-refresh/styles.css.js +60 -60
- package/app-layout/visual-refresh/styles.scoped.css +152 -148
- package/app-layout/visual-refresh/styles.selectors.js +60 -60
- package/container/styles.css.js +20 -20
- package/container/styles.scoped.css +39 -38
- package/container/styles.selectors.js +20 -20
- package/content-layout/styles.css.js +7 -7
- package/content-layout/styles.scoped.css +12 -11
- package/content-layout/styles.selectors.js +7 -7
- package/internal/components/dark-ribbon/styles.css.js +2 -2
- package/internal/components/dark-ribbon/styles.scoped.css +3 -2
- package/internal/components/dark-ribbon/styles.selectors.js +2 -2
- package/internal/environment.js +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/table/styles.css.js +33 -33
- package/table/styles.scoped.css +42 -41
- package/table/styles.selectors.js +33 -33
- package/wizard/styles.css.js +32 -32
- package/wizard/styles.scoped.css +65 -63
- package/wizard/styles.selectors.js +32 -32
|
@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
90
90
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
91
|
SPDX-License-Identifier: Apache-2.0
|
|
92
92
|
*/
|
|
93
|
-
section.
|
|
93
|
+
section.awsui_appbar_hyvsj_zt14d_93:not(#\9) {
|
|
94
94
|
align-items: center;
|
|
95
95
|
box-sizing: border-box;
|
|
96
96
|
display: grid;
|
|
@@ -114,20 +114,20 @@ section.awsui_appbar_hyvsj_1kwsp_93:not(#\9) {
|
|
|
114
114
|
span the entire column definition of the Layout grid.
|
|
115
115
|
*/
|
|
116
116
|
}
|
|
117
|
-
section.
|
|
117
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_appbar-nav_hyvsj_zt14d_117:not(#\9) {
|
|
118
118
|
grid-column: 1;
|
|
119
119
|
margin-right: var(--space-m-17eucw, 16px);
|
|
120
120
|
}
|
|
121
|
-
section.
|
|
121
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_breadcrumbs_hyvsj_zt14d_121:not(#\9) {
|
|
122
122
|
grid-column: 2;
|
|
123
123
|
background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
|
|
124
124
|
}
|
|
125
|
-
section.
|
|
125
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_appbar-tools_hyvsj_zt14d_125:not(#\9) {
|
|
126
126
|
grid-column: 3;
|
|
127
127
|
margin-left: var(--space-m-17eucw, 16px);
|
|
128
128
|
}
|
|
129
129
|
@media (min-width: 689px) {
|
|
130
|
-
section.
|
|
130
|
+
section.awsui_appbar_hyvsj_zt14d_93:not(#\9) {
|
|
131
131
|
/*
|
|
132
132
|
If Breadcrumbs do not exist then the AppBar should be suppressed
|
|
133
133
|
because in large viewports the triggers are rendered
|
|
@@ -163,33 +163,33 @@ section.awsui_appbar_hyvsj_1kwsp_93 > .awsui_appbar-tools_hyvsj_1kwsp_125:not(#\
|
|
|
163
163
|
be lifted so it doesn't render behind the background element.
|
|
164
164
|
*/
|
|
165
165
|
}
|
|
166
|
-
section.
|
|
166
|
+
section.awsui_appbar_hyvsj_zt14d_93:not(#\9):not(.awsui_has-breadcrumbs_hyvsj_zt14d_166) {
|
|
167
167
|
display: none;
|
|
168
168
|
}
|
|
169
|
-
section.
|
|
170
|
-
section.
|
|
169
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_appbar-nav_hyvsj_zt14d_117:not(#\9),
|
|
170
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_appbar-tools_hyvsj_zt14d_125:not(#\9) {
|
|
171
171
|
display: none;
|
|
172
172
|
}
|
|
173
|
-
section.
|
|
173
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_breadcrumbs_hyvsj_zt14d_121:not(#\9):not(.awsui_has-notifications-content_hyvsj_zt14d_173) {
|
|
174
174
|
padding-top: var(--space-scaled-m-pv0fmt, 16px);
|
|
175
175
|
}
|
|
176
|
-
section.
|
|
176
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_breadcrumbs_hyvsj_zt14d_121.awsui_has-notifications-content_hyvsj_zt14d_173:not(#\9) {
|
|
177
177
|
padding-top: var(--space-scaled-2x-s-9svxjy, 12px);
|
|
178
178
|
}
|
|
179
|
-
section.
|
|
180
|
-
section.
|
|
179
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_breadcrumbs_hyvsj_zt14d_121:not(#\9):not(.awsui_has-header_hyvsj_zt14d_179):not(.awsui_has-dynamic-overlap-height_hyvsj_zt14d_179),
|
|
180
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_breadcrumbs_hyvsj_zt14d_121:not(#\9):not(.awsui_has-header_hyvsj_zt14d_179).awsui_content-type-wizard_hyvsj_zt14d_180 {
|
|
181
181
|
padding-bottom: var(--space-m-17eucw, 16px);
|
|
182
182
|
}
|
|
183
|
-
section.
|
|
184
|
-
section.
|
|
183
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_breadcrumbs_hyvsj_zt14d_121.awsui_content-type-cards_hyvsj_zt14d_183:not(#\9),
|
|
184
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_breadcrumbs_hyvsj_zt14d_121.awsui_content-type-table_hyvsj_zt14d_184:not(#\9) {
|
|
185
185
|
padding-bottom: var(--space-xxs-ynfts5, 4px);
|
|
186
186
|
}
|
|
187
|
-
section.
|
|
187
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_breadcrumbs_hyvsj_zt14d_121.awsui_has-sticky-background_hyvsj_zt14d_187:not(#\9) {
|
|
188
188
|
z-index: 799;
|
|
189
189
|
}
|
|
190
190
|
}
|
|
191
191
|
@media (max-width: 688px) {
|
|
192
|
-
section.
|
|
192
|
+
section.awsui_appbar_hyvsj_zt14d_93:not(#\9) {
|
|
193
193
|
background-color: var(--color-background-home-header-mpq08f, #000716);
|
|
194
194
|
border-bottom: 1px solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
195
195
|
box-shadow: var(--shadow-panel-toggle-3fk0ch, 0px 6px 12px 1px rgba(0, 7, 22, 0.12));
|
|
@@ -205,11 +205,11 @@ section.awsui_appbar_hyvsj_1kwsp_93 > .awsui_appbar-tools_hyvsj_1kwsp_125:not(#\
|
|
|
205
205
|
they are now sticky positioned in the viewport with the AppBar.
|
|
206
206
|
*/
|
|
207
207
|
}
|
|
208
|
-
section.
|
|
209
|
-
section.
|
|
208
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_appbar-nav_hyvsj_zt14d_117:not(#\9),
|
|
209
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_appbar-tools_hyvsj_zt14d_125:not(#\9) {
|
|
210
210
|
display: block;
|
|
211
211
|
}
|
|
212
|
-
section.
|
|
212
|
+
section.awsui_appbar_hyvsj_zt14d_93 > .awsui_breadcrumbs_hyvsj_zt14d_121:not(#\9) {
|
|
213
213
|
padding: 0;
|
|
214
214
|
}
|
|
215
215
|
}
|
|
@@ -218,13 +218,14 @@ section.awsui_appbar_hyvsj_1kwsp_93 > .awsui_appbar-tools_hyvsj_1kwsp_125:not(#\
|
|
|
218
218
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
219
219
|
SPDX-License-Identifier: Apache-2.0
|
|
220
220
|
*/
|
|
221
|
-
div.
|
|
221
|
+
div.awsui_background_hyvsj_zt14d_221:not(#\9) {
|
|
222
222
|
display: contents;
|
|
223
223
|
}
|
|
224
|
-
div.
|
|
224
|
+
div.awsui_background_hyvsj_zt14d_221 > .awsui_notifications-appbar-header_hyvsj_zt14d_224:not(#\9) {
|
|
225
225
|
background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
|
|
226
226
|
grid-column: 1/span 5;
|
|
227
227
|
grid-row: 1/span 3;
|
|
228
|
+
color: var(--color-text-body-default-ajf1h5, #000716);
|
|
228
229
|
/*
|
|
229
230
|
The cards and table content types have a sticky dark header that is
|
|
230
231
|
offset beneath the sticky notifications if they exist. If the background
|
|
@@ -233,16 +234,17 @@ div.awsui_background_hyvsj_1kwsp_221 > .awsui_notifications-appbar-header_hyvsj_
|
|
|
233
234
|
*/
|
|
234
235
|
}
|
|
235
236
|
@media (min-width: 689px) {
|
|
236
|
-
div.
|
|
237
|
+
div.awsui_background_hyvsj_zt14d_221 > .awsui_notifications-appbar-header_hyvsj_zt14d_224.awsui_has-sticky-background_hyvsj_zt14d_187.awsui_has-notifications-content_hyvsj_zt14d_173.awsui_sticky-notifications_hyvsj_zt14d_237:not(#\9) {
|
|
237
238
|
position: sticky;
|
|
238
239
|
top: var(--awsui-offset-top-lgrg0d);
|
|
239
240
|
z-index: 799;
|
|
240
241
|
}
|
|
241
242
|
}
|
|
242
|
-
div.
|
|
243
|
+
div.awsui_background_hyvsj_zt14d_221 > .awsui_overlap_hyvsj_zt14d_243:not(#\9) {
|
|
243
244
|
background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
|
|
244
245
|
grid-column: 1/span 5;
|
|
245
246
|
grid-row: 4;
|
|
247
|
+
color: var(--color-text-body-default-ajf1h5, #000716);
|
|
246
248
|
/*
|
|
247
249
|
The cards and table content types can have sticky header content that
|
|
248
250
|
will retain position on viewport scroll. The overlap background needs to
|
|
@@ -251,7 +253,7 @@ div.awsui_background_hyvsj_1kwsp_221 > .awsui_overlap_hyvsj_1kwsp_242:not(#\9) {
|
|
|
251
253
|
*/
|
|
252
254
|
}
|
|
253
255
|
@media (min-width: 689px) {
|
|
254
|
-
div.
|
|
256
|
+
div.awsui_background_hyvsj_zt14d_221 > .awsui_overlap_hyvsj_zt14d_243.awsui_has-sticky-background_hyvsj_zt14d_187:not(#\9) {
|
|
255
257
|
position: sticky;
|
|
256
258
|
top: var(--awsui-offset-top-with-notifications-lgrg0d);
|
|
257
259
|
z-index: 799;
|
|
@@ -262,13 +264,13 @@ div.awsui_background_hyvsj_1kwsp_221 > .awsui_overlap_hyvsj_1kwsp_242:not(#\9) {
|
|
|
262
264
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
263
265
|
SPDX-License-Identifier: Apache-2.0
|
|
264
266
|
*/
|
|
265
|
-
header.
|
|
267
|
+
header.awsui_content_hyvsj_zt14d_180:not(#\9) {
|
|
266
268
|
grid-column: 3;
|
|
267
269
|
grid-row: 3;
|
|
268
270
|
padding-bottom: var(--space-content-header-padding-bottom-nvqytg, 24px);
|
|
269
271
|
}
|
|
270
272
|
@media (min-width: 689px) {
|
|
271
|
-
header.
|
|
273
|
+
header.awsui_content_hyvsj_zt14d_180:not(#\9) {
|
|
272
274
|
/*
|
|
273
275
|
If Notifications exist and Breadcrumbs do not then Notifications
|
|
274
276
|
is the previous adjacent sibling to the Header. Add minimal top padding
|
|
@@ -286,25 +288,25 @@ header.awsui_content_hyvsj_1kwsp_180:not(#\9) {
|
|
|
286
288
|
circular buttons.
|
|
287
289
|
*/
|
|
288
290
|
}
|
|
289
|
-
header.
|
|
291
|
+
header.awsui_content_hyvsj_zt14d_180.awsui_has-notifications-content_hyvsj_zt14d_173:not(#\9):not(.awsui_has-breadcrumbs_hyvsj_zt14d_166) {
|
|
290
292
|
padding-top: var(--space-scaled-xs-6859qs, 8px);
|
|
291
293
|
}
|
|
292
|
-
header.
|
|
294
|
+
header.awsui_content_hyvsj_zt14d_180.awsui_has-breadcrumbs_hyvsj_zt14d_166:not(#\9) {
|
|
293
295
|
padding-top: var(--space-xxs-ynfts5, 4px);
|
|
294
296
|
}
|
|
295
|
-
header.
|
|
297
|
+
header.awsui_content_hyvsj_zt14d_180:not(#\9):not(.awsui_has-notifications-content_hyvsj_zt14d_173):not(.awsui_has-breadcrumbs_hyvsj_zt14d_166) {
|
|
296
298
|
padding-top: var(--space-scaled-xs-6859qs, 8px);
|
|
297
299
|
}
|
|
298
300
|
}
|
|
299
301
|
@media (max-width: 688px) {
|
|
300
|
-
header.
|
|
302
|
+
header.awsui_content_hyvsj_zt14d_180:not(#\9) {
|
|
301
303
|
padding: var(--space-m-17eucw, 16px) 0 var(--space-content-header-padding-bottom-nvqytg, 24px);
|
|
302
304
|
/*
|
|
303
305
|
Breadcrumbs has moved to first position and sticky so Notifications
|
|
304
306
|
are now the previous adjacent sibling if they exist.
|
|
305
307
|
*/
|
|
306
308
|
}
|
|
307
|
-
header.
|
|
309
|
+
header.awsui_content_hyvsj_zt14d_180.awsui_has-notifications-content_hyvsj_zt14d_173:not(#\9) {
|
|
308
310
|
padding-top: var(--space-scaled-xs-6859qs, 8px);
|
|
309
311
|
}
|
|
310
312
|
}
|
|
@@ -330,7 +332,7 @@ header.awsui_content_hyvsj_1kwsp_180:not(#\9) {
|
|
|
330
332
|
circumstances regardless of whether the minContentWidth property is
|
|
331
333
|
explicitly set in script.
|
|
332
334
|
*/
|
|
333
|
-
.
|
|
335
|
+
.awsui_layout_hyvsj_zt14d_335:not(#\9) {
|
|
334
336
|
--awsui-content-gap-left-lgrg0d: 0px;
|
|
335
337
|
--awsui-content-gap-right-lgrg0d: 0px;
|
|
336
338
|
--awsui-content-height-lgrg0d: calc(100vh - var(--awsui-header-height-lgrg0d) - var(--awsui-footer-height-lgrg0d));
|
|
@@ -351,6 +353,7 @@ header.awsui_content_hyvsj_1kwsp_180:not(#\9) {
|
|
|
351
353
|
grid-template-rows: repeat(3, auto) var(--awsui-overlap-height-lgrg0d) 1fr;
|
|
352
354
|
grid-template-columns: min-content minmax(var(--awsui-content-gap-left-lgrg0d), 1fr) minmax(var(--awsui-default-min-content-width-lgrg0d), var(--awsui-default-max-content-width-lgrg0d)) minmax(var(--awsui-content-gap-right-lgrg0d), 1fr) min-content;
|
|
353
355
|
position: relative;
|
|
356
|
+
color: var(--color-text-body-default-ajf1h5, #000716);
|
|
354
357
|
/*
|
|
355
358
|
Only use the max content width custom property for the middle column definition
|
|
356
359
|
if the maxContentWidth property has been explicitly set to a non-zero value and
|
|
@@ -412,75 +415,75 @@ header.awsui_content_hyvsj_1kwsp_180:not(#\9) {
|
|
|
412
415
|
*/
|
|
413
416
|
}
|
|
414
417
|
@media (min-width: 1401px) {
|
|
415
|
-
.
|
|
418
|
+
.awsui_layout_hyvsj_zt14d_335:not(#\9):not(.awsui_has-max-content-width_hyvsj_zt14d_418) {
|
|
416
419
|
--awsui-default-max-content-width-lgrg0d: 1280px;
|
|
417
420
|
}
|
|
418
421
|
}
|
|
419
422
|
@media (min-width: 1921px) {
|
|
420
|
-
.
|
|
423
|
+
.awsui_layout_hyvsj_zt14d_335:not(#\9):not(.awsui_has-max-content-width_hyvsj_zt14d_418) {
|
|
421
424
|
--awsui-default-max-content-width-lgrg0d: 1440px;
|
|
422
425
|
}
|
|
423
426
|
}
|
|
424
427
|
@media (min-width: 2541px) {
|
|
425
|
-
.
|
|
428
|
+
.awsui_layout_hyvsj_zt14d_335:not(#\9):not(.awsui_has-max-content-width_hyvsj_zt14d_418) {
|
|
426
429
|
--awsui-default-max-content-width-lgrg0d: 1620px;
|
|
427
430
|
}
|
|
428
431
|
}
|
|
429
|
-
.
|
|
432
|
+
.awsui_layout_hyvsj_zt14d_335.awsui_has-max-content-width_hyvsj_zt14d_418:not(#\9) {
|
|
430
433
|
--awsui-default-max-content-width-lgrg0d: var(--awsui-max-content-width-lgrg0d);
|
|
431
434
|
}
|
|
432
435
|
@media (min-width: 993px) {
|
|
433
|
-
.
|
|
436
|
+
.awsui_layout_hyvsj_zt14d_335:not(#\9) {
|
|
434
437
|
--awsui-default-min-content-width-lgrg0d: var(--awsui-min-content-width-lgrg0d, 280px);
|
|
435
438
|
}
|
|
436
439
|
}
|
|
437
440
|
@media (max-width: 992px) {
|
|
438
|
-
.
|
|
441
|
+
.awsui_layout_hyvsj_zt14d_335:not(#\9) {
|
|
439
442
|
--awsui-default-min-content-width-lgrg0d: 0px;
|
|
440
443
|
}
|
|
441
444
|
}
|
|
442
|
-
.
|
|
445
|
+
.awsui_layout_hyvsj_zt14d_335.awsui_is-overlap-disabled_hyvsj_zt14d_445:not(#\9) {
|
|
443
446
|
--awsui-overlap-height-lgrg0d: 0;
|
|
444
447
|
}
|
|
445
|
-
.
|
|
448
|
+
.awsui_layout_hyvsj_zt14d_335:not(#\9):not(.awsui_disable-body-scroll_hyvsj_zt14d_448) {
|
|
446
449
|
--awsui-offset-top-lgrg0d: var(--awsui-header-height-lgrg0d);
|
|
447
450
|
min-height: var(--awsui-content-height-lgrg0d);
|
|
448
451
|
}
|
|
449
|
-
.
|
|
452
|
+
.awsui_layout_hyvsj_zt14d_335:not(#\9):not(.awsui_disable-body-scroll_hyvsj_zt14d_448):not(.awsui_has-sticky-notifications_hyvsj_zt14d_452) {
|
|
450
453
|
--awsui-offset-top-with-notifications-lgrg0d: var(--awsui-header-height-lgrg0d);
|
|
451
454
|
}
|
|
452
|
-
.
|
|
455
|
+
.awsui_layout_hyvsj_zt14d_335:not(#\9):not(.awsui_disable-body-scroll_hyvsj_zt14d_448).awsui_has-sticky-notifications_hyvsj_zt14d_452 {
|
|
453
456
|
--awsui-offset-top-with-notifications-lgrg0d: calc(
|
|
454
457
|
var(--awsui-header-height-lgrg0d) + var(--awsui-notifications-height-lgrg0d) + var(--space-xs-rsr2qu, 8px) + var(--space-xxxs-k2w98v, 2px)
|
|
455
458
|
);
|
|
456
459
|
}
|
|
457
|
-
.
|
|
460
|
+
.awsui_layout_hyvsj_zt14d_335.awsui_disable-body-scroll_hyvsj_zt14d_448:not(#\9) {
|
|
458
461
|
--awsui-offset-top-lgrg0d: 0px;
|
|
459
462
|
grid-template-rows: repeat(3, auto) var(--awsui-overlap-height-lgrg0d) 1fr auto;
|
|
460
463
|
height: var(--awsui-content-height-lgrg0d);
|
|
461
464
|
overflow-y: scroll;
|
|
462
465
|
}
|
|
463
|
-
.
|
|
466
|
+
.awsui_layout_hyvsj_zt14d_335.awsui_disable-body-scroll_hyvsj_zt14d_448.awsui_has-split-panel_hyvsj_zt14d_466.awsui_split-panel-position-bottom_hyvsj_zt14d_466:not(#\9) {
|
|
464
467
|
grid-template-rows: repeat(3, auto) var(--awsui-overlap-height-lgrg0d) repeat(2, auto);
|
|
465
468
|
}
|
|
466
|
-
.
|
|
469
|
+
.awsui_layout_hyvsj_zt14d_335.awsui_disable-body-scroll_hyvsj_zt14d_448:not(#\9):not(.awsui_has-sticky-notifications_hyvsj_zt14d_452) {
|
|
467
470
|
--awsui-offset-top-with-notifications-lgrg0d: 0px;
|
|
468
471
|
}
|
|
469
|
-
.
|
|
472
|
+
.awsui_layout_hyvsj_zt14d_335.awsui_disable-body-scroll_hyvsj_zt14d_448.awsui_has-sticky-notifications_hyvsj_zt14d_452:not(#\9) {
|
|
470
473
|
--awsui-offset-top-with-notifications-lgrg0d: calc(
|
|
471
474
|
var(--awsui-notifications-height-lgrg0d) + var(--space-xs-rsr2qu, 8px) + var(--space-xxs-ynfts5, 4px)
|
|
472
475
|
);
|
|
473
476
|
}
|
|
474
477
|
@media (min-width: 689px) {
|
|
475
|
-
.
|
|
478
|
+
.awsui_layout_hyvsj_zt14d_335.awsui_has-content-gap-left_hyvsj_zt14d_478:not(#\9) {
|
|
476
479
|
--awsui-content-gap-left-lgrg0d: var(--space-scaled-2x-xxxl-lbp35j, 40px);
|
|
477
480
|
}
|
|
478
|
-
.
|
|
481
|
+
.awsui_layout_hyvsj_zt14d_335.awsui_has-content-gap-right_hyvsj_zt14d_481:not(#\9) {
|
|
479
482
|
--awsui-content-gap-right-lgrg0d: var(--space-scaled-2x-xxxl-lbp35j, 40px);
|
|
480
483
|
}
|
|
481
484
|
}
|
|
482
485
|
@media (max-width: 688px) {
|
|
483
|
-
.
|
|
486
|
+
.awsui_layout_hyvsj_zt14d_335:not(#\9) {
|
|
484
487
|
--awsui-content-gap-left-lgrg0d: var(--space-l-4vl6xu, 20px);
|
|
485
488
|
--awsui-content-gap-right-lgrg0d: var(--space-l-4vl6xu, 20px);
|
|
486
489
|
}
|
|
@@ -490,7 +493,7 @@ header.awsui_content_hyvsj_1kwsp_180:not(#\9) {
|
|
|
490
493
|
This CSS class is applied to the document body to prevent overflow scrolling
|
|
491
494
|
when the navigation or tools drawers are open in responsive viewports.
|
|
492
495
|
*/
|
|
493
|
-
.awsui_block-body-
|
|
496
|
+
.awsui_block-body-scroll_hyvsj_zt14d_496:not(#\9) {
|
|
494
497
|
overflow: hidden;
|
|
495
498
|
}
|
|
496
499
|
|
|
@@ -498,7 +501,7 @@ when the navigation or tools drawers are open in responsive viewports.
|
|
|
498
501
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
499
502
|
SPDX-License-Identifier: Apache-2.0
|
|
500
503
|
*/
|
|
501
|
-
.
|
|
504
|
+
.awsui_container_hyvsj_zt14d_504:not(#\9) {
|
|
502
505
|
grid-column: 3;
|
|
503
506
|
grid-row: 4/span 2;
|
|
504
507
|
padding-bottom: var(--space-layout-content-bottom-kg9l42, 40px);
|
|
@@ -521,23 +524,23 @@ when the navigation or tools drawers are open in responsive viewports.
|
|
|
521
524
|
under various circumstances.
|
|
522
525
|
*/
|
|
523
526
|
}
|
|
524
|
-
.
|
|
527
|
+
.awsui_container_hyvsj_zt14d_504.awsui_has-split-panel_hyvsj_zt14d_466.awsui_split-panel-position-bottom_hyvsj_zt14d_466:not(#\9) {
|
|
525
528
|
padding-bottom: calc(var(--awsui-split-panel-height-lgrg0d) + var(--space-layout-content-bottom-kg9l42, 40px));
|
|
526
529
|
}
|
|
527
|
-
.
|
|
530
|
+
.awsui_container_hyvsj_zt14d_504.awsui_disable-content-paddings_hyvsj_zt14d_530:not(#\9) {
|
|
528
531
|
grid-column: 1/6;
|
|
529
532
|
padding: 0;
|
|
530
533
|
}
|
|
531
534
|
@media (min-width: 689px) {
|
|
532
|
-
.
|
|
535
|
+
.awsui_container_hyvsj_zt14d_504.awsui_disable-content-paddings_hyvsj_zt14d_530.awsui_is-navigation-open_hyvsj_zt14d_535:not(#\9) {
|
|
533
536
|
grid-column-start: 2;
|
|
534
537
|
}
|
|
535
|
-
.
|
|
538
|
+
.awsui_container_hyvsj_zt14d_504.awsui_disable-content-paddings_hyvsj_zt14d_530.awsui_is-tools-open_hyvsj_zt14d_538:not(#\9), .awsui_container_hyvsj_zt14d_504.awsui_disable-content-paddings_hyvsj_zt14d_530.awsui_is-split-panel-open_hyvsj_zt14d_538.awsui_split-panel-position-side_hyvsj_zt14d_538:not(#\9) {
|
|
536
539
|
grid-column-end: 5;
|
|
537
540
|
}
|
|
538
541
|
}
|
|
539
542
|
@media (min-width: 689px) {
|
|
540
|
-
.
|
|
543
|
+
.awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530) {
|
|
541
544
|
/*
|
|
542
545
|
Notifications is the previous adjacent sibling to the Main in
|
|
543
546
|
desktop viewports if there are no Breadcrumbs or Header. Use additional
|
|
@@ -552,18 +555,18 @@ when the navigation or tools drawers are open in responsive viewports.
|
|
|
552
555
|
sibling to the Main which requires no top padding.
|
|
553
556
|
*/
|
|
554
557
|
}
|
|
555
|
-
.
|
|
558
|
+
.awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530).awsui_content-type-default_hyvsj_zt14d_558.awsui_has-notifications-content_hyvsj_zt14d_173:not(.awsui_has-breadcrumbs_hyvsj_zt14d_166):not(.awsui_has-header_hyvsj_zt14d_179):not(.awsui_has-dynamic-overlap-height_hyvsj_zt14d_179), .awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530).awsui_content-type-form_hyvsj_zt14d_558.awsui_has-notifications-content_hyvsj_zt14d_173:not(.awsui_has-breadcrumbs_hyvsj_zt14d_166):not(.awsui_has-header_hyvsj_zt14d_179):not(.awsui_has-dynamic-overlap-height_hyvsj_zt14d_179) {
|
|
556
559
|
padding-top: var(--space-scaled-m-pv0fmt, 16px);
|
|
557
560
|
}
|
|
558
|
-
.
|
|
561
|
+
.awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530).awsui_content-type-default_hyvsj_zt14d_558:not(.awsui_has-notifications-content_hyvsj_zt14d_173):not(.awsui_has-breadcrumbs_hyvsj_zt14d_166):not(.awsui_has-header_hyvsj_zt14d_179):not(.awsui_has-dynamic-overlap-height_hyvsj_zt14d_179), .awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530).awsui_content-type-form_hyvsj_zt14d_558:not(.awsui_has-notifications-content_hyvsj_zt14d_173):not(.awsui_has-breadcrumbs_hyvsj_zt14d_166):not(.awsui_has-header_hyvsj_zt14d_179):not(.awsui_has-dynamic-overlap-height_hyvsj_zt14d_179) {
|
|
559
562
|
padding-top: var(--space-scaled-xs-6859qs, 8px);
|
|
560
563
|
}
|
|
561
|
-
.
|
|
564
|
+
.awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530).awsui_has-header_hyvsj_zt14d_179, .awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530).awsui_has-dynamic-overlap-height_hyvsj_zt14d_179 {
|
|
562
565
|
padding-top: 0;
|
|
563
566
|
}
|
|
564
567
|
}
|
|
565
568
|
@media (max-width: 688px) {
|
|
566
|
-
.
|
|
569
|
+
.awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530) {
|
|
567
570
|
/*
|
|
568
571
|
If the Notifications exist but the Header does not then the
|
|
569
572
|
Notifications is the previous adjacent sibling to the Main
|
|
@@ -578,23 +581,23 @@ when the navigation or tools drawers are open in responsive viewports.
|
|
|
578
581
|
sibling to the Main which requires no top padding.
|
|
579
582
|
*/
|
|
580
583
|
}
|
|
581
|
-
.
|
|
584
|
+
.awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530).awsui_content-type-default_hyvsj_zt14d_558.awsui_has-notifications-content_hyvsj_zt14d_173:not(.awsui_has-header_hyvsj_zt14d_179):not(.awsui_has-dynamic-overlap-height_hyvsj_zt14d_179), .awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530).awsui_content-type-form_hyvsj_zt14d_558.awsui_has-notifications-content_hyvsj_zt14d_173:not(.awsui_has-header_hyvsj_zt14d_179):not(.awsui_has-dynamic-overlap-height_hyvsj_zt14d_179) {
|
|
582
585
|
padding-top: var(--space-scaled-m-pv0fmt, 16px);
|
|
583
586
|
}
|
|
584
|
-
.
|
|
587
|
+
.awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530).awsui_content-type-default_hyvsj_zt14d_558:not(.awsui_has-notifications-content_hyvsj_zt14d_173):not(.awsui_has-header_hyvsj_zt14d_179):not(.awsui_has-dynamic-overlap-height_hyvsj_zt14d_179), .awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530).awsui_content-type-form_hyvsj_zt14d_558:not(.awsui_has-notifications-content_hyvsj_zt14d_173):not(.awsui_has-header_hyvsj_zt14d_179):not(.awsui_has-dynamic-overlap-height_hyvsj_zt14d_179) {
|
|
585
588
|
padding-top: var(--space-scaled-m-pv0fmt, 16px);
|
|
586
589
|
}
|
|
587
|
-
.
|
|
590
|
+
.awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530).awsui_has-header_hyvsj_zt14d_179, .awsui_container_hyvsj_zt14d_504:not(#\9):not(.awsui_disable-content-paddings_hyvsj_zt14d_530).awsui_has-dynamic-overlap-height_hyvsj_zt14d_179 {
|
|
588
591
|
padding-top: 0;
|
|
589
592
|
}
|
|
590
593
|
}
|
|
591
|
-
.
|
|
594
|
+
.awsui_container_hyvsj_zt14d_504.awsui_content-type-cards_hyvsj_zt14d_183:not(#\9), .awsui_container_hyvsj_zt14d_504.awsui_content-type-table_hyvsj_zt14d_184:not(#\9), .awsui_container_hyvsj_zt14d_504.awsui_content-type-wizard_hyvsj_zt14d_180:not(#\9) {
|
|
592
595
|
padding-top: 0;
|
|
593
596
|
}
|
|
594
597
|
|
|
595
598
|
/* stylelint-disable selector-max-universal, selector-combinator-disallowed-list */
|
|
596
|
-
.
|
|
597
|
-
.
|
|
599
|
+
.awsui_unfocusable_hyvsj_zt14d_599:not(#\9),
|
|
600
|
+
.awsui_unfocusable_hyvsj_zt14d_599 *:not(#\9) {
|
|
598
601
|
visibility: hidden !important;
|
|
599
602
|
}
|
|
600
603
|
|
|
@@ -603,7 +606,7 @@ when the navigation or tools drawers are open in responsive viewports.
|
|
|
603
606
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
604
607
|
SPDX-License-Identifier: Apache-2.0
|
|
605
608
|
*/
|
|
606
|
-
.awsui_navigation-
|
|
609
|
+
.awsui_navigation-container_hyvsj_zt14d_609:not(#\9) {
|
|
607
610
|
--awsui-navigation-width-lgrg0d: 280px;
|
|
608
611
|
display: flex;
|
|
609
612
|
grid-column: 1;
|
|
@@ -625,12 +628,12 @@ when the navigation or tools drawers are open in responsive viewports.
|
|
|
625
628
|
pointer-events: none;
|
|
626
629
|
}
|
|
627
630
|
@media (min-width: 2541px) {
|
|
628
|
-
.awsui_navigation-
|
|
631
|
+
.awsui_navigation-container_hyvsj_zt14d_609:not(#\9) {
|
|
629
632
|
--awsui-navigation-width-lgrg0d: 320px;
|
|
630
633
|
}
|
|
631
634
|
}
|
|
632
635
|
@media (max-width: 688px) {
|
|
633
|
-
.awsui_navigation-
|
|
636
|
+
.awsui_navigation-container_hyvsj_zt14d_609:not(#\9) {
|
|
634
637
|
left: 0;
|
|
635
638
|
position: fixed;
|
|
636
639
|
top: var(--awsui-offset-top-lgrg0d);
|
|
@@ -638,14 +641,14 @@ when the navigation or tools drawers are open in responsive viewports.
|
|
|
638
641
|
}
|
|
639
642
|
}
|
|
640
643
|
|
|
641
|
-
nav.awsui_show-
|
|
644
|
+
nav.awsui_show-navigation_hyvsj_zt14d_644:not(#\9) {
|
|
642
645
|
padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-layout-toggle-padding-axl9jr, 20px);
|
|
643
646
|
/*
|
|
644
647
|
Apply the animation only in desktop viewports because the AppBar will
|
|
645
648
|
take control in responsive viewports.
|
|
646
649
|
*/
|
|
647
650
|
}
|
|
648
|
-
@keyframes
|
|
651
|
+
@keyframes awsui_showButtons_hyvsj_zt14d_1 {
|
|
649
652
|
0% {
|
|
650
653
|
opacity: 0;
|
|
651
654
|
}
|
|
@@ -653,31 +656,31 @@ nav.awsui_show-navigation_hyvsj_1kwsp_641:not(#\9) {
|
|
|
653
656
|
opacity: 1;
|
|
654
657
|
}
|
|
655
658
|
}
|
|
656
|
-
nav.awsui_show-
|
|
659
|
+
nav.awsui_show-navigation_hyvsj_zt14d_644.awsui_is-navigation-open_hyvsj_zt14d_535:not(#\9) {
|
|
657
660
|
display: none;
|
|
658
661
|
}
|
|
659
662
|
@media (min-width: 689px) {
|
|
660
|
-
nav.awsui_show-
|
|
663
|
+
nav.awsui_show-navigation_hyvsj_zt14d_644:not(#\9):not(.awsui_is-navigation-open_hyvsj_zt14d_535) {
|
|
661
664
|
display: block;
|
|
662
665
|
}
|
|
663
|
-
nav.awsui_show-
|
|
664
|
-
animation:
|
|
666
|
+
nav.awsui_show-navigation_hyvsj_zt14d_644:not(#\9):not(.awsui_is-navigation-open_hyvsj_zt14d_535).awsui_animating_hyvsj_zt14d_666 {
|
|
667
|
+
animation: awsui_showButtons_hyvsj_zt14d_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms);
|
|
665
668
|
}
|
|
666
669
|
}
|
|
667
670
|
@media (min-width: 689px) and (prefers-reduced-motion: reduce) {
|
|
668
|
-
nav.awsui_show-
|
|
671
|
+
nav.awsui_show-navigation_hyvsj_zt14d_644:not(#\9):not(.awsui_is-navigation-open_hyvsj_zt14d_535).awsui_animating_hyvsj_zt14d_666 {
|
|
669
672
|
animation: none;
|
|
670
673
|
transition: none;
|
|
671
674
|
}
|
|
672
675
|
}
|
|
673
676
|
@media (min-width: 689px) {
|
|
674
|
-
.awsui-motion-disabled nav.awsui_show-
|
|
677
|
+
.awsui-motion-disabled nav.awsui_show-navigation_hyvsj_zt14d_644:not(#\9):not(.awsui_is-navigation-open_hyvsj_zt14d_535).awsui_animating_hyvsj_zt14d_666, .awsui-mode-entering nav.awsui_show-navigation_hyvsj_zt14d_644:not(#\9):not(.awsui_is-navigation-open_hyvsj_zt14d_535).awsui_animating_hyvsj_zt14d_666 {
|
|
675
678
|
animation: none;
|
|
676
679
|
transition: none;
|
|
677
680
|
}
|
|
678
681
|
}
|
|
679
682
|
|
|
680
|
-
nav.
|
|
683
|
+
nav.awsui_navigation_hyvsj_zt14d_609:not(#\9) {
|
|
681
684
|
background-color: var(--color-background-container-content-i8i4a0, #ffffff);
|
|
682
685
|
box-shadow: var(--shadow-panel-gp3bf2, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1));
|
|
683
686
|
bottom: 0;
|
|
@@ -694,7 +697,7 @@ nav.awsui_navigation_hyvsj_1kwsp_606:not(#\9) {
|
|
|
694
697
|
prevent unwanted text wrapping.
|
|
695
698
|
*/
|
|
696
699
|
}
|
|
697
|
-
@keyframes
|
|
700
|
+
@keyframes awsui_openNavigation_hyvsj_zt14d_1 {
|
|
698
701
|
from {
|
|
699
702
|
opacity: 0;
|
|
700
703
|
width: calc(var(--space-layout-toggle-padding-axl9jr, 20px) * 2 + var(--space-layout-toggle-diameter-hzvqtj, 40px));
|
|
@@ -704,33 +707,33 @@ nav.awsui_navigation_hyvsj_1kwsp_606:not(#\9) {
|
|
|
704
707
|
width: var(--awsui-navigation-width-lgrg0d);
|
|
705
708
|
}
|
|
706
709
|
}
|
|
707
|
-
nav.
|
|
710
|
+
nav.awsui_navigation_hyvsj_zt14d_609:not(#\9):not(.awsui_is-navigation-open_hyvsj_zt14d_535) {
|
|
708
711
|
width: 0;
|
|
709
712
|
display: none;
|
|
710
713
|
}
|
|
711
|
-
nav.
|
|
712
|
-
animation:
|
|
714
|
+
nav.awsui_navigation_hyvsj_zt14d_609.awsui_is-navigation-open_hyvsj_zt14d_535.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
715
|
+
animation: awsui_openNavigation_hyvsj_zt14d_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms);
|
|
713
716
|
}
|
|
714
717
|
@media (prefers-reduced-motion: reduce) {
|
|
715
|
-
nav.
|
|
718
|
+
nav.awsui_navigation_hyvsj_zt14d_609.awsui_is-navigation-open_hyvsj_zt14d_535.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
716
719
|
animation: none;
|
|
717
720
|
transition: none;
|
|
718
721
|
}
|
|
719
722
|
}
|
|
720
|
-
.awsui-motion-disabled nav.
|
|
723
|
+
.awsui-motion-disabled nav.awsui_navigation_hyvsj_zt14d_609.awsui_is-navigation-open_hyvsj_zt14d_535.awsui_animating_hyvsj_zt14d_666:not(#\9), .awsui-mode-entering nav.awsui_navigation_hyvsj_zt14d_609.awsui_is-navigation-open_hyvsj_zt14d_535.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
721
724
|
animation: none;
|
|
722
725
|
transition: none;
|
|
723
726
|
}
|
|
724
|
-
nav.
|
|
727
|
+
nav.awsui_navigation_hyvsj_zt14d_609 > .awsui_animated-content_hyvsj_zt14d_727:not(#\9) {
|
|
725
728
|
width: var(--awsui-navigation-width-lgrg0d);
|
|
726
729
|
}
|
|
727
730
|
@media (max-width: 688px) {
|
|
728
|
-
nav.
|
|
731
|
+
nav.awsui_navigation_hyvsj_zt14d_609:not(#\9) {
|
|
729
732
|
--awsui-navigation-width-lgrg0d: 100vw;
|
|
730
733
|
}
|
|
731
734
|
}
|
|
732
735
|
|
|
733
|
-
.awsui_hide-
|
|
736
|
+
.awsui_hide-navigation_hyvsj_zt14d_736:not(#\9) {
|
|
734
737
|
position: absolute;
|
|
735
738
|
right: var(--space-m-17eucw, 16px);
|
|
736
739
|
top: var(--size-vertical-panel-icon-offset-ti40n4, 15px);
|
|
@@ -740,10 +743,11 @@ nav.awsui_navigation_hyvsj_1kwsp_606 > .awsui_animated-content_hyvsj_1kwsp_724:n
|
|
|
740
743
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
741
744
|
SPDX-License-Identifier: Apache-2.0
|
|
742
745
|
*/
|
|
743
|
-
.
|
|
746
|
+
.awsui_notifications_hyvsj_zt14d_224:not(#\9) {
|
|
744
747
|
grid-column: 3;
|
|
745
748
|
grid-row: 1;
|
|
746
749
|
z-index: 850;
|
|
750
|
+
color: var(--color-text-body-default-ajf1h5, #000716);
|
|
747
751
|
/*
|
|
748
752
|
In desktop viewports the notifications will always be the first
|
|
749
753
|
slot rendered in the center column. The padding should create
|
|
@@ -757,31 +761,31 @@ nav.awsui_navigation_hyvsj_1kwsp_606 > .awsui_animated-content_hyvsj_1kwsp_724:n
|
|
|
757
761
|
*/
|
|
758
762
|
}
|
|
759
763
|
@media (min-width: 689px) {
|
|
760
|
-
.
|
|
764
|
+
.awsui_notifications_hyvsj_zt14d_224:not(#\9) {
|
|
761
765
|
margin: var(--space-xs-rsr2qu, 8px) 0;
|
|
762
766
|
/*
|
|
763
767
|
var(--space-xs-rsr2qu, 8px) token needs to align with the $offsetTopWithNotifications
|
|
764
768
|
calculation in the layout CSS.
|
|
765
769
|
*/
|
|
766
770
|
}
|
|
767
|
-
.
|
|
771
|
+
.awsui_notifications_hyvsj_zt14d_224.awsui_sticky-notifications_hyvsj_zt14d_237:not(#\9) {
|
|
768
772
|
position: sticky;
|
|
769
773
|
top: calc(var(--awsui-offset-top-lgrg0d) + var(--space-xs-rsr2qu, 8px));
|
|
770
774
|
--awsui-flashbar-sticky-bottom-margin-lgrg0d: var(--space-xxl-2nvmf1, 32px);
|
|
771
775
|
}
|
|
772
|
-
.
|
|
776
|
+
.awsui_notifications_hyvsj_zt14d_224:not(#\9):not(.awsui_has-notifications-content_hyvsj_zt14d_173) {
|
|
773
777
|
margin: 0;
|
|
774
778
|
}
|
|
775
779
|
}
|
|
776
780
|
@media (max-width: 688px) {
|
|
777
|
-
.
|
|
781
|
+
.awsui_notifications_hyvsj_zt14d_224:not(#\9) {
|
|
778
782
|
grid-row: 2;
|
|
779
783
|
margin: var(--space-scaled-s-cu1hzn, 12px) 0;
|
|
780
784
|
}
|
|
781
|
-
.
|
|
785
|
+
.awsui_notifications_hyvsj_zt14d_224.awsui_sticky-notifications_hyvsj_zt14d_237:not(#\9) {
|
|
782
786
|
position: static;
|
|
783
787
|
}
|
|
784
|
-
.
|
|
788
|
+
.awsui_notifications_hyvsj_zt14d_224:not(#\9):not(.awsui_has-notifications-content_hyvsj_zt14d_173) {
|
|
785
789
|
margin: 0;
|
|
786
790
|
}
|
|
787
791
|
}
|
|
@@ -796,7 +800,7 @@ as the content area. This row is defined as 1 fractional unit which will
|
|
|
796
800
|
consume the remaining vertical space in the grid after the notifications
|
|
797
801
|
and breadcrumbs.
|
|
798
802
|
*/
|
|
799
|
-
section.awsui_split-panel-
|
|
803
|
+
section.awsui_split-panel-bottom_hyvsj_zt14d_803:not(#\9) {
|
|
800
804
|
/*
|
|
801
805
|
The align self property will position the split panel at the bottom of the grid row.
|
|
802
806
|
This could be off the viewport if the content area has enough content to be scrollable.
|
|
@@ -831,7 +835,7 @@ section.awsui_split-panel-bottom_hyvsj_1kwsp_799:not(#\9) {
|
|
|
831
835
|
apply the animation to the height property.
|
|
832
836
|
*/
|
|
833
837
|
}
|
|
834
|
-
@keyframes
|
|
838
|
+
@keyframes awsui_openSplitPanelBottom_hyvsj_zt14d_1 {
|
|
835
839
|
from {
|
|
836
840
|
height: var(--awsui-split-panel-reported-header-size-lgrg0d, 0);
|
|
837
841
|
}
|
|
@@ -839,39 +843,39 @@ section.awsui_split-panel-bottom_hyvsj_1kwsp_799:not(#\9) {
|
|
|
839
843
|
height: var(--awsui-split-panel-reported-size-lgrg0d);
|
|
840
844
|
}
|
|
841
845
|
}
|
|
842
|
-
section.awsui_split-panel-
|
|
846
|
+
section.awsui_split-panel-bottom_hyvsj_zt14d_803.awsui_disable-body-scroll_hyvsj_zt14d_448:not(#\9) {
|
|
843
847
|
bottom: 0;
|
|
844
848
|
}
|
|
845
|
-
section.awsui_split-panel-
|
|
849
|
+
section.awsui_split-panel-bottom_hyvsj_zt14d_803.awsui_is-navigation-open_hyvsj_zt14d_535.awsui_position-bottom_hyvsj_zt14d_849:not(#\9) {
|
|
846
850
|
grid-column-start: 2;
|
|
847
851
|
}
|
|
848
|
-
section.awsui_split-panel-
|
|
852
|
+
section.awsui_split-panel-bottom_hyvsj_zt14d_803.awsui_is-tools-open_hyvsj_zt14d_538.awsui_position-bottom_hyvsj_zt14d_849:not(#\9) {
|
|
849
853
|
grid-column-end: 5;
|
|
850
854
|
}
|
|
851
|
-
section.awsui_split-panel-
|
|
855
|
+
section.awsui_split-panel-bottom_hyvsj_zt14d_803.awsui_position-bottom_hyvsj_zt14d_849:not(#\9) {
|
|
852
856
|
display: block;
|
|
853
857
|
}
|
|
854
|
-
section.awsui_split-panel-
|
|
858
|
+
section.awsui_split-panel-bottom_hyvsj_zt14d_803:not(#\9):not(.awsui_is-split-panel-open_hyvsj_zt14d_538).awsui_position-bottom_hyvsj_zt14d_849 {
|
|
855
859
|
box-shadow: rgba(0, 7, 22, 0.1) 0px -32px 32px -24px;
|
|
856
860
|
}
|
|
857
|
-
section.awsui_split-panel-
|
|
861
|
+
section.awsui_split-panel-bottom_hyvsj_zt14d_803.awsui_is-split-panel-open_hyvsj_zt14d_538.awsui_position-bottom_hyvsj_zt14d_849:not(#\9) {
|
|
858
862
|
box-shadow: var(--shadow-split-bottom-otfetg, 0px -36px 36px -36px rgba(0, 7, 22, 0.1));
|
|
859
863
|
}
|
|
860
|
-
section.awsui_split-panel-
|
|
861
|
-
animation:
|
|
864
|
+
section.awsui_split-panel-bottom_hyvsj_zt14d_803.awsui_is-split-panel-open_hyvsj_zt14d_538.awsui_position-bottom_hyvsj_zt14d_849.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
865
|
+
animation: awsui_openSplitPanelBottom_hyvsj_zt14d_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms);
|
|
862
866
|
}
|
|
863
867
|
@media (prefers-reduced-motion: reduce) {
|
|
864
|
-
section.awsui_split-panel-
|
|
868
|
+
section.awsui_split-panel-bottom_hyvsj_zt14d_803.awsui_is-split-panel-open_hyvsj_zt14d_538.awsui_position-bottom_hyvsj_zt14d_849.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
865
869
|
animation: none;
|
|
866
870
|
transition: none;
|
|
867
871
|
}
|
|
868
872
|
}
|
|
869
|
-
.awsui-motion-disabled section.awsui_split-panel-
|
|
873
|
+
.awsui-motion-disabled section.awsui_split-panel-bottom_hyvsj_zt14d_803.awsui_is-split-panel-open_hyvsj_zt14d_538.awsui_position-bottom_hyvsj_zt14d_849.awsui_animating_hyvsj_zt14d_666:not(#\9), .awsui-mode-entering section.awsui_split-panel-bottom_hyvsj_zt14d_803.awsui_is-split-panel-open_hyvsj_zt14d_538.awsui_position-bottom_hyvsj_zt14d_849.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
870
874
|
animation: none;
|
|
871
875
|
transition: none;
|
|
872
876
|
}
|
|
873
877
|
|
|
874
|
-
section.awsui_split-panel-
|
|
878
|
+
section.awsui_split-panel-side_hyvsj_zt14d_878:not(#\9) {
|
|
875
879
|
height: 100%;
|
|
876
880
|
overflow-x: hidden;
|
|
877
881
|
pointer-events: auto;
|
|
@@ -886,7 +890,7 @@ section.awsui_split-panel-side_hyvsj_1kwsp_874:not(#\9) {
|
|
|
886
890
|
prevent unwanted text wrapping.
|
|
887
891
|
*/
|
|
888
892
|
}
|
|
889
|
-
@keyframes
|
|
893
|
+
@keyframes awsui_openSplitPanelSide_hyvsj_zt14d_1 {
|
|
890
894
|
from {
|
|
891
895
|
opacity: 0;
|
|
892
896
|
width: var(--awsui-split-panel-min-width-lgrg0d, 280px);
|
|
@@ -896,28 +900,28 @@ section.awsui_split-panel-side_hyvsj_1kwsp_874:not(#\9) {
|
|
|
896
900
|
width: var(--awsui-split-panel-reported-size-lgrg0d);
|
|
897
901
|
}
|
|
898
902
|
}
|
|
899
|
-
section.awsui_split-panel-
|
|
903
|
+
section.awsui_split-panel-side_hyvsj_zt14d_878:not(#\9):not(.awsui_is-split-panel-open_hyvsj_zt14d_538), section.awsui_split-panel-side_hyvsj_zt14d_878.awsui_position-bottom_hyvsj_zt14d_849:not(#\9) {
|
|
900
904
|
width: 0;
|
|
901
905
|
}
|
|
902
|
-
section.awsui_split-panel-
|
|
906
|
+
section.awsui_split-panel-side_hyvsj_zt14d_878.awsui_is-split-panel-open_hyvsj_zt14d_538.awsui_position-side_hyvsj_zt14d_906:not(#\9) {
|
|
903
907
|
box-shadow: var(--shadow-panel-gp3bf2, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1));
|
|
904
908
|
max-width: var(--awsui-split-panel-max-width-lgrg0d, 280px);
|
|
905
909
|
min-width: var(--awsui-split-panel-min-width-lgrg0d, 280px);
|
|
906
910
|
}
|
|
907
|
-
section.awsui_split-panel-
|
|
908
|
-
animation:
|
|
911
|
+
section.awsui_split-panel-side_hyvsj_zt14d_878.awsui_is-split-panel-open_hyvsj_zt14d_538.awsui_position-side_hyvsj_zt14d_906.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
912
|
+
animation: awsui_openSplitPanelSide_hyvsj_zt14d_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms);
|
|
909
913
|
}
|
|
910
914
|
@media (prefers-reduced-motion: reduce) {
|
|
911
|
-
section.awsui_split-panel-
|
|
915
|
+
section.awsui_split-panel-side_hyvsj_zt14d_878.awsui_is-split-panel-open_hyvsj_zt14d_538.awsui_position-side_hyvsj_zt14d_906.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
912
916
|
animation: none;
|
|
913
917
|
transition: none;
|
|
914
918
|
}
|
|
915
919
|
}
|
|
916
|
-
.awsui-motion-disabled section.awsui_split-panel-
|
|
920
|
+
.awsui-motion-disabled section.awsui_split-panel-side_hyvsj_zt14d_878.awsui_is-split-panel-open_hyvsj_zt14d_538.awsui_position-side_hyvsj_zt14d_906.awsui_animating_hyvsj_zt14d_666:not(#\9), .awsui-mode-entering section.awsui_split-panel-side_hyvsj_zt14d_878.awsui_is-split-panel-open_hyvsj_zt14d_538.awsui_position-side_hyvsj_zt14d_906.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
917
921
|
animation: none;
|
|
918
922
|
transition: none;
|
|
919
923
|
}
|
|
920
|
-
section.awsui_split-panel-
|
|
924
|
+
section.awsui_split-panel-side_hyvsj_zt14d_878 > .awsui_animated-content_hyvsj_zt14d_727:not(#\9) {
|
|
921
925
|
height: 100%;
|
|
922
926
|
max-width: inherit;
|
|
923
927
|
width: var(--awsui-split-panel-reported-size-lgrg0d);
|
|
@@ -936,7 +940,7 @@ content width has a default value that can be set directly with the minContentWi
|
|
|
936
940
|
property. The content gap right is computed in the Layout styles based on the
|
|
937
941
|
viewport size and state of the Tools drawer.
|
|
938
942
|
*/
|
|
939
|
-
.awsui_tools-
|
|
943
|
+
.awsui_tools-container_hyvsj_zt14d_943:not(#\9) {
|
|
940
944
|
/* stylelint-disable scss/operator-no-newline-after */
|
|
941
945
|
--awsui-tools-max-width-lgrg0d: calc(var(--awsui-layout-width-lgrg0d) - var(--awsui-main-offset-left-lgrg0d) - var(--awsui-default-min-content-width-lgrg0d) - var(--awsui-content-gap-right-lgrg0d));
|
|
942
946
|
/* stylelint-enable scss/operator-no-newline-after */
|
|
@@ -952,12 +956,12 @@ viewport size and state of the Tools drawer.
|
|
|
952
956
|
pointer-events: none;
|
|
953
957
|
}
|
|
954
958
|
@media (min-width: 2541px) {
|
|
955
|
-
.awsui_tools-
|
|
959
|
+
.awsui_tools-container_hyvsj_zt14d_943:not(#\9) {
|
|
956
960
|
--awsui-tools-width-lgrg0d: 360px;
|
|
957
961
|
}
|
|
958
962
|
}
|
|
959
963
|
@media (max-width: 688px) {
|
|
960
|
-
.awsui_tools-
|
|
964
|
+
.awsui_tools-container_hyvsj_zt14d_943:not(#\9) {
|
|
961
965
|
--awsui-tools-max-width-lgrg0d: none;
|
|
962
966
|
--awsui-tools-width-lgrg0d: auto;
|
|
963
967
|
position: fixed;
|
|
@@ -967,7 +971,7 @@ viewport size and state of the Tools drawer.
|
|
|
967
971
|
}
|
|
968
972
|
}
|
|
969
973
|
|
|
970
|
-
.
|
|
974
|
+
.awsui_tools_hyvsj_zt14d_943:not(#\9) {
|
|
971
975
|
background-color: var(--color-background-container-content-i8i4a0, #ffffff);
|
|
972
976
|
box-shadow: var(--shadow-panel-gp3bf2, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1));
|
|
973
977
|
flex-shrink: 0;
|
|
@@ -990,7 +994,7 @@ viewport size and state of the Tools drawer.
|
|
|
990
994
|
in the side position.
|
|
991
995
|
*/
|
|
992
996
|
}
|
|
993
|
-
@keyframes
|
|
997
|
+
@keyframes awsui_openTools_hyvsj_zt14d_1 {
|
|
994
998
|
from {
|
|
995
999
|
opacity: var(--awsui-tools-animation-starting-opacity-lgrg0d, 0);
|
|
996
1000
|
width: calc(var(--space-layout-toggle-padding-axl9jr, 20px) * 2 + var(--space-layout-toggle-diameter-hzvqtj, 40px));
|
|
@@ -1000,38 +1004,38 @@ viewport size and state of the Tools drawer.
|
|
|
1000
1004
|
width: var(--awsui-tools-width-lgrg0d);
|
|
1001
1005
|
}
|
|
1002
1006
|
}
|
|
1003
|
-
.
|
|
1007
|
+
.awsui_tools_hyvsj_zt14d_943:not(#\9):not(.awsui_is-tools-open_hyvsj_zt14d_538) {
|
|
1004
1008
|
width: 0;
|
|
1005
1009
|
display: none;
|
|
1006
1010
|
}
|
|
1007
|
-
.
|
|
1008
|
-
animation:
|
|
1011
|
+
.awsui_tools_hyvsj_zt14d_943.awsui_is-tools-open_hyvsj_zt14d_538.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
1012
|
+
animation: awsui_openTools_hyvsj_zt14d_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms);
|
|
1009
1013
|
}
|
|
1010
1014
|
@media (prefers-reduced-motion: reduce) {
|
|
1011
|
-
.
|
|
1015
|
+
.awsui_tools_hyvsj_zt14d_943.awsui_is-tools-open_hyvsj_zt14d_538.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
1012
1016
|
animation: none;
|
|
1013
1017
|
transition: none;
|
|
1014
1018
|
}
|
|
1015
1019
|
}
|
|
1016
|
-
.awsui-motion-disabled .
|
|
1020
|
+
.awsui-motion-disabled .awsui_tools_hyvsj_zt14d_943.awsui_is-tools-open_hyvsj_zt14d_538.awsui_animating_hyvsj_zt14d_666:not(#\9), .awsui-mode-entering .awsui_tools_hyvsj_zt14d_943.awsui_is-tools-open_hyvsj_zt14d_538.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
1017
1021
|
animation: none;
|
|
1018
1022
|
transition: none;
|
|
1019
1023
|
}
|
|
1020
|
-
.
|
|
1024
|
+
.awsui_tools_hyvsj_zt14d_943 > .awsui_animated-content_hyvsj_zt14d_727:not(#\9) {
|
|
1021
1025
|
width: var(--awsui-tools-width-lgrg0d);
|
|
1022
1026
|
}
|
|
1023
1027
|
@media (min-width: 689px) {
|
|
1024
|
-
.
|
|
1028
|
+
.awsui_tools_hyvsj_zt14d_943.awsui_is-tools-open_hyvsj_zt14d_538.awsui_has-tools-form-persistence_hyvsj_zt14d_1028:not(#\9) {
|
|
1025
1029
|
border-right: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
1026
1030
|
}
|
|
1027
1031
|
}
|
|
1028
1032
|
@media (max-width: 688px) {
|
|
1029
|
-
.
|
|
1033
|
+
.awsui_tools_hyvsj_zt14d_943:not(#\9) {
|
|
1030
1034
|
--awsui-tools-width-lgrg0d: 100vw;
|
|
1031
1035
|
}
|
|
1032
1036
|
}
|
|
1033
1037
|
|
|
1034
|
-
.awsui_hide-
|
|
1038
|
+
.awsui_hide-tools_hyvsj_zt14d_1038:not(#\9) {
|
|
1035
1039
|
position: absolute;
|
|
1036
1040
|
right: var(--space-m-17eucw, 16px);
|
|
1037
1041
|
top: var(--size-vertical-panel-icon-offset-ti40n4, 15px);
|
|
@@ -1043,7 +1047,7 @@ Warning! If these design tokens for padding change it will adversely impact
|
|
|
1043
1047
|
the calculation used to determine the Split Panel maximum width in the
|
|
1044
1048
|
handleSplitPanelMaxWidth function in the context.
|
|
1045
1049
|
*/
|
|
1046
|
-
.awsui_show-
|
|
1050
|
+
.awsui_show-tools_hyvsj_zt14d_1050:not(#\9) {
|
|
1047
1051
|
box-sizing: border-box;
|
|
1048
1052
|
padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-layout-toggle-padding-axl9jr, 20px);
|
|
1049
1053
|
/*
|
|
@@ -1051,7 +1055,7 @@ handleSplitPanelMaxWidth function in the context.
|
|
|
1051
1055
|
take control in responsive viewports.
|
|
1052
1056
|
*/
|
|
1053
1057
|
}
|
|
1054
|
-
@keyframes
|
|
1058
|
+
@keyframes awsui_showButtons_hyvsj_zt14d_1 {
|
|
1055
1059
|
0% {
|
|
1056
1060
|
opacity: 0;
|
|
1057
1061
|
}
|
|
@@ -1059,33 +1063,33 @@ handleSplitPanelMaxWidth function in the context.
|
|
|
1059
1063
|
opacity: 1;
|
|
1060
1064
|
}
|
|
1061
1065
|
}
|
|
1062
|
-
.awsui_show-
|
|
1066
|
+
.awsui_show-tools_hyvsj_zt14d_1050:not(#\9):not(.awsui_has-tools-form_hyvsj_zt14d_1028) {
|
|
1063
1067
|
display: none;
|
|
1064
1068
|
}
|
|
1065
1069
|
@media (min-width: 689px) {
|
|
1066
|
-
.awsui_show-
|
|
1070
|
+
.awsui_show-tools_hyvsj_zt14d_1050.awsui_has-tools-form_hyvsj_zt14d_1028:not(#\9) {
|
|
1067
1071
|
display: flex;
|
|
1068
1072
|
flex-direction: column;
|
|
1069
1073
|
gap: var(--space-xs-rsr2qu, 8px);
|
|
1070
1074
|
}
|
|
1071
|
-
.awsui_show-
|
|
1072
|
-
animation:
|
|
1075
|
+
.awsui_show-tools_hyvsj_zt14d_1050.awsui_has-tools-form_hyvsj_zt14d_1028.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
1076
|
+
animation: awsui_showButtons_hyvsj_zt14d_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms);
|
|
1073
1077
|
}
|
|
1074
1078
|
}
|
|
1075
1079
|
@media (min-width: 689px) and (prefers-reduced-motion: reduce) {
|
|
1076
|
-
.awsui_show-
|
|
1080
|
+
.awsui_show-tools_hyvsj_zt14d_1050.awsui_has-tools-form_hyvsj_zt14d_1028.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
1077
1081
|
animation: none;
|
|
1078
1082
|
transition: none;
|
|
1079
1083
|
}
|
|
1080
1084
|
}
|
|
1081
1085
|
@media (min-width: 689px) {
|
|
1082
|
-
.awsui-motion-disabled .awsui_show-
|
|
1086
|
+
.awsui-motion-disabled .awsui_show-tools_hyvsj_zt14d_1050.awsui_has-tools-form_hyvsj_zt14d_1028.awsui_animating_hyvsj_zt14d_666:not(#\9), .awsui-mode-entering .awsui_show-tools_hyvsj_zt14d_1050.awsui_has-tools-form_hyvsj_zt14d_1028.awsui_animating_hyvsj_zt14d_666:not(#\9) {
|
|
1083
1087
|
animation: none;
|
|
1084
1088
|
transition: none;
|
|
1085
1089
|
}
|
|
1086
1090
|
}
|
|
1087
1091
|
@media (min-width: 689px) {
|
|
1088
|
-
.awsui_show-
|
|
1092
|
+
.awsui_show-tools_hyvsj_zt14d_1050.awsui_has-tools-form-persistence_hyvsj_zt14d_1028:not(#\9) {
|
|
1089
1093
|
background-color: var(--color-background-container-content-i8i4a0, #ffffff);
|
|
1090
1094
|
z-index: 1;
|
|
1091
1095
|
}
|
|
@@ -1100,7 +1104,7 @@ Warning! If these design tokens for width change it will adversely impact
|
|
|
1100
1104
|
the calculation used to determine the Split Panel maximum width in the
|
|
1101
1105
|
handleSplitPanelMaxWidth function in the context.
|
|
1102
1106
|
*/
|
|
1103
|
-
.
|
|
1107
|
+
.awsui_trigger_hyvsj_zt14d_1107:not(#\9) {
|
|
1104
1108
|
background: var(--color-background-layout-toggle-default-f9hnkv, #192534);
|
|
1105
1109
|
border: none;
|
|
1106
1110
|
border-radius: 50%;
|
|
@@ -1112,14 +1116,14 @@ handleSplitPanelMaxWidth function in the context.
|
|
|
1112
1116
|
width: var(--space-layout-toggle-diameter-hzvqtj, 40px);
|
|
1113
1117
|
pointer-events: auto;
|
|
1114
1118
|
}
|
|
1115
|
-
.
|
|
1119
|
+
.awsui_trigger_hyvsj_zt14d_1107[data-awsui-focus-visible=true]:not(#\9):focus {
|
|
1116
1120
|
position: relative;
|
|
1117
1121
|
}
|
|
1118
|
-
.
|
|
1122
|
+
.awsui_trigger_hyvsj_zt14d_1107[data-awsui-focus-visible=true]:not(#\9):focus {
|
|
1119
1123
|
outline: 2px dotted transparent;
|
|
1120
1124
|
outline-offset: calc(3px - 1px);
|
|
1121
1125
|
}
|
|
1122
|
-
.
|
|
1126
|
+
.awsui_trigger_hyvsj_zt14d_1107[data-awsui-focus-visible=true]:not(#\9):focus::before {
|
|
1123
1127
|
content: " ";
|
|
1124
1128
|
display: block;
|
|
1125
1129
|
position: absolute;
|
|
@@ -1130,23 +1134,23 @@ handleSplitPanelMaxWidth function in the context.
|
|
|
1130
1134
|
border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
1131
1135
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
1132
1136
|
}
|
|
1133
|
-
.
|
|
1137
|
+
.awsui_trigger_hyvsj_zt14d_1107:not(#\9):focus {
|
|
1134
1138
|
outline: none;
|
|
1135
1139
|
}
|
|
1136
|
-
.
|
|
1140
|
+
.awsui_trigger_hyvsj_zt14d_1107:not(#\9):hover {
|
|
1137
1141
|
background: var(--color-background-layout-toggle-hover-gi0e0b, #354150);
|
|
1138
1142
|
}
|
|
1139
|
-
.
|
|
1143
|
+
.awsui_trigger_hyvsj_zt14d_1107:not(#\9):active {
|
|
1140
1144
|
background: var(--color-background-layout-toggle-active-d15dki, #354150);
|
|
1141
1145
|
}
|
|
1142
|
-
.
|
|
1146
|
+
.awsui_trigger_hyvsj_zt14d_1107.awsui_selected_hyvsj_zt14d_1146:not(#\9) {
|
|
1143
1147
|
background: var(--color-background-layout-toggle-selected-default-e1giv3, #0972d3);
|
|
1144
1148
|
color: var(--color-text-layout-toggle-selected-tzwifo, #ffffff);
|
|
1145
1149
|
}
|
|
1146
|
-
.
|
|
1150
|
+
.awsui_trigger_hyvsj_zt14d_1107.awsui_selected_hyvsj_zt14d_1146:not(#\9):hover {
|
|
1147
1151
|
background: var(--color-background-layout-toggle-selected-hover-mes33s, #065299);
|
|
1148
1152
|
}
|
|
1149
|
-
.
|
|
1153
|
+
.awsui_trigger_hyvsj_zt14d_1107.awsui_selected_hyvsj_zt14d_1146:not(#\9):active {
|
|
1150
1154
|
background: var(--color-background-layout-toggle-selected-active-9w7pk3, #0972d3);
|
|
1151
1155
|
}
|
|
1152
1156
|
|