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

364 lines (352 loc) • 18.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 */ .awsui_grid_1mfbn_16ysz_149:not(#\9) { inline-size: var(--size-calendar-grid-width-awqqfd, 234px); border-spacing: 0; } .awsui_grid-cell_1mfbn_16ysz_154:not(#\9) { inline-size: 14.2857142857%; word-break: break-word; text-align: center; font-weight: unset; } .awsui_day-header_1mfbn_16ysz_161:not(#\9) { padding-block-start: var(--space-s-hdd878, 12px); padding-block-end: var(--space-xxs-ja5cp8, 4px); padding-inline: 0; color: var(--color-text-calendar-month-h5j04j, #545b64); 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_day_1mfbn_16ysz_161:not(#\9), .awsui_month_1mfbn_16ysz_172:not(#\9) { border-block-end: 1px solid var(--color-border-calendar-grid-77wqzj, #eaeded); border-inline-end: 1px solid var(--color-border-calendar-grid-77wqzj, #eaeded); padding-block: var(--space-xxs-ja5cp8, 4px); padding-inline: 0; color: var(--color-text-dropdown-item-disabled-j9pzby, #aab7b8); position: relative; } .awsui_day_1mfbn_16ysz_161:not(#\9):focus, .awsui_month_1mfbn_16ysz_172:not(#\9):focus { outline: none; } .awsui_day_1mfbn_16ysz_161:not(#\9)::after, .awsui_month_1mfbn_16ysz_172:not(#\9)::after { content: ""; position: absolute; z-index: 1; inset-block-start: calc(-1 * var(--border-item-width-ip3vxj, 1px)); inset-block-end: -1px; inset-inline-start: -1px; inset-inline-end: calc(-1 * var(--border-item-width-ip3vxj, 1px)); background-color: transparent; } body[data-awsui-focus-visible=true] .awsui_day_1mfbn_16ysz_161:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_month_1mfbn_16ysz_172:not(#\9):focus { z-index: 2; position: relative; } body[data-awsui-focus-visible=true] .awsui_day_1mfbn_16ysz_161:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_month_1mfbn_16ysz_172:not(#\9):focus { outline: 2px dotted transparent; outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-t1skwe, 0px) - 1px); } body[data-awsui-focus-visible=true] .awsui_day_1mfbn_16ysz_161:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_month_1mfbn_16ysz_172:not(#\9):focus::before { content: " "; display: block; position: absolute; inset-inline-start: calc(-1 * var(--space-calendar-grid-focus-outline-gutter-t1skwe, 0px)); inset-block-start: calc(-1 * var(--space-calendar-grid-focus-outline-gutter-t1skwe, 0px)); inline-size: calc(100% + var(--space-calendar-grid-focus-outline-gutter-t1skwe, 0px) + var(--space-calendar-grid-focus-outline-gutter-t1skwe, 0px)); block-size: calc(100% + var(--space-calendar-grid-focus-outline-gutter-t1skwe, 0px) + var(--space-calendar-grid-focus-outline-gutter-t1skwe, 0px)); border-start-start-radius: var(--border-radius-calendar-day-focus-ring-i451al, 2px); border-start-end-radius: var(--border-radius-calendar-day-focus-ring-i451al, 2px); border-end-start-radius: var(--border-radius-calendar-day-focus-ring-i451al, 2px); border-end-end-radius: var(--border-radius-calendar-day-focus-ring-i451al, 2px); box-shadow: 0 0 0 2px var(--color-border-item-focused-j88ehv, #0073bb); } .awsui_day_1mfbn_16ysz_161 > .awsui_day-inner_1mfbn_16ysz_220:not(#\9), .awsui_day_1mfbn_16ysz_161 > .awsui_month-inner_1mfbn_16ysz_221:not(#\9), .awsui_month_1mfbn_16ysz_172 > .awsui_day-inner_1mfbn_16ysz_220:not(#\9), .awsui_month_1mfbn_16ysz_172 > .awsui_month-inner_1mfbn_16ysz_221:not(#\9) { position: relative; z-index: 1; } .awsui_in-first-row_1mfbn_16ysz_228:not(#\9):not(.awsui_in-previous-month_1mfbn_16ysz_228), .awsui_in-first-row_1mfbn_16ysz_228:not(#\9):not(.awsui_in-previous-year_1mfbn_16ysz_229) { border-block-start: 1px solid var(--color-border-calendar-grid-77wqzj, #eaeded); } .awsui_in-previous-month_1mfbn_16ysz_228:not(#\9):not(.awsui_last-day-of-month_1mfbn_16ysz_233), .awsui_in-previous-year_1mfbn_16ysz_229:not(#\9):not(.awsui_last-month-of-year_1mfbn_16ysz_234) { border-inline-end-color: transparent; } .awsui_in-next-month_1mfbn_16ysz_238:not(#\9), .awsui_in-next-year_1mfbn_16ysz_239:not(#\9) { border-color: transparent; } .awsui_in-first-column_1mfbn_16ysz_243:not(#\9) { border-inline-start: 1px solid 1px solid var(--color-border-calendar-grid-77wqzj, #eaeded); } .awsui_in-first-column_1mfbn_16ysz_243.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-month_1mfbn_16ysz_246:not(#\9), .awsui_in-first-column_1mfbn_16ysz_243.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-year_1mfbn_16ysz_246:not(#\9) { border-inline-start: 1px solid var(--color-border-calendar-grid-77wqzj, #eaeded); } .awsui_enabled_1mfbn_16ysz_250:not(#\9) { cursor: pointer; } .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-month_1mfbn_16ysz_246:not(#\9), .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-year_1mfbn_16ysz_246:not(#\9) { color: var(--color-text-dropdown-item-default-ti6pjc, #16191f); } .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-month_1mfbn_16ysz_246:not(#\9):not(.awsui_in-range_1mfbn_16ysz_256), .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-month_1mfbn_16ysz_246:not(#\9):not(.awsui_in-range_1mfbn_16ysz_256)::after, .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-month_1mfbn_16ysz_246.awsui_end-date_1mfbn_16ysz_256.awsui_start-date_1mfbn_16ysz_256:not(#\9), .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-month_1mfbn_16ysz_246.awsui_end-date_1mfbn_16ysz_256.awsui_start-date_1mfbn_16ysz_256:not(#\9)::after, .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-month_1mfbn_16ysz_246.awsui_no-range_1mfbn_16ysz_256:not(#\9), .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-month_1mfbn_16ysz_246.awsui_no-range_1mfbn_16ysz_256:not(#\9)::after, .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-year_1mfbn_16ysz_246:not(#\9):not(.awsui_in-range_1mfbn_16ysz_256), .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-year_1mfbn_16ysz_246:not(#\9):not(.awsui_in-range_1mfbn_16ysz_256)::after, .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-year_1mfbn_16ysz_246.awsui_end-date_1mfbn_16ysz_256.awsui_start-date_1mfbn_16ysz_256:not(#\9), .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-year_1mfbn_16ysz_246.awsui_end-date_1mfbn_16ysz_256.awsui_start-date_1mfbn_16ysz_256:not(#\9)::after, .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-year_1mfbn_16ysz_246.awsui_no-range_1mfbn_16ysz_256:not(#\9), .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-year_1mfbn_16ysz_246.awsui_no-range_1mfbn_16ysz_256:not(#\9)::after { 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_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-month_1mfbn_16ysz_246:not(#\9):hover, .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-year_1mfbn_16ysz_246:not(#\9):hover { color: var(--color-text-calendar-date-hover-q9r0yp, #16191f); background-color: var(--color-background-dropdown-item-hover-6zmazg, #f2f3f3); } .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-month_1mfbn_16ysz_246:not(#\9):hover:not(.awsui_selected_1mfbn_16ysz_266)::after, .awsui_enabled_1mfbn_16ysz_250.awsui_in-visible-calendar_1mfbn_16ysz_246.awsui_in-current-year_1mfbn_16ysz_246:not(#\9):hover:not(.awsui_selected_1mfbn_16ysz_266)::after { 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); } .awsui_today_1mfbn_16ysz_271:not(#\9):not(.awsui_in-range_1mfbn_16ysz_256), .awsui_this-month_1mfbn_16ysz_272:not(#\9):not(.awsui_in-range_1mfbn_16ysz_256) { background-color: var(--color-background-calendar-current-date-i2bg1g, #f2f3f3); 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); font-weight: 700; } .awsui_selected_1mfbn_16ysz_266:not(#\9) { border-color: transparent; position: relative; z-index: 2; font-weight: 700; } body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_16ysz_266:not(#\9):focus { position: relative; } body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_16ysz_266:not(#\9):focus { outline: 2px dotted transparent; outline-offset: calc(var(--space-calendar-grid-selected-focus-outline-gutter-9bnvp5, 2px) - 1px); } body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_16ysz_266:not(#\9):focus::before { content: " "; display: block; position: absolute; inset-inline-start: calc(-1 * var(--space-calendar-grid-selected-focus-outline-gutter-9bnvp5, 2px)); inset-block-start: calc(-1 * var(--space-calendar-grid-selected-focus-outline-gutter-9bnvp5, 2px)); inline-size: calc(100% + var(--space-calendar-grid-selected-focus-outline-gutter-9bnvp5, 2px) + var(--space-calendar-grid-selected-focus-outline-gutter-9bnvp5, 2px)); block-size: calc(100% + var(--space-calendar-grid-selected-focus-outline-gutter-9bnvp5, 2px) + var(--space-calendar-grid-selected-focus-outline-gutter-9bnvp5, 2px)); border-start-start-radius: var(--border-radius-calendar-day-focus-ring-i451al, 2px); border-start-end-radius: var(--border-radius-calendar-day-focus-ring-i451al, 2px); border-end-start-radius: var(--border-radius-calendar-day-focus-ring-i451al, 2px); border-end-end-radius: var(--border-radius-calendar-day-focus-ring-i451al, 2px); box-shadow: 0 0 0 2px var(--color-border-calendar-grid-selected-focus-ring-nbq93t, #0073bb); } body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_16ysz_266:not(#\9):focus::before { z-index: 1; } .awsui_selected_1mfbn_16ysz_266:not(#\9)::after { background-color: var(--color-background-control-checked-6j23t6, #0073bb); border-block: var(--border-item-width-ip3vxj, 1px) solid var(--color-background-control-checked-6j23t6, #0073bb); border-inline: var(--border-item-width-ip3vxj, 1px) solid var(--color-background-control-checked-6j23t6, #0073bb); z-index: 0; } .awsui_selected_1mfbn_16ysz_266 > .awsui_day-inner_1mfbn_16ysz_220:not(#\9), .awsui_selected_1mfbn_16ysz_266 > .awsui_month-inner_1mfbn_16ysz_221:not(#\9) { color: var(--color-background-control-default-6lirk9, #ffffff); position: relative; z-index: 2; } .awsui_in-range_1mfbn_16ysz_256:not(#\9) { background-color: var(--color-background-dropdown-item-selected-6qo3t1, #f1faff); font-weight: 700; } .awsui_in-range_1mfbn_16ysz_256.awsui_in-range-border-block-start_1mfbn_16ysz_328:not(#\9)::after { border-block-start: var(--border-item-width-ip3vxj, 1px) solid var(--color-background-control-checked-6j23t6, #0073bb); } .awsui_in-range_1mfbn_16ysz_256.awsui_in-range-border-inline-end_1mfbn_16ysz_331:not(#\9)::after { border-inline-end: var(--border-item-width-ip3vxj, 1px) solid var(--color-background-control-checked-6j23t6, #0073bb); } .awsui_in-range_1mfbn_16ysz_256.awsui_in-range-border-block-end_1mfbn_16ysz_334:not(#\9)::after { border-block-end: var(--border-item-width-ip3vxj, 1px) solid var(--color-background-control-checked-6j23t6, #0073bb); } .awsui_in-range_1mfbn_16ysz_256.awsui_in-range-border-inline-start_1mfbn_16ysz_337:not(#\9)::after { border-inline-start: var(--border-item-width-ip3vxj, 1px) solid var(--color-background-control-checked-6j23t6, #0073bb); } .awsui_in-range_1mfbn_16ysz_256.awsui_in-range-border-block-start_1mfbn_16ysz_328.awsui_in-range-border-inline-end_1mfbn_16ysz_331:not(#\9), .awsui_in-range_1mfbn_16ysz_256.awsui_in-range-border-block-start_1mfbn_16ysz_328.awsui_in-range-border-inline-end_1mfbn_16ysz_331:not(#\9)::after { border-start-end-radius: var(--border-radius-item-ilq21a, 0px); } .awsui_in-range_1mfbn_16ysz_256.awsui_in-range-border-block-end_1mfbn_16ysz_334.awsui_in-range-border-inline-end_1mfbn_16ysz_331:not(#\9), .awsui_in-range_1mfbn_16ysz_256.awsui_in-range-border-block-end_1mfbn_16ysz_334.awsui_in-range-border-inline-end_1mfbn_16ysz_331:not(#\9)::after { border-end-end-radius: var(--border-radius-item-ilq21a, 0px); } .awsui_in-range_1mfbn_16ysz_256.awsui_in-range-border-block-end_1mfbn_16ysz_334.awsui_in-range-border-inline-start_1mfbn_16ysz_337:not(#\9), .awsui_in-range_1mfbn_16ysz_256.awsui_in-range-border-block-end_1mfbn_16ysz_334.awsui_in-range-border-inline-start_1mfbn_16ysz_337:not(#\9)::after { border-end-start-radius: var(--border-radius-item-ilq21a, 0px); } .awsui_in-range_1mfbn_16ysz_256.awsui_in-range-border-block-start_1mfbn_16ysz_328.awsui_in-range-border-inline-start_1mfbn_16ysz_337:not(#\9), .awsui_in-range_1mfbn_16ysz_256.awsui_in-range-border-block-start_1mfbn_16ysz_328.awsui_in-range-border-inline-start_1mfbn_16ysz_337:not(#\9)::after { border-start-start-radius: var(--border-radius-item-ilq21a, 0px); } .awsui_no-range_1mfbn_16ysz_256:not(#\9), .awsui_no-range_1mfbn_16ysz_256:not(#\9)::after { border-start-start-radius: var(--border-radius-item-ilq21a, 0px); } .awsui_no-range_1mfbn_16ysz_256:not(#\9), .awsui_no-range_1mfbn_16ysz_256:not(#\9)::after { border-start-end-radius: var(--border-radius-item-ilq21a, 0px); } .awsui_no-range_1mfbn_16ysz_256:not(#\9), .awsui_no-range_1mfbn_16ysz_256:not(#\9)::after { border-end-start-radius: var(--border-radius-item-ilq21a, 0px); } .awsui_no-range_1mfbn_16ysz_256:not(#\9), .awsui_no-range_1mfbn_16ysz_256:not(#\9)::after { border-end-end-radius: var(--border-radius-item-ilq21a, 0px); }