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

410 lines (395 loc) • 12.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 */ /* 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_content-enter_ig8mp_17ma3_193:not(#\9) { animation: awsui_awsui-motion-fade-in_ig8mp_17ma3_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out); } @keyframes awsui_awsui-motion-fade-in_ig8mp_17ma3_1 { from { opacity: 0.2; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .awsui_content-enter_ig8mp_17ma3_193:not(#\9) { animation: none; transition: none; } } .awsui-motion-disabled .awsui_content-enter_ig8mp_17ma3_193:not(#\9), .awsui-mode-entering .awsui_content-enter_ig8mp_17ma3_193:not(#\9) { animation: none; transition: none; } .awsui_tutorial-list_ig8mp_17ma3_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; padding-block: 0; padding-inline: 0; margin-block: 0; margin-inline: 0; } .awsui_tutorial-box_ig8mp_17ma3_251: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; list-style: none; border-block: var(--border-divider-section-width-4f9905, 1px) solid var(--color-border-tutorial-ohwjx4, #aab7b8); border-inline: var(--border-divider-section-width-4f9905, 1px) solid var(--color-border-tutorial-ohwjx4, #aab7b8); border-start-start-radius: var(--border-radius-tutorial-panel-item-k7sfhh, 2px); border-start-end-radius: var(--border-radius-tutorial-panel-item-k7sfhh, 2px); border-end-start-radius: var(--border-radius-tutorial-panel-item-k7sfhh, 2px); border-end-end-radius: var(--border-radius-tutorial-panel-item-k7sfhh, 2px); padding-block: var(--space-m-h2th94, 16px); padding-inline: var(--space-m-h2th94, 16px); } .awsui_tutorial-box_ig8mp_17ma3_251:not(#\9):not(:first-child) { margin-block-start: var(--space-l-f4l5gr, 20px); } .awsui_tutorial-box-title_ig8mp_17ma3_295:not(#\9) { display: flex; align-items: flex-start; justify-content: space-between; } .awsui_tutorial-description-plaintext_ig8mp_17ma3_301:not(#\9) { white-space: pre-line; } .awsui_tutorial-description_ig8mp_17ma3_301:not(#\9) { /* stylelint-disable-next-line @awsui/no-implicit-descendant, selector-max-type -- Customers can nest their list items inside Box components. */ } .awsui_tutorial-description_ig8mp_17ma3_301 ul:not(#\9) { list-style-type: initial; } .awsui_expandable-section_ig8mp_17ma3_312:not(#\9) { display: none; margin-block-start: var(--space-m-h2th94, 16px); } .awsui_expandable-section_ig8mp_17ma3_312.awsui_expanded_ig8mp_17ma3_316:not(#\9) { display: block; } .awsui_button-wrapper_ig8mp_17ma3_320:not(#\9) { margin-block: calc(-1 * var(--space-xxs-ja5cp8, 4px) - var(--border-width-button-15wqc4, 1px)); margin-inline: calc(-1 * var(--space-xxs-ja5cp8, 4px) - var(--border-width-button-15wqc4, 1px)); } .awsui_start_ig8mp_17ma3_325:not(#\9) { /* used in test-utils */ } .awsui_expand-button_ig8mp_17ma3_329:not(#\9) { /* used in test-utils */ } .awsui_collapse-button_ig8mp_17ma3_333:not(#\9) { /* used in test-utils */ } .awsui_learn-more-link_ig8mp_17ma3_337:not(#\9) { /* used in test-utils */ } .awsui_title_ig8mp_17ma3_341:not(#\9) { /* used in test-utils */ } .awsui_prerequisites-alert_ig8mp_17ma3_345:not(#\9) { /* used in test-utils */ } .awsui_completed_ig8mp_17ma3_349:not(#\9) { /* used in test-utils */ } .awsui_download-link_ig8mp_17ma3_353: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; text-decoration: none; display: inline; white-space: inherit; letter-spacing: 0.005em; color: var(--color-text-body-secondary-kc95tq, #545b64); } .awsui_download-link_ig8mp_17ma3_353:not(#\9):hover { cursor: pointer; } .awsui_download-link_ig8mp_17ma3_353:not(#\9):focus { outline: none; } .awsui_download-link_ig8mp_17ma3_353:not(#\9):active, .awsui_download-link_ig8mp_17ma3_353:not(#\9):focus, .awsui_download-link_ig8mp_17ma3_353:not(#\9):hover { text-decoration: underline; /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ text-decoration-color: currentColor; } body[data-awsui-focus-visible=true] .awsui_download-link_ig8mp_17ma3_353:not(#\9):focus { outline: thin dotted; outline: var(--border-link-focus-ring-outline-o0qm2f, 5px auto Highlight); outline-offset: 2px; outline-color: 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-link-focus-ring-shadow-spread-ziqmfh, 0px) var(--color-border-item-focused-j88ehv, #0073bb); }