@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
363 lines (351 loc) • 13.8 kB
CSS
/*
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
*/
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/
.awsui_root_wih1l_1glfv_153:not(#\9) {
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;
inline-size: 100%;
}
.awsui_tools_wih1l_1glfv_164:not(#\9) {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
padding-block-start: var(--space-scaled-xs-wbfgrv, 8px);
padding-block-end: var(--space-table-header-tools-bottom-7eth1u, 4px);
padding-inline: 0;
}
.awsui_tools-filtering_wih1l_1glfv_172:not(#\9) {
max-inline-size: 100%;
margin-inline-end: var(--space-l-f4l5gr, 20px);
}
@supports (flex-basis: fit-content) {
.awsui_tools-filtering_wih1l_1glfv_172:not(#\9) {
flex: 1 1 fit-content;
}
}
@supports not (flex-basis: fit-content) {
.awsui_tools-filtering_wih1l_1glfv_172:not(#\9) {
flex: 1 1 auto;
}
}
.awsui_tools-align-right_wih1l_1glfv_186:not(#\9) {
display: flex;
margin-inline-start: auto;
}
.awsui_tools-pagination_wih1l_1glfv_190 + .awsui_tools-preferences_wih1l_1glfv_190:not(#\9) {
border-inline-start: var(--border-divider-section-width-4f9905, 1px) solid var(--color-border-divider-default-g2zqci, #eaeded);
box-sizing: border-box;
margin-inline-start: var(--space-xs-edba2s, 8px);
padding-inline-start: var(--space-xs-edba2s, 8px);
}
.awsui_tools-small_wih1l_1glfv_196 > .awsui_tools-filtering_wih1l_1glfv_172:not(#\9) {
margin-inline-end: 0;
margin-block-end: var(--space-scaled-xs-wbfgrv, 8px);
flex-basis: 100%;
}
.awsui_table_wih1l_1glfv_202:not(#\9) {
inline-size: 100%;
border-spacing: 0;
position: relative;
box-sizing: border-box;
}
.awsui_table-layout-fixed_wih1l_1glfv_208:not(#\9) {
table-layout: fixed;
}
.awsui_wrapper_wih1l_1glfv_212:not(#\9) {
position: relative;
box-sizing: border-box;
inline-size: 100%;
overflow-x: auto;
scrollbar-width: none; /* Hide scrollbar in Firefox */
}
.awsui_wrapper_wih1l_1glfv_212.awsui_variant-stacked_wih1l_1glfv_219 > .awsui_table_wih1l_1glfv_202:not(#\9), .awsui_wrapper_wih1l_1glfv_212.awsui_variant-stacked_wih1l_1glfv_219 > .awsui_wrapper-content-measure_wih1l_1glfv_219:not(#\9), .awsui_wrapper_wih1l_1glfv_212.awsui_variant-container_wih1l_1glfv_219 > .awsui_table_wih1l_1glfv_202:not(#\9), .awsui_wrapper_wih1l_1glfv_212.awsui_variant-container_wih1l_1glfv_219 > .awsui_wrapper-content-measure_wih1l_1glfv_219:not(#\9) {
padding-inline: var(--space-table-horizontal-7d96o1, 0px);
}
.awsui_wrapper_wih1l_1glfv_212.awsui_variant-stacked_wih1l_1glfv_219:not(#\9):not(.awsui_has-footer_wih1l_1glfv_222), .awsui_wrapper_wih1l_1glfv_212.awsui_variant-container_wih1l_1glfv_219:not(#\9):not(.awsui_has-footer_wih1l_1glfv_222) {
padding-block-end: var(--space-table-content-bottom-7je75o, 0px);
}
.awsui_wrapper_wih1l_1glfv_212:not(#\9):not(.awsui_has-header_wih1l_1glfv_225) {
border-start-end-radius: var(--border-radius-container-r46evd, 0px);
border-start-start-radius: var(--border-radius-container-r46evd, 0px);
}
.awsui_wrapper_wih1l_1glfv_212:not(#\9)::-webkit-scrollbar {
display: none; /* Hide scrollbar in Safari and Chrome */
}
body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_1glfv_212:not(#\9):focus {
outline: 2px dotted transparent;
outline-offset: 2px;
border-start-start-radius: var(--border-radius-container-r46evd, 0px);
border-start-end-radius: var(--border-radius-container-r46evd, 0px);
border-end-start-radius: var(--border-radius-container-r46evd, 0px);
border-end-end-radius: var(--border-radius-container-r46evd, 0px);
box-shadow: 0 0 0 2px var(--color-border-item-focused-j88ehv, #0073bb);
}
.awsui_cell-merged_wih1l_1glfv_242:not(#\9) {
text-align: center;
padding-block: 0;
padding-inline: 0;
}
.awsui_cell-merged_wih1l_1glfv_242.awsui_has-footer_wih1l_1glfv_222:not(#\9) {
/*
Add a bottom border to the body cell of an empty table as a separator between the
table and the footer
*/
border-block-end: var(--border-divider-section-width-4f9905, 1px) solid var(--color-border-divider-default-g2zqci, #eaeded);
}
.awsui_cell-merged-content_wih1l_1glfv_254:not(#\9) {
box-sizing: border-box;
inline-size: 100%;
padding-block-start: var(--space-scaled-m-gxhdpl, 16px);
padding-block-end: var(--space-scaled-l-2rs0gk, 20px);
padding-inline: var(--space-l-f4l5gr, 20px);
}
@supports (position: sticky) {
.awsui_cell-merged-content_wih1l_1glfv_254:not(#\9) {
position: sticky;
inset-inline-start: 0;
margin-block: 0;
margin-inline: calc(-2 * var(--space-table-horizontal-7d96o1, 0px));
}
}
.awsui_empty_wih1l_1glfv_270:not(#\9) {
color: var(--color-text-empty-mn4nrj, #687078);
}
.awsui_loading_wih1l_1glfv_274:not(#\9) {
/* used in test-utils */
}
/*
The min/max/width token values in Visual Refresh should align
the table header and body cells selection control with the table
filter search icon.
*/
.awsui_selection-control_wih1l_1glfv_283:not(#\9) {
box-sizing: border-box;
max-inline-size: var(--size-table-selection-horizontal-ztdx5v, 54px);
min-inline-size: var(--size-table-selection-horizontal-ztdx5v, 54px);
position: relative;
inline-size: var(--size-table-selection-horizontal-ztdx5v, 54px);
}
.awsui_selection-control_wih1l_1glfv_283.awsui_selection-control-header_wih1l_1glfv_290:not(#\9) {
padding-block: var(--space-scaled-xs-wbfgrv, 8px);
padding-inline: var(--space-scaled-l-2rs0gk, 20px);
border-inline-start: var(--border-item-width-ip3vxj, 1px) solid transparent;
}
.awsui_header-secondary_wih1l_1glfv_296:not(#\9) {
overflow: auto;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
box-sizing: border-box;
inline-size: 100%;
border-start-start-radius: 0;
border-start-end-radius: 0;
border-end-start-radius: 0;
border-end-end-radius: 0;
background: var(--color-background-table-header-rhxv7u, #fafafa);
}
.awsui_header-secondary_wih1l_1glfv_296.awsui_variant-full-page_wih1l_1glfv_308:not(#\9) {
background: var(--color-background-layout-main-f3jtyd, #f2f3f3);
}
.awsui_header-secondary_wih1l_1glfv_296.awsui_variant-stacked_wih1l_1glfv_219 > .awsui_table_wih1l_1glfv_202:not(#\9), .awsui_header-secondary_wih1l_1glfv_296.awsui_variant-container_wih1l_1glfv_219 > .awsui_table_wih1l_1glfv_202:not(#\9) {
padding-inline: var(--space-table-horizontal-7d96o1, 0px);
}
.awsui_header-secondary_wih1l_1glfv_296.awsui_variant-stacked_wih1l_1glfv_219:not(#\9):not(.awsui_table-has-header_wih1l_1glfv_314), .awsui_header-secondary_wih1l_1glfv_296.awsui_variant-container_wih1l_1glfv_219:not(#\9):not(.awsui_table-has-header_wih1l_1glfv_314) {
border-start-start-radius: var(--border-radius-container-r46evd, 0px);
border-start-end-radius: var(--border-radius-container-r46evd, 0px);
}
.awsui_header-secondary_wih1l_1glfv_296:not(#\9)::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.awsui_header-secondary_wih1l_1glfv_296.awsui_table-has-header_wih1l_1glfv_314:not(#\9) {
border-block-start: var(--border-divider-list-width-um3zli, 1px) solid var(--color-border-container-divider-1j5zof, #eaeded);
}
.awsui_header-controls_wih1l_1glfv_325:not(#\9) {
padding-block: var(--space-container-header-top-c6bw9y, 12px) var(--space-container-header-bottom-83qu8n, 12px);
}
.awsui_header-controls_wih1l_1glfv_325.awsui_variant-full-page_wih1l_1glfv_308:not(#\9) {
padding-block: 0 calc(var(--space-container-header-bottom-83qu8n, 12px) + var(--space-table-header-tools-full-page-bottom-4uhg4l, 4px));
}
.awsui_header-controls_wih1l_1glfv_325.awsui_variant-stacked_wih1l_1glfv_219:not(#\9), .awsui_header-controls_wih1l_1glfv_325.awsui_variant-container_wih1l_1glfv_219:not(#\9) {
padding-inline: calc(var(--space-table-horizontal-7d96o1, 0px) + var(--space-table-header-horizontal-t0q2vn, 20px));
}
.awsui_header-controls_wih1l_1glfv_325.awsui_variant-embedded_wih1l_1glfv_334:not(#\9), .awsui_header-controls_wih1l_1glfv_325.awsui_variant-borderless_wih1l_1glfv_334:not(#\9) {
padding-inline: var(--space-table-header-horizontal-t0q2vn, 20px);
padding-block-start: var(--space-table-embedded-header-top-rsxnfq, 12px);
}
.awsui_footer-wrapper_wih1l_1glfv_339.awsui_variant-stacked_wih1l_1glfv_219:not(#\9), .awsui_footer-wrapper_wih1l_1glfv_339.awsui_variant-container_wih1l_1glfv_219:not(#\9) {
padding-inline: var(--space-table-horizontal-7d96o1, 0px);
}
.awsui_footer_wih1l_1glfv_339:not(#\9) {
padding-block: var(--space-scaled-s-913kwi, 12px);
padding-inline: var(--space-table-footer-horizontal-he98bg, 20px);
}
.awsui_footer-with-pagination_wih1l_1glfv_347:not(#\9) {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-scaled-s-913kwi, 12px);
}
.awsui_footer-pagination_wih1l_1glfv_355:not(#\9) {
margin-inline-start: auto;
}
.awsui_thead-active_wih1l_1glfv_359:not(#\9),
.awsui_row_wih1l_1glfv_360:not(#\9),
.awsui_row-selected_wih1l_1glfv_361:not(#\9) {
/* used in test-utils */
}