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

486 lines (474 loc) • 19.8 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 */ /* 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 */ /* 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 */ /* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 */ .awsui_content-enter_gwq0h_r4fvl_161:not(#\9) { animation: awsui_awsui-motion-fade-in_gwq0h_r4fvl_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out); } @keyframes awsui_awsui-motion-fade-in_gwq0h_r4fvl_1 { from { opacity: 0.2; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .awsui_content-enter_gwq0h_r4fvl_161:not(#\9) { animation: none; transition: none; } } .awsui-motion-disabled .awsui_content-enter_gwq0h_r4fvl_161:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_r4fvl_161:not(#\9) { animation: none; transition: none; } .awsui_trigger-expanded_gwq0h_r4fvl_183:not(#\9) { transition: border-bottom-color var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out); } @media (prefers-reduced-motion: reduce) { .awsui_trigger-expanded_gwq0h_r4fvl_183:not(#\9) { animation: none; transition: none; } } .awsui-motion-disabled .awsui_trigger-expanded_gwq0h_r4fvl_183:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_r4fvl_183:not(#\9) { animation: none; transition: none; } .awsui_icon_gwq0h_r4fvl_197:not(#\9) { transition: transform var(--motion-duration-rotate-90-jfxxiy, 135ms) var(--motion-easing-rotate-90-ax5lt7, cubic-bezier(0.165, 0.84, 0.44, 1)); } @media (prefers-reduced-motion: reduce) { .awsui_icon_gwq0h_r4fvl_197:not(#\9) { animation: none; transition: none; } } .awsui-motion-disabled .awsui_icon_gwq0h_r4fvl_197:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_r4fvl_197:not(#\9) { animation: none; transition: none; } .awsui_root_gwq0h_r4fvl_211: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; -webkit-hyphens: none; 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; min-inline-size: 0; word-break: break-word; display: block; } .awsui_expand-button_gwq0h_r4fvl_246:not(#\9) { outline: none; } .awsui_icon_gwq0h_r4fvl_197:not(#\9) { transform: rotate(-90deg); /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ } .awsui_icon_gwq0h_r4fvl_197.awsui_expanded_gwq0h_r4fvl_254:not(#\9) { transform: rotate(0deg); } .awsui_icon_gwq0h_r4fvl_197:not(#\9):dir(rtl) { transform: rotate(90deg); } .awsui_icon_gwq0h_r4fvl_197:not(#\9):dir(rtl).awsui_expanded_gwq0h_r4fvl_254 { transform: rotate(0deg); } .awsui_icon-container_gwq0h_r4fvl_264:not(#\9) { position: relative; margin-inline: calc((var(--line-height-body-m-0awzkk, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2) calc(var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px)); } .awsui_icon-container-container_gwq0h_r4fvl_268:not(#\9) { margin-inline-end: var(--space-xs-edba2s, 8px); } .awsui_wrapper_gwq0h_r4fvl_272:not(#\9) { box-sizing: border-box; border-block: none; border-inline: none; inline-size: 100%; line-height: var(--line-height-body-m-0awzkk, 22px); text-align: start; } .awsui_wrapper-default_gwq0h_r4fvl_280:not(#\9), .awsui_wrapper-inline_gwq0h_r4fvl_280:not(#\9), .awsui_wrapper-footer_gwq0h_r4fvl_280:not(#\9) { border-block: var(--border-divider-section-width-4f9905, 1px) solid transparent; border-inline: var(--border-divider-section-width-4f9905, 1px) solid transparent; } .awsui_wrapper-navigation_gwq0h_r4fvl_284:not(#\9) { border-inline-start: var(--border-divider-section-width-4f9905, 1px) solid transparent; } .awsui_wrapper-navigation_gwq0h_r4fvl_284:not(#\9), .awsui_wrapper-container_gwq0h_r4fvl_287:not(#\9) { display: flex; font-weight: var(--font-weight-heading-s-6rdhmg, 700); } .awsui_wrapper-default_gwq0h_r4fvl_280:not(#\9), .awsui_wrapper-inline_gwq0h_r4fvl_280:not(#\9), .awsui_wrapper-navigation_gwq0h_r4fvl_284:not(#\9), .awsui_wrapper-footer_gwq0h_r4fvl_280:not(#\9), .awsui_wrapper-compact_gwq0h_r4fvl_291:not(#\9) { color: var(--color-text-expandable-section-default-oowjk4, #545b64); -webkit-font-smoothing: var(--font-smoothing-webkit-gsroen, auto); -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-7ax6sl, auto); } .awsui_wrapper-default_gwq0h_r4fvl_280:not(#\9), .awsui_wrapper-inline_gwq0h_r4fvl_280:not(#\9), .awsui_wrapper-navigation_gwq0h_r4fvl_284:not(#\9), .awsui_wrapper-footer_gwq0h_r4fvl_280:not(#\9) { font-size: var(--font-expandable-heading-size-gqddjg, 14px); letter-spacing: var(--letter-spacing-heading-s-i1mjjy, normal); } .awsui_wrapper-default_gwq0h_r4fvl_280:not(#\9) { padding-block: var(--space-scaled-xxs-t2t62i, 4px); padding-inline-end: var(--space-xxs-ja5cp8, 4px); } .awsui_wrapper-default_gwq0h_r4fvl_280.awsui_header-deprecated_gwq0h_r4fvl_304:not(#\9) { padding-inline-start: var(--space-xxs-ja5cp8, 4px); } .awsui_wrapper-default_gwq0h_r4fvl_280:not(#\9):not(.awsui_header-deprecated_gwq0h_r4fvl_304), .awsui_wrapper-inline_gwq0h_r4fvl_280:not(#\9):not(.awsui_header-deprecated_gwq0h_r4fvl_304) { padding-inline-start: calc(var(--size-icon-normal-jq6jat, 16px) + (var(--line-height-body-m-0awzkk, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px)); } .awsui_wrapper-default_gwq0h_r4fvl_280.awsui_wrapper-expanded_gwq0h_r4fvl_310:not(#\9), .awsui_wrapper-inline_gwq0h_r4fvl_280.awsui_wrapper-expanded_gwq0h_r4fvl_310:not(#\9) { padding-block-end: var(--space-scaled-xxs-t2t62i, 4px); border-block-end-color: var(--color-border-divider-default-g2zqci, #eaeded); } .awsui_wrapper-footer_gwq0h_r4fvl_280:not(#\9) { padding-block: var(--space-scaled-xxs-t2t62i, 4px); } .awsui_wrapper-footer_gwq0h_r4fvl_280:not(#\9), .awsui_wrapper-compact_gwq0h_r4fvl_291:not(#\9) { padding-inline-end: 0; } .awsui_wrapper-footer_gwq0h_r4fvl_280.awsui_header-deprecated_gwq0h_r4fvl_304:not(#\9), .awsui_wrapper-compact_gwq0h_r4fvl_291.awsui_header-deprecated_gwq0h_r4fvl_304:not(#\9) { padding-inline-start: 0; } .awsui_wrapper-footer_gwq0h_r4fvl_280:not(#\9):not(.awsui_header-deprecated_gwq0h_r4fvl_304), .awsui_wrapper-compact_gwq0h_r4fvl_291:not(#\9):not(.awsui_header-deprecated_gwq0h_r4fvl_304) { padding-inline-start: calc(var(--size-icon-normal-jq6jat, 16px) + (var(--line-height-body-m-0awzkk, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px)); } .awsui_wrapper-container_gwq0h_r4fvl_287:not(#\9) { padding-block: var(--space-container-header-top-c6bw9y, 12px) var(--space-container-header-bottom-83qu8n, 12px); padding-inline-end: var(--space-container-horizontal-jxdgil, 20px); } .awsui_wrapper-container_gwq0h_r4fvl_287:not(#\9):not(.awsui_wrapper-expanded_gwq0h_r4fvl_310) { padding-block-end: var(--space-container-header-top-c6bw9y, 12px); } .awsui_wrapper-container_gwq0h_r4fvl_287.awsui_header-deprecated_gwq0h_r4fvl_304:not(#\9) { padding-inline-start: var(--space-container-horizontal-jxdgil, 20px); } .awsui_wrapper-container_gwq0h_r4fvl_287:not(#\9):not(.awsui_header-deprecated_gwq0h_r4fvl_304) { padding-inline-start: calc(var(--space-container-horizontal-jxdgil, 20px) + calc(var(--size-icon-medium-l5o7fk, 16px) + (var(--line-height-body-m-0awzkk, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xs-edba2s, 8px))); } body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_r4fvl_287:not(#\9):focus { padding-block: calc(var(--space-scaled-s-913kwi, 12px) - var(--border-divider-section-width-4f9905, 1px)); padding-inline: calc(var(--space-l-f4l5gr, 20px) - var(--border-divider-section-width-4f9905, 1px)); } .awsui_header_gwq0h_r4fvl_304:not(#\9) { /* used in test-utils */ } .awsui_header-wrapper_gwq0h_r4fvl_347:not(#\9), .awsui_header-deprecated_gwq0h_r4fvl_304:not(#\9) { display: flex; font-weight: var(--font-weight-heading-s-6rdhmg, 700); } .awsui_header-wrapper_gwq0h_r4fvl_347:not(#\9) { font-size: inherit; letter-spacing: inherit; margin-block: 0; margin-inline: 0; padding-block: 0; padding-inline: 0; } .awsui_header-actions-wrapper_gwq0h_r4fvl_359:not(#\9) { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_r4fvl_365:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_r4fvl_365:not(#\9):focus { position: relative; } body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_r4fvl_365:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_r4fvl_365:not(#\9):focus { outline: 2px dotted transparent; outline-offset: calc(0px - 1px); } body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_r4fvl_365:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_r4fvl_365:not(#\9):focus::before { content: " "; display: block; position: absolute; inset-inline-start: calc(-1 * 0px); inset-block-start: calc(-1 * 0px); inline-size: calc(100% + 0px + 0px); block-size: calc(100% + 0px + 0px); border-start-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px); border-start-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px); border-end-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px); border-end-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px); box-shadow: 0 0 0 2px var(--color-border-item-focused-j88ehv, #0073bb); } .awsui_header-button_gwq0h_r4fvl_365:not(#\9) { box-sizing: border-box; display: flex; margin-inline-start: calc(-1 * calc(var(--size-icon-normal-jq6jat, 16px) + (var(--line-height-body-m-0awzkk, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px))); } .awsui_header-container-button_gwq0h_r4fvl_365:not(#\9) { margin-inline-start: calc(-1 * calc(var(--size-icon-medium-l5o7fk, 16px) + (var(--line-height-body-m-0awzkk, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xs-edba2s, 8px))); } .awsui_header-container_gwq0h_r4fvl_365:not(#\9) { inline-size: 100%; } .awsui_header-container_gwq0h_r4fvl_365 > .awsui_icon-container_gwq0h_r4fvl_264:not(#\9) { margin-block-start: var(--space-expandable-section-icon-offset-top-hnx3nn, 8px); } .awsui_header-navigation_gwq0h_r4fvl_400 > .awsui_icon-container_gwq0h_r4fvl_264:not(#\9) { display: inline-flex; cursor: pointer; color: var(--color-text-expandable-section-navigation-icon-default-a0g6p0, #879596); border-block: 0; border-inline: 0; padding-block: 0; padding-inline: 0; background: transparent; outline: none; text-decoration: none; flex-direction: column; } .awsui_header-navigation_gwq0h_r4fvl_400 > .awsui_icon-container_gwq0h_r4fvl_264:not(#\9):hover { color: var(--color-text-expandable-section-hover-ws4pqf, #16191f); } body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_r4fvl_400 > .awsui_icon-container_gwq0h_r4fvl_264:not(#\9):focus { position: relative; } body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_r4fvl_400 > .awsui_icon-container_gwq0h_r4fvl_264:not(#\9):focus { outline: 2px dotted transparent; outline-offset: calc(2px - 1px); } body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_r4fvl_400 > .awsui_icon-container_gwq0h_r4fvl_264:not(#\9):focus::before { content: " "; display: block; position: absolute; inset-inline-start: calc(-1 * 2px); inset-block-start: calc(-1 * 2px); inline-size: calc(100% + 2px + 2px); block-size: calc(100% + 2px + 2px); border-start-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px); border-start-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px); border-end-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px); border-end-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px); box-shadow: 0 0 0 2px var(--color-border-item-focused-j88ehv, #0073bb); } .awsui_header-text_gwq0h_r4fvl_437:not(#\9) { /* used in test-utils */ } :not(#\9):not(.awsui_wrapper-compact_gwq0h_r4fvl_291) > .awsui_header-actions-wrapper_gwq0h_r4fvl_359 { flex-wrap: wrap; column-gap: var(--space-xs-edba2s, 8px); row-gap: var(--space-scaled-xxxs-jdgipl, 2px); } .awsui_content_gwq0h_r4fvl_161:not(#\9) { display: none; } .awsui_content-default_gwq0h_r4fvl_450:not(#\9), .awsui_content-inline_gwq0h_r4fvl_450:not(#\9) { padding-block: var(--space-scaled-xs-wbfgrv, 8px); padding-inline: 0; } .awsui_content-footer_gwq0h_r4fvl_454:not(#\9) { padding-block: var(--space-xs-edba2s, 8px); padding-inline: 0; } .awsui_content-expanded_gwq0h_r4fvl_458:not(#\9) { display: block; } .awsui_content-compact_gwq0h_r4fvl_461:not(#\9) { padding-inline-start: calc(var(--size-icon-normal-jq6jat, 16px) + (var(--line-height-body-m-0awzkk, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px)); } .awsui_focusable_gwq0h_r4fvl_465:not(#\9):focus { outline: none; text-decoration: none; } body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_r4fvl_465:not(#\9):focus { outline: 2px dotted transparent; border-block: var(--border-width-field-404eki, 1px) solid var(--color-border-item-focused-j88ehv, #0073bb); border-inline: var(--border-width-field-404eki, 1px) solid var(--color-border-item-focused-j88ehv, #0073bb); border-start-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px); border-start-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px); border-end-start-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px); border-end-end-radius: var(--border-radius-control-default-focus-ring-eq2wmk, 2px); box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-o8rs1p, 1px) var(--color-border-item-focused-j88ehv, #0073bb); } .awsui_click-target_gwq0h_r4fvl_480:not(#\9) { cursor: pointer; } .awsui_click-target_gwq0h_r4fvl_480:not(#\9):not(.awsui_wrapper-container_gwq0h_r4fvl_287):not(.awsui_header-container-button_gwq0h_r4fvl_365):hover { color: var(--color-text-expandable-section-hover-ws4pqf, #16191f); }