@cloudscape-design/components-themeable 3.0.313 → 3.0.314

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.
Files changed (31) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/app-layout/visual-refresh/layout.scss +15 -0
  3. package/lib/internal/scss/content-layout/styles.scss +17 -4
  4. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +39 -37
  5. package/lib/internal/scss/wizard/styles.scss +2 -1
  6. package/lib/internal/template/annotation-context/annotation/styles.css.js +24 -24
  7. package/lib/internal/template/annotation-context/annotation/styles.scoped.css +30 -30
  8. package/lib/internal/template/annotation-context/annotation/styles.selectors.js +24 -24
  9. package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
  10. package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
  11. package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
  12. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +68 -68
  13. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +289 -278
  14. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +68 -68
  15. package/lib/internal/template/content-layout/internal.d.ts.map +1 -1
  16. package/lib/internal/template/content-layout/internal.js +2 -6
  17. package/lib/internal/template/content-layout/internal.js.map +1 -1
  18. package/lib/internal/template/content-layout/styles.css.js +7 -6
  19. package/lib/internal/template/content-layout/styles.scoped.css +19 -11
  20. package/lib/internal/template/content-layout/styles.selectors.js +7 -6
  21. package/lib/internal/template/flashbar/styles.css.js +45 -45
  22. package/lib/internal/template/flashbar/styles.scoped.css +169 -169
  23. package/lib/internal/template/flashbar/styles.selectors.js +45 -45
  24. package/lib/internal/template/internal/environment.js +1 -1
  25. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  26. package/lib/internal/template/internal/generated/custom-css-properties/index.js +39 -37
  27. package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
  28. package/lib/internal/template/wizard/styles.css.js +31 -31
  29. package/lib/internal/template/wizard/styles.scoped.css +63 -63
  30. package/lib/internal/template/wizard/styles.selectors.js +31 -31
  31. package/package.json +1 -1
package/lib/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "52c542227ea06576a2090c612c126a7ff9a659b4"
2
+ "commit": "d6b4e10cdd6684bbe9c86149d649902bca3b73af"
3
3
  }
package/lib/internal/scss/app-layout/visual-refresh/layout.scss CHANGED
@@ -26,6 +26,8 @@ explicitly set in script.
26
26
  #{custom-props.$contentGapLeft}: 0px;
27
27
  #{custom-props.$contentGapRight}: 0px;
28
28
  #{custom-props.$contentHeight}: calc(100vh - var(#{custom-props.$headerHeight}) - var(#{custom-props.$footerHeight}));
29
+ #{custom-props.$containerFirstGap}: 0px;
30
+ #{custom-props.$containerFirstOverlapExtension}: 0px;
29
31
  #{custom-props.$defaultMaxContentWidth}: 1280px;
30
32
  #{custom-props.$defaultMinContentWidth}: 0px;
31
33
  #{custom-props.$footerHeight}: 0px;
@@ -217,6 +219,11 @@ explicitly set in script.
217
219
  #{custom-props.$mainGap}: #{awsui.$space-xs};
218
220
  }
219
221
 
222
+ // Set gap to be used by content that has a container on top (e.g. content-layout without header) when breadcrumbs are present
223
+ &.has-breadcrumbs:not(.has-header) {
224
+ #{custom-props.$containerFirstGap}: calc(var(#{custom-props.$breadcrumbsGap}) - var(#{custom-props.$mainGap}));
225
+ }
226
+
220
227
  // Set the Main gap when it follows the Breadcrumbs without an overlap
221
228
  &.has-breadcrumbs:not(.has-header).is-overlap-disabled {
222
229
  #{custom-props.$mainGap}: #{awsui.$space-scaled-m};
@@ -238,6 +245,14 @@ explicitly set in script.
238
245
  #{custom-props.$mainGap}: #{awsui.$space-scaled-xs};
239
246
  }
240
247
 
