@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
435 lines (414 loc) • 15 kB
CSS
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/* stylelint-disable @awsui/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
/* stylelint-enable @awsui/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/* Style used for links in slots/components that are text heavy, to help links stand out among
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
.awsui_alert_mx3cw_1wtl3_193:not(#\9) {
animation: awsui_awsui-motion-fade-in_mx3cw_1wtl3_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
}
@keyframes awsui_awsui-motion-fade-in_mx3cw_1wtl3_1 {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.awsui_alert_mx3cw_1wtl3_193:not(#\9) {
animation: none;
transition: none;
}
}
.awsui-motion-disabled .awsui_alert_mx3cw_1wtl3_193:not(#\9), .awsui-mode-entering .awsui_alert_mx3cw_1wtl3_193:not(#\9) {
animation: none;
transition: none;
}
.awsui_root_mx3cw_1wtl3_215:not(#\9) {
border-collapse: separate;
border-spacing: 0;
box-sizing: border-box;
caption-side: top;
cursor: auto;
direction: inherit;
empty-cells: show;
font-family: serif;
font-style: normal;
font-variant: normal;
font-stretch: normal;
hyphens: none;
letter-spacing: normal;
list-style: disc outside none;
tab-size: 8;
text-align: start;
text-indent: 0;
text-shadow: none;
text-transform: none;
visibility: visible;
white-space: normal;
word-spacing: normal;
font-size: var(--font-size-body-m-kbh530, 14px);
line-height: var(--line-height-body-m-0awzkk, 22px);
color: var(--color-text-body-default-zs35hz, #16191f);
font-weight: 400;
font-family: var(--font-family-base-5z8fw5, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
word-wrap: break-word;
max-inline-size: 100%;
overflow: hidden;
display: block;
}
.awsui_root_mx3cw_1wtl3_215.awsui_hidden_mx3cw_1wtl3_250:not(#\9) {
display: none;
}
.awsui_alert_mx3cw_1wtl3_193:not(#\9) {
border-collapse: separate;
border-spacing: 0;
box-sizing: border-box;
caption-side: top;
cursor: auto;
direction: inherit;
empty-cells: show;
font-family: serif;
font-style: normal;
font-variant: normal;
font-stretch: normal;
hyphens: none;
letter-spacing: normal;
list-style: disc outside none;
tab-size: 8;
text-align: start;
text-indent: 0;
text-shadow: none;
text-transform: none;
visibility: visible;
white-space: normal;
word-spacing: normal;
font-size: var(--font-size-body-m-kbh530, 14px);
line-height: var(--line-height-body-m-0awzkk, 22px);
color: var(--color-text-body-default-zs35hz, #16191f);
font-weight: 400;
font-family: var(--font-family-base-5z8fw5, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
position: relative;
display: flex;
flex-direction: row;
border-block: var(--border-width-alert-pz0bqs, 1px) solid;
border-inline: var(--border-width-alert-pz0bqs, 1px) solid;
border-start-start-radius: var(--border-radius-alert-8j75to, 2px);
border-start-end-radius: var(--border-radius-alert-8j75to, 2px);
border-end-start-radius: var(--border-radius-alert-8j75to, 2px);
border-end-end-radius: var(--border-radius-alert-8j75to, 2px);
padding-block: var(--space-alert-vertical-avo898, 12px);
padding-inline: var(--space-alert-horizontal-zomgmv, 20px);
background-color: var(--color-background-container-content-cpvvzs, #ffffff);
--awsui-alert-focus-ring-box-shadow-d43v8n: 0 0 0 var(--awsui-alert-focus-ring-border-width-d43v8n, 2px) var(--awsui-alert-focus-ring-border-color-d43v8n, var(--color-border-item-focused-j88ehv, #0073bb));
}
.awsui_alert-wrapper_mx3cw_1wtl3_299:not(#\9) {
flex: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: var(--space-alert-action-left-qthmsu, 20px);
}
.awsui_hidden_mx3cw_1wtl3_250:not(#\9) {
display: none;
}
.awsui_initial-hidden_mx3cw_1wtl3_311:not(#\9) {
overflow: hidden;
block-size: 0;
}
.awsui_header_mx3cw_1wtl3_316:not(#\9),
.awsui_header-replacement_mx3cw_1wtl3_317:not(#\9) {
font-weight: 700;
}
.awsui_action_mx3cw_1wtl3_321:not(#\9) {
white-space: nowrap;
}
.awsui_action-slot_mx3cw_1wtl3_325:not(#\9),
.awsui_action-button_mx3cw_1wtl3_326:not(#\9) {
/* used in test-utils */
}
.awsui_alert-focus-wrapper_mx3cw_1wtl3_330:not(#\9) {
flex: 1;
min-inline-size: 70%;
display: grid;
grid-template-columns: min-content auto;
}
.awsui_alert-focus-wrapper_mx3cw_1wtl3_330:not(#\9):focus {
outline: none;
}
body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_1wtl3_330:not(#\9):focus {
position: relative;
}
body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_1wtl3_330:not(#\9):focus {
outline: 2px dotted transparent;
outline-offset: calc(var(--space-button-focus-outline-gutter-u9axxl, 3px) - 1px);
}
body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_1wtl3_330:not(#\9):focus::before {
content: " ";
display: block;
position: absolute;
inset-inline-start: calc(-1 * var(--space-button-focus-outline-gutter-u9axxl, 3px));
inset-block-start: calc(-1 * var(--space-button-focus-outline-gutter-u9axxl, 3px));
inline-size: calc(100% + var(--space-button-focus-outline-gutter-u9axxl, 3px) + var(--space-button-focus-outline-gutter-u9axxl, 3px));
block-size: calc(100% + var(--space-button-focus-outline-gutter-u9axxl, 3px) + var(--space-button-focus-outline-gutter-u9axxl, 3px));
border-start-start-radius: var(--awsui-alert-focus-ring-border-radius-d43v8n, var(--border-radius-control-default-focus-ring-eq2wmk, 2px));
border-start-end-radius: var(--awsui-alert-focus-ring-border-radius-d43v8n, var(--border-radius-control-default-focus-ring-eq2wmk, 2px));
border-end-start-radius: var(--awsui-alert-focus-ring-border-radius-d43v8n, var(--border-radius-control-default-focus-ring-eq2wmk, 2px));
border-end-end-radius: var(--awsui-alert-focus-ring-border-radius-d43v8n, var(--border-radius-control-default-focus-ring-eq2wmk, 2px));
box-shadow: var(--awsui-alert-focus-ring-box-shadow-d43v8n);
}
.awsui_text_mx3cw_1wtl3_361:not(#\9) {
min-inline-size: 0;
padding-block: var(--border-width-button-15wqc4, 1px);
padding-inline: 0;
margin-block: var(--space-scaled-xxs-t2t62i, 4px);
margin-inline: var(--space-xxs-ja5cp8, 4px);
}
.awsui_text_mx3cw_1wtl3_361.awsui_icon_mx3cw_1wtl3_368:not(#\9) {
margin-inline-start: 0;
}
.awsui_text_mx3cw_1wtl3_361.awsui_message_mx3cw_1wtl3_371:not(#\9) {
margin-inline-end: var(--space-alert-message-right-5j7pp5, 0px);
}
.awsui_action-wrapped_mx3cw_1wtl3_375:not(#\9) {
margin-block-end: var(--space-xxs-ja5cp8, 4px);
}
.awsui_icon-size-medium_mx3cw_1wtl3_379 > .awsui_alert-wrapper_mx3cw_1wtl3_299 > .awsui_action-wrapped_mx3cw_1wtl3_375:not(#\9) {
margin-inline-start: calc(var(--size-icon-medium-l5o7fk, 16px) + var(--space-xs-edba2s, 8px));
}
.awsui_icon-size-big_mx3cw_1wtl3_383 > .awsui_alert-wrapper_mx3cw_1wtl3_299 > .awsui_action-wrapped_mx3cw_1wtl3_375:not(#\9) {
margin-inline-start: calc(var(--size-icon-big-0l8skx, 32px) + var(--space-xs-edba2s, 8px));
}
.awsui_icon-size-normal_mx3cw_1wtl3_387 > .awsui_alert-wrapper_mx3cw_1wtl3_299 > .awsui_action-wrapped_mx3cw_1wtl3_375:not(#\9) {
margin-inline-start: calc(var(--size-icon-normal-jq6jat, 16px) + var(--space-xs-edba2s, 8px));
}
.awsui_content_mx3cw_1wtl3_391:not(#\9),
.awsui_content-replacement_mx3cw_1wtl3_392:not(#\9) {
/* used in test-utils */
}
.awsui_dismiss_mx3cw_1wtl3_396:not(#\9) {
margin-inline-end: calc(-1 * var(--space-xxs-ja5cp8, 4px));
margin-inline-start: var(--space-s-hdd878, 12px);
}
.awsui_dismiss-button_mx3cw_1wtl3_401:not(#\9) {
/* used in test-utils */
}
.awsui_type-error_mx3cw_1wtl3_405:not(#\9) {
border-color: var(--color-border-status-error-rw7xpm, #d13212);
background-color: var(--color-background-status-error-mqjczn, #fdf3f1);
}
.awsui_type-error_mx3cw_1wtl3_405 > .awsui_alert-wrapper_mx3cw_1wtl3_299 > .awsui_alert-focus-wrapper_mx3cw_1wtl3_330 > .awsui_icon_mx3cw_1wtl3_368:not(#\9) {
color: var(--awsui-alert-icon-color-d43v8n, var(--color-text-status-error-oa993i, #d13212));
}
.awsui_type-warning_mx3cw_1wtl3_413:not(#\9) {
border-color: var(--color-border-status-warning-absgf7, #906806);
background-color: var(--color-background-status-warning-8czyg1, #fffef0);
}
.awsui_type-warning_mx3cw_1wtl3_413 > .awsui_alert-wrapper_mx3cw_1wtl3_299 > .awsui_alert-focus-wrapper_mx3cw_1wtl3_330 > .awsui_icon_mx3cw_1wtl3_368:not(#\9) {
color: var(--awsui-alert-icon-color-d43v8n, var(--color-text-status-warning-a2jajm, #906806));
}
.awsui_type-success_mx3cw_1wtl3_421:not(#\9) {
border-color: var(--color-border-status-success-re24ca, #1d8102);
background-color: var(--color-background-status-success-to45h8, #f2f8f0);
}
.awsui_type-success_mx3cw_1wtl3_421 > .awsui_alert-wrapper_mx3cw_1wtl3_299 > .awsui_alert-focus-wrapper_mx3cw_1wtl3_330 > .awsui_icon_mx3cw_1wtl3_368:not(#\9) {
color: var(--awsui-alert-icon-color-d43v8n, var(--color-text-status-success-z431uf, #1d8102));
}
.awsui_type-info_mx3cw_1wtl3_429:not(#\9) {
border-color: var(--color-border-status-info-ytrrza, #0073bb);
background-color: var(--color-background-status-info-07a262, #f1faff);
}
.awsui_type-info_mx3cw_1wtl3_429 > .awsui_alert-wrapper_mx3cw_1wtl3_299 > .awsui_alert-focus-wrapper_mx3cw_1wtl3_330 > .awsui_icon_mx3cw_1wtl3_368:not(#\9) {
color: var(--awsui-alert-icon-color-d43v8n, var(--color-text-status-info-vkd30u, #0073bb));
}