@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
371 lines (366 loc) • 17 kB
CSS
._column-layout_vj6p7_1rs52_3:not(#\9){
border-collapse:separate;
border-spacing:0;
caption-side:top;
cursor:auto;
direction:ltr;
empty-cells:show;
font-family:serif;
font-size:medium;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-stretch:normal;
line-height:normal;
hyphens:none;
letter-spacing:normal;
list-style:disc outside none;
tab-size:8;
text-align:left;
text-align-last:auto;
text-indent:0;
text-shadow:none;
text-transform:none;
visibility:visible;
white-space:normal;
widows:2;
word-spacing:normal;
box-sizing:border-box;
font-size:1.4rem;
font-size:var(--size-font-body-100-1S0qZw, 1.4rem);
line-height:2.2rem;
line-height:var(--size-lineHeight-body-100-2aIKVt, 2.2rem);
color:#16191f;
color:var(--color-text-body-default-2ZjSsg, #16191f);
font-weight:400;
font-family:"Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
word-wrap:break-word;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13:not(#\9){
margin:calc(2rem / -2);
margin:calc(var(--space-grid-gutter-17GFGI, 2rem) / -2);
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-no-gutters_vj6p7_1rs52_16:not(#\9){
margin:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-variant-text-grid_vj6p7_1rs52_19:not(#\9){
margin:calc(-1 * 2rem);
margin:calc(-1 * var(--space-grid-gutter-17GFGI, 2rem));
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-variant-text-grid_vj6p7_1rs52_19 > *:not(#\9){
border-left:1px solid #eaeded;
border-left:1px solid var(--color-border-divider-default-p5fVsz, #eaeded);
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-variant-text-grid_vj6p7_1rs52_19._grid-breakpoint-default_vj6p7_1rs52_25 > *:not(#\9):nth-child(1n+1){
border-left-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-variant-text-grid_vj6p7_1rs52_19._grid-columns-1_vj6p7_1rs52_28._grid-breakpoint-xxs_vj6p7_1rs52_28 > *:not(#\9):nth-child(1n+1){
border-left-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-variant-text-grid_vj6p7_1rs52_19._grid-columns-1_vj6p7_1rs52_28._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-child(1n+1){
border-left-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-variant-text-grid_vj6p7_1rs52_19._grid-columns-2_vj6p7_1rs52_34._grid-breakpoint-xxs_vj6p7_1rs52_28 > *:not(#\9):nth-child(2n+1){
border-left-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-variant-text-grid_vj6p7_1rs52_19._grid-columns-2_vj6p7_1rs52_34._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-child(2n+1){
border-left-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-variant-text-grid_vj6p7_1rs52_19._grid-columns-3_vj6p7_1rs52_40._grid-breakpoint-xxs_vj6p7_1rs52_28 > *:not(#\9):nth-child(2n+1){
border-left-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-variant-text-grid_vj6p7_1rs52_19._grid-columns-3_vj6p7_1rs52_40._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-child(3n+1){
border-left-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-variant-text-grid_vj6p7_1rs52_19._grid-columns-4_vj6p7_1rs52_46._grid-breakpoint-xxs_vj6p7_1rs52_28 > *:not(#\9):nth-child(2n+1){
border-left-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-variant-text-grid_vj6p7_1rs52_19._grid-columns-4_vj6p7_1rs52_46._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-child(4n+1){
border-left-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13:not(#\9):not(._grid-no-gutters_vj6p7_1rs52_16) > *{
padding:calc(2rem / 2);
padding:calc(var(--space-grid-gutter-17GFGI, 2rem) / 2);
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13:not(#\9):not(._grid-no-gutters_vj6p7_1rs52_16)._grid-variant-text-grid_vj6p7_1rs52_19 > *{
padding:0 2rem;
padding:0 var(--space-grid-gutter-17GFGI, 2rem);
margin:2rem 0;
margin:var(--space-grid-gutter-17GFGI, 2rem) 0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-vertical-borders_vj6p7_1rs52_59 > *:not(#\9){
border-right:1px solid #eaeded;
border-right:1px solid var(--color-border-divider-default-p5fVsz, #eaeded);
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-vertical-borders_vj6p7_1rs52_59._grid-breakpoint-default_vj6p7_1rs52_25 > *:not(#\9):nth-child(1n){
border-right-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-vertical-borders_vj6p7_1rs52_59._grid-columns-1_vj6p7_1rs52_28._grid-breakpoint-xxs_vj6p7_1rs52_28 > *:not(#\9):nth-child(1n){
border-right-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-vertical-borders_vj6p7_1rs52_59._grid-columns-1_vj6p7_1rs52_28._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-child(1n){
border-right-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-vertical-borders_vj6p7_1rs52_59._grid-columns-2_vj6p7_1rs52_34._grid-breakpoint-xxs_vj6p7_1rs52_28 > *:not(#\9):nth-child(2n){
border-right-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-vertical-borders_vj6p7_1rs52_59._grid-columns-2_vj6p7_1rs52_34._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-child(2n){
border-right-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-vertical-borders_vj6p7_1rs52_59._grid-columns-3_vj6p7_1rs52_40._grid-breakpoint-xxs_vj6p7_1rs52_28 > *:not(#\9):nth-child(2n){
border-right-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-vertical-borders_vj6p7_1rs52_59._grid-columns-3_vj6p7_1rs52_40._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-child(3n){
border-right-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-vertical-borders_vj6p7_1rs52_59._grid-columns-4_vj6p7_1rs52_46._grid-breakpoint-xxs_vj6p7_1rs52_28 > *:not(#\9):nth-child(2n){
border-right-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-vertical-borders_vj6p7_1rs52_59._grid-columns-4_vj6p7_1rs52_46._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-child(4n){
border-right-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89 > *:not(#\9){
border-bottom:1px solid #eaeded;
border-bottom:1px solid var(--color-border-divider-default-p5fVsz, #eaeded);
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89 > *:not(#\9):last-child{
border-bottom-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89._grid-columns-2_vj6p7_1rs52_34._grid-breakpoint-xxs_vj6p7_1rs52_28 > *:not(#\9):nth-last-child(2):nth-child(2n+1){
border-bottom-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89._grid-columns-2_vj6p7_1rs52_34._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-last-child(2):nth-child(2n+1){
border-bottom-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89._grid-columns-3_vj6p7_1rs52_40._grid-breakpoint-xxs_vj6p7_1rs52_28 > *:not(#\9):nth-last-child(2):nth-child(2n+1){
border-bottom-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89._grid-columns-3_vj6p7_1rs52_40._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-last-child(2):nth-child(3n+1){
border-bottom-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89._grid-columns-3_vj6p7_1rs52_40._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-last-child(2):nth-child(3n+2){
border-bottom-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89._grid-columns-3_vj6p7_1rs52_40._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-last-child(3):nth-child(3n+1){
border-bottom-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89._grid-columns-4_vj6p7_1rs52_46._grid-breakpoint-xxs_vj6p7_1rs52_28 > *:not(#\9):nth-last-child(2):nth-child(2n+1){
border-bottom-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89._grid-columns-4_vj6p7_1rs52_46._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-last-child(2):nth-child(4n+1){
border-bottom-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89._grid-columns-4_vj6p7_1rs52_46._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-last-child(2):nth-child(4n+2){
border-bottom-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89._grid-columns-4_vj6p7_1rs52_46._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-last-child(2):nth-child(4n+3){
border-bottom-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89._grid-columns-4_vj6p7_1rs52_46._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-last-child(3):nth-child(4n+1){
border-bottom-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89._grid-columns-4_vj6p7_1rs52_46._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-last-child(3):nth-child(4n+2){
border-bottom-width:0;
}
._column-layout_vj6p7_1rs52_3 > ._grid_vj6p7_1rs52_13._grid-horizontal-borders_vj6p7_1rs52_89._grid-columns-4_vj6p7_1rs52_46._grid-breakpoint-xs_vj6p7_1rs52_31 > *:not(#\9):nth-last-child(4):nth-child(4n+1){
border-bottom-width:0;
}
._root_vj6p7_1rs52_135:not(#\9){
border-collapse:separate;
border-spacing:0;
caption-side:top;
cursor:auto;
direction:ltr;
empty-cells:show;
font-family:serif;
font-size:medium;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-stretch:normal;
line-height:normal;
hyphens:none;
letter-spacing:normal;
list-style:disc outside none;
tab-size:8;
text-align:left;
text-align-last:auto;
text-indent:0;
text-shadow:none;
text-transform:none;
visibility:visible;
white-space:normal;
widows:2;
word-spacing:normal;
box-sizing:border-box;
font-size:1.4rem;
font-size:var(--size-font-body-100-1S0qZw, 1.4rem);
line-height:2.2rem;
line-height:var(--size-lineHeight-body-100-2aIKVt, 2.2rem);
color:#16191f;
color:var(--color-text-body-default-2ZjSsg, #16191f);
font-weight:400;
font-family:"Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
min-width:0;
-ms-word-break:break-all;
word-break:break-word;
display:block;
}
._tile-container_vj6p7_1rs52_149:not(#\9){
box-sizing:border-box;
border:1px solid #aab7b8;
border:1px solid var(--color-border-control-default-2xktd9, #aab7b8);
border-radius:2px;
padding:0.8rem 1.6rem;
padding:var(--space-xs-qJuxzO, 0.8rem) var(--space-scaled-m-p3tAne, 1.6rem);
display:flex;
flex-direction:column;
transition:border-color 90ms linear, background-color 90ms linear;
transition:border-color var(--motion-duration-transition-quick-2hvSaJ, 90ms) var(--motion-easing-transition-quick-2nchNs, linear), background-color var(--motion-duration-transition-quick-2hvSaJ, 90ms) var(--motion-easing-transition-quick-2nchNs, linear);
}
._tile-container_vj6p7_1rs52_149._has-metadata_vj6p7_1rs52_158:not(#\9){
padding-bottom:1.2rem;
padding-bottom:var(--space-s-3LgOeB, 1.2rem);
}
._tile-container_vj6p7_1rs52_149._selected_vj6p7_1rs52_161:not(#\9){
border:1px solid #00a1c9;
border:1px solid var(--color-border-item-selected-RH7L5U, #00a1c9);
background:#f1faff;
background:var(--color-background-item-selected-1qprMO, #f1faff);
}
._tile-container_vj6p7_1rs52_149._disabled_vj6p7_1rs52_165:not(#\9){
border:1px solid transparent;
border:1px solid var(--color-border-tiles-disabled-1F3DqM, transparent);
background:#eaeded;
background:var(--color-background-tiles-disabled-p5fVsz, #eaeded);
}
@media (prefers-reduced-motion: reduce){
._tile-container_vj6p7_1rs52_149:not(#\9){
animation:none;
transition:none;
}
}
.awsui-motion-disabled ._tile-container_vj6p7_1rs52_149:not(#\9){
animation:none;
transition:none;
}
._columns_vj6p7_1rs52_180:not(#\9){
display:flex;
flex-wrap:wrap;
margin:calc(2rem / -2);
margin:calc(var(--space-grid-gutter-17GFGI, 2rem) / -2);
}
._columns_vj6p7_1rs52_180._column-1_vj6p7_1rs52_185 > ._tile-container_vj6p7_1rs52_149:not(#\9){
margin:calc(2rem / 2);
margin:calc(var(--space-grid-gutter-17GFGI, 2rem) / 2);
box-sizing:border-box;
flex:0 0;
flex-basis:calc(100% - 2rem);
flex-basis:calc(100% - var(--space-grid-gutter-17GFGI, 2rem));
max-width:calc(100% - 2rem);
max-width:calc(100% - var(--space-grid-gutter-17GFGI, 2rem));
}
._columns_vj6p7_1rs52_180._column-1_vj6p7_1rs52_185 > ._tile-container_vj6p7_1rs52_149._breakpoint-xs_vj6p7_1rs52_192:not(#\9){
flex:0 0;
flex-basis:calc(100% - 2rem);
flex-basis:calc(100% - var(--space-grid-gutter-17GFGI, 2rem));
max-width:calc(100% - 2rem);
max-width:calc(100% - var(--space-grid-gutter-17GFGI, 2rem));
}
._columns_vj6p7_1rs52_180._column-1_vj6p7_1rs52_185 > ._tile-container_vj6p7_1rs52_149._breakpoint-xxs_vj6p7_1rs52_197:not(#\9){
flex:0 0;
flex-basis:calc(100% - 2rem);
flex-basis:calc(100% - var(--space-grid-gutter-17GFGI, 2rem));
max-width:calc(100% - 2rem);
max-width:calc(100% - var(--space-grid-gutter-17GFGI, 2rem));
}
._columns_vj6p7_1rs52_180._column-2_vj6p7_1rs52_202 > ._tile-container_vj6p7_1rs52_149:not(#\9){
margin:calc(2rem / 2);
margin:calc(var(--space-grid-gutter-17GFGI, 2rem) / 2);
box-sizing:border-box;
flex:0 0;
flex-basis:calc(100% - 2rem);
flex-basis:calc(100% - var(--space-grid-gutter-17GFGI, 2rem));
max-width:calc(100% - 2rem);
max-width:calc(100% - var(--space-grid-gutter-17GFGI, 2rem));
}
._columns_vj6p7_1rs52_180._column-2_vj6p7_1rs52_202 > ._tile-container_vj6p7_1rs52_149._breakpoint-xs_vj6p7_1rs52_192:not(#\9){
flex:0 0;
flex-basis:calc(50% - 2rem);
flex-basis:calc(50% - var(--space-grid-gutter-17GFGI, 2rem));
max-width:calc(50% - 2rem);
max-width:calc(50% - var(--space-grid-gutter-17GFGI, 2rem));
}
._columns_vj6p7_1rs52_180._column-2_vj6p7_1rs52_202 > ._tile-container_vj6p7_1rs52_149._breakpoint-xxs_vj6p7_1rs52_197:not(#\9){
flex:0 0;
flex-basis:calc(50% - 2rem);
flex-basis:calc(50% - var(--space-grid-gutter-17GFGI, 2rem));
max-width:calc(50% - 2rem);
max-width:calc(50% - var(--space-grid-gutter-17GFGI, 2rem));
}
._columns_vj6p7_1rs52_180._column-3_vj6p7_1rs52_219 > ._tile-container_vj6p7_1rs52_149:not(#\9){
margin:calc(2rem / 2);
margin:calc(var(--space-grid-gutter-17GFGI, 2rem) / 2);
box-sizing:border-box;
flex:0 0;
flex-basis:calc(100% - 2rem);
flex-basis:calc(100% - var(--space-grid-gutter-17GFGI, 2rem));
max-width:calc(100% - 2rem);
max-width:calc(100% - var(--space-grid-gutter-17GFGI, 2rem));
}
._columns_vj6p7_1rs52_180._column-3_vj6p7_1rs52_219 > ._tile-container_vj6p7_1rs52_149._breakpoint-xs_vj6p7_1rs52_192:not(#\9){
flex:0 0;
flex-basis:calc(33.3333333333% - 2rem);
flex-basis:calc(33.3333333333% - var(--space-grid-gutter-17GFGI, 2rem));
max-width:calc(33.3333333333% - 2rem);
max-width:calc(33.3333333333% - var(--space-grid-gutter-17GFGI, 2rem));
}
._columns_vj6p7_1rs52_180._column-3_vj6p7_1rs52_219 > ._tile-container_vj6p7_1rs52_149._breakpoint-xxs_vj6p7_1rs52_197:not(#\9){
flex:0 0;
flex-basis:calc(50% - 2rem);
flex-basis:calc(50% - var(--space-grid-gutter-17GFGI, 2rem));
max-width:calc(50% - 2rem);
max-width:calc(50% - var(--space-grid-gutter-17GFGI, 2rem));
}
._columns_vj6p7_1rs52_180._column-4_vj6p7_1rs52_236 > ._tile-container_vj6p7_1rs52_149:not(#\9){
margin:calc(2rem / 2);
margin:calc(var(--space-grid-gutter-17GFGI, 2rem) / 2);
box-sizing:border-box;
flex:0 0;
flex-basis:calc(100% - 2rem);
flex-basis:calc(100% - var(--space-grid-gutter-17GFGI, 2rem));
max-width:calc(100% - 2rem);
max-width:calc(100% - var(--space-grid-gutter-17GFGI, 2rem));
}
._columns_vj6p7_1rs52_180._column-4_vj6p7_1rs52_236 > ._tile-container_vj6p7_1rs52_149._breakpoint-xs_vj6p7_1rs52_192:not(#\9){
flex:0 0;
flex-basis:calc(25% - 2rem);
flex-basis:calc(25% - var(--space-grid-gutter-17GFGI, 2rem));
max-width:calc(25% - 2rem);
max-width:calc(25% - var(--space-grid-gutter-17GFGI, 2rem));
}
._columns_vj6p7_1rs52_180._column-4_vj6p7_1rs52_236 > ._tile-container_vj6p7_1rs52_149._breakpoint-xxs_vj6p7_1rs52_197:not(#\9){
flex:0 0;
flex-basis:calc(50% - 2rem);
flex-basis:calc(50% - var(--space-grid-gutter-17GFGI, 2rem));
max-width:calc(50% - 2rem);
max-width:calc(50% - var(--space-grid-gutter-17GFGI, 2rem));
}
._control_vj6p7_1rs52_254:not(#\9){
flex-grow:1;
margin-bottom:1.2rem;
margin-bottom:var(--space-s-3LgOeB, 1.2rem);
}
._control_vj6p7_1rs52_254._no-image_vj6p7_1rs52_258:not(#\9){
margin-bottom:0;
}
._image_vj6p7_1rs52_262:not(#\9){
text-align:center;
flex:none;
}
._image_vj6p7_1rs52_262 > img:not(#\9){
max-width:100%;
}
._image_vj6p7_1rs52_262._disabled_vj6p7_1rs52_165 > img:not(#\9){
opacity:0.3;
}