248
+ // Set an extension of the overlap and an additional gap on top to be used by content-layout without header
249
+ @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
250
+ &.content-first-child-main:not(.has-header) {
251
+ #{custom-props.$containerFirstOverlapExtension}: #{awsui.$space-m};
252
+ #{custom-props.$containerFirstGap}: #{awsui.$space-xxs};
253
+ }
254
+ }
255
+
241
256
  /*
242
257
  Override the desktop gap values set above for the Notifications, Header, and Main
243
258
  components for mobile viewports.
package/lib/internal/scss/content-layout/styles.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  */
5
5
  @use '../internal/styles/' as styles;
6
6
  @use '../internal/styles/tokens' as awsui;
7
+ @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
7
8
 
8
9
  /*
9
10
  Pass through the header and child content if not rendering in
@@ -29,10 +30,6 @@ nodes will directly touch with no gap between them.
29
30
  grid-template-rows: auto #{awsui.$space-dark-header-overlap-distance} 1fr;
30
31
  min-height: 100%;
31
32
 
32
- &.is-overlap-disabled {
33
- grid-template-rows: auto 0 1fr;
34
- }
35
-
36
33
  > .background {
37
34
  background-color: awsui.$color-background-layout-main;
38
35
  grid-column: 1;
@@ -54,4 +51,20 @@ nodes will directly touch with no gap between them.
54
51
  grid-column: 1;
55
52
  grid-row: 2 / 4;
56
53
  }
54
+
55
+ &:not(.has-header) {
56
+ grid-template-rows:
57
+ auto calc(
58
+ #{awsui.$space-dark-header-overlap-distance} + var(#{custom-props.$containerFirstOverlapExtension}, 0px) + var(#{custom-props.$containerFirstGap}, 0px)
59
+ )
60
+ 1fr;
61
+
62
+ > .content {
63
+ padding-top: var(#{custom-props.$containerFirstGap}, 0px);
64
+ }
65
+ }
66
+
67
+ &.is-overlap-disabled {
68
+ grid-template-rows: auto 0 1fr;
69
+ }
57
70
  }
package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED
@@ -1,39 +1,41 @@
1
1
 
2
- $activeDrawerWidth: --awsui-active-drawer-width-en6003;
3
- $breadcrumbsGap: --awsui-breadcrumbs-gap-en6003;
4
- $contentGapLeft: --awsui-content-gap-left-en6003;
5
- $contentGapRight: --awsui-content-gap-right-en6003;
6
- $contentHeight: --awsui-content-height-en6003;
7
- $defaultMaxContentWidth: --awsui-default-max-content-width-en6003;
8
- $defaultMinContentWidth: --awsui-default-min-content-width-en6003;
9
- $footerHeight: --awsui-footer-height-en6003;
10
- $headerGap: --awsui-header-gap-en6003;
11
- $headerHeight: --awsui-header-height-en6003;
12
- $layoutWidth: --awsui-layout-width-en6003;
13
- $mainGap: --awsui-main-gap-en6003;
14
- $mainOffsetLeft: --awsui-main-offset-left-en6003;
15
- $mainTemplateRows: --awsui-main-template-rows-en6003;
16
- $maxContentWidth: --awsui-max-content-width-en6003;
17
- $minContentWidth: --awsui-min-content-width-en6003;
18
- $mobileBarHeight: --awsui-mobile-bar-height-en6003;
19
- $notificationsGap: --awsui-notifications-gap-en6003;
20
- $notificationsHeight: --awsui-notifications-height-en6003;
21
- $offsetTop: --awsui-offset-top-en6003;
22
- $offsetTopWithNotifications: --awsui-offset-top-with-notifications-en6003;
23
- $overlapHeight: --awsui-overlap-height-en6003;
24
- $navigationWidth: --awsui-navigation-width-en6003;
25
- $splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-en6003;
26
- $splitPanelReportedSize: --awsui-split-panel-reported-size-en6003;
27
- $splitPanelHeight: --awsui-split-panel-height-en6003;
28
- $splitPanelMinWidth: --awsui-split-panel-min-width-en6003;
29
- $splitPanelMaxWidth: --awsui-split-panel-max-width-en6003;
30
- $toolsMaxWidth: --awsui-tools-max-width-en6003;
31
- $toolsWidth: --awsui-tools-width-en6003;
32
- $toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-en6003;
33
- $contentScrollMargin: --awsui-content-scroll-margin-en6003;
34
- $flashbarStackDepth: --awsui-flashbar-stack-depth-en6003;
35
- $flashbarStackIndex: --awsui-flashbar-stack-index-en6003;
36
- $flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-en6003;
37
- $stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-en6003;
38
- $stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-en6003;
2
+ $activeDrawerWidth: --awsui-active-drawer-width-8nglyc;
3
+ $breadcrumbsGap: --awsui-breadcrumbs-gap-8nglyc;
4
+ $contentGapLeft: --awsui-content-gap-left-8nglyc;
5
+ $contentGapRight: --awsui-content-gap-right-8nglyc;
6
+ $contentHeight: --awsui-content-height-8nglyc;
7
+ $containerFirstGap: --awsui-container-first-gap-8nglyc;
8
+ $containerFirstOverlapExtension: --awsui-container-first-overlap-extension-8nglyc;
9
+ $defaultMaxContentWidth: --awsui-default-max-content-width-8nglyc;
10
+ $defaultMinContentWidth: --awsui-default-min-content-width-8nglyc;
11
+ $footerHeight: --awsui-footer-height-8nglyc;
12
+ $headerGap: --awsui-header-gap-8nglyc;
13
+ $headerHeight: --awsui-header-height-8nglyc;
14
+ $layoutWidth: --awsui-layout-width-8nglyc;
15
+ $mainGap: --awsui-main-gap-8nglyc;
16
+ $mainOffsetLeft: --awsui-main-offset-left-8nglyc;
17
+ $mainTemplateRows: --awsui-main-template-rows-8nglyc;
18
+ $maxContentWidth: --awsui-max-content-width-8nglyc;
19
+ $minContentWidth: --awsui-min-content-width-8nglyc;
20
+ $mobileBarHeight: --awsui-mobile-bar-height-8nglyc;
21
+ $notificationsGap: --awsui-notifications-gap-8nglyc;
22
+ $notificationsHeight: --awsui-notifications-height-8nglyc;
23
+ $offsetTop: --awsui-offset-top-8nglyc;
24
+ $offsetTopWithNotifications: --awsui-offset-top-with-notifications-8nglyc;
25
+ $overlapHeight: --awsui-overlap-height-8nglyc;
26
+ $navigationWidth: --awsui-navigation-width-8nglyc;
27
+ $splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-8nglyc;
28
+ $splitPanelReportedSize: --awsui-split-panel-reported-size-8nglyc;
29
+ $splitPanelHeight: --awsui-split-panel-height-8nglyc;
30
+ $splitPanelMinWidth: --awsui-split-panel-min-width-8nglyc;
31
+ $splitPanelMaxWidth: --awsui-split-panel-max-width-8nglyc;
32
+ $toolsMaxWidth: --awsui-tools-max-width-8nglyc;
33
+ $toolsWidth: --awsui-tools-width-8nglyc;
34
+ $toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-8nglyc;
35
+ $contentScrollMargin: --awsui-content-scroll-margin-8nglyc;
36
+ $flashbarStackDepth: --awsui-flashbar-stack-depth-8nglyc;
37
+ $flashbarStackIndex: --awsui-flashbar-stack-index-8nglyc;
38
+ $flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-8nglyc;
39
+ $stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-8nglyc;
40
+ $stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-8nglyc;
39
41
 
package/lib/internal/scss/wizard/styles.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  @use '../internal/styles' as styles;
8
8
  @use '../internal/styles/tokens' as awsui;
9
9
  @use '../internal/hooks/focus-visible' as focus-visible;
10
+ @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
10
11
 
11
12
  .root {
12
13
  @include styles.styles-reset;
@@ -32,7 +33,7 @@
32
33
  .navigation.refresh {
33
34
  grid-column: 1;
34
35
  grid-row: 1 / span 2;
35
- padding-top: awsui.$space-scaled-xxs;
36
+ padding-top: var(#{custom-props.$containerFirstGap}, 0px);
36
37
 
37
38
  > ul {
38
39
  background: awsui.$color-background-container-content;
package/lib/internal/template/annotation-context/annotation/styles.css.js CHANGED
@@ -1,29 +1,29 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "arrow": "awsui_arrow_1hpp3_1gmbu_93",
5
- "arrow-outer": "awsui_arrow-outer_1hpp3_1gmbu_97",
6
- "arrow-inner": "awsui_arrow-inner_1hpp3_1gmbu_97",
7
- "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1gmbu_128",
8
- "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1gmbu_128",
9
- "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1gmbu_131",
10
- "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1gmbu_131",
11
- "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1gmbu_134",
12
- "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1gmbu_134",
13
- "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1gmbu_137",
14
- "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1gmbu_137",
15
- "annotation": "awsui_annotation_1hpp3_1gmbu_145",
16
- "next-button": "awsui_next-button_1hpp3_1gmbu_146",
17
- "previous-button": "awsui_previous-button_1hpp3_1gmbu_147",
18
- "finish-button": "awsui_finish-button_1hpp3_1gmbu_148",
19
- "header": "awsui_header_1hpp3_1gmbu_149",
20
- "step-counter-content": "awsui_step-counter-content_1hpp3_1gmbu_150",
21
- "content": "awsui_content_1hpp3_1gmbu_151",
22
- "description": "awsui_description_1hpp3_1gmbu_155",
23
- "actionBar": "awsui_actionBar_1hpp3_1gmbu_160",
24
- "stepCounter": "awsui_stepCounter_1hpp3_1gmbu_167",
25
- "divider": "awsui_divider_1hpp3_1gmbu_171",
26
- "hotspot": "awsui_hotspot_1hpp3_1gmbu_175",
27
- "icon": "awsui_icon_1hpp3_1gmbu_215"
4
+ "arrow": "awsui_arrow_1hpp3_1njk2_93",
5
+ "arrow-outer": "awsui_arrow-outer_1hpp3_1njk2_97",
6
+ "arrow-inner": "awsui_arrow-inner_1hpp3_1njk2_97",
7
+ "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1njk2_128",
8
+ "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1njk2_128",
9
+ "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1njk2_131",
10
+ "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1njk2_131",
11
+ "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1njk2_134",
12
+ "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1njk2_134",
13
+ "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1njk2_137",
14
+ "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1njk2_137",
15
+ "annotation": "awsui_annotation_1hpp3_1njk2_145",
16
+ "next-button": "awsui_next-button_1hpp3_1njk2_146",
17
+ "previous-button": "awsui_previous-button_1hpp3_1njk2_147",
18
+ "finish-button": "awsui_finish-button_1hpp3_1njk2_148",
19
+ "header": "awsui_header_1hpp3_1njk2_149",
20
+ "step-counter-content": "awsui_step-counter-content_1hpp3_1njk2_150",
21
+ "content": "awsui_content_1hpp3_1njk2_151",
22
+ "description": "awsui_description_1hpp3_1njk2_155",
23
+ "actionBar": "awsui_actionBar_1hpp3_1njk2_160",
24
+ "stepCounter": "awsui_stepCounter_1hpp3_1njk2_167",
25
+ "divider": "awsui_divider_1hpp3_1njk2_171",
26
+ "hotspot": "awsui_hotspot_1hpp3_1njk2_175",
27
+ "icon": "awsui_icon_1hpp3_1njk2_215"
28
28
  };
29
29
 
package/lib/internal/template/annotation-context/annotation/styles.scoped.css CHANGED
@@ -90,11 +90,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
90
90
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
- .awsui_arrow_1hpp3_1gmbu_93:not(#\9) {
93
+ .awsui_arrow_1hpp3_1njk2_93:not(#\9) {
94
94
  width: 20px;
95
95
  height: 10px;
96
96
  }
97
- .awsui_arrow-outer_1hpp3_1gmbu_97:not(#\9), .awsui_arrow-inner_1hpp3_1gmbu_97:not(#\9) {
97
+ .awsui_arrow-outer_1hpp3_1njk2_97:not(#\9), .awsui_arrow-inner_1hpp3_1njk2_97:not(#\9) {
98
98
  position: absolute;
99
99
  overflow: hidden;
100
100
  width: 20px;
@@ -102,7 +102,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
102
102
  top: 0;
103
103
  left: 0;
104
104
  }
105
- .awsui_arrow-outer_1hpp3_1gmbu_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1gmbu_97:not(#\9)::after {
105
+ .awsui_arrow-outer_1hpp3_1njk2_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1njk2_97:not(#\9)::after {
106
106
  content: "";
107
107
  box-sizing: border-box;
108
108
  display: inline-block;
@@ -115,26 +115,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
115
115
  transform: rotate(45deg);
116
116
  transform-origin: 0 100%;
117
117
  }
118
- .awsui_arrow-outer_1hpp3_1gmbu_97:not(#\9)::after {
118
+ .awsui_arrow-outer_1hpp3_1njk2_97:not(#\9)::after {
119
119
  background-color: var(--color-border-status-info-lqyesl, #0073bb);
120
120
  }
121
- .awsui_arrow-inner_1hpp3_1gmbu_97:not(#\9) {
121
+ .awsui_arrow-inner_1hpp3_1njk2_97:not(#\9) {
122
122
  top: 2px;
123
123
  }
124
- .awsui_arrow-inner_1hpp3_1gmbu_97:not(#\9)::after {
124
+ .awsui_arrow-inner_1hpp3_1njk2_97:not(#\9)::after {
125
125
  border-radius: 1px 0 0 0;
126
126
  background-color: var(--color-background-status-info-y7xysq, #f1faff);
127
127
  }
128
- .awsui_arrow-position-right-top_1hpp3_1gmbu_128 > .awsui_arrow-outer_1hpp3_1gmbu_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1gmbu_128 > .awsui_arrow-outer_1hpp3_1gmbu_97:not(#\9)::after {
128
+ .awsui_arrow-position-right-top_1hpp3_1njk2_128 > .awsui_arrow-outer_1hpp3_1njk2_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1njk2_128 > .awsui_arrow-outer_1hpp3_1njk2_97:not(#\9)::after {
129
129
  box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-bkdge5, rgba(0, 28, 36, 0.5));
130
130
  }
131
- .awsui_arrow-position-left-top_1hpp3_1gmbu_131 > .awsui_arrow-outer_1hpp3_1gmbu_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1gmbu_131 > .awsui_arrow-outer_1hpp3_1gmbu_97:not(#\9)::after {
131
+ .awsui_arrow-position-left-top_1hpp3_1njk2_131 > .awsui_arrow-outer_1hpp3_1njk2_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1njk2_131 > .awsui_arrow-outer_1hpp3_1njk2_97:not(#\9)::after {
132
132
  box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-bkdge5, rgba(0, 28, 36, 0.5));
133
133
  }
134
- .awsui_arrow-position-top-center_1hpp3_1gmbu_134 > .awsui_arrow-outer_1hpp3_1gmbu_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1gmbu_134 > .awsui_arrow-outer_1hpp3_1gmbu_97:not(#\9)::after {
134
+ .awsui_arrow-position-top-center_1hpp3_1njk2_134 > .awsui_arrow-outer_1hpp3_1njk2_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1njk2_134 > .awsui_arrow-outer_1hpp3_1njk2_97:not(#\9)::after {
135
135
  box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-bkdge5, rgba(0, 28, 36, 0.5));
136
136
  }
137
- .awsui_arrow-position-bottom-center_1hpp3_1gmbu_137 > .awsui_arrow-outer_1hpp3_1gmbu_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1gmbu_137 > .awsui_arrow-outer_1hpp3_1gmbu_97:not(#\9)::after {
137
+ .awsui_arrow-position-bottom-center_1hpp3_1njk2_137 > .awsui_arrow-outer_1hpp3_1njk2_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1njk2_137 > .awsui_arrow-outer_1hpp3_1njk2_97:not(#\9)::after {
138
138
  box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-bkdge5, rgba(0, 28, 36, 0.5));
139
139
  }
140
140
 
@@ -142,37 +142,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
142
142
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
143
143
  SPDX-License-Identifier: Apache-2.0
144
144
  */
