@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
463 lines (446 loc) • 16.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_drawer_1r9lg_1sb8v_153: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;
flex-shrink: 0;
position: relative;
min-inline-size: 0;
word-break: break-word;
background-color: var(--color-background-layout-panel-content-jymwa8, #ffffff);
z-index: 840;
}
.awsui_drawer-closed_1r9lg_1sb8v_190:not(#\9):not(.awsui_refresh_1r9lg_1sb8v_190) {
min-inline-size: 40px;
}
.awsui_drawer-content-side_1r9lg_1sb8v_194:not(#\9) {
display: flex;
align-items: center;
block-size: 100%;
overflow: auto;
}
.awsui_drawer-content-side_1r9lg_1sb8v_194 > [aria-hidden=true]:not(#\9), .awsui_drawer-closed_1r9lg_1sb8v_190.awsui_refresh_1r9lg_1sb8v_190 > .awsui_drawer-content-side_1r9lg_1sb8v_194:not(#\9) {
display: none;
}
.awsui_drawer-closed_1r9lg_1sb8v_190:not(#\9):not(.awsui_refresh_1r9lg_1sb8v_190) > .awsui_drawer-content-side_1r9lg_1sb8v_194 {
inline-size: 40px;
}
.awsui_drawer-closed_1r9lg_1sb8v_190:not(#\9):not(.awsui_refresh_1r9lg_1sb8v_190) > .awsui_drawer-content-side_1r9lg_1sb8v_194:hover {
background: var(--color-background-layout-panel-hover-ogjd65, #eaeded);
}
:not(#\9):not(.awsui_drawer-closed_1r9lg_1sb8v_190) > .awsui_drawer-content-bottom_1r9lg_1sb8v_210 {
overflow-y: auto;
position: absolute;
inset: 0;
clip-path: border-box;
}
.awsui_position-bottom_1r9lg_1sb8v_217:not(#\9) {
position: fixed;
overflow-y: auto;
/*
Removed the position fixed with the AppLayout refactor because the
SplitPanel is no longer in fixed position in the DOM.
*/
}
.awsui_position-bottom_1r9lg_1sb8v_217:not(#\9):not(.awsui_hidden_1r9lg_1sb8v_225) {
border-block-start: var(--border-panel-top-width-6k0jao, 0px) solid var(--color-border-divider-panel-bottom-qg365q, rgba(0, 28, 36, 0.15));
}
.awsui_position-bottom_1r9lg_1sb8v_217:not(#\9):not(.awsui_refresh_1r9lg_1sb8v_190) {
box-shadow: var(--shadow-split-bottom-bsye2w, 0 -2px 1px -1px rgba(0, 28, 36, 0.15), 0 -1px 1px -1px rgba(0, 28, 36, 0.3));
border-inline-start: var(--border-divider-section-width-4f9905, 1px) solid var(--color-border-divider-panel-bottom-qg365q, rgba(0, 28, 36, 0.15));
border-inline-end: var(--border-divider-section-width-4f9905, 1px) solid var(--color-border-divider-panel-bottom-qg365q, rgba(0, 28, 36, 0.15));
}
.awsui_position-bottom_1r9lg_1sb8v_217.awsui_drawer-closed_1r9lg_1sb8v_190:not(#\9) {
overflow: hidden;
}
.awsui_position-bottom_1r9lg_1sb8v_217.awsui_drawer-closed_1r9lg_1sb8v_190.awsui_drawer-clickable_1r9lg_1sb8v_236:not(#\9):hover {
cursor: pointer;
background: var(--color-background-layout-panel-hover-ogjd65, #eaeded);
}
.awsui_position-bottom_1r9lg_1sb8v_217 > .awsui_drawer-content-bottom_1r9lg_1sb8v_210 > [aria-hidden=true]:not(#\9) {
display: none;
}
.awsui_position-bottom_1r9lg_1sb8v_217.awsui_refresh_1r9lg_1sb8v_190:not(#\9) {
position: relative;
}
.awsui_position-side_1r9lg_1sb8v_247:not(#\9) {
border-block-start: none;
box-shadow: var(--shadow-split-side-e4njpi, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
block-size: 100%;
}
.awsui_position-side_1r9lg_1sb8v_247.awsui_with-toolbar_1r9lg_1sb8v_252:not(#\9) {
box-shadow: none;
}
.awsui_slider-wrapper-bottom_1r9lg_1sb8v_256:not(#\9) {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: 18px;
display: flex;
justify-content: center;
z-index: 2;
}
.awsui_slider-wrapper-side_1r9lg_1sb8v_267:not(#\9) {
position: absolute;
inset-inline-start: 0;
inset-block-start: 0;
block-size: 100%;
inline-size: 18px;
display: flex;
align-items: center;
z-index: 1;
}
.awsui_slider-wrapper-side_1r9lg_1sb8v_267.awsui_with-toolbar_1r9lg_1sb8v_252:not(#\9) {
position: unset;
}
.awsui_open-button-side_1r9lg_1sb8v_281:not(#\9) {
flex: 0 0 auto;
align-self: flex-start;
box-sizing: border-box;
margin-block-start: var(--space-xxs-ja5cp8, 4px);
margin-block-end: 0;
margin-inline: auto;
}
.awsui_pane-header-wrapper-bottom_1r9lg_1sb8v_290:not(#\9) {
position: sticky;
inset-block-start: 0;
display: flex;
align-items: center;
flex-direction: column;
z-index: 1;
padding-block: 0;
padding-inline: var(--space-layout-content-horizontal-yghacl, 40px);
}
.awsui_drawer-mobile_1r9lg_1sb8v_300 > .awsui_drawer-content-bottom_1r9lg_1sb8v_210 > .awsui_pane-header-wrapper-bottom_1r9lg_1sb8v_290:not(#\9) {
padding-block: 0;
padding-inline: var(--space-l-f4l5gr, 20px);
}
.awsui_drawer-disable-content-paddings_1r9lg_1sb8v_304 > .awsui_drawer-content-bottom_1r9lg_1sb8v_210 > .awsui_pane-header-wrapper-bottom_1r9lg_1sb8v_290:not(#\9) {
padding-block: 0;
padding-inline: var(--space-l-f4l5gr, 20px);
}
:not(#\9):not(.awsui_drawer-closed_1r9lg_1sb8v_190) > .awsui_drawer-content-bottom_1r9lg_1sb8v_210 > .awsui_pane-header-wrapper-bottom_1r9lg_1sb8v_290 {
background-color: var(--color-background-layout-panel-content-jymwa8, #ffffff);
border-block-end: var(--border-panel-header-width-7a2phv, 0px) solid var(--color-border-panel-header-x89ddl, #eaeded);
}
.awsui_with-toolbar_1r9lg_1sb8v_252:not(#\9):not(.awsui_drawer-closed_1r9lg_1sb8v_190) > .awsui_drawer-content-bottom_1r9lg_1sb8v_210 > .awsui_pane-header-wrapper-bottom_1r9lg_1sb8v_290 {
border-color: transparent;
}
.awsui_content-bottom_1r9lg_1sb8v_316:not(#\9) {
padding-block: 0;
padding-inline: var(--space-layout-content-horizontal-yghacl, 40px);
margin-block-start: var(--space-panel-split-top-i0cspk, 0px);
position: relative;
z-index: 0;
}
.awsui_with-toolbar_1r9lg_1sb8v_252 > .awsui_drawer-content-bottom_1r9lg_1sb8v_210 > .awsui_content-bottom_1r9lg_1sb8v_316:not(#\9) {
margin-block-start: 0px;
}
.awsui_drawer-mobile_1r9lg_1sb8v_300 > .awsui_drawer-content-bottom_1r9lg_1sb8v_210 > .awsui_content-bottom_1r9lg_1sb8v_316:not(#\9) {
padding-block: 0;
padding-inline: var(--space-l-f4l5gr, 20px);
}
.awsui_drawer-disable-content-paddings_1r9lg_1sb8v_304 > .awsui_drawer-content-bottom_1r9lg_1sb8v_210 > .awsui_content-bottom_1r9lg_1sb8v_316:not(#\9) {
padding-block: 0;
padding-inline: 0;
}
.awsui_pane-bottom-center-align_1r9lg_1sb8v_335:not(#\9) {
display: flex;
justify-content: center;
}
.awsui_pane-bottom-content-nav-padding_1r9lg_1sb8v_340:not(#\9) {
padding-inline-start: calc(var(--space-layout-toggle-diameter-c697hn, 36px) + 2 * var(--space-layout-toggle-padding-ae8rw5, 12px));
}
.awsui_pane-bottom-content-tools-padding_1r9lg_1sb8v_344:not(#\9) {
padding-inline-end: calc(var(--space-layout-toggle-diameter-c697hn, 36px) + 2 * var(--space-layout-toggle-padding-ae8rw5, 12px));
}
.awsui_content-bottom-max-width_1r9lg_1sb8v_348:not(#\9) {
flex-grow: 1;
max-inline-size: 100%;
}
.awsui_content-side_1r9lg_1sb8v_353:not(#\9) {
flex: auto;
align-self: flex-start;
box-sizing: border-box;
overflow-y: auto;
inset-block-start: 0;
inset-inline: 0;
block-size: 100%;
}
.awsui_content-side_1r9lg_1sb8v_353.awsui_with-toolbar_1r9lg_1sb8v_252:not(#\9) {
position: absolute;
}
.awsui_content-side_1r9lg_1sb8v_353 > .awsui_pane-header-wrapper-side_1r9lg_1sb8v_365:not(#\9) {
padding-block: 0;
padding-inline-end: var(--space-m-h2th94, 16px);
padding-inline-start: var(--space-panel-side-left-2amwxl, 32px);
border-block-end: var(--border-panel-header-width-7a2phv, 0px) solid var(--color-border-panel-header-x89ddl, #eaeded);
}
.awsui_content-side_1r9lg_1sb8v_353.awsui_with-toolbar_1r9lg_1sb8v_252 > .awsui_pane-header-wrapper-side_1r9lg_1sb8v_365:not(#\9) {
border-color: transparent;
}
.awsui_content-side_1r9lg_1sb8v_353 > .awsui_pane-content-wrapper-side_1r9lg_1sb8v_374:not(#\9) {
padding-block: 0;
padding-inline-start: var(--space-panel-side-left-2amwxl, 32px);
padding-inline-end: var(--space-panel-side-right-lgtbro, 32px);
margin-block-start: var(--space-panel-split-top-i0cspk, 0px);
margin-block-end: var(--space-panel-split-bottom-rtddar, 20px);
}
.awsui_content-side_1r9lg_1sb8v_353.awsui_with-toolbar_1r9lg_1sb8v_252 > .awsui_pane-content-wrapper-side_1r9lg_1sb8v_374:not(#\9) {
margin-block-start: 0px;
}
.awsui_header_1r9lg_1sb8v_385:not(#\9) {
inline-size: 100%;
margin-block: var(--size-vertical-panel-icon-offset-zd2rli, 15px);
margin-inline: 0;
}
.awsui_header_1r9lg_1sb8v_385.awsui_with-toolbar_1r9lg_1sb8v_252:not(#\9) {
margin-block: 14px;
}
.awsui_header-main-row_1r9lg_1sb8v_393:not(#\9), .awsui_header-main-content_1r9lg_1sb8v_393:not(#\9) {
display: flex;
}
.awsui_header-main-row_1r9lg_1sb8v_393:not(#\9) {
align-items: flex-start;
}
.awsui_header-main-content_1r9lg_1sb8v_393:not(#\9) {
flex: auto;
flex-direction: row;
column-gap: var(--space-scaled-xs-wbfgrv, 8px);
row-gap: var(--space-scaled-xxs-t2t62i, 4px);
justify-content: space-between;
align-items: flex-start;
}
.awsui_header-tag-and-info_1r9lg_1sb8v_407:not(#\9) {
flex-grow: 1;
margin-block-start: calc(var(--space-scaled-xxs-t2t62i, 4px) + 1px);
line-height: var(--line-height-body-s-usc3fr, 16px);
}
.awsui_header-tag-and-info_1r9lg_1sb8v_407.awsui_with-description_1r9lg_1sb8v_412:not(#\9) {
margin-block-end: var(--space-scaled-xxxs-jdgipl, 2px);
}
.awsui_header-tag_1r9lg_1sb8v_407.awsui_with-info_1r9lg_1sb8v_415:not(#\9), .awsui_header-text_1r9lg_1sb8v_415:not(#\9) {
display: inline;
}
.awsui_header-tag_1r9lg_1sb8v_407:not(#\9) {
margin-block: 0;
}
.awsui_header-before-slot_1r9lg_1sb8v_421:not(#\9), .awsui_header-text_1r9lg_1sb8v_415:not(#\9) {
font-size: var(--font-panel-header-size-ey4ywd, 18px);
letter-spacing: var(--letter-spacing-heading-m-m4ll99, normal);
line-height: var(--font-panel-header-line-height-pqpwyv, 22px);
font-weight: var(--font-weight-heading-l-0lcea3, 700);
-webkit-font-smoothing: var(--font-smoothing-webkit-gsroen, auto);
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-7ax6sl, auto);
}
.awsui_header-before-slot_1r9lg_1sb8v_421:not(#\9) {
margin-block-start: calc(-1 * calc(var(--space-scaled-xxs-t2t62i, 4px) + 1px));
}
.awsui_header-tag_1r9lg_1sb8v_407.awsui_with-info_1r9lg_1sb8v_415 > .awsui_header-before-slot_1r9lg_1sb8v_421:not(#\9), .awsui_header-before-slot_1r9lg_1sb8v_421.awsui_with-header-text_1r9lg_1sb8v_432:not(#\9) {
display: inline-block;
}
.awsui_header-before-slot_1r9lg_1sb8v_421.awsui_with-header-text_1r9lg_1sb8v_432:not(#\9), .awsui_header-tag_1r9lg_1sb8v_407.awsui_with-info_1r9lg_1sb8v_415:not(#\9) {
margin-inline-end: var(--space-scaled-xs-wbfgrv, 8px);
}
.awsui_header-actions-slot_1r9lg_1sb8v_438:not(#\9) {
display: flex;
flex-shrink: 0;
align-items: center;
min-block-size: calc(var(--font-panel-header-line-height-pqpwyv, 22px) + 2 * calc(var(--space-scaled-xxs-t2t62i, 4px) + 1px));
}
.awsui_header-description_1r9lg_1sb8v_444:not(#\9) {
color: var(--color-text-heading-secondary-urdy5f, #545b64);
font-size: var(--font-size-body-m-kbh530, 14px);
line-height: var(--line-height-body-m-0awzkk, 22px);
margin-block: 0;
}
.awsui_header-buttons_1r9lg_1sb8v_451:not(#\9) {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 0 0 auto;
margin-inline-start: var(--space-xs-edba2s, 8px);
}
.awsui_divider_1r9lg_1sb8v_459:not(#\9) {
border-inline-end: var(--border-divider-section-width-4f9905, 1px) solid var(--color-border-divider-default-g2zqci, #eaeded);
margin-block: var(--space-scaled-xxs-t2t62i, 4px);
margin-inline: var(--space-scaled-xs-wbfgrv, 8px);
}