@cloudscape-design/components-themeable 3.0.347 → 3.0.349
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/app-layout/visual-refresh/drawers.scss +2 -0
- package/lib/internal/scss/app-layout/visual-refresh/layout.scss +3 -3
- package/lib/internal/scss/app-layout/visual-refresh/navigation.scss +1 -0
- package/lib/internal/scss/app-layout/visual-refresh/tools.scss +1 -0
- package/lib/internal/scss/box/text.scss +1 -1
- package/lib/internal/scss/button/styles.scss +1 -1
- package/lib/internal/scss/button-dropdown/category-elements/styles.scss +2 -3
- package/lib/internal/scss/button-dropdown/item-element/styles.scss +2 -2
- package/lib/internal/scss/cards/styles.scss +3 -9
- package/lib/internal/scss/container/shared.scss +2 -2
- package/lib/internal/scss/container/styles.scss +3 -0
- package/lib/internal/scss/expandable-section/styles.scss +2 -2
- package/lib/internal/scss/header/styles.scss +61 -58
- package/lib/internal/scss/modal/styles.scss +1 -1
- package/lib/internal/scss/segmented-control/segment.scss +1 -1
- package/lib/internal/scss/side-navigation/styles.scss +4 -0
- package/lib/internal/scss/table/styles.scss +6 -14
- package/lib/internal/scss/tabs/tab-header-bar.scss +4 -1
- package/lib/internal/scss/tiles/styles.scss +8 -2
- package/lib/internal/scss/wizard/styles.scss +5 -5
- package/lib/internal/template/app-layout/styles.css.js +17 -17
- package/lib/internal/template/app-layout/styles.scoped.css +21 -21
- package/lib/internal/template/app-layout/styles.selectors.js +17 -17
- package/lib/internal/template/app-layout/visual-refresh/styles.css.js +69 -69
- package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +173 -169
- package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +69 -69
- package/lib/internal/template/area-chart/chart-container.d.ts +2 -2
- package/lib/internal/template/area-chart/chart-container.d.ts.map +1 -1
- package/lib/internal/template/area-chart/chart-container.js +1 -1
- package/lib/internal/template/area-chart/chart-container.js.map +1 -1
- package/lib/internal/template/area-chart/interfaces.d.ts +5 -1
- package/lib/internal/template/area-chart/interfaces.d.ts.map +1 -1
- package/lib/internal/template/area-chart/interfaces.js.map +1 -1
- package/lib/internal/template/area-chart/internal.d.ts +1 -1
- package/lib/internal/template/area-chart/internal.d.ts.map +1 -1
- package/lib/internal/template/area-chart/internal.js +2 -2
- package/lib/internal/template/area-chart/internal.js.map +1 -1
- package/lib/internal/template/attribute-editor/interfaces.d.ts +7 -0
- package/lib/internal/template/attribute-editor/interfaces.d.ts.map +1 -1
- package/lib/internal/template/attribute-editor/interfaces.js.map +1 -1
- package/lib/internal/template/attribute-editor/internal.d.ts.map +1 -1
- package/lib/internal/template/attribute-editor/internal.js +2 -2
- package/lib/internal/template/attribute-editor/internal.js.map +1 -1
- package/lib/internal/template/attribute-editor/row.d.ts +3 -2
- package/lib/internal/template/attribute-editor/row.d.ts.map +1 -1
- package/lib/internal/template/attribute-editor/row.js +2 -2
- package/lib/internal/template/attribute-editor/row.js.map +1 -1
- package/lib/internal/template/box/styles.css.js +189 -189
- package/lib/internal/template/box/styles.scoped.css +258 -258
- package/lib/internal/template/box/styles.selectors.js +189 -189
- package/lib/internal/template/button/styles.css.js +20 -20
- package/lib/internal/template/button/styles.scoped.css +154 -154
- package/lib/internal/template/button/styles.selectors.js +20 -20
- package/lib/internal/template/button-dropdown/category-elements/styles.css.js +13 -13
- package/lib/internal/template/button-dropdown/category-elements/styles.scoped.css +25 -25
- package/lib/internal/template/button-dropdown/category-elements/styles.selectors.js +13 -13
- package/lib/internal/template/button-dropdown/item-element/styles.css.js +14 -14
- package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +20 -20
- package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +14 -14
- package/lib/internal/template/cards/styles.css.js +38 -38
- package/lib/internal/template/cards/styles.scoped.css +57 -62
- package/lib/internal/template/cards/styles.selectors.js +38 -38
- package/lib/internal/template/container/styles.css.js +28 -28
- package/lib/internal/template/container/styles.scoped.css +57 -54
- package/lib/internal/template/container/styles.selectors.js +28 -28
- package/lib/internal/template/content-layout/styles.css.js +7 -7
- package/lib/internal/template/content-layout/styles.scoped.css +13 -13
- package/lib/internal/template/content-layout/styles.selectors.js +7 -7
- package/lib/internal/template/expandable-section/styles.css.js +29 -29
- package/lib/internal/template/expandable-section/styles.scoped.css +61 -61
- package/lib/internal/template/expandable-section/styles.selectors.js +29 -29
- package/lib/internal/template/flashbar/styles.css.js +46 -46
- package/lib/internal/template/flashbar/styles.scoped.css +146 -146
- package/lib/internal/template/flashbar/styles.selectors.js +46 -46
- package/lib/internal/template/form-field/internal.js +3 -2
- package/lib/internal/template/form-field/internal.js.map +1 -1
- package/lib/internal/template/header/internal.d.ts.map +1 -1
- package/lib/internal/template/header/internal.js +5 -5
- package/lib/internal/template/header/internal.js.map +1 -1
- package/lib/internal/template/header/styles.css.js +33 -44
- package/lib/internal/template/header/styles.scoped.css +85 -91
- package/lib/internal/template/header/styles.selectors.js +33 -44
- package/lib/internal/template/help-panel/styles.css.js +4 -4
- package/lib/internal/template/help-panel/styles.scoped.css +80 -80
- package/lib/internal/template/help-panel/styles.selectors.js +4 -4
- package/lib/internal/template/icon/styles.css.js +21 -21
- package/lib/internal/template/icon/styles.scoped.css +54 -54
- package/lib/internal/template/icon/styles.selectors.js +21 -21
- package/lib/internal/template/internal/analytics/components/analytics-funnel.d.ts.map +1 -1
- package/lib/internal/template/internal/analytics/components/analytics-funnel.js +14 -13
- package/lib/internal/template/internal/analytics/components/analytics-funnel.js.map +1 -1
- package/lib/internal/template/internal/analytics/context/analytics-context.d.ts +6 -7
- package/lib/internal/template/internal/analytics/context/analytics-context.d.ts.map +1 -1
- package/lib/internal/template/internal/analytics/context/analytics-context.js +2 -6
- package/lib/internal/template/internal/analytics/context/analytics-context.js.map +1 -1
- package/lib/internal/template/internal/analytics/hooks/use-funnel.d.ts +4 -7
- package/lib/internal/template/internal/analytics/hooks/use-funnel.d.ts.map +1 -1
- package/lib/internal/template/internal/analytics/hooks/use-funnel.js +9 -7
- package/lib/internal/template/internal/analytics/hooks/use-funnel.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +92 -80
- package/lib/internal/template/internal/components/button-trigger/index.d.ts +2 -1
- package/lib/internal/template/internal/components/button-trigger/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/button-trigger/index.js +2 -2
- package/lib/internal/template/internal/components/button-trigger/index.js.map +1 -1
- package/lib/internal/template/internal/components/cartesian-chart/interfaces.d.ts +10 -2
- package/lib/internal/template/internal/components/cartesian-chart/interfaces.d.ts.map +1 -1
- package/lib/internal/template/internal/components/cartesian-chart/interfaces.js.map +1 -1
- package/lib/internal/template/internal/components/dropdown/index.d.ts +1 -1
- package/lib/internal/template/internal/components/dropdown/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/dropdown/index.js +4 -4
- package/lib/internal/template/internal/components/dropdown/index.js.map +1 -1
- package/lib/internal/template/internal/components/dropdown/interfaces.d.ts +8 -0
- package/lib/internal/template/internal/components/dropdown/interfaces.d.ts.map +1 -1
- package/lib/internal/template/internal/components/dropdown/interfaces.js.map +1 -1
- package/lib/internal/template/internal/components/menu-dropdown/styles.css.js +7 -7
- package/lib/internal/template/internal/components/menu-dropdown/styles.scoped.css +14 -14
- package/lib/internal/template/internal/components/menu-dropdown/styles.selectors.js +7 -7
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/generated/theming/index.cjs +164 -120
- package/lib/internal/template/internal/generated/theming/index.js +164 -120
- package/lib/internal/template/link/internal.d.ts.map +1 -1
- package/lib/internal/template/link/internal.js +3 -2
- package/lib/internal/template/link/internal.js.map +1 -1
- package/lib/internal/template/link/styles.css.js +20 -20
- package/lib/internal/template/link/styles.scoped.css +83 -83
- package/lib/internal/template/link/styles.selectors.js +20 -20
- package/lib/internal/template/mixed-line-bar-chart/internal.d.ts +1 -1
- package/lib/internal/template/mixed-line-bar-chart/internal.d.ts.map +1 -1
- package/lib/internal/template/mixed-line-bar-chart/internal.js +2 -2
- package/lib/internal/template/mixed-line-bar-chart/internal.js.map +1 -1
- package/lib/internal/template/modal/styles.css.js +23 -23
- package/lib/internal/template/modal/styles.scoped.css +40 -40
- package/lib/internal/template/modal/styles.selectors.js +23 -23
- package/lib/internal/template/pagination/styles.css.js +9 -9
- package/lib/internal/template/pagination/styles.scoped.css +24 -24
- package/lib/internal/template/pagination/styles.selectors.js +9 -9
- package/lib/internal/template/popover/styles.css.js +50 -50
- package/lib/internal/template/popover/styles.scoped.css +65 -65
- package/lib/internal/template/popover/styles.selectors.js +50 -50
- package/lib/internal/template/property-filter/index.d.ts.map +1 -1
- package/lib/internal/template/property-filter/index.js +4 -3
- package/lib/internal/template/property-filter/index.js.map +1 -1
- package/lib/internal/template/property-filter/interfaces.d.ts +16 -5
- package/lib/internal/template/property-filter/interfaces.d.ts.map +1 -1
- package/lib/internal/template/property-filter/interfaces.js.map +1 -1
- package/lib/internal/template/s3-resource-selector/index.d.ts.map +1 -1
- package/lib/internal/template/s3-resource-selector/index.js +2 -2
- package/lib/internal/template/s3-resource-selector/index.js.map +1 -1
- package/lib/internal/template/s3-resource-selector/interfaces.d.ts +7 -0
- package/lib/internal/template/s3-resource-selector/interfaces.d.ts.map +1 -1
- package/lib/internal/template/s3-resource-selector/interfaces.js.map +1 -1
- package/lib/internal/template/s3-resource-selector/s3-in-context/index.d.ts +1 -0
- package/lib/internal/template/s3-resource-selector/s3-in-context/index.d.ts.map +1 -1
- package/lib/internal/template/s3-resource-selector/s3-in-context/index.js +2 -2
- package/lib/internal/template/s3-resource-selector/s3-in-context/index.js.map +1 -1
- package/lib/internal/template/segmented-control/styles.css.js +14 -14
- package/lib/internal/template/segmented-control/styles.scoped.css +35 -35
- package/lib/internal/template/segmented-control/styles.selectors.js +14 -14
- package/lib/internal/template/select/utils/use-select.d.ts +5 -7
- package/lib/internal/template/select/utils/use-select.d.ts.map +1 -1
- package/lib/internal/template/select/utils/use-select.js +6 -0
- package/lib/internal/template/select/utils/use-select.js.map +1 -1
- package/lib/internal/template/side-navigation/internal.d.ts.map +1 -1
- package/lib/internal/template/side-navigation/internal.js +3 -1
- package/lib/internal/template/side-navigation/internal.js.map +1 -1
- package/lib/internal/template/side-navigation/styles.css.js +28 -27
- package/lib/internal/template/side-navigation/styles.scoped.css +52 -48
- package/lib/internal/template/side-navigation/styles.selectors.js +28 -27
- package/lib/internal/template/spinner/styles.css.js +13 -13
- package/lib/internal/template/spinner/styles.scoped.css +22 -22
- package/lib/internal/template/spinner/styles.selectors.js +13 -13
- package/lib/internal/template/split-panel/styles.css.js +56 -56
- package/lib/internal/template/split-panel/styles.scoped.css +80 -80
- package/lib/internal/template/split-panel/styles.selectors.js +56 -56
- package/lib/internal/template/table/header-cell/styles.css.js +24 -24
- package/lib/internal/template/table/header-cell/styles.scoped.css +41 -41
- package/lib/internal/template/table/header-cell/styles.selectors.js +24 -24
- package/lib/internal/template/table/styles.css.js +34 -34
- package/lib/internal/template/table/styles.scoped.css +45 -52
- package/lib/internal/template/table/styles.selectors.js +34 -34
- package/lib/internal/template/tabs/styles.css.js +21 -21
- package/lib/internal/template/tabs/styles.scoped.css +44 -41
- package/lib/internal/template/tabs/styles.selectors.js +21 -21
- package/lib/internal/template/tag-editor/styles.css.js +3 -3
- package/lib/internal/template/tag-editor/styles.scoped.css +11 -11
- package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
- package/lib/internal/template/text-content/styles.css.js +1 -1
- package/lib/internal/template/text-content/styles.scoped.css +71 -71
- package/lib/internal/template/text-content/styles.selectors.js +1 -1
- package/lib/internal/template/tiles/styles.css.js +29 -28
- package/lib/internal/template/tiles/styles.scoped.css +76 -70
- package/lib/internal/template/tiles/styles.selectors.js +29 -28
- package/lib/internal/template/tiles/tile.d.ts.map +1 -1
- package/lib/internal/template/tiles/tile.js +3 -1
- package/lib/internal/template/tiles/tile.js.map +1 -1
- package/lib/internal/template/top-navigation/1.0-beta/styles.css.js +25 -25
- package/lib/internal/template/top-navigation/1.0-beta/styles.scoped.css +45 -45
- package/lib/internal/template/top-navigation/1.0-beta/styles.selectors.js +25 -25
- package/lib/internal/template/top-navigation/styles.css.js +47 -47
- package/lib/internal/template/top-navigation/styles.scoped.css +74 -74
- package/lib/internal/template/top-navigation/styles.selectors.js +47 -47
- package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/styles.css.js +20 -20
- package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/styles.scoped.css +22 -22
- package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/styles.selectors.js +20 -20
- package/lib/internal/template/wizard/interfaces.d.ts +10 -3
- package/lib/internal/template/wizard/interfaces.d.ts.map +1 -1
- package/lib/internal/template/wizard/interfaces.js.map +1 -1
- package/lib/internal/template/wizard/internal.d.ts +1 -1
- package/lib/internal/template/wizard/internal.d.ts.map +1 -1
- package/lib/internal/template/wizard/internal.js +5 -5
- package/lib/internal/template/wizard/internal.js.map +1 -1
- package/lib/internal/template/wizard/styles.css.js +31 -31
- package/lib/internal/template/wizard/styles.scoped.css +67 -67
- package/lib/internal/template/wizard/styles.selectors.js +31 -31
- package/lib/internal/template/wizard/wizard-form.d.ts +2 -1
- package/lib/internal/template/wizard/wizard-form.d.ts.map +1 -1
- package/lib/internal/template/wizard/wizard-form.js +2 -2
- package/lib/internal/template/wizard/wizard-form.js.map +1 -1
- package/package.json +1 -1
|
@@ -61,6 +61,7 @@
|
|
|
61
61
|
height: 100%;
|
|
62
62
|
overflow-y: hidden;
|
|
63
63
|
overflow-x: hidden;
|
|
64
|
+
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
64
65
|
overscroll-behavior-y: contain;
|
|
65
66
|
|
|
66
67
|
&:not(.has-multiple-triggers).has-open-drawer {
|
|
@@ -124,6 +125,7 @@
|
|
|
124
125
|
height: 100%;
|
|
125
126
|
overflow-y: auto;
|
|
126
127
|
overflow-x: hidden;
|
|
128
|
+
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
127
129
|
overscroll-behavior-y: contain;
|
|
128
130
|
pointer-events: auto;
|
|
129
131
|
word-wrap: break-word;
|
|
@@ -211,7 +211,7 @@ explicitly set in script.
|
|
|
211
211
|
|
|
212
212
|
// The Header gap is slightly smaller when it comes after the Breadcrumbs
|
|
213
213
|
&.has-breadcrumbs.has-header {
|
|
214
|
-
#{custom-props.$headerGap}: #{awsui.$space-scaled-
|
|
214
|
+
#{custom-props.$headerGap}: #{awsui.$space-scaled-xs};
|
|
215
215
|
}
|
|
216
216
|
|
|
217
217
|
// Set the Main gap when it follows the Notifications
|
|
@@ -236,13 +236,13 @@ explicitly set in script.
|
|
|
236
236
|
|
|
237
237
|
// Set the Main gap when it follows the Header
|
|
238
238
|
&.has-header {
|
|
239
|
-
#{custom-props.$mainGap}: #{awsui.$space-
|
|
239
|
+
#{custom-props.$mainGap}: #{awsui.$space-content-header-padding-bottom};
|
|
240
240
|
}
|
|
241
241
|
|
|
242
242
|
// Set the Main gap when it is the first page content
|
|
243
243
|
&.content-first-child-main:not(.is-overlap-disabled),
|
|
244
244
|
&.content-first-child-main.is-overlap-disabled:not(.disable-content-paddings) {
|
|
245
|
-
#{custom-props.$mainGap}: #{awsui.$space-scaled-
|
|
245
|
+
#{custom-props.$mainGap}: #{awsui.$space-scaled-s};
|
|
246
246
|
}
|
|
247
247
|
|
|
248
248
|
// Set an extension of the overlap and an additional gap on top to be used by content-layout without header
|
|
@@ -66,6 +66,7 @@ viewport size and state of the Tools drawer.
|
|
|
66
66
|
height: 100%;
|
|
67
67
|
overflow-y: auto;
|
|
68
68
|
overflow-x: hidden;
|
|
69
|
+
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
69
70
|
overscroll-behavior-y: contain;
|
|
70
71
|
pointer-events: auto;
|
|
71
72
|
position: relative;
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
letter-spacing: awsui.$font-button-letter-spacing;
|
|
81
81
|
border-radius: awsui.$border-radius-button;
|
|
82
82
|
border: styles.$control-border-width solid;
|
|
83
|
-
padding: styles.$control-padding-vertical awsui.$space-
|
|
83
|
+
padding: styles.$control-padding-vertical awsui.$space-button-horizontal;
|
|
84
84
|
display: inline-block; // for <a> as a button
|
|
85
85
|
text-decoration: none;
|
|
86
86
|
cursor: pointer;
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
@use '../../internal/styles' as styles;
|
|
7
7
|
@use '../../internal/styles/tokens' as awsui;
|
|
8
8
|
|
|
9
|
-
$option-padding-horizontal: awsui.$space-l;
|
|
10
9
|
.header {
|
|
11
10
|
position: relative;
|
|
12
11
|
margin: 0;
|
|
@@ -21,7 +20,7 @@ $option-padding-horizontal: awsui.$space-l;
|
|
|
21
20
|
// to compensate for the loss of padding due to the removal of the left and right borders
|
|
22
21
|
// and differences in default divider + selected border widths (visual refresh)
|
|
23
22
|
padding: styles.$option-padding-with-border-placeholder-vertical
|
|
24
|
-
calc(#{
|
|
23
|
+
calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
|
|
25
24
|
z-index: 1;
|
|
26
25
|
|
|
27
26
|
&.disabled {
|
|
@@ -46,7 +45,7 @@ $option-padding-horizontal: awsui.$space-l;
|
|
|
46
45
|
background-color: awsui.$color-background-dropdown-item-hover;
|
|
47
46
|
color: awsui.$color-text-dropdown-item-highlighted;
|
|
48
47
|
// reset padding when adding border back in
|
|
49
|
-
padding: styles.$option-padding-vertical
|
|
48
|
+
padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
|
|
50
49
|
border: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
|
|
51
50
|
border-radius: awsui.$border-radius-item;
|
|
52
51
|
z-index: 2;
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
@include styles.text-wrapping;
|
|
78
78
|
display: flex;
|
|
79
79
|
align-items: flex-start;
|
|
80
|
-
padding: styles.$option-padding-vertical awsui.$space-
|
|
80
|
+
padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
|
|
81
81
|
color: inherit;
|
|
82
82
|
text-decoration: none;
|
|
83
83
|
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
/* stylelint-disable-next-line selector-max-type */
|
|
89
89
|
.has-category-header > &,
|
|
90
90
|
.has-category-header > span > & {
|
|
91
|
-
padding-left: awsui.$space-
|
|
91
|
+
padding-left: calc(#{awsui.$space-s} + #{awsui.$space-button-horizontal});
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
padding-top: 0;
|
|
22
22
|
padding-left: 0;
|
|
23
23
|
padding-right: 0;
|
|
24
|
-
padding-bottom: #{awsui.$space-container-header-
|
|
24
|
+
padding-bottom: calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
width: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
|
|
50
50
|
top: 0;
|
|
51
51
|
right: 0;
|
|
52
|
-
padding: awsui.$space-
|
|
52
|
+
padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.loading,
|
|
@@ -77,13 +77,7 @@
|
|
|
77
77
|
position: relative;
|
|
78
78
|
background-color: awsui.$color-background-container-content;
|
|
79
79
|
margin: 0 0 awsui.$space-grid-gutter awsui.$space-grid-gutter;
|
|
80
|
-
padding: awsui.$space-
|
|
81
|
-
// HACK: IE shadow comes with full border that we need to take into account
|
|
82
|
-
@media screen and (-ms-high-contrast: active) {
|
|
83
|
-
padding: calc(#{awsui.$space-scaled-l} - #{awsui.$border-item-width})
|
|
84
|
-
calc(#{awsui.$space-card-horizontal} - #{awsui.$border-item-width})
|
|
85
|
-
calc(#{awsui.$space-scaled-l} - #{awsui.$border-item-width});
|
|
86
|
-
}
|
|
80
|
+
padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
|
|
87
81
|
@include styles.container-shadow;
|
|
88
82
|
width: 100%;
|
|
89
83
|
min-width: 0;
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
@use '../internal/styles/tokens' as awsui;
|
|
8
8
|
|
|
9
9
|
$header-padding-horizontal: awsui.$space-container-horizontal;
|
|
10
|
-
$header-padding
|
|
11
|
-
|
|
10
|
+
$header-padding: awsui.$space-container-header-top awsui.$space-container-horizontal
|
|
11
|
+
awsui.$space-container-header-bottom;
|
|
12
12
|
$footer-padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
|
|
13
13
|
|
|
14
14
|
// HACK: Remediate focus border for expandable section
|
|
@@ -105,8 +105,8 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
|
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
&-container {
|
|
108
|
-
padding-top: container
|
|
109
|
-
padding-bottom: container
|
|
108
|
+
padding-top: awsui.$space-container-header-top;
|
|
109
|
+
padding-bottom: awsui.$space-container-header-bottom;
|
|
110
110
|
padding-right: container.$header-padding-horizontal;
|
|
111
111
|
|
|
112
112
|
&.header-deprecated {
|
|
@@ -13,31 +13,23 @@
|
|
|
13
13
|
width: 100%;
|
|
14
14
|
flex-wrap: wrap;
|
|
15
15
|
justify-content: space-between;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
padding-bottom: 0;
|
|
20
|
-
&-refresh {
|
|
21
|
-
padding-bottom: awsui.$space-xxxs;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
16
|
+
column-gap: awsui.$space-xs;
|
|
17
|
+
&.refresh {
|
|
18
|
+
row-gap: awsui.$space-scaled-xxs;
|
|
24
19
|
}
|
|
25
20
|
|
|
26
21
|
&-no-actions,
|
|
27
22
|
&-has-description {
|
|
28
|
-
&.root-variant-h2
|
|
23
|
+
&.root-variant-h2:not(.refresh),
|
|
24
|
+
&.root-variant-h3:not(.refresh) {
|
|
29
25
|
padding-bottom: awsui.$space-scaled-xxs;
|
|
30
|
-
&-refresh {
|
|
31
|
-
padding-bottom: awsui.$space-xxxs;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
&.root-variant-h3 {
|
|
35
|
-
padding-bottom: awsui.$space-scaled-xxs;
|
|
36
|
-
&-refresh {
|
|
37
|
-
padding-bottom: 0;
|
|
38
|
-
}
|
|
39
26
|
}
|
|
40
27
|
}
|
|
28
|
+
// H3s are most often used inside containers, so minimal headings have extra padding below
|
|
29
|
+
// to prevent info links from having overlapping touch targets with surrounding elements.
|
|
30
|
+
&-no-actions:not(.root-has-description).refresh.root-variant-h3 {
|
|
31
|
+
padding-bottom: awsui.$space-scaled-xs;
|
|
32
|
+
}
|
|
41
33
|
|
|
42
34
|
&-no-wrap {
|
|
43
35
|
flex-wrap: nowrap;
|
|
@@ -49,32 +41,31 @@
|
|
|
49
41
|
word-wrap: break-word;
|
|
50
42
|
max-width: 100%;
|
|
51
43
|
|
|
52
|
-
|
|
53
|
-
|
|
44
|
+
&.refresh {
|
|
45
|
+
display: flex;
|
|
46
|
+
flex-direction: column;
|
|
47
|
+
// Can't use justify-content: center because it won't align with configurable dashboard handle icon
|
|
54
48
|
}
|
|
55
49
|
|
|
56
50
|
&-variant-h1 {
|
|
57
51
|
padding: awsui.$space-scaled-2x-xxs 0;
|
|
58
|
-
|
|
59
|
-
padding:
|
|
52
|
+
&.refresh {
|
|
53
|
+
padding: 0;
|
|
54
|
+
row-gap: awsui.$space-scaled-xxs;
|
|
60
55
|
}
|
|
61
56
|
}
|
|
62
|
-
:not(.root-no-actions) > &-variant-h1-refresh {
|
|
63
|
-
padding-top: awsui.$space-scaled-xxxs;
|
|
64
|
-
}
|
|
65
57
|
|
|
66
58
|
// So that headers with only a title have the same height as headers with actions and descriptions
|
|
67
59
|
&-variant-h2,
|
|
68
60
|
&-variant-h3 {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
61
|
+
&:not(.refresh) {
|
|
62
|
+
padding-top: awsui.$space-scaled-xxs;
|
|
63
|
+
:not(.root-has-description) > & {
|
|
64
|
+
padding-bottom: awsui.$space-xxxs;
|
|
65
|
+
}
|
|
72
66
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
padding-top: 0;
|
|
76
|
-
:not(.root-has-description) > & {
|
|
77
|
-
padding-bottom: 0;
|
|
67
|
+
&.refresh {
|
|
68
|
+
row-gap: awsui.$space-scaled-xxxs;
|
|
78
69
|
}
|
|
79
70
|
}
|
|
80
71
|
}
|
|
@@ -84,25 +75,29 @@
|
|
|
84
75
|
// https://github.com/philipwalton/flexbugs/issues/170
|
|
85
76
|
display: flex;
|
|
86
77
|
align-items: flex-start;
|
|
87
|
-
|
|
78
|
+
|
|
79
|
+
// Calculate padding so the heading text is better aligned with the buttons.
|
|
80
|
+
// Can't align-items: middle because we want buttons to stay at the top of the container when text wraps to multiple lines.
|
|
81
|
+
&-variant-h1.refresh {
|
|
82
|
+
padding: calc((#{awsui.$font-heading-xl-line-height} - #{awsui.$size-vertical-input}) / 2) 0;
|
|
83
|
+
}
|
|
84
|
+
&-variant-h2.refresh {
|
|
85
|
+
padding: calc((#{awsui.$font-heading-l-line-height} - #{awsui.$size-vertical-input}) / 2) 0;
|
|
86
|
+
}
|
|
87
|
+
&-variant-h3.refresh {
|
|
88
|
+
padding: calc((#{awsui.$font-heading-m-line-height} - #{awsui.$size-vertical-input}) / 2) 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&-variant-h1:not(.refresh) {
|
|
88
92
|
padding: awsui.$space-scaled-xs 0;
|
|
89
|
-
&-refresh {
|
|
90
|
-
padding: awsui.$space-xs 0;
|
|
91
|
-
}
|
|
92
93
|
}
|
|
93
|
-
&-variant-h2,
|
|
94
|
-
&-variant-h3 {
|
|
94
|
+
&-variant-h2:not(.refresh),
|
|
95
|
+
&-variant-h3:not(.refresh) {
|
|
95
96
|
padding: awsui.$space-scaled-xxs 0;
|
|
96
97
|
.root-has-description > & {
|
|
97
98
|
padding-bottom: 0;
|
|
98
99
|
}
|
|
99
100
|
}
|
|
100
|
-
&-variant-h2-refresh {
|
|
101
|
-
padding-bottom: awsui.$space-xxxs;
|
|
102
|
-
}
|
|
103
|
-
&-variant-h3-refresh {
|
|
104
|
-
padding-bottom: 0;
|
|
105
|
-
}
|
|
106
101
|
}
|
|
107
102
|
|
|
108
103
|
.title {
|
|
@@ -111,19 +106,27 @@
|
|
|
111
106
|
|
|
112
107
|
&-variant-h1 {
|
|
113
108
|
font-size: awsui.$font-heading-xl-size;
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
109
|
+
// Use padding rather than center align so that all headers of the same size start at the same height in the container,
|
|
110
|
+
// whether there are buttons present or not; otherwise configurable dashboard handles are misaligned.
|
|
111
|
+
&.refresh {
|
|
112
|
+
padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-xl-line-height}) / 2);
|
|
113
|
+
}
|
|
118
114
|
}
|
|
119
115
|
&-variant-h2 {
|
|
120
116
|
font-size: awsui.$font-heading-l-size;
|
|
121
|
-
|
|
122
|
-
padding-top: awsui.$
|
|
117
|
+
&.refresh {
|
|
118
|
+
padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-l-line-height}) / 2);
|
|
123
119
|
}
|
|
124
120
|
}
|
|
125
121
|
&-variant-h3 {
|
|
126
122
|
font-size: awsui.$font-heading-m-size;
|
|
123
|
+
&.refresh {
|
|
124
|
+
padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-m-line-height}) / 2);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
&-variant-h2:not(.refresh),
|
|
128
|
+
&-variant-h3:not(.refresh) {
|
|
129
|
+
padding: awsui.$space-scaled-xxs 0;
|
|
127
130
|
}
|
|
128
131
|
}
|
|
129
132
|
|
|
@@ -140,21 +143,21 @@
|
|
|
140
143
|
|
|
141
144
|
&-variant-h1 {
|
|
142
145
|
@include styles.font-body-m;
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
padding-top: awsui.$space-scaled-xs;
|
|
146
|
+
&:not(.refresh) {
|
|
147
|
+
padding-top: awsui.$space-scaled-xxs;
|
|
146
148
|
}
|
|
147
149
|
}
|
|
148
150
|
&-variant-h2 {
|
|
149
151
|
font-size: awsui.$font-header-h2-description-size;
|
|
150
152
|
line-height: awsui.$font-header-h2-description-line-height;
|
|
151
|
-
|
|
153
|
+
&:not(.refresh) {
|
|
154
|
+
padding-bottom: awsui.$space-scaled-xxs;
|
|
155
|
+
}
|
|
152
156
|
}
|
|
153
157
|
&-variant-h3 {
|
|
154
158
|
@include styles.font-body-s;
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
padding-top: awsui.$space-xxxs;
|
|
159
|
+
&:not(.refresh) {
|
|
160
|
+
padding-bottom: awsui.$space-scaled-xxs;
|
|
158
161
|
}
|
|
159
162
|
}
|
|
160
163
|
}
|
|
@@ -93,7 +93,7 @@ $modal-z-index: 5000;
|
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
.header {
|
|
96
|
-
padding: awsui.$space-
|
|
96
|
+
padding: awsui.$space-container-header-top awsui.$space-modal-horizontal awsui.$space-container-header-bottom;
|
|
97
97
|
background-color: awsui.$color-background-container-header;
|
|
98
98
|
border-bottom: 1px solid awsui.$color-border-container-divider;
|
|
99
99
|
border-radius: awsui.$border-radius-container awsui.$border-radius-container 0 0;
|
|
@@ -39,7 +39,7 @@ $selected-color: awsui.$color-text-segment-active;
|
|
|
39
39
|
@include styles.font-button;
|
|
40
40
|
letter-spacing: 0.25px;
|
|
41
41
|
border: styles.$control-border-width solid $default-border-color;
|
|
42
|
-
padding: styles.$control-padding-vertical awsui.$space-
|
|
42
|
+
padding: styles.$control-padding-vertical awsui.$space-button-horizontal;
|
|
43
43
|
border-right-width: 0;
|
|
44
44
|
background: $default-background;
|
|
45
45
|
color: $default-color;
|
|
@@ -87,6 +87,10 @@
|
|
|
87
87
|
.section {
|
|
88
88
|
margin-top: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
|
|
89
89
|
margin-bottom: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
|
|
90
|
+
&.refresh {
|
|
91
|
+
margin-top: calc(#{awsui.$space-scaled-2x-m} - #{awsui.$border-divider-section-width});
|
|
92
|
+
margin-bottom: calc(#{awsui.$space-scaled-2x-m} - #{awsui.$border-divider-section-width});
|
|
93
|
+
}
|
|
90
94
|
|
|
91
95
|
// HACK: Remove padding from section header and content to rely on margin collapsing rules.
|
|
92
96
|
/* stylelint-disable-next-line selector-max-type */
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
display: flex;
|
|
18
18
|
align-items: flex-end;
|
|
19
19
|
flex-wrap: wrap;
|
|
20
|
-
padding: awsui.$space-scaled-xs 0 awsui.$space-
|
|
20
|
+
padding: awsui.$space-scaled-xs 0 awsui.$space-table-header-tools-bottom;
|
|
21
21
|
|
|
22
22
|
&-filtering {
|
|
23
23
|
@supports (flex-basis: fit-content) {
|
|
@@ -63,8 +63,6 @@
|
|
|
63
63
|
position: relative;
|
|
64
64
|
box-sizing: border-box;
|
|
65
65
|
width: 100%;
|
|
66
|
-
padding-top: awsui.$space-table-content-top;
|
|
67
|
-
padding-bottom: awsui.$space-table-content-bottom;
|
|
68
66
|
overflow-x: auto;
|
|
69
67
|
|
|
70
68
|
scrollbar-width: none; /* Hide scrollbar in Firefox */
|
|
@@ -75,15 +73,8 @@
|
|
|
75
73
|
padding-right: awsui.$space-table-horizontal;
|
|
76
74
|
}
|
|
77
75
|
}
|
|
78
|
-
&.variant-
|
|
79
|
-
|
|
80
|
-
padding-bottom: awsui.$space-table-embedded-content-bottom;
|
|
81
|
-
}
|
|
82
|
-
&.has-header {
|
|
83
|
-
padding-top: 0px;
|
|
84
|
-
}
|
|
85
|
-
&.has-footer {
|
|
86
|
-
padding-bottom: 0px;
|
|
76
|
+
&.variant-container:not(.has-footer) {
|
|
77
|
+
padding-bottom: awsui.$space-table-content-bottom;
|
|
87
78
|
}
|
|
88
79
|
&:not(.has-header) {
|
|
89
80
|
border-top-right-radius: awsui.$border-radius-container;
|
|
@@ -182,11 +173,12 @@ the default white background of the container component.
|
|
|
182
173
|
}
|
|
183
174
|
|
|
184
175
|
.header-controls {
|
|
185
|
-
padding-top: awsui.$space-container-header-
|
|
186
|
-
padding-bottom: awsui.$space-container-header-
|
|
176
|
+
padding-top: awsui.$space-container-header-top;
|
|
177
|
+
padding-bottom: awsui.$space-container-header-bottom;
|
|
187
178
|
|
|
188
179
|
&.variant-full-page {
|
|
189
180
|
padding-top: 0;
|
|
181
|
+
padding-bottom: calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
|
|
190
182
|
}
|
|
191
183
|
&.variant-stacked,
|
|
192
184
|
&.variant-container {
|
|
@@ -100,8 +100,10 @@ $label-horizontal-spacing: awsui.$space-l;
|
|
|
100
100
|
font-size: awsui.$font-tabs-size;
|
|
101
101
|
line-height: awsui.$font-tabs-line-height;
|
|
102
102
|
font-weight: awsui.$font-wayfinding-link-active-weight;
|
|
103
|
-
@include styles.font-smoothing;
|
|
104
103
|
color: awsui.$color-text-interactive-default;
|
|
104
|
+
&.refresh {
|
|
105
|
+
padding: calc(awsui.$space-static-xs - 1px) 0 awsui.$space-static-xs 0;
|
|
106
|
+
}
|
|
105
107
|
|
|
106
108
|
&:hover {
|
|
107
109
|
color: awsui.$color-text-accent;
|
|
@@ -110,6 +112,7 @@ $label-horizontal-spacing: awsui.$space-l;
|
|
|
110
112
|
&:focus {
|
|
111
113
|
outline: none;
|
|
112
114
|
}
|
|
115
|
+
@include styles.font-smoothing;
|
|
113
116
|
|
|
114
117
|
@include focus-visible.when-visible {
|
|
115
118
|
z-index: 1;
|
|
@@ -30,15 +30,21 @@ $gutter: awsui.$space-grid-gutter;
|
|
|
30
30
|
|
|
31
31
|
.tile-container {
|
|
32
32
|
box-sizing: border-box;
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
33
35
|
border: styles.$control-border-width solid awsui.$color-border-input-default;
|
|
34
36
|
border-radius: awsui.$border-radius-tiles;
|
|
35
37
|
background: awsui.$color-background-input-default;
|
|
36
38
|
padding: awsui.$space-xs awsui.$space-scaled-m;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
+
&.refresh {
|
|
40
|
+
padding: awsui.$space-xs awsui.$space-s;
|
|
41
|
+
}
|
|
39
42
|
|
|
40
43
|
&.has-metadata {
|
|
41
44
|
padding-bottom: awsui.$space-s;
|
|
45
|
+
&.refresh {
|
|
46
|
+
padding-bottom: awsui.$space-scaled-s;
|
|
47
|
+
}
|
|
42
48
|
}
|
|
43
49
|
|
|
44
50
|
&.selected {
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
position: relative;
|
|
41
41
|
@include styles.container-shadow;
|
|
42
42
|
margin: 0;
|
|
43
|
-
padding: awsui.$space-scaled-l awsui.$space-l;
|
|
43
|
+
padding: awsui.$space-scaled-m awsui.$space-l awsui.$space-scaled-l awsui.$space-m;
|
|
44
44
|
width: 280px;
|
|
45
45
|
box-sizing: border-box;
|
|
46
46
|
|
|
47
47
|
> li {
|
|
48
48
|
display: grid;
|
|
49
|
-
column-gap: awsui.$space-
|
|
49
|
+
column-gap: awsui.$space-xs;
|
|
50
50
|
grid-template-columns: awsui.$space-l 1fr;
|
|
51
51
|
grid-template-rows: repeat(2, auto);
|
|
52
52
|
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
|
|
68
68
|
> a {
|
|
69
69
|
align-items: start;
|
|
70
|
-
column-gap: awsui.$space-
|
|
70
|
+
column-gap: awsui.$space-xs;
|
|
71
71
|
cursor: pointer;
|
|
72
72
|
display: grid;
|
|
73
73
|
font-size: awsui.$font-body-m-size;
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
> li:not(:first-child) > .number {
|
|
103
|
-
margin-top: awsui.$space-
|
|
103
|
+
margin-top: awsui.$space-m;
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
> li:last-child > hr {
|
|
@@ -221,7 +221,7 @@
|
|
|
221
221
|
}
|
|
222
222
|
|
|
223
223
|
> .form-header > .form-header-content {
|
|
224
|
-
padding-top: awsui.$space-
|
|
224
|
+
padding-top: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-s);
|
|
225
225
|
padding-bottom: awsui.$space-scaled-m;
|
|
226
226
|
}
|
|
227
227
|
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"resize-active": "awsui_resize-
|
|
5
|
-
"resize-side": "awsui_resize-
|
|
6
|
-
"resize-bottom": "awsui_resize-
|
|
7
|
-
"with-motion": "awsui_with-
|
|
8
|
-
"root": "
|
|
9
|
-
"layout-wrapper": "awsui_layout-
|
|
10
|
-
"root-no-scroll": "awsui_root-no-
|
|
11
|
-
"layout": "
|
|
12
|
-
"layout-no-scroll": "awsui_layout-no-
|
|
13
|
-
"layout-main": "awsui_layout-
|
|
14
|
-
"layout-main-scrollable": "awsui_layout-main-
|
|
15
|
-
"unfocusable": "
|
|
16
|
-
"breadcrumbs-desktop": "awsui_breadcrumbs-
|
|
17
|
-
"content-header-wrapper": "awsui_content-header-
|
|
18
|
-
"content-wrapper": "awsui_content-
|
|
19
|
-
"content-overlapped": "awsui_content-
|
|
20
|
-
"content-extra-top-padding": "awsui_content-extra-top-
|
|
4
|
+
"resize-active": "awsui_resize-active_lm6vo_iriab_98",
|
|
5
|
+
"resize-side": "awsui_resize-side_lm6vo_iriab_104",
|
|
6
|
+
"resize-bottom": "awsui_resize-bottom_lm6vo_iriab_107",
|
|
7
|
+
"with-motion": "awsui_with-motion_lm6vo_iriab_112",
|
|
8
|
+
"root": "awsui_root_lm6vo_iriab_127",
|
|
9
|
+
"layout-wrapper": "awsui_layout-wrapper_lm6vo_iriab_128",
|
|
10
|
+
"root-no-scroll": "awsui_root-no-scroll_lm6vo_iriab_135",
|
|
11
|
+
"layout": "awsui_layout_lm6vo_iriab_128",
|
|
12
|
+
"layout-no-scroll": "awsui_layout-no-scroll_lm6vo_iriab_146",
|
|
13
|
+
"layout-main": "awsui_layout-main_lm6vo_iriab_150",
|
|
14
|
+
"layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_iriab_156",
|
|
15
|
+
"unfocusable": "awsui_unfocusable_lm6vo_iriab_161",
|
|
16
|
+
"breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_iriab_165",
|
|
17
|
+
"content-header-wrapper": "awsui_content-header-wrapper_lm6vo_iriab_170",
|
|
18
|
+
"content-wrapper": "awsui_content-wrapper_lm6vo_iriab_174",
|
|
19
|
+
"content-overlapped": "awsui_content-overlapped_lm6vo_iriab_178",
|
|
20
|
+
"content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_iriab_182"
|
|
21
21
|
};
|
|
22
22
|
|