UNPKG

@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
._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; }