145
- .awsui_annotation_1hpp3_1gmbu_145:not(#\9),
146
- .awsui_next-button_1hpp3_1gmbu_146:not(#\9),
147
- .awsui_previous-button_1hpp3_1gmbu_147:not(#\9),
148
- .awsui_finish-button_1hpp3_1gmbu_148:not(#\9),
149
- .awsui_header_1hpp3_1gmbu_149:not(#\9),
150
- .awsui_step-counter-content_1hpp3_1gmbu_150:not(#\9),
151
- .awsui_content_1hpp3_1gmbu_151:not(#\9) {
145
+ .awsui_annotation_1hpp3_1njk2_145:not(#\9),
146
+ .awsui_next-button_1hpp3_1njk2_146:not(#\9),
147
+ .awsui_previous-button_1hpp3_1njk2_147:not(#\9),
148
+ .awsui_finish-button_1hpp3_1njk2_148:not(#\9),
149
+ .awsui_header_1hpp3_1njk2_149:not(#\9),
150
+ .awsui_step-counter-content_1hpp3_1njk2_150:not(#\9),
151
+ .awsui_content_1hpp3_1njk2_151:not(#\9) {
152
152
  /* used in test-utils */
153
153
  }
154
154
 
155
- .awsui_description_1hpp3_1gmbu_155:not(#\9) {
155
+ .awsui_description_1hpp3_1njk2_155:not(#\9) {
156
156
  overflow: hidden;
157
157
  margin-top: var(--space-xxs-xx079q, 4px);
158
158
  }
159
159
 
160
- .awsui_actionBar_1hpp3_1gmbu_160:not(#\9) {
160
+ .awsui_actionBar_1hpp3_1njk2_160:not(#\9) {
161
161
  display: flex;
162
162
  justify-content: space-between;
163
163
  align-items: center;
164
164
  position: relative;
165
165
  }
166
166
 
167
- .awsui_stepCounter_1hpp3_1gmbu_167:not(#\9) {
167
+ .awsui_stepCounter_1hpp3_1njk2_167:not(#\9) {
168
168
  margin-right: 20px;
169
169
  }
170
170
 
171
- .awsui_divider_1hpp3_1gmbu_171:not(#\9) {
171
+ .awsui_divider_1hpp3_1njk2_171:not(#\9) {
172
172
  border-bottom: var(--border-divider-section-width-p0xg84, 1px) solid var(--color-border-divider-default-uqjcpn, #eaeded);
173
173
  }
174
174
 
175
- .awsui_hotspot_1hpp3_1gmbu_175:not(#\9) {
175
+ .awsui_hotspot_1hpp3_1njk2_175:not(#\9) {
176
176
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
177
177
  border-collapse: separate;
178
178
  border-spacing: 0;
@@ -213,21 +213,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
213
213
  border: none;
214
214
  padding: 0;
215
215
  cursor: pointer;
216
- scroll-margin: var(--awsui-content-scroll-margin-en6003, 40px 0 0 0);
216
+ scroll-margin: var(--awsui-content-scroll-margin-8nglyc, 40px 0 0 0);
217
217
  width: 16px;
218
218
  height: 16px;
219
219
  }
220
- .awsui_hotspot_1hpp3_1gmbu_175:not(#\9):focus {
220
+ .awsui_hotspot_1hpp3_1njk2_175:not(#\9):focus {
221
221
  outline: none;
222
222
  }
223
- body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1gmbu_175:not(#\9):focus {
223
+ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1njk2_175:not(#\9):focus {
224
224
  position: relative;
225
225
  }
226
- body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1gmbu_175:not(#\9):focus {
226
+ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1njk2_175:not(#\9):focus {
227
227
  outline: 2px dotted transparent;
228
228
  outline-offset: calc(2px - 1px);
229
229
  }
230
- body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1gmbu_175:not(#\9):focus::before {
230
+ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1njk2_175:not(#\9):focus::before {
231
231
  content: " ";
232
232
  display: block;
233
233
  position: absolute;
@@ -238,13 +238,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1gmbu_175:not(#\9):focu
238
238
  border-radius: var(--border-radius-control-circular-focus-ring-6frgrc, 50%);
239
239
  box-shadow: 0 0 0 2px var(--color-border-item-focused-4clyb1, #0073bb);
240
240
  }
241
- .awsui_hotspot_1hpp3_1gmbu_175 > .awsui_icon_1hpp3_1gmbu_215:not(#\9) {
241
+ .awsui_hotspot_1hpp3_1njk2_175 > .awsui_icon_1hpp3_1njk2_215:not(#\9) {
242
242
  position: relative;
243
243
  stroke: var(--color-text-link-default-0jy39k, #0073bb);
244
244
  }
245
- .awsui_hotspot_1hpp3_1gmbu_175:not(#\9):hover > .awsui_icon_1hpp3_1gmbu_215 {
245
+ .awsui_hotspot_1hpp3_1njk2_175:not(#\9):hover > .awsui_icon_1hpp3_1njk2_215 {
246
246
  stroke: var(--color-text-link-hover-z15m9s, #0073bb);
247
247
  }
248
- .awsui_hotspot_1hpp3_1gmbu_175:not(#\9):active > .awsui_icon_1hpp3_1gmbu_215 {
248
+ .awsui_hotspot_1hpp3_1njk2_175:not(#\9):active > .awsui_icon_1hpp3_1njk2_215 {
249
249
  stroke: var(--color-text-link-default-0jy39k, #0073bb);
250
250
  }
package/lib/internal/template/annotation-context/annotation/styles.selectors.js CHANGED
@@ -2,29 +2,29 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "arrow": "awsui_arrow_1hpp3_1gmbu_93",
6
- "arrow-outer": "awsui_arrow-outer_1hpp3_1gmbu_97",
7
- "arrow-inner": "awsui_arrow-inner_1hpp3_1gmbu_97",
8
- "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1gmbu_128",
9
- "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1gmbu_128",
10
- "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1gmbu_131",
11
- "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1gmbu_131",
12
- "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1gmbu_134",
13
- "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1gmbu_134",
14
- "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1gmbu_137",
15
- "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1gmbu_137",
16
- "annotation": "awsui_annotation_1hpp3_1gmbu_145",
17
- "next-button": "awsui_next-button_1hpp3_1gmbu_146",
18
- "previous-button": "awsui_previous-button_1hpp3_1gmbu_147",
19
- "finish-button": "awsui_finish-button_1hpp3_1gmbu_148",
20
- "header": "awsui_header_1hpp3_1gmbu_149",
21
- "step-counter-content": "awsui_step-counter-content_1hpp3_1gmbu_150",
22
- "content": "awsui_content_1hpp3_1gmbu_151",
23
- "description": "awsui_description_1hpp3_1gmbu_155",
24
- "actionBar": "awsui_actionBar_1hpp3_1gmbu_160",
25
- "stepCounter": "awsui_stepCounter_1hpp3_1gmbu_167",
26
- "divider": "awsui_divider_1hpp3_1gmbu_171",
27
- "hotspot": "awsui_hotspot_1hpp3_1gmbu_175",
28
- "icon": "awsui_icon_1hpp3_1gmbu_215"
5
+ "arrow": "awsui_arrow_1hpp3_1njk2_93",
6
+ "arrow-outer": "awsui_arrow-outer_1hpp3_1njk2_97",
7
+ "arrow-inner": "awsui_arrow-inner_1hpp3_1njk2_97",
8
+ "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1njk2_128",
9
+ "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1njk2_128",
10
+ "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1njk2_131",
11
+ "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1njk2_131",
12
+ "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1njk2_134",
13
+ "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1njk2_134",
14
+ "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1njk2_137",
15
+ "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1njk2_137",
16
+ "annotation": "awsui_annotation_1hpp3_1njk2_145",
17
+ "next-button": "awsui_next-button_1hpp3_1njk2_146",
18
+ "previous-button": "awsui_previous-button_1hpp3_1njk2_147",
19
+ "finish-button": "awsui_finish-button_1hpp3_1njk2_148",
20
+ "header": "awsui_header_1hpp3_1njk2_149",
21
+ "step-counter-content": "awsui_step-counter-content_1hpp3_1njk2_150",
22
+ "content": "awsui_content_1hpp3_1njk2_151",
23
+ "description": "awsui_description_1hpp3_1njk2_155",
24
+ "actionBar": "awsui_actionBar_1hpp3_1njk2_160",
25
+ "stepCounter": "awsui_stepCounter_1hpp3_1njk2_167",
26
+ "divider": "awsui_divider_1hpp3_1njk2_171",
27
+ "hotspot": "awsui_hotspot_1hpp3_1njk2_175",
28
+ "icon": "awsui_icon_1hpp3_1njk2_215"
29
29
  };
30
30
 
package/lib/internal/template/app-layout/notifications/styles.css.js CHANGED
@@ -1,8 +1,8 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "notifications": "awsui_notifications_1hmm4_1exh0_9",
5
- "notifications-sticky": "awsui_notifications-sticky_1hmm4_1exh0_10",
6
- "no-content-paddings": "awsui_no-content-paddings_1hmm4_1exh0_25"
4
+ "notifications": "awsui_notifications_1hmm4_ophqf_9",
5
+ "notifications-sticky": "awsui_notifications-sticky_1hmm4_ophqf_10",
6
+ "no-content-paddings": "awsui_no-content-paddings_1hmm4_ophqf_25"
7
7
  };
8
8
 
package/lib/internal/template/app-layout/notifications/styles.scoped.css CHANGED
@@ -6,26 +6,26 @@
6
6
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
7
7
  SPDX-License-Identifier: Apache-2.0
8
8
  */
9
- .awsui_notifications_1hmm4_1exh0_9:not(#\9),
10
- .awsui_notifications-sticky_1hmm4_1exh0_10:not(#\9) {
9
+ .awsui_notifications_1hmm4_ophqf_9:not(#\9),
10
+ .awsui_notifications-sticky_1hmm4_ophqf_10:not(#\9) {
11
11
  z-index: 850;
12
12
  }
13
13
 
14
- .awsui_notifications_1hmm4_1exh0_9:not(#\9) {
14
+ .awsui_notifications_1hmm4_ophqf_9:not(#\9) {
15
15
  /* This is necessary for the z-index to have effect */
16
16
  position: relative;
17
17
  }
18
18
 
19
- .awsui_notifications-sticky_1hmm4_1exh0_10:not(#\9) {
19
+ .awsui_notifications-sticky_1hmm4_ophqf_10:not(#\9) {
20
20
  top: 0;
21
21
  position: sticky;
22
- --awsui-flashbar-sticky-bottom-margin-en6003: var(--space-xxl-y3qgr4, 32px);
22
+ --awsui-flashbar-sticky-bottom-margin-8nglyc: var(--space-xxl-y3qgr4, 32px);
23
23
  }
24
24
 
25
- .awsui_no-content-paddings_1hmm4_1exh0_25:not(#\9) {
25
+ .awsui_no-content-paddings_1hmm4_ophqf_25:not(#\9) {
26
26
  /*
27
27
  When using the disableContentPaddings option, the Flashbar will use this custom property to add additional space
28
28
  when the notification bar is rendered, to prevent it from overlapping the content.
29
29
  */
30
- --awsui-stacked-notifications-bottom-margin-en6003: var(--space-scaled-l-w7rqqb, 20px);
30
+ --awsui-stacked-notifications-bottom-margin-8nglyc: var(--space-scaled-l-w7rqqb, 20px);
31
31
  }
package/lib/internal/template/app-layout/notifications/styles.selectors.js CHANGED
@@ -2,8 +2,8 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "notifications": "awsui_notifications_1hmm4_1exh0_9",
6
- "notifications-sticky": "awsui_notifications-sticky_1hmm4_1exh0_10",
7
- "no-content-paddings": "awsui_no-content-paddings_1hmm4_1exh0_25"
5
+ "notifications": "awsui_notifications_1hmm4_ophqf_9",
6
+ "notifications-sticky": "awsui_notifications-sticky_1hmm4_ophqf_10",
7
+ "no-content-paddings": "awsui_no-content-paddings_1hmm4_ophqf_25"
8
8
  };
9
9