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

275 lines (269 loc) • 9.95 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 */ .awsui_header_16mm3_q4ki4_145:not(#\9) { position: relative; margin-block: 0; margin-inline: 0; color: var(--color-text-dropdown-group-label-s1hwg5, #545b64); border-block: var(--border-divider-list-width-um3zli, 1px) solid transparent; border-inline: var(--border-divider-list-width-um3zli, 1px) solid transparent; border-inline-width: 0; font-weight: bold; display: flex; justify-content: space-between; align-items: center; padding-block: calc(var(--space-xxs-ja5cp8, 4px) + var(--border-item-width-ip3vxj, 1px) - var(--border-divider-list-width-um3zli, 1px)); padding-inline: calc(var(--space-button-horizontal-gnfbt4, 20px) + var(--border-item-width-ip3vxj, 1px)); z-index: 1; } .awsui_header_16mm3_q4ki4_145.awsui_disabled_16mm3_q4ki4_161:not(#\9) { color: var(--color-text-dropdown-item-disabled-j9pzby, #aab7b8); cursor: default; } .awsui_header_16mm3_q4ki4_145.awsui_expandable-header_16mm3_q4ki4_165:not(#\9) { border-block-start-color: var(--color-border-dropdown-group-tg9vgt, #eaeded); border-block-end-color: var(--color-border-dropdown-group-tg9vgt, #eaeded); cursor: pointer; } .awsui_header_16mm3_q4ki4_145.awsui_expandable-header_16mm3_q4ki4_165.awsui_disabled_16mm3_q4ki4_161:not(#\9) { cursor: default; } .awsui_header_16mm3_q4ki4_145.awsui_expandable-header_16mm3_q4ki4_165:not(#\9):focus { outline: none; } .awsui_header_16mm3_q4ki4_145.awsui_expandable-header_16mm3_q4ki4_165.awsui_rolled-down_16mm3_q4ki4_176:not(#\9) { border-block-end-color: transparent; } .awsui_header_16mm3_q4ki4_145.awsui_expandable-header_16mm3_q4ki4_165.awsui_highlighted_16mm3_q4ki4_179:not(#\9) { background-color: var(--color-background-dropdown-item-hover-6zmazg, #f2f3f3); color: var(--color-text-dropdown-item-highlighted-0ns2tb, #16191f); padding-block: var(--space-xxs-ja5cp8, 4px); padding-inline: var(--space-button-horizontal-gnfbt4, 20px); border-block: var(--border-item-width-ip3vxj, 1px) solid var(--color-border-dropdown-item-hover-8pzdhc, #879596); border-inline: var(--border-item-width-ip3vxj, 1px) solid var(--color-border-dropdown-item-hover-8pzdhc, #879596); border-start-start-radius: var(--border-radius-item-ilq21a, 0px); border-start-end-radius: var(--border-radius-item-ilq21a, 0px); border-end-start-radius: var(--border-radius-item-ilq21a, 0px); border-end-end-radius: var(--border-radius-item-ilq21a, 0px); z-index: 2; } .awsui_header_16mm3_q4ki4_145.awsui_expandable-header_16mm3_q4ki4_165.awsui_highlighted_16mm3_q4ki4_179.awsui_disabled_16mm3_q4ki4_161:not(#\9) { background-color: var(--color-background-dropdown-item-dimmed-oa2pjk, transparent); border-color: var(--color-border-dropdown-item-dimmed-hover-7hrdqp, #879596); color: var(--color-text-dropdown-item-dimmed-6g8wds, #aab7b8); } .awsui_header_16mm3_q4ki4_145.awsui_expandable-header_16mm3_q4ki4_165.awsui_highlighted_16mm3_q4ki4_179.awsui_is-focused_16mm3_q4ki4_197:not(#\9) { border-color: var(--color-border-dropdown-item-focused-hebyze, #0073bb); } .awsui_header_16mm3_q4ki4_145.awsui_expandable-header_16mm3_q4ki4_165.awsui_highlighted_16mm3_q4ki4_179.awsui_is-focused_16mm3_q4ki4_197:not(#\9):not(.awsui_visual-refresh_16mm3_q4ki4_200) { box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-o8rs1p, 1px) var(--color-border-item-focused-j88ehv, #0073bb); } .awsui_category_16mm3_q4ki4_204:not(#\9) { list-style: none; margin-block-start: calc(-1 * var(--border-divider-list-width-um3zli, 1px)); padding-block: 0; padding-inline: 0; } .awsui_category_16mm3_q4ki4_204:not(#\9):first-child { margin-block-start: 0; } .awsui_category_16mm3_q4ki4_204.awsui_expandable_16mm3_q4ki4_165:not(#\9) { border-block-start: 0; } .awsui_category_16mm3_q4ki4_204:not(#\9):last-child { border-block-end: none; } .awsui_category_16mm3_q4ki4_204.awsui_variant-navigation_16mm3_q4ki4_219:not(#\9) { padding-block-start: var(--space-xxs-ja5cp8, 4px); } .awsui_category_16mm3_q4ki4_204.awsui_variant-navigation_16mm3_q4ki4_219.awsui_expandable_16mm3_q4ki4_165:not(#\9) { padding-block-start: 0; } .awsui_expand-icon_16mm3_q4ki4_226:not(#\9) { position: relative; inset-inline-end: calc(-1 * var(--space-s-hdd878, 12px)); inline-size: var(--space-m-h2th94, 16px); display: inline-block; margin-inline-start: auto; transition: transform var(--motion-duration-rotate-180-m9g4a9, 135ms) var(--motion-easing-rotate-180-h4cyjx, cubic-bezier(0.165, 0.84, 0.44, 1)); } @media (prefers-reduced-motion: reduce) { .awsui_expand-icon_16mm3_q4ki4_226:not(#\9) { animation: none; transition: none; } } .awsui-motion-disabled .awsui_expand-icon_16mm3_q4ki4_226:not(#\9), .awsui-mode-entering .awsui_expand-icon_16mm3_q4ki4_226:not(#\9) { animation: none; transition: none; } .awsui_expand-icon-up_16mm3_q4ki4_244:not(#\9) { transform: rotate(-180deg); } .awsui_expand-icon-right_16mm3_q4ki4_247:not(#\9) { transform: rotate(-90deg); /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ } .awsui_expand-icon-right_16mm3_q4ki4_247:not(#\9):dir(rtl) { transform: rotate(90deg); } .awsui_items-list-container_16mm3_q4ki4_255:not(#\9) { padding-block: 0; padding-inline: 0; margin-block-start: -1px; margin-block-end: 0; margin-inline: 0; overflow-y: auto; } .awsui_in-dropdown_16mm3_q4ki4_264:not(#\9) { margin-block-end: -1px; } .awsui_icon-wrapper_16mm3_q4ki4_268:not(#\9) { margin-inline-end: var(--space-xxs-ja5cp8, 4px); } .awsui_header-content_16mm3_q4ki4_272:not(#\9) { display: flex; align-items: center; }