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

380 lines (366 loc) • 13.2 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_progress_11huc_1n796_189:not(#\9)::-webkit-progress-value { -webkit-transition: width var(--motion-duration-moderate-tnjqaa, 135ms) linear; transition: width var(--motion-duration-moderate-tnjqaa, 135ms) linear; } @media (prefers-reduced-motion: reduce) { .awsui_progress_11huc_1n796_189:not(#\9)::-webkit-progress-value { animation: none; -webkit-transition: none; transition: none; } } .awsui-motion-disabled .awsui_progress_11huc_1n796_189:not(#\9)::-webkit-progress-value, .awsui-mode-entering .awsui_progress_11huc_1n796_189:not(#\9)::-webkit-progress-value { animation: none; -webkit-transition: none; transition: none; } .awsui_result-state_11huc_1n796_203:not(#\9) { animation: awsui_awsui-motion-fade-in_11huc_1n796_1 var(--motion-duration-transition-show-paced-4yudkh, 180ms) var(--motion-easing-transition-show-paced-47k9w2, ease-out); } @keyframes awsui_awsui-motion-fade-in_11huc_1n796_1 { from { opacity: 0.2; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .awsui_result-state_11huc_1n796_203:not(#\9) { animation: none; transition: none; } } .awsui-motion-disabled .awsui_result-state_11huc_1n796_203:not(#\9), .awsui-mode-entering .awsui_result-state_11huc_1n796_203:not(#\9) { animation: none; transition: none; } .awsui_root_11huc_1n796_225: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; } .awsui_with-result-button_11huc_1n796_257:not(#\9) { padding-inline-end: var(--space-m-h2th94, 16px); } .awsui_result-text_11huc_1n796_261:not(#\9) { /* used in test-utils */ } .awsui_result-container-error_11huc_1n796_265:not(#\9), .awsui_result-container-success_11huc_1n796_265:not(#\9) { /* used in test-utils */ } .awsui_result-button_11huc_1n796_269:not(#\9) { display: inline-block; margin-block: var(--space-scaled-xxs-t2t62i, 4px); margin-inline: 0; } .awsui_word-wrap_11huc_1n796_275:not(#\9) { min-inline-size: 0; word-break: break-word; } .awsui_label-flash_11huc_1n796_280:not(#\9) { color: inherit; font-weight: 700; } .awsui_label-key-value_11huc_1n796_284:not(#\9) { font-size: var(--font-size-body-m-kbh530, 14px); line-height: var(--line-height-body-m-0awzkk, 22px); font-weight: var(--font-display-label-weight-q56x6f, 400); color: var(--color-text-label-du7fzg, #545b64); margin-block-end: var(--space-scaled-xxxs-jdgipl, 2px); } .awsui_flash_11huc_1n796_292:not(#\9) { color: inherit; } .awsui_progress-container_11huc_1n796_296:not(#\9) { display: flex; align-items: center; max-inline-size: 800px; block-size: var(--line-height-body-m-0awzkk, 22px); } .awsui_percentage-container_11huc_1n796_303:not(#\9) { inline-size: 33px; flex-shrink: 0; white-space: nowrap; text-align: end; font-size: var(--font-size-body-s-6sh5cc, 12px); line-height: var(--line-height-body-s-usc3fr, 16px); letter-spacing: var(--letter-spacing-body-s-4f9u0r, normal); } .awsui_percentage_11huc_1n796_303:not(#\9) { /* used in test-utils */ } .awsui_progress_11huc_1n796_189:not(#\9) { inline-size: 100%; margin-inline-end: var(--space-s-hdd878, 12px); min-inline-size: 0; block-size: var(--awsui-progress-bar-height-d43v8n, 4px); border-block: 0; border-inline: none; box-sizing: border-box; border-start-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); border-start-end-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); border-end-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); border-end-end-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); background-color: var(--awsui-progress-bar-background-color-d43v8n, var(--color-background-progress-bar-layout-default-49vehf, #eaeded)); } .awsui_progress_11huc_1n796_189:not(#\9)::-webkit-progress-bar { block-size: var(--awsui-progress-bar-height-d43v8n, 4px); border-block: 0; border-inline: none; box-sizing: border-box; border-start-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); border-start-end-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); border-end-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); border-end-end-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); background-color: var(--awsui-progress-bar-background-color-d43v8n, var(--color-background-progress-bar-layout-default-49vehf, #eaeded)); } .awsui_progress_11huc_1n796_189:not(#\9)::-webkit-progress-value { border-start-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); border-start-end-radius: 0; border-end-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); border-end-end-radius: 0; background-color: var(--awsui-progress-value-background-color-d43v8n, var(--color-background-progress-bar-content-default-ix5bce, #0073bb)); } .awsui_progress_11huc_1n796_189.awsui_complete_11huc_1n796_349:not(#\9)::-webkit-progress-value { border-start-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); border-start-end-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); border-end-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); border-end-end-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); } .awsui_progress_11huc_1n796_189:not(#\9)::-moz-progress-bar { border-start-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); border-start-end-radius: 0; border-end-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px); border-end-end-radius: 0; background-color: var(--awsui-progress-value-background-color-d43v8n, var(--color-background-progress-bar-content-default-ix5bce, #0073bb)); } .awsui_progress_11huc_1n796_189.awsui_progress-in-flash_11huc_1n796_362:not(#\9) { background-color: var(--awsui-progress-bar-background-color-d43v8n, var(--color-background-progress-bar-layout-in-flash-37yw4h, rgba(255, 255, 255, 0.25))); } .awsui_progress_11huc_1n796_189.awsui_progress-in-flash_11huc_1n796_362:not(#\9)::-moz-progress-bar { background-color: var(--awsui-progress-value-background-color-d43v8n, var(--color-background-progress-bar-content-in-flash-u94w2k, rgba(255, 255, 255, 0.7))); } .awsui_progress_11huc_1n796_189.awsui_progress-in-flash_11huc_1n796_362:not(#\9)::-webkit-progress-bar { background-color: var(--awsui-progress-bar-background-color-d43v8n, var(--color-background-progress-bar-layout-in-flash-37yw4h, rgba(255, 255, 255, 0.25))); } .awsui_progress_11huc_1n796_189.awsui_progress-in-flash_11huc_1n796_362:not(#\9)::-webkit-progress-value { background-color: var(--awsui-progress-value-background-color-d43v8n, var(--color-background-progress-bar-content-in-flash-u94w2k, rgba(255, 255, 255, 0.7))); } .awsui_additional-info_11huc_1n796_375:not(#\9) { /* used in test-utils */ }