@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
397 lines (396 loc) • 14.2 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
*/
/*
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
*/
/*
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_icon_h11ix_1tlbw_189:not(#\9) {
position: relative;
display: inline-block;
vertical-align: top;
/* stylelint-disable-next-line selector-max-type */
/* stylelint-disable selector-max-type, selector-max-universal */
/* stylelint-enable selector-max-type, selector-max-universal */
}
.awsui_icon-flex-height_h11ix_1tlbw_197:not(#\9) {
display: inline-flex;
align-items: center;
}
.awsui_icon_h11ix_1tlbw_189 > svg:not(#\9) {
pointer-events: none;
}
.awsui_icon_h11ix_1tlbw_189 > svg:not(#\9) {
fill: none;
}
.awsui_icon_h11ix_1tlbw_189 > svg *:not(#\9) {
stroke: currentColor;
}
.awsui_icon_h11ix_1tlbw_189 > svg .stroke-linejoin-round:not(#\9) {
stroke-linejoin: round;
}
.awsui_icon_h11ix_1tlbw_189 > svg .stroke-linecap-square:not(#\9) {
stroke-linecap: square;
}
.awsui_icon_h11ix_1tlbw_189 > svg .stroke-linecap-round:not(#\9) {
stroke-linecap: round;
}
.awsui_icon_h11ix_1tlbw_189 > svg .filled:not(#\9) {
fill: currentColor;
}
.awsui_icon_h11ix_1tlbw_189 > svg .no-stroke:not(#\9) {
stroke: none;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-small_h11ix_1tlbw_225:not(#\9) {
inline-size: var(--size-icon-normal-jq6jat, 16px);
box-sizing: border-box;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-small-mapped-height_h11ix_1tlbw_229:not(#\9) {
block-size: var(--line-height-body-s-usc3fr, 16px);
padding-block: calc((var(--line-height-body-s-usc3fr, 16px) - var(--size-icon-normal-jq6jat, 16px)) / 2);
padding-inline: 0;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-small_h11ix_1tlbw_225 > svg:not(#\9),
.awsui_icon_h11ix_1tlbw_189.awsui_size-small_h11ix_1tlbw_225 > img:not(#\9) {
inline-size: var(--size-icon-normal-jq6jat, 16px);
block-size: var(--size-icon-normal-jq6jat, 16px);
vertical-align: top;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-small_h11ix_1tlbw_225 > svg:not(#\9),
.awsui_icon_h11ix_1tlbw_189.awsui_size-small_h11ix_1tlbw_225 > svg *:not(#\9) {
stroke-width: 2px;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-normal_h11ix_1tlbw_244:not(#\9) {
inline-size: var(--size-icon-normal-jq6jat, 16px);
box-sizing: border-box;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-normal-mapped-height_h11ix_1tlbw_248:not(#\9) {
block-size: var(--line-height-body-m-0awzkk, 22px);
padding-block: calc((var(--line-height-body-m-0awzkk, 22px) - var(--size-icon-normal-jq6jat, 16px)) / 2);
padding-inline: 0;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-normal_h11ix_1tlbw_244 > svg:not(#\9),
.awsui_icon_h11ix_1tlbw_189.awsui_size-normal_h11ix_1tlbw_244 > img:not(#\9) {
inline-size: var(--size-icon-normal-jq6jat, 16px);
block-size: var(--size-icon-normal-jq6jat, 16px);
vertical-align: top;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-normal_h11ix_1tlbw_244 > svg:not(#\9),
.awsui_icon_h11ix_1tlbw_189.awsui_size-normal_h11ix_1tlbw_244 > svg *:not(#\9) {
stroke-width: 2px;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-medium_h11ix_1tlbw_263:not(#\9) {
inline-size: var(--size-icon-medium-l5o7fk, 16px);
box-sizing: border-box;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-medium-mapped-height_h11ix_1tlbw_267:not(#\9) {
block-size: var(--line-height-heading-l-4wuokq, 22px);
padding-block: calc((var(--line-height-heading-l-4wuokq, 22px) - var(--size-icon-medium-l5o7fk, 16px)) / 2);
padding-inline: 0;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-medium_h11ix_1tlbw_263 > svg:not(#\9),
.awsui_icon_h11ix_1tlbw_189.awsui_size-medium_h11ix_1tlbw_263 > img:not(#\9) {
inline-size: var(--size-icon-medium-l5o7fk, 16px);
block-size: var(--size-icon-medium-l5o7fk, 16px);
vertical-align: top;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-medium_h11ix_1tlbw_263 > svg:not(#\9),
.awsui_icon_h11ix_1tlbw_189.awsui_size-medium_h11ix_1tlbw_263 > svg *:not(#\9) {
stroke-width: 1.6px;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-big_h11ix_1tlbw_282:not(#\9) {
inline-size: var(--size-icon-big-0l8skx, 32px);
box-sizing: border-box;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-big-mapped-height_h11ix_1tlbw_286:not(#\9) {
block-size: var(--line-height-heading-xl-gnbljj, 36px);
padding-block: calc((var(--line-height-heading-xl-gnbljj, 36px) - var(--size-icon-big-0l8skx, 32px)) / 2);
padding-inline: 0;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-big_h11ix_1tlbw_282 > svg:not(#\9),
.awsui_icon_h11ix_1tlbw_189.awsui_size-big_h11ix_1tlbw_282 > img:not(#\9) {
inline-size: var(--size-icon-big-0l8skx, 32px);
block-size: var(--size-icon-big-0l8skx, 32px);
vertical-align: top;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-big_h11ix_1tlbw_282 > svg:not(#\9),
.awsui_icon_h11ix_1tlbw_189.awsui_size-big_h11ix_1tlbw_282 > svg *:not(#\9) {
stroke-width: 1.5px;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-large_h11ix_1tlbw_301:not(#\9) {
inline-size: var(--size-icon-large-jawmww, 48px);
box-sizing: border-box;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-large-mapped-height_h11ix_1tlbw_305:not(#\9) {
block-size: var(--line-height-display-l-0oa5q5, 56px);
padding-block: calc((var(--line-height-display-l-0oa5q5, 56px) - var(--size-icon-large-jawmww, 48px)) / 2);
padding-inline: 0;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-large_h11ix_1tlbw_301 > svg:not(#\9),
.awsui_icon_h11ix_1tlbw_189.awsui_size-large_h11ix_1tlbw_301 > img:not(#\9) {
inline-size: var(--size-icon-large-jawmww, 48px);
block-size: var(--size-icon-large-jawmww, 48px);
vertical-align: top;
}
.awsui_icon_h11ix_1tlbw_189.awsui_size-large_h11ix_1tlbw_301 > svg:not(#\9),
.awsui_icon_h11ix_1tlbw_189.awsui_size-large_h11ix_1tlbw_301 > svg *:not(#\9) {
stroke-width: 1.333px;
}
.awsui_icon_h11ix_1tlbw_189.awsui_variant-normal_h11ix_1tlbw_320:not(#\9) {
color: currentColor;
}
.awsui_icon_h11ix_1tlbw_189.awsui_variant-disabled_h11ix_1tlbw_323:not(#\9) {
color: var(--color-text-interactive-disabled-jwju02, #aab7b8);
}
.awsui_icon_h11ix_1tlbw_189.awsui_variant-inverted_h11ix_1tlbw_326:not(#\9) {
color: var(--color-text-inverted-brc9ln, #ffffff);
}
.awsui_icon_h11ix_1tlbw_189.awsui_variant-subtle_h11ix_1tlbw_329:not(#\9) {
color: var(--color-text-icon-subtle-x6qw4s, #687078);
}
.awsui_icon_h11ix_1tlbw_189.awsui_variant-warning_h11ix_1tlbw_332:not(#\9) {
color: var(--color-text-status-warning-a2jajm, #906806);
}
.awsui_icon_h11ix_1tlbw_189.awsui_variant-error_h11ix_1tlbw_335:not(#\9) {
color: var(--color-text-status-error-oa993i, #d13212);
}
.awsui_icon_h11ix_1tlbw_189.awsui_variant-success_h11ix_1tlbw_338:not(#\9) {
color: var(--color-text-status-success-z431uf, #1d8102);
}
.awsui_icon_h11ix_1tlbw_189.awsui_variant-link_h11ix_1tlbw_341:not(#\9) {
color: var(--color-text-link-default-owstl4, #0073bb);
}
.awsui_icon_h11ix_1tlbw_189:not(#\9):is(.awsui_name-angle-left-double_h11ix_1tlbw_344,
.awsui_name-angle-left_h11ix_1tlbw_344,
.awsui_name-angle-right-double_h11ix_1tlbw_346,
.awsui_name-angle-right_h11ix_1tlbw_346,
.awsui_name-arrow-left_h11ix_1tlbw_348,
.awsui_name-arrow-right_h11ix_1tlbw_349,
.awsui_name-caret-left-filled_h11ix_1tlbw_350,
.awsui_name-caret-right-filled_h11ix_1tlbw_351,
.awsui_name-audio-full_h11ix_1tlbw_352,
.awsui_name-audio-half_h11ix_1tlbw_353,
.awsui_name-audio-off_h11ix_1tlbw_354,
.awsui_name-external_h11ix_1tlbw_355,
.awsui_name-redo_h11ix_1tlbw_356,
.awsui_name-resize-area_h11ix_1tlbw_357,
.awsui_name-send_h11ix_1tlbw_358,
.awsui_name-shrink_h11ix_1tlbw_359,
.awsui_name-undo_h11ix_1tlbw_360,
.awsui_name-view-vertical_h11ix_1tlbw_361) {
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
}
.awsui_icon_h11ix_1tlbw_189:not(#\9):is(.awsui_name-angle-left-double_h11ix_1tlbw_344,
.awsui_name-angle-left_h11ix_1tlbw_344,
.awsui_name-angle-right-double_h11ix_1tlbw_346,
.awsui_name-angle-right_h11ix_1tlbw_346,
.awsui_name-arrow-left_h11ix_1tlbw_348,
.awsui_name-arrow-right_h11ix_1tlbw_349,
.awsui_name-caret-left-filled_h11ix_1tlbw_350,
.awsui_name-caret-right-filled_h11ix_1tlbw_351,
.awsui_name-audio-full_h11ix_1tlbw_352,
.awsui_name-audio-half_h11ix_1tlbw_353,
.awsui_name-audio-off_h11ix_1tlbw_354,
.awsui_name-external_h11ix_1tlbw_355,
.awsui_name-redo_h11ix_1tlbw_356,
.awsui_name-resize-area_h11ix_1tlbw_357,
.awsui_name-send_h11ix_1tlbw_358,
.awsui_name-shrink_h11ix_1tlbw_359,
.awsui_name-undo_h11ix_1tlbw_360,
.awsui_name-view-vertical_h11ix_1tlbw_361):dir(rtl) {
transform: scaleX(-1);
}
.awsui_badge_h11ix_1tlbw_385:not(#\9)::after {
content: "";
position: absolute;
inline-size: 6px;
block-size: 6px;
border-start-start-radius: 4px;
border-start-end-radius: 4px;
border-end-start-radius: 4px;
border-end-end-radius: 4px;
background-color: var(--color-background-badge-icon-f6ehyg, #d13212);
inset-block-start: 0px;
inset-inline-end: -3px;
}