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

268 lines (265 loc) • 10.3 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_item-element_93a1u_b25xu_145:not(#\9) { position: relative; z-index: 1; border-block: var(--border-item-width-ip3vxj, 1px) solid transparent; border-inline: var(--border-item-width-ip3vxj, 1px) solid transparent; list-style: none; padding-block: 0; padding-inline: 0; color: var(--color-text-dropdown-item-default-ti6pjc, #16191f); margin-block-start: calc(-1 * var(--border-width-field-404eki, 1px)); cursor: pointer; } .awsui_item-element_93a1u_b25xu_145.awsui_disabled_93a1u_b25xu_157:not(#\9) { cursor: default; color: var(--color-text-dropdown-item-disabled-j9pzby, #aab7b8); } .awsui_item-element_93a1u_b25xu_145:not(#\9):first-child { margin-block-start: 0; } .awsui_item-element_93a1u_b25xu_145.awsui_show-divider_93a1u_b25xu_164:not(#\9) { border-block-end: var(--border-item-width-ip3vxj, 1px) solid var(--color-border-dropdown-group-tg9vgt, #eaeded); } .awsui_item-element_93a1u_b25xu_145.awsui_highlighted_93a1u_b25xu_167:not(#\9) { color: var(--color-text-dropdown-item-highlighted-0ns2tb, #16191f); z-index: 2; background-color: var(--color-background-dropdown-item-hover-6zmazg, #f2f3f3); border-color: 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); } .awsui_item-element_93a1u_b25xu_145.awsui_highlighted_93a1u_b25xu_167.awsui_disabled_93a1u_b25xu_157:not(#\9) { color: var(--color-text-dropdown-item-dimmed-6g8wds, #aab7b8); border-color: var(--color-border-dropdown-item-dimmed-hover-7hrdqp, #879596); background-color: var(--color-background-dropdown-item-dimmed-oa2pjk, transparent); } .awsui_item-element_93a1u_b25xu_145.awsui_highlighted_93a1u_b25xu_167.awsui_is-focused_93a1u_b25xu_182:not(#\9) { border-color: var(--color-border-dropdown-item-focused-hebyze, #0073bb); box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-o8rs1p, 1px) var(--color-border-item-focused-j88ehv, #0073bb); } .awsui_menu-item_93a1u_b25xu_187:not(#\9) { min-inline-size: 0; word-break: break-word; display: flex; align-items: flex-start; padding-block: var(--space-xxs-ja5cp8, 4px); padding-inline: var(--space-l-f4l5gr, 20px); color: inherit; text-decoration: none; /* stylelint-disable selector-max-type */ /* stylelint-enable selector-max-type */ } .awsui_menu-item_93a1u_b25xu_187.awsui_link-style_93a1u_b25xu_199:not(#\9) { padding-block-end: calc(var(--space-xxs-ja5cp8, 4px) + var(--space-xxxs-j6dpcy, 2px)); text-underline-offset: 0.25em; text-decoration-thickness: 1px; color: var(--color-text-link-default-owstl4, #0073bb); font-weight: inherit; letter-spacing: normal; text-decoration-line: underline; text-decoration-color: currentColor; transition-property: color, -webkit-text-decoration; transition-property: color, text-decoration; transition-property: color, text-decoration, -webkit-text-decoration; transition-duration: var(--motion-duration-refresh-only-medium-l0r8lz, 0ms); } @media (prefers-reduced-motion: reduce) { .awsui_menu-item_93a1u_b25xu_187.awsui_link-style_93a1u_b25xu_199:not(#\9) { animation: none; transition: none; } } .awsui-motion-disabled .awsui_menu-item_93a1u_b25xu_187.awsui_link-style_93a1u_b25xu_199:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_b25xu_187.awsui_link-style_93a1u_b25xu_199:not(#\9) { animation: none; transition: none; } .awsui_menu-item_93a1u_b25xu_187.awsui_link-style_93a1u_b25xu_199:not(#\9):hover { cursor: pointer; color: var(--color-text-link-hover-aohp90, #0a4a74); } .awsui_menu-item_93a1u_b25xu_187.awsui_link-style_93a1u_b25xu_199:not(#\9):focus { outline: none; } .awsui_menu-item_93a1u_b25xu_187.awsui_link-style_93a1u_b25xu_199:not(#\9):active { color: var(--color-text-link-hover-aohp90, #0a4a74); } .awsui_menu-item_93a1u_b25xu_187.awsui_link-style_93a1u_b25xu_199:not(#\9):active, .awsui_menu-item_93a1u_b25xu_187.awsui_link-style_93a1u_b25xu_199:not(#\9):focus, .awsui_menu-item_93a1u_b25xu_187.awsui_link-style_93a1u_b25xu_199:not(#\9):hover { text-decoration-line: underline; text-decoration-color: currentColor; } .awsui_menu-item_93a1u_b25xu_187.awsui_link-style_93a1u_b25xu_199.awsui_current-breadcrumb_93a1u_b25xu_235:not(#\9) { font-weight: var(--font-weight-button-rb1vba, 700); -webkit-font-smoothing: var(--font-smoothing-webkit-gsroen, auto); -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-7ax6sl, auto); color: var(--color-text-breadcrumb-current-kt41ir, #687078); font-weight: 700; text-decoration: none; } .awsui_menu-item_93a1u_b25xu_187.awsui_link-style_93a1u_b25xu_199.awsui_link-style-highlighted_93a1u_b25xu_243:not(#\9) { color: var(--color-text-link-hover-aohp90, #0a4a74); } .awsui_menu-item_93a1u_b25xu_187:not(#\9):focus { outline: none; } .awsui_has-category-header_93a1u_b25xu_249 > .awsui_menu-item_93a1u_b25xu_187:not(#\9), .awsui_has-category-header_93a1u_b25xu_249 > .awsui_item-tooltip-wrapper_93a1u_b25xu_249 > .awsui_menu-item_93a1u_b25xu_187:not(#\9), .awsui_has-category-header_93a1u_b25xu_249:not(#\9):not(.awsui_has-checkmark_93a1u_b25xu_249) > span > .awsui_menu-item_93a1u_b25xu_187 { padding-inline-start: calc(var(--space-xs-edba2s, 8px) + var(--space-l-f4l5gr, 20px)); } .awsui_icon_93a1u_b25xu_253:not(#\9) { padding-inline-end: var(--space-xxs-ja5cp8, 4px); flex-shrink: 0; } .awsui_icon_93a1u_b25xu_253.awsui_checkmark_93a1u_b25xu_257:not(#\9) { color: var(--color-text-status-info-vkd30u, #0073bb); } .awsui_icon_93a1u_b25xu_253.awsui_disabled_93a1u_b25xu_157:not(#\9) { color: var(--color-text-interactive-disabled-jwju02, #aab7b8); } .awsui_external-icon_93a1u_b25xu_264:not(#\9) { margin-inline-start: var(--space-xxs-ja5cp8, 4px); }