@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
422 lines (405 loc) • 14.7 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_1bt7n_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;
-webkit-hyphens: none;
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_1bt7n_190:not(#\9):not(.awsui_refresh_1r9lg_1bt7n_190) {
cursor: pointer;
min-inline-size: 40px;
}
.awsui_drawer-content-side_1r9lg_1bt7n_195:not(#\9) {
display: flex;
align-items: center;
block-size: 100%;
overflow: auto;
}
.awsui_drawer-content-side_1r9lg_1bt7n_195 > [aria-hidden=true]:not(#\9), .awsui_drawer-closed_1r9lg_1bt7n_190.awsui_refresh_1r9lg_1bt7n_190 > .awsui_drawer-content-side_1r9lg_1bt7n_195:not(#\9) {
display: none;
}
.awsui_drawer-closed_1r9lg_1bt7n_190:not(#\9):not(.awsui_refresh_1r9lg_1bt7n_190) > .awsui_drawer-content-side_1r9lg_1bt7n_195 {
inline-size: 40px;
}
.awsui_drawer-closed_1r9lg_1bt7n_190:not(#\9):not(.awsui_refresh_1r9lg_1bt7n_190) > .awsui_drawer-content-side_1r9lg_1bt7n_195:hover {
background: var(--color-background-layout-panel-hover-ogjd65, #eaeded);
}
:not(#\9):not(.awsui_drawer-closed_1r9lg_1bt7n_190) > .awsui_drawer-content-bottom_1r9lg_1bt7n_211 {
overflow-y: auto;
position: absolute;
inset: 0;
clip-path: border-box;
}
.awsui_position-bottom_1r9lg_1bt7n_218:not(#\9) {
position: fixed;
overflow-y: auto;
border-block-start: var(--border-panel-top-width-6k0jao, 0px) solid var(--color-border-divider-panel-bottom-qg365q, rgba(0, 28, 36, 0.15));
/*
Removed the position fixed with the AppLayout refactor because the
SplitPanel is no longer in fixed position in the DOM.
*/
}
.awsui_position-bottom_1r9lg_1bt7n_218:not(#\9):not(.awsui_refresh_1r9lg_1bt7n_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_1bt7n_218.awsui_drawer-closed_1r9lg_1bt7n_190:not(#\9) {
overflow: hidden;
}
.awsui_position-bottom_1r9lg_1bt7n_218.awsui_drawer-closed_1r9lg_1bt7n_190:not(#\9):hover {
background: var(--color-background-layout-panel-hover-ogjd65, #eaeded);
}
.awsui_position-bottom_1r9lg_1bt7n_218 > .awsui_drawer-content-bottom_1r9lg_1bt7n_211 > [aria-hidden=true]:not(#\9) {
display: none;
}
.awsui_position-bottom_1r9lg_1bt7n_218.awsui_refresh_1r9lg_1bt7n_190:not(#\9) {
position: relative;
}
.awsui_position-side_1r9lg_1bt7n_245: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_1bt7n_245.awsui_with-toolbar_1r9lg_1bt7n_250:not(#\9) {
box-shadow: none;
}
.awsui_slider-wrapper-bottom_1r9lg_1bt7n_254: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_1bt7n_265: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_1bt7n_265.awsui_with-toolbar_1r9lg_1bt7n_250:not(#\9) {
position: unset;
}
.awsui_open-button-side_1r9lg_1bt7n_279: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_1bt7n_288: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_1bt7n_298 > .awsui_drawer-content-bottom_1r9lg_1bt7n_211 > .awsui_pane-header-wrapper-bottom_1r9lg_1bt7n_288:not(#\9) {
padding-block: 0;
padding-inline: var(--space-l-f4l5gr, 20px);
}
.awsui_drawer-disable-content-paddings_1r9lg_1bt7n_302 > .awsui_drawer-content-bottom_1r9lg_1bt7n_211 > .awsui_pane-header-wrapper-bottom_1r9lg_1bt7n_288:not(#\9) {
padding-block: 0;
padding-inline: var(--space-l-f4l5gr, 20px);
}
:not(#\9):not(.awsui_drawer-closed_1r9lg_1bt7n_190) > .awsui_drawer-content-bottom_1r9lg_1bt7n_211 > .awsui_pane-header-wrapper-bottom_1r9lg_1bt7n_288 {
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_1bt7n_250:not(#\9):not(.awsui_drawer-closed_1r9lg_1bt7n_190) > .awsui_drawer-content-bottom_1r9lg_1bt7n_211 > .awsui_pane-header-wrapper-bottom_1r9lg_1bt7n_288 {
border-color: transparent;
}
.awsui_content-bottom_1r9lg_1bt7n_314: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_1bt7n_250 > .awsui_drawer-content-bottom_1r9lg_1bt7n_211 > .awsui_content-bottom_1r9lg_1bt7n_314:not(#\9) {
margin-block-start: 0px;
}
.awsui_drawer-mobile_1r9lg_1bt7n_298 > .awsui_drawer-content-bottom_1r9lg_1bt7n_211 > .awsui_content-bottom_1r9lg_1bt7n_314:not(#\9) {
padding-block: 0;
padding-inline: var(--space-l-f4l5gr, 20px);
}
.awsui_drawer-disable-content-paddings_1r9lg_1bt7n_302 > .awsui_drawer-content-bottom_1r9lg_1bt7n_211 > .awsui_content-bottom_1r9lg_1bt7n_314:not(#\9) {
padding-block: 0;
padding-inline: 0;
}
.awsui_pane-bottom-center-align_1r9lg_1bt7n_333:not(#\9) {
display: flex;
justify-content: center;
}
.awsui_pane-bottom-content-nav-padding_1r9lg_1bt7n_338: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_1bt7n_342: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_1bt7n_346:not(#\9) {
flex-grow: 1;
max-inline-size: 100%;
}
.awsui_content-side_1r9lg_1bt7n_351: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_1bt7n_351.awsui_with-toolbar_1r9lg_1bt7n_250:not(#\9) {
position: absolute;
}
.awsui_content-side_1r9lg_1bt7n_351 > .awsui_pane-header-wrapper-side_1r9lg_1bt7n_363: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_1bt7n_351.awsui_with-toolbar_1r9lg_1bt7n_250 > .awsui_pane-header-wrapper-side_1r9lg_1bt7n_363:not(#\9) {
border-color: transparent;
}
.awsui_content-side_1r9lg_1bt7n_351 > .awsui_pane-content-wrapper-side_1r9lg_1bt7n_372: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_1bt7n_351.awsui_with-toolbar_1r9lg_1bt7n_250 > .awsui_pane-content-wrapper-side_1r9lg_1bt7n_372:not(#\9) {
margin-block-start: 0px;
}
.awsui_header_1r9lg_1bt7n_383:not(#\9) {
display: flex;
flex: auto;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
inline-size: 100%;
margin-block: var(--size-vertical-panel-icon-offset-zd2rli, 15px);
margin-inline: 0;
}
.awsui_header_1r9lg_1bt7n_383.awsui_with-toolbar_1r9lg_1bt7n_250:not(#\9) {
margin-block: 14px;
}
.awsui_header-text_1r9lg_1bt7n_396:not(#\9) {
font-size: var(--font-panel-header-size-ey4ywd, 18px);
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);
padding-block: 0;
padding-inline: 0;
margin-block: 0;
margin-inline: 0;
margin-block-start: calc(var(--space-scaled-xxs-t2t62i, 4px) + 1px);
}
.awsui_header-actions_1r9lg_1bt7n_409: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_1bt7n_417: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);
}