UNPKG

@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

517 lines (509 loc) • 20.4 kB
/* 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 */ .awsui_root_14iqq_1mcxb_189: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; position: relative; } .awsui_root_14iqq_1mcxb_189.awsui_fit-height_14iqq_1mcxb_222:not(#\9) { display: flex; flex-direction: column; block-size: 100%; } .awsui_root_14iqq_1mcxb_189.awsui_fit-height_14iqq_1mcxb_222.awsui_with-side-media_14iqq_1mcxb_227:not(#\9) { flex-direction: row; } .awsui_root_14iqq_1mcxb_189.awsui_variant-default_14iqq_1mcxb_230:not(#\9), .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230:not(#\9) { background-color: var(--color-background-container-content-cpvvzs, #ffffff); border-start-start-radius: var(--border-radius-container-r46evd, 0px); border-start-end-radius: var(--border-radius-container-r46evd, 0px); border-end-start-radius: var(--border-radius-container-r46evd, 0px); border-end-end-radius: var(--border-radius-container-r46evd, 0px); box-sizing: border-box; } .awsui_root_14iqq_1mcxb_189.awsui_variant-default_14iqq_1mcxb_230.awsui_refresh_14iqq_1mcxb_238:not(#\9), .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230.awsui_refresh_14iqq_1mcxb_238:not(#\9) { border-block: solid var(--border-divider-section-width-4f9905, 1px) var(--color-border-divider-default-g2zqci, #eaeded); border-inline: solid var(--border-divider-section-width-4f9905, 1px) var(--color-border-divider-default-g2zqci, #eaeded); } .awsui_root_14iqq_1mcxb_189.awsui_variant-default_14iqq_1mcxb_230:not(#\9):not(.awsui_refresh_14iqq_1mcxb_238)::before, .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230:not(#\9):not(.awsui_refresh_14iqq_1mcxb_238)::before { content: ""; position: absolute; inset-inline-start: 0px; inset-block-start: 0px; inline-size: 100%; block-size: 100%; pointer-events: none; background: transparent; box-sizing: border-box; border-color: transparent; border-block-start: var(--border-container-top-width-khbhr4, 1px) solid var(--color-border-container-top-wiud2r, #eaeded); border-start-start-radius: var(--border-radius-container-r46evd, 0px); border-start-end-radius: var(--border-radius-container-r46evd, 0px); border-end-start-radius: var(--border-radius-container-r46evd, 0px); border-end-end-radius: var(--border-radius-container-r46evd, 0px); z-index: 1; } .awsui_root_14iqq_1mcxb_189.awsui_variant-default_14iqq_1mcxb_230:not(#\9):not(.awsui_refresh_14iqq_1mcxb_238)::after, .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230:not(#\9):not(.awsui_refresh_14iqq_1mcxb_238)::after { content: ""; position: absolute; inset-inline-start: 0px; inset-block-start: 0px; inline-size: 100%; block-size: 100%; pointer-events: none; background: transparent; box-sizing: border-box; border-start-start-radius: var(--border-radius-container-r46evd, 0px); border-start-end-radius: var(--border-radius-container-r46evd, 0px); border-end-start-radius: var(--border-radius-container-r46evd, 0px); border-end-end-radius: var(--border-radius-container-r46evd, 0px); box-shadow: var(--shadow-container-j1l5h7, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)); } .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230:not(#\9):not(:last-child), .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230:not(#\9):not(:last-child)::before, .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230:not(#\9):not(:last-child)::after { border-end-end-radius: 0; border-end-start-radius: 0; border-block-end-width: 0; } .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230 + .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230:not(#\9), .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230 + .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230:not(#\9)::before, .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230 + .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230:not(#\9)::after { border-start-start-radius: 0; border-start-end-radius: 0; } .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230 + .awsui_root_14iqq_1mcxb_189.awsui_variant-stacked_14iqq_1mcxb_230:not(#\9):not(.awsui_refresh_14iqq_1mcxb_238)::before { border-block-start: var(--border-divider-section-width-4f9905, 1px) solid var(--color-border-divider-default-g2zqci, #eaeded); } .awsui_root_14iqq_1mcxb_189.awsui_sticky-enabled_14iqq_1mcxb_288:not(#\9):not(.awsui_refresh_14iqq_1mcxb_238)::before { inset-block-start: calc(-1 * var(--border-container-top-width-khbhr4, 1px)); } .awsui_root_14iqq_1mcxb_189.awsui_sticky-enabled_14iqq_1mcxb_288:not(#\9):not(.awsui_refresh_14iqq_1mcxb_238).awsui_variant-stacked_14iqq_1mcxb_230::before { inset-block-start: calc(-1 * var(--border-divider-section-width-4f9905, 1px)); } .awsui_root_14iqq_1mcxb_189.awsui_with-stuck-sticky-header-at-bottom_14iqq_1mcxb_294:not(#\9) { border-end-end-radius: 0; border-end-start-radius: 0; } .awsui_with-side-media_14iqq_1mcxb_227:not(#\9) { display: flex; flex-direction: row; } .awsui_with-top-media_14iqq_1mcxb_304:not(#\9) { display: flex; flex-direction: column; } .awsui_content-wrapper_14iqq_1mcxb_309:not(#\9) { display: flex; flex-direction: column; inline-size: 100%; } .awsui_content-wrapper-fit-height_14iqq_1mcxb_314:not(#\9) { block-size: 100%; overflow: hidden; border-end-start-radius: var(--border-radius-container-r46evd, 0px); border-end-end-radius: var(--border-radius-container-r46evd, 0px); } .awsui_media_14iqq_1mcxb_321:not(#\9) { overflow: hidden; flex-shrink: 0; } .awsui_media_14iqq_1mcxb_321 img:not(#\9), .awsui_media_14iqq_1mcxb_321 video:not(#\9), .awsui_media_14iqq_1mcxb_321 picture:not(#\9) { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; } .awsui_media_14iqq_1mcxb_321 iframe:not(#\9) { inline-size: 100%; block-size: 100%; border-block: 0; border-inline: 0; } .awsui_media-top_14iqq_1mcxb_339:not(#\9) { max-block-size: 66%; border-start-start-radius: calc(var(--border-radius-container-r46evd, 0px) - 1px); border-start-end-radius: calc(var(--border-radius-container-r46evd, 0px) - 1px); } .awsui_media-side_14iqq_1mcxb_344:not(#\9) { max-inline-size: 66%; border-start-start-radius: calc(var(--border-radius-container-r46evd, 0px) - 1px); border-end-start-radius: calc(var(--border-radius-container-r46evd, 0px) - 1px); } .awsui_header_14iqq_1mcxb_350:not(#\9) { background-color: var(--color-background-container-header-1edgmi, #fafafa); border-start-start-radius: var(--border-radius-container-r46evd, 0px); border-start-end-radius: var(--border-radius-container-r46evd, 0px); } .awsui_header_14iqq_1mcxb_350.awsui_header-full-page_14iqq_1mcxb_355:not(#\9) { background-color: var(--color-background-layout-main-f3jtyd, #f2f3f3); } .awsui_header-variant-embedded_14iqq_1mcxb_358.awsui_refresh_14iqq_1mcxb_238:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1mcxb_358) { background-color: transparent; } .awsui_header_14iqq_1mcxb_350.awsui_header-with-media_14iqq_1mcxb_361:not(#\9) { background: none; } .awsui_header_14iqq_1mcxb_350.awsui_header-with-media_14iqq_1mcxb_361:not(#\9):not(:empty) { border-block-end: none; } .awsui_header-sticky-disabled_14iqq_1mcxb_367:not(#\9) { position: relative; z-index: 1; } .awsui_header-sticky-enabled_14iqq_1mcxb_358:not(#\9) { inset-block-start: 0; /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ position: sticky; z-index: 800; } .awsui_header-stuck_14iqq_1mcxb_377:not(#\9) { border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: 0; border-end-end-radius: 0; } .awsui_header-stuck_14iqq_1mcxb_377:not(#\9)::before { border-block: 0; border-inline: 0; } .awsui_header-stuck_14iqq_1mcxb_377:not(#\9):not(.awsui_header-variant-cards_14iqq_1mcxb_387) { box-shadow: var(--shadow-sticky-embedded-i1iccv, 0px 1px 4px -2px rgba(0, 28, 36, 0.5)); } .awsui_header-dynamic-height_14iqq_1mcxb_390.awsui_header-stuck_14iqq_1mcxb_377:not(#\9) { margin-block-end: calc(var(--line-height-heading-xl-gnbljj, 36px) - var(--line-height-heading-l-4wuokq, 22px)); } .awsui_header_14iqq_1mcxb_350:not(#\9):not(:empty) { border-block-end: var(--border-container-sticky-width-gj4eew, 1px) solid var(--color-border-container-divider-1j5zof, #eaeded); } .awsui_header_14iqq_1mcxb_350.awsui_with-paddings_14iqq_1mcxb_396:not(#\9) { padding-block-start: var(--space-container-header-top-c6bw9y, 12px); padding-block-end: var(--space-container-header-bottom-83qu8n, 12px); padding-inline: var(--space-container-horizontal-jxdgil, 20px); } .awsui_header_14iqq_1mcxb_350.awsui_with-paddings_14iqq_1mcxb_396.awsui_header-variant-cards_14iqq_1mcxb_387:not(#\9) { padding-block: var(--space-container-header-top-c6bw9y, 12px); padding-inline: var(--space-container-horizontal-jxdgil, 20px); } .awsui_header_14iqq_1mcxb_350.awsui_with-hidden-content_14iqq_1mcxb_405:not(#\9) { border-end-start-radius: var(--border-radius-container-r46evd, 0px); border-end-end-radius: var(--border-radius-container-r46evd, 0px); } .awsui_header-variant-cards_14iqq_1mcxb_387:not(#\9) { border-start-start-radius: var(--border-radius-container-r46evd, 0px); border-start-end-radius: var(--border-radius-container-r46evd, 0px); border-end-start-radius: var(--border-radius-container-r46evd, 0px); border-end-end-radius: var(--border-radius-container-r46evd, 0px); box-sizing: border-box; } .awsui_header-variant-cards_14iqq_1mcxb_387.awsui_refresh_14iqq_1mcxb_238:not(#\9) { border-block: solid var(--border-divider-section-width-4f9905, 1px) var(--color-border-divider-default-g2zqci, #eaeded); border-inline: solid var(--border-divider-section-width-4f9905, 1px) var(--color-border-divider-default-g2zqci, #eaeded); } .awsui_header-variant-cards_14iqq_1mcxb_387:not(#\9):not(.awsui_refresh_14iqq_1mcxb_238)::before { content: ""; position: absolute; inset-inline-start: 0px; inset-block-start: 0px; inline-size: 100%; block-size: 100%; pointer-events: none; background: transparent; box-sizing: border-box; border-color: transparent; border-block-start: var(--border-container-top-width-khbhr4, 1px) solid var(--color-border-container-top-wiud2r, #eaeded); border-start-start-radius: var(--border-radius-container-r46evd, 0px); border-start-end-radius: var(--border-radius-container-r46evd, 0px); border-end-start-radius: var(--border-radius-container-r46evd, 0px); border-end-end-radius: var(--border-radius-container-r46evd, 0px); z-index: 1; } .awsui_header-variant-cards_14iqq_1mcxb_387:not(#\9):not(.awsui_refresh_14iqq_1mcxb_238)::after { content: ""; position: absolute; inset-inline-start: 0px; inset-block-start: 0px; inline-size: 100%; block-size: 100%; pointer-events: none; background: transparent; box-sizing: border-box; border-start-start-radius: var(--border-radius-container-r46evd, 0px); border-start-end-radius: var(--border-radius-container-r46evd, 0px); border-end-start-radius: var(--border-radius-container-r46evd, 0px); border-end-end-radius: var(--border-radius-container-r46evd, 0px); box-shadow: var(--shadow-container-j1l5h7, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)); } .awsui_header-variant-cards_14iqq_1mcxb_387:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1mcxb_358) { position: relative; } .awsui_header-variant-cards_14iqq_1mcxb_387.awsui_header-stuck_14iqq_1mcxb_377:not(#\9)::after, .awsui_header-variant-cards_14iqq_1mcxb_387.awsui_header-stuck_14iqq_1mcxb_377:not(#\9)::before { border-block: 0; border-inline: 0; border-start-start-radius: 0; border-start-end-radius: 0; } .awsui_header-variant-full-page_14iqq_1mcxb_463.awsui_header-stuck_14iqq_1mcxb_377:not(#\9) { box-shadow: none; } .awsui_header-variant-full-page_14iqq_1mcxb_463.awsui_header-stuck_14iqq_1mcxb_377 > .awsui_header-cover_14iqq_1mcxb_466:not(#\9) { background-color: var(--color-background-layout-main-f3jtyd, #f2f3f3); inline-size: 100%; position: absolute; block-size: var(--space-scaled-s-913kwi, 12px); inset-block-start: calc(-1 * var(--space-scaled-s-913kwi, 12px)); } .awsui_header-variant-full-page_14iqq_1mcxb_463.awsui_header-stuck_14iqq_1mcxb_377:not(#\9)::before { content: ""; position: absolute; pointer-events: none; inset-inline-end: 0; inset-inline-start: 0; inset-block-end: 0; inset-block-start: 0; border-block-end: solid var(--border-divider-section-width-4f9905, 1px) var(--color-border-divider-default-g2zqci, #eaeded); } .awsui_header-variant-full-page_14iqq_1mcxb_463.awsui_header-stuck_14iqq_1mcxb_377:not(#\9)::after { content: ""; position: absolute; inset: 0; box-shadow: var(--shadow-sticky-fsddv7, 0px 1px 4px -2px rgba(0, 28, 36, 0.5)); clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%); } .awsui_content_14iqq_1mcxb_309:not(#\9) { flex: 1; } .awsui_content-fit-height_14iqq_1mcxb_494:not(#\9) { overflow: auto; display: flex; flex-direction: column; } .awsui_content-inner_14iqq_1mcxb_500:not(#\9) { flex: 1; } .awsui_content-inner_14iqq_1mcxb_500.awsui_with-paddings_14iqq_1mcxb_396:not(#\9) { padding-block: var(--space-scaled-l-2rs0gk, 20px); padding-inline: var(--space-container-horizontal-jxdgil, 20px); } .awsui_content-inner_14iqq_1mcxb_500.awsui_with-paddings_14iqq_1mcxb_396.awsui_with-header_14iqq_1mcxb_507:not(#\9) { padding-block-start: var(--space-container-content-top-8wf5md, 16px); } .awsui_footer_14iqq_1mcxb_511.awsui_with-paddings_14iqq_1mcxb_396:not(#\9) { padding-block: var(--space-scaled-s-913kwi, 12px); padding-inline: var(--space-container-horizontal-jxdgil, 20px); } .awsui_footer_14iqq_1mcxb_511.awsui_with-divider_14iqq_1mcxb_515:not(#\9) { border-block-start: var(--border-divider-section-width-4f9905, 1px) solid var(--color-border-divider-default-g2zqci, #eaeded); }