@cloudscape-design/components-themeable 3.0.470 → 3.0.471

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 (138) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/badge/styles.scss +6 -2
  3. package/lib/internal/scss/box/base-styles.scss +4 -2
  4. package/lib/internal/scss/box/layout.scss +2 -0
  5. package/lib/internal/scss/box/text.scss +3 -3
  6. package/lib/internal/scss/breadcrumb-group/item/styles.scss +3 -2
  7. package/lib/internal/scss/breadcrumb-group/styles.scss +16 -9
  8. package/lib/internal/scss/button-dropdown/category-elements/styles.scss +37 -28
  9. package/lib/internal/scss/button-dropdown/item-element/styles.scss +20 -15
  10. package/lib/internal/scss/button-dropdown/mobile-expandable-group/styles.scss +3 -3
  11. package/lib/internal/scss/button-dropdown/styles.scss +17 -14
  12. package/lib/internal/scss/calendar/styles.scss +36 -20
  13. package/lib/internal/scss/cards/styles.scss +40 -24
  14. package/lib/internal/scss/code-editor/ace-editor.scss +12 -12
  15. package/lib/internal/scss/code-editor/pane.scss +23 -21
  16. package/lib/internal/scss/code-editor/resizable-box/styles.scss +5 -5
  17. package/lib/internal/scss/code-editor/styles.scss +38 -30
  18. package/lib/internal/scss/collection-preferences/content-display/content-display-option.scss +18 -10
  19. package/lib/internal/scss/collection-preferences/content-display/styles.scss +5 -3
  20. package/lib/internal/scss/collection-preferences/styles.scss +1 -1
  21. package/lib/internal/scss/collection-preferences/visible-content.scss +11 -8
  22. package/lib/internal/scss/column-layout/flexible-column-layout/styles.scss +4 -5
  23. package/lib/internal/scss/column-layout/styles.scss +15 -9
  24. package/lib/internal/scss/container/shared.scss +1 -3
  25. package/lib/internal/scss/container/styles.scss +53 -43
  26. package/lib/internal/scss/content-layout/styles.scss +4 -4
  27. package/lib/internal/scss/date-picker/styles.scss +3 -3
  28. package/lib/internal/scss/date-range-picker/calendar/grids/styles.scss +29 -18
  29. package/lib/internal/scss/date-range-picker/relative-range/styles.scss +8 -8
  30. package/lib/internal/scss/date-range-picker/styles.scss +26 -21
  31. package/lib/internal/scss/drawer/styles.scss +13 -10
  32. package/lib/internal/scss/expandable-section/styles.scss +41 -36
  33. package/lib/internal/scss/file-upload/dropzone/styles.scss +6 -2
  34. package/lib/internal/scss/file-upload/file-option/styles.scss +7 -7
  35. package/lib/internal/scss/file-upload/styles.scss +1 -1
  36. package/lib/internal/scss/flashbar/collapsible.scss +25 -25
  37. package/lib/internal/scss/flashbar/styles.scss +29 -19
  38. package/lib/internal/scss/form/styles.scss +10 -10
  39. package/lib/internal/scss/form-field/styles.scss +5 -5
  40. package/lib/internal/template/badge/styles.css.js +5 -5
  41. package/lib/internal/template/badge/styles.scoped.css +11 -7
  42. package/lib/internal/template/badge/styles.selectors.js +5 -5
  43. package/lib/internal/template/box/styles.css.js +190 -190
  44. package/lib/internal/template/box/styles.scoped.css +244 -240
  45. package/lib/internal/template/box/styles.selectors.js +190 -190
  46. package/lib/internal/template/breadcrumb-group/item/styles.css.js +9 -9
  47. package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +20 -19
  48. package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +9 -9
  49. package/lib/internal/template/breadcrumb-group/styles.css.js +7 -7
  50. package/lib/internal/template/breadcrumb-group/styles.scoped.css +28 -21
  51. package/lib/internal/template/breadcrumb-group/styles.selectors.js +7 -7
  52. package/lib/internal/template/button-dropdown/category-elements/styles.css.js +13 -13
  53. package/lib/internal/template/button-dropdown/category-elements/styles.scoped.css +60 -50
  54. package/lib/internal/template/button-dropdown/category-elements/styles.selectors.js +13 -13
  55. package/lib/internal/template/button-dropdown/item-element/styles.css.js +15 -15
  56. package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +38 -33
  57. package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +15 -15
  58. package/lib/internal/template/button-dropdown/mobile-expandable-group/styles.css.js +5 -5
  59. package/lib/internal/template/button-dropdown/mobile-expandable-group/styles.scoped.css +8 -8
  60. package/lib/internal/template/button-dropdown/mobile-expandable-group/styles.selectors.js +5 -5
  61. package/lib/internal/template/button-dropdown/styles.css.js +15 -15
  62. package/lib/internal/template/button-dropdown/styles.scoped.css +39 -36
  63. package/lib/internal/template/button-dropdown/styles.selectors.js +15 -15
  64. package/lib/internal/template/calendar/styles.css.js +18 -18
  65. package/lib/internal/template/calendar/styles.scoped.css +75 -59
  66. package/lib/internal/template/calendar/styles.selectors.js +18 -18
  67. package/lib/internal/template/cards/styles.css.js +38 -38
  68. package/lib/internal/template/cards/styles.scoped.css +110 -94
  69. package/lib/internal/template/cards/styles.selectors.js +38 -38
  70. package/lib/internal/template/code-editor/resizable-box/styles.css.js +3 -3
  71. package/lib/internal/template/code-editor/resizable-box/styles.scoped.css +13 -13
  72. package/lib/internal/template/code-editor/resizable-box/styles.selectors.js +3 -3
  73. package/lib/internal/template/code-editor/styles.css.js +32 -32
  74. package/lib/internal/template/code-editor/styles.scoped.css +258 -246
  75. package/lib/internal/template/code-editor/styles.selectors.js +32 -32
  76. package/lib/internal/template/collection-preferences/content-display/styles.css.js +11 -11
  77. package/lib/internal/template/collection-preferences/content-display/styles.scoped.css +40 -30
  78. package/lib/internal/template/collection-preferences/content-display/styles.selectors.js +11 -11
  79. package/lib/internal/template/collection-preferences/styles.css.js +37 -37
  80. package/lib/internal/template/collection-preferences/styles.scoped.css +79 -66
  81. package/lib/internal/template/collection-preferences/styles.selectors.js +37 -37
  82. package/lib/internal/template/column-layout/flexible-column-layout/styles.css.js +5 -5
  83. package/lib/internal/template/column-layout/flexible-column-layout/styles.scoped.css +8 -9
  84. package/lib/internal/template/column-layout/flexible-column-layout/styles.selectors.js +5 -5
  85. package/lib/internal/template/column-layout/styles.css.js +13 -13
  86. package/lib/internal/template/column-layout/styles.scoped.css +70 -64
  87. package/lib/internal/template/column-layout/styles.selectors.js +13 -13
  88. package/lib/internal/template/container/styles.css.js +28 -28
  89. package/lib/internal/template/container/styles.scoped.css +106 -98
  90. package/lib/internal/template/container/styles.selectors.js +28 -28
  91. package/lib/internal/template/content-layout/styles.css.js +7 -7
  92. package/lib/internal/template/content-layout/styles.scoped.css +15 -15
  93. package/lib/internal/template/content-layout/styles.selectors.js +7 -7
  94. package/lib/internal/template/date-picker/styles.css.js +7 -7
  95. package/lib/internal/template/date-picker/styles.scoped.css +12 -12
  96. package/lib/internal/template/date-picker/styles.selectors.js +7 -7
  97. package/lib/internal/template/date-range-picker/calendar/grids/styles.css.js +25 -25
  98. package/lib/internal/template/date-range-picker/calendar/grids/styles.scoped.css +71 -60
  99. package/lib/internal/template/date-range-picker/calendar/grids/styles.selectors.js +25 -25
  100. package/lib/internal/template/date-range-picker/relative-range/styles.css.js +9 -9
  101. package/lib/internal/template/date-range-picker/relative-range/styles.scoped.css +21 -21
  102. package/lib/internal/template/date-range-picker/relative-range/styles.selectors.js +9 -9
  103. package/lib/internal/template/date-range-picker/styles.css.js +38 -38
  104. package/lib/internal/template/date-range-picker/styles.scoped.css +73 -68
  105. package/lib/internal/template/date-range-picker/styles.selectors.js +38 -38
  106. package/lib/internal/template/drawer/styles.css.js +3 -3
  107. package/lib/internal/template/drawer/styles.scoped.css +21 -18
  108. package/lib/internal/template/drawer/styles.selectors.js +3 -3
  109. package/lib/internal/template/expandable-section/styles.css.js +29 -29
  110. package/lib/internal/template/expandable-section/styles.scoped.css +99 -94
  111. package/lib/internal/template/expandable-section/styles.selectors.js +29 -29
  112. package/lib/internal/template/file-upload/dropzone/styles.css.js +2 -2
  113. package/lib/internal/template/file-upload/dropzone/styles.scoped.css +8 -4
  114. package/lib/internal/template/file-upload/dropzone/styles.selectors.js +2 -2
  115. package/lib/internal/template/file-upload/file-option/styles.css.js +7 -7
  116. package/lib/internal/template/file-upload/file-option/styles.scoped.css +15 -15
  117. package/lib/internal/template/file-upload/file-option/styles.selectors.js +7 -7
  118. package/lib/internal/template/file-upload/styles.css.js +2 -2
  119. package/lib/internal/template/file-upload/styles.scoped.css +4 -4
  120. package/lib/internal/template/file-upload/styles.selectors.js +2 -2
  121. package/lib/internal/template/flashbar/styles.css.js +47 -47
  122. package/lib/internal/template/flashbar/styles.scoped.css +220 -215
  123. package/lib/internal/template/flashbar/styles.selectors.js +47 -47
  124. package/lib/internal/template/form/styles.css.js +9 -9
  125. package/lib/internal/template/form/styles.scoped.css +18 -18
  126. package/lib/internal/template/form/styles.selectors.js +9 -9
  127. package/lib/internal/template/form-field/styles.css.js +19 -19
  128. package/lib/internal/template/form-field/styles.scoped.css +34 -34
  129. package/lib/internal/template/form-field/styles.selectors.js +19 -19
  130. package/lib/internal/template/internal/environment.js +1 -1
  131. package/lib/internal/template/internal/environment.json +1 -1
  132. package/lib/internal/template/modal/styles.css.js +23 -23
  133. package/lib/internal/template/modal/styles.scoped.css +39 -39
  134. package/lib/internal/template/modal/styles.selectors.js +23 -23
  135. package/lib/internal/template/tiles/styles.css.js +29 -29
  136. package/lib/internal/template/tiles/styles.scoped.css +97 -91
  137. package/lib/internal/template/tiles/styles.selectors.js +29 -29
  138. package/package.json +1 -1
@@ -40,28 +40,29 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
40
40
 
41
41
  .icon-container {
42
42
  position: relative;
43
- margin-left: calc(#{$icon-margin-left});
43
+ margin-inline: calc(#{$icon-margin-left}) calc(#{$icon-margin-right-normal});
44
44
  // For vertical alignment of text in side navigation items
45
- margin-right: calc(#{$icon-margin-right-normal});
46
45
  &-container {
47
- margin-right: $icon-margin-right-medium;
46
+ margin-inline-end: $icon-margin-right-medium;
48
47
  }
49
48
  }
50
49
 
51
50
  .wrapper {
52
51
  box-sizing: border-box;
53
- border: none;
54
- width: 100%;
52
+ border-block: none;
53
+ border-inline: none;
54
+ inline-size: 100%;
55
55
  line-height: awsui.$line-height-body-m;
56
- text-align: left;
56
+ text-align: start;
57
57
 
58
58
  &-default,
59
59
  &-footer {
60
- border: awsui.$border-divider-section-width solid transparent;
60
+ border-block: awsui.$border-divider-section-width solid transparent;
61
+ border-inline: awsui.$border-divider-section-width solid transparent;
61
62
  }
62
63
  &-navigation {
63
64
  // not needed for focus ring compensation, but to keep this variant vertically aligned with other variants when used together
64
- border-left: awsui.$border-divider-section-width solid transparent;
65
+ border-inline-start: awsui.$border-divider-section-width solid transparent;
65
66
  }
66
67
 
67
68
  &-navigation,
@@ -80,54 +81,52 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
80
81
  }
81
82
 
82
83
  &-default {
83
- padding-top: awsui.$space-scaled-xxs;
84
- padding-bottom: awsui.$space-scaled-xxs;
85
- padding-right: awsui.$space-xxs;
84
+ padding-block: awsui.$space-scaled-xxs;
85
+ padding-inline-end: awsui.$space-xxs;
86
86
  &.header-deprecated {
87
- padding-left: awsui.$space-xxs;
87
+ padding-inline-start: awsui.$space-xxs;
88
88
  }
89
89
  &:not(.header-deprecated) {
90
- padding-left: calc(#{awsui.$space-xxs} + #{$icon-total-space-normal});
90
+ padding-inline-start: calc(#{awsui.$space-xxs} + #{$icon-total-space-normal});
91
91
  }
92
92
  }
93
93
 
94
94
  &-footer {
95
95
  // We remove left and right padding here to better align the carat icon
96
- padding-top: awsui.$space-scaled-xxs;
97
- padding-bottom: awsui.$space-scaled-xxs;
98
- padding-right: 0;
96
+ padding-block: awsui.$space-scaled-xxs;
97
+ padding-inline-end: 0;
99
98
  &.header-deprecated {
100
- padding-left: 0;
99
+ padding-inline-start: 0;
101
100
  }
102
101
  &:not(.header-deprecated) {
103
- padding-left: $icon-total-space-normal;
102
+ padding-inline-start: $icon-total-space-normal;
104
103
  }
105
104
  }
106
105
 
107
106
  &-container {
108
- padding-top: awsui.$space-container-header-top;
109
- padding-bottom: awsui.$space-container-header-bottom;
110
- padding-right: container.$header-padding-horizontal;
107
+ padding-block: awsui.$space-container-header-top awsui.$space-container-header-bottom;
108
+ padding-inline-end: container.$header-padding-horizontal;
111
109
 
112
110
  &:not(.wrapper-expanded) {
113
111
  // Equal top and bottom padding so standalone header has vertical symmetry.
114
- padding-bottom: awsui.$space-container-header-top;
112
+ padding-block-end: awsui.$space-container-header-top;
115
113
  }
116
114
  &.header-deprecated {
117
- padding-left: container.$header-padding-horizontal;
115
+ padding-inline-start: container.$header-padding-horizontal;
118
116
  }
119
117
  &:not(.header-deprecated) {
120
- padding-left: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
118
+ padding-inline-start: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
121
119
  }
122
120
 
123
121
  @include focus-visible.when-visible {
124
122
  // HACK: Remediate focus border
125
- padding: container.$header-focus-visible-padding;
123
+ padding-block: calc(#{awsui.$space-scaled-s} - #{awsui.$border-divider-section-width});
124
+ padding-inline: calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
126
125
  }
127
126
  }
128
127
 
129
128
  &-default.wrapper-expanded {
130
- border-bottom-color: awsui.$color-border-divider-default;
129
+ border-block-end-color: awsui.$color-border-divider-default;
131
130
  }
132
131
  }
133
132
 
@@ -143,8 +142,10 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
143
142
  &-wrapper {
144
143
  font-size: inherit;
145
144
  letter-spacing: inherit;
146
- margin: 0;
147
- padding: 0;
145
+ margin-block: 0;
146
+ margin-inline: 0;
147
+ padding-block: 0;
148
+ padding-inline: 0;
148
149
  }
149
150
 
150
151
  &-button,
@@ -157,18 +158,18 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
157
158
  &-button {
158
159
  box-sizing: border-box;
159
160
  display: flex;
160
- margin-left: calc(-1 * #{$icon-total-space-normal});
161
+ margin-inline-start: calc(-1 * #{$icon-total-space-normal});
161
162
  }
162
163
 
163
164
  &-container-button {
164
- margin-left: calc(-1 * #{$icon-total-space-medium});
165
+ margin-inline-start: calc(-1 * #{$icon-total-space-medium});
165
166
  }
166
167
 
167
168
  &-container {
168
- width: 100%;
169
+ inline-size: 100%;
169
170
  // The icon-container style is kept for variant='container' and header
170
171
  > .icon-container {
171
- margin-top: awsui.$space-expandable-section-icon-offset-top;
172
+ margin-block-start: awsui.$space-expandable-section-icon-offset-top;
172
173
  }
173
174
  }
174
175
 
@@ -177,8 +178,10 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
177
178
  display: inline-flex;
178
179
  cursor: pointer;
179
180
  color: awsui.$color-text-expandable-section-navigation-icon-default;
180
- border: 0;
181
- padding: 0;
181
+ border-block: 0;
182
+ border-inline: 0;
183
+ padding-block: 0;
184
+ padding-inline: 0;
182
185
  background: transparent;
183
186
  outline: none;
184
187
  text-decoration: none;
@@ -203,11 +206,13 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
203
206
  display: none;
204
207
 
205
208
  &-default {
206
- padding: awsui.$space-scaled-xs 0;
209
+ padding-block: awsui.$space-scaled-xs;
210
+ padding-inline: 0;
207
211
  }
208
212
 
209
213
  &-footer {
210
- padding: awsui.$space-xs 0;
214
+ padding-block: awsui.$space-xs;
215
+ padding-inline: 0;
211
216
  }
212
217
 
213
218
  &-expanded {
@@ -12,8 +12,12 @@
12
12
  align-items: center;
13
13
  justify-content: center;
14
14
  gap: awsui.$space-static-xxs;
15
- padding: awsui.$space-static-l;
16
- border-radius: awsui.$border-radius-dropzone;
15
+ padding-block: awsui.$space-static-l;
16
+ padding-inline: awsui.$space-static-l;
17
+ border-start-start-radius: awsui.$border-radius-dropzone;
18
+ border-start-end-radius: awsui.$border-radius-dropzone;
19
+ border-end-start-radius: awsui.$border-radius-dropzone;
20
+ border-end-end-radius: awsui.$border-radius-dropzone;
17
21
  color: awsui.$color-dropzone-text-active;
18
22
  background-color: awsui.$color-dropzone-background-active;
19
23
  font-weight: styles.$font-weight-bold;
@@ -13,22 +13,22 @@
13
13
  }
14
14
 
15
15
  .file-option {
16
- width: 100%;
17
- min-width: 0;
16
+ inline-size: 100%;
17
+ min-inline-size: 0;
18
18
  display: flex;
19
19
  gap: awsui.$space-scaled-xs;
20
20
  }
21
21
 
22
22
  .file-option-thumbnail {
23
- margin-top: awsui.$space-static-xxs;
24
- max-width: 60px;
23
+ margin-block-start: awsui.$space-static-xxs;
24
+ max-inline-size: 60px;
25
25
  }
26
26
 
27
27
  .file-option-thumbnail-image {
28
- width: 100%;
29
- height: auto;
28
+ inline-size: 100%;
29
+ block-size: auto;
30
30
  }
31
31
 
32
32
  .file-option-metadata {
33
- width: 100%;
33
+ inline-size: 100%;
34
34
  }
@@ -11,5 +11,5 @@
11
11
  }
12
12
 
13
13
  .hints {
14
- margin-top: awsui.$space-static-xxs;
14
+ margin-block-start: awsui.$space-static-xxs;
15
15
  }
@@ -83,7 +83,7 @@ the grid layout will be:
83
83
  with one single line of text.
84
84
  This makes them look better during the collapse animation, in which they are already empty.
85
85
  */
86
- min-height: calc(
86
+ min-block-size: calc(
87
87
  #{awsui.$line-height-body-m} + (
88
88
  #{awsui.$space-scaled-xs} + #{awsui.$border-field-width} + #{awsui.$space-scaled-xxs}
89
89
  ) * 2
@@ -114,7 +114,7 @@ the grid layout will be:
114
114
  #{custom-props.$stackedNotificationsDefaultBottomMargin}: calc(
115
115
  #{$notification-bar-line-height} + 2 * #{$notification-bar-padding-vertical} + 2 * #{$border-width} - #{$top-overlap}
116
116
  );
117
- margin-bottom: calc(
117
+ margin-block-end: calc(
118
118
  var(
119
119
  #{custom-props.$stackedNotificationsBottomMargin},
120
120
  var(#{custom-props.$stackedNotificationsDefaultBottomMargin})
@@ -122,16 +122,15 @@ the grid layout will be:
122
122
  );
123
123
 
124
124
  > .notification-bar {
125
- margin-top: calc(-1 * #{$top-overlap} + #{$offset-bottom});
125
+ margin-block-start: calc(-1 * #{$top-overlap} + #{$offset-bottom});
126
126
  /* $notification-bar-line-height + 2 * $notification-bar-padding-vertical + 2 * $border-width
127
127
  is the full height of the notification bar */
128
128
  /* stylelint-disable scss/operator-no-newline-after */
129
- margin-bottom: calc(
129
+ margin-block-end: calc(
130
130
  #{$top-overlap} - #{$notification-bar-line-height} - 2 * #{$notification-bar-padding-vertical} - 2 * #{$border-width} -
131
131
  #{$offset-bottom}
132
132
  );
133
- padding-top: $notification-bar-padding-vertical;
134
- padding-bottom: $notification-bar-padding-vertical;
133
+ padding-block: $notification-bar-padding-vertical;
135
134
  }
136
135
  }
137
136
 
@@ -201,8 +200,12 @@ the grid layout will be:
201
200
  @include styles.text-wrapping;
202
201
  background: awsui.$color-background-notification-stack-bar;
203
202
  border-color: awsui.$color-border-notification-stack-bar;
204
- border-radius: awsui.$border-radius-button;
205
- border-style: solid;
203
+ border-start-start-radius: awsui.$border-radius-button;
204
+ border-start-end-radius: awsui.$border-radius-button;
205
+ border-end-start-radius: awsui.$border-radius-button;
206
+ border-end-end-radius: awsui.$border-radius-button;
207
+ border-block-style: solid;
208
+ border-inline-style: solid;
206
209
  box-shadow: awsui.$shadow-panel-toggle;
207
210
  color: awsui.$color-text-notification-stack-bar;
208
211
  cursor: pointer;
@@ -214,8 +217,7 @@ the grid layout will be:
214
217
  column-gap: calc(#{awsui.$space-m} + #{awsui.$space-xxs});
215
218
  justify-content: center;
216
219
  letter-spacing: awsui.$font-button-letter-spacing;
217
- margin-left: auto;
218
- margin-right: auto;
220
+ margin-inline: auto;
219
221
  row-gap: 0;
220
222
  text-align: center;
221
223
  text-decoration: none;
@@ -227,10 +229,8 @@ the grid layout will be:
227
229
  @include typography.default-text-style;
228
230
  color: awsui.$color-text-notification-stack-bar;
229
231
  cursor: pointer;
230
- margin-top: 0;
231
- margin-bottom: 0;
232
- padding-top: 0;
233
- padding-bottom: 0;
232
+ margin-block: 0;
233
+ padding-block: 0;
234
234
  }
235
235
 
236
236
  > .status {
@@ -255,7 +255,7 @@ the grid layout will be:
255
255
  row-gap: 0;
256
256
 
257
257
  > .type-count > .count-number {
258
- margin-left: awsui.$space-xxs;
258
+ margin-inline-start: awsui.$space-xxs;
259
259
  }
260
260
  }
261
261
  }
@@ -271,16 +271,16 @@ the grid layout will be:
271
271
 
272
272
  &.visual-refresh {
273
273
  $border-width: map.get($notification-bar-border-width, 'visual-refresh');
274
- border-width: $border-width;
275
- padding-left: awsui.$space-l;
276
- padding-right: awsui.$space-l;
274
+ border-block-width: $border-width;
275
+ border-inline-width: $border-width;
276
+ padding-inline: awsui.$space-l;
277
277
  }
278
278
 
279
279
  &:not(.visual-refresh) {
280
280
  $border-width: map.get($notification-bar-border-width, 'classic');
281
- border-width: $border-width;
282
- padding-left: awsui.$space-s;
283
- padding-right: awsui.$space-s;
281
+ border-block-width: $border-width;
282
+ border-inline-width: $border-width;
283
+ padding-inline: awsui.$space-s;
284
284
 
285
285
  &:focus {
286
286
  text-decoration: none;
@@ -295,9 +295,9 @@ the grid layout will be:
295
295
  display: inline-block;
296
296
  flex-grow: 1;
297
297
  background: none;
298
- border: 0 none;
299
- padding-top: 0;
300
- padding-bottom: 0;
298
+ border-block: 0;
299
+ border-inline: none;
300
+ padding-block: 0;
301
301
 
302
302
  > .icon {
303
303
  @include styles.with-motion {
@@ -321,5 +321,5 @@ the grid layout will be:
321
321
  // Prevent the sticky Flashbar from reaching the end of the window by leaving some space below.
322
322
  .stack.expanded:not(.floating) {
323
323
  // Default to 0 so that this does not apply to non-sticky Flashbar.
324
- padding-bottom: var(#{custom-props.$flashbarStickyBottomMargin}, 0);
324
+ padding-block-end: var(#{custom-props.$flashbarStickyBottomMargin}, 0);
325
325
  }
@@ -15,7 +15,7 @@
15
15
  /* stylelint-disable-next-line selector-max-type */
16
16
  > li + li {
17
17
  // Avoid Flashbar list gets additional padding to fix issue AWSUI-20382
18
- padding-top: 0;
18
+ padding-block-start: 0;
19
19
  }
20
20
  }
21
21
 
@@ -29,15 +29,22 @@
29
29
  display: flex;
30
30
  justify-content: flex-start;
31
31
  align-items: flex-start;
32
- padding: awsui.$space-scaled-xs awsui.$space-flashbar-horizontal;
33
- border-radius: awsui.$border-radius-flashbar;
32
+ padding-block: awsui.$space-scaled-xs;
33
+ padding-inline: awsui.$space-flashbar-horizontal;
34
+ border-start-start-radius: awsui.$border-radius-flashbar;
35
+ border-start-end-radius: awsui.$border-radius-flashbar;
36
+ border-end-start-radius: awsui.$border-radius-flashbar;
37
+ border-end-end-radius: awsui.$border-radius-flashbar;
34
38
  color: awsui.$color-text-notification-default;
35
39
  overflow-wrap: break-word;
36
40
  word-wrap: break-word;
37
41
 
38
42
  &::before {
39
43
  @include styles.base-pseudo-element;
40
- border-radius: awsui.$border-radius-flashbar;
44
+ border-start-start-radius: awsui.$border-radius-flashbar;
45
+ border-start-end-radius: awsui.$border-radius-flashbar;
46
+ border-end-start-radius: awsui.$border-radius-flashbar;
47
+ border-end-end-radius: awsui.$border-radius-flashbar;
41
48
  box-shadow: awsui.$shadow-flash-sticky;
42
49
  }
43
50
  &-refresh::before {
@@ -47,12 +54,14 @@
47
54
 
48
55
  .flash-list {
49
56
  list-style: none;
50
- padding: 0;
51
- margin: 0;
57
+ padding-block: 0;
58
+ padding-inline: 0;
59
+ margin-block: 0;
60
+ margin-inline: 0;
52
61
 
53
62
  &:not(.collapsed) {
54
63
  > li:not(:last-child) {
55
- margin-bottom: awsui.$space-xxxs;
64
+ margin-block-end: awsui.$space-xxxs;
56
65
  }
57
66
  }
58
67
  }
@@ -60,13 +69,13 @@
60
69
  .flash-body {
61
70
  display: flex;
62
71
  flex-grow: 1;
63
- min-width: 0;
72
+ min-inline-size: 0;
64
73
  }
65
74
 
66
75
  .flash-focus-container {
67
76
  display: flex;
68
77
  flex: 1;
69
- min-width: 0;
78
+ min-inline-size: 0;
70
79
 
71
80
  &:focus {
72
81
  outline: none;
@@ -77,13 +86,15 @@
77
86
  }
78
87
 
79
88
  .flash-text {
80
- margin: awsui.$border-field-width 0;
81
- padding: awsui.$space-scaled-xxs awsui.$space-xxs;
89
+ margin-block: awsui.$border-field-width;
90
+ margin-inline: 0;
91
+ padding-block: awsui.$space-scaled-xxs;
92
+ padding-inline: awsui.$space-xxs;
82
93
  }
83
94
 
84
95
  .flash-icon {
85
96
  flex: 0 0 auto;
86
- padding-left: 0;
97
+ padding-inline-start: 0;
87
98
  }
88
99
 
89
100
  .flash-message {
@@ -101,9 +112,8 @@
101
112
 
102
113
  .dismiss-button-wrapper {
103
114
  flex: 0 0 auto;
104
- margin-left: awsui.$space-s;
105
- margin-right: calc(-1 * #{awsui.$space-xxs});
106
- padding-right: awsui.$space-flashbar-dismiss-right;
115
+ margin-inline: awsui.$space-s calc(-1 * #{awsui.$space-xxs});
116
+ padding-inline-end: awsui.$space-flashbar-dismiss-right;
107
117
  }
108
118
 
109
119
  .dismiss-button {
@@ -112,15 +122,15 @@
112
122
 
113
123
  .action-button-wrapper {
114
124
  white-space: nowrap;
115
- margin-left: awsui.$space-flashbar-action-left;
125
+ margin-inline-start: awsui.$space-flashbar-action-left;
116
126
  }
117
127
 
118
128
  .flashbar.breakpoint-default > .flash-list > .flash-list-item > .flash > .flash-body {
119
129
  display: block;
120
130
  & > .action-button-wrapper {
121
- margin-left: awsui.$space-l;
122
- padding-left: awsui.$space-xxs;
123
- margin-bottom: awsui.$space-xxs;
131
+ margin-inline-start: awsui.$space-l;
132
+ padding-inline-start: awsui.$space-xxs;
133
+ margin-block-end: awsui.$space-xxs;
124
134
  }
125
135
  }
126
136
 
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  .header:not(.full-page) {
14
- margin-bottom: awsui.$space-scaled-m;
14
+ margin-block-end: awsui.$space-scaled-m;
15
15
  }
16
16
 
17
17
  .content {
@@ -23,23 +23,23 @@
23
23
  }
24
24
 
25
25
  .footer {
26
- margin-top: awsui.$space-scaled-l;
26
+ margin-block-start: awsui.$space-scaled-l;
27
27
  }
28
28
  .actions-section {
29
29
  display: flex;
30
30
  flex-direction: row-reverse;
31
31
  justify-content: space-between;
32
32
  flex-wrap: wrap;
33
- margin-left: calc(-1 * #{awsui.$space-scaled-m});
34
- margin-bottom: calc(-1 * #{awsui.$space-scaled-m});
33
+ margin-inline-start: calc(-1 * #{awsui.$space-scaled-m});
34
+ margin-block-end: calc(-1 * #{awsui.$space-scaled-m});
35
35
  }
36
36
  .secondary-actions {
37
- min-width: 1px;
38
- margin-left: awsui.$space-scaled-m;
39
- margin-bottom: awsui.$space-scaled-m;
37
+ min-inline-size: 1px;
38
+ margin-inline-start: awsui.$space-scaled-m;
39
+ margin-block-end: awsui.$space-scaled-m;
40
40
  }
41
41
  .actions {
42
- min-width: 1px;
43
- margin-left: awsui.$space-scaled-m;
44
- margin-bottom: awsui.$space-scaled-m;
42
+ min-inline-size: 1px;
43
+ margin-inline-start: awsui.$space-scaled-m;
44
+ margin-block-end: awsui.$space-scaled-m;
45
45
  }
@@ -24,8 +24,8 @@
24
24
  }
25
25
 
26
26
  .info {
27
- padding-left: awsui.$space-xs;
28
- border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
27
+ padding-inline-start: awsui.$space-xs;
28
+ border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
29
29
  }
30
30
 
31
31
  .description,
@@ -35,7 +35,7 @@
35
35
 
36
36
  .hints,
37
37
  .constraint-has-error {
38
- padding-top: awsui.$space-xxs;
38
+ padding-block-start: awsui.$space-xxs;
39
39
  }
40
40
 
41
41
  .secondary-control {
@@ -44,7 +44,7 @@
44
44
 
45
45
  .controls {
46
46
  &:not(.label-hidden) {
47
- padding-top: awsui.$space-xxs;
47
+ padding-block-start: awsui.$space-xxs;
48
48
  }
49
49
  }
50
50
 
@@ -61,7 +61,7 @@
61
61
  }
62
62
 
63
63
  .error__message {
64
- margin-left: awsui.$space-xxs;
64
+ margin-inline-start: awsui.$space-xxs;
65
65
  }
66
66
 
67
67
  .visually-hidden {
@@ -1,10 +1,10 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "badge": "awsui_badge_1yjyg_eqbis_93",
5
- "badge-color-grey": "awsui_badge-color-grey_1yjyg_eqbis_113",
6
- "badge-color-green": "awsui_badge-color-green_1yjyg_eqbis_116",
7
- "badge-color-blue": "awsui_badge-color-blue_1yjyg_eqbis_119",
8
- "badge-color-red": "awsui_badge-color-red_1yjyg_eqbis_122"
4
+ "badge": "awsui_badge_1yjyg_1lozd_93",
5
+ "badge-color-grey": "awsui_badge-color-grey_1yjyg_1lozd_117",
6
+ "badge-color-green": "awsui_badge-color-green_1yjyg_1lozd_120",
7
+ "badge-color-blue": "awsui_badge-color-blue_1yjyg_1lozd_123",
8
+ "badge-color-red": "awsui_badge-color-red_1yjyg_1lozd_126"
9
9
  };
10
10
 
@@ -90,7 +90,7 @@ 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_badge_1yjyg_eqbis_93:not(#\9) {
93
+ .awsui_badge_1yjyg_1lozd_93:not(#\9) {
94
94
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
95
95
  border-collapse: separate;
96
96
  border-spacing: 0;
@@ -132,19 +132,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
132
132
  letter-spacing: var(--letter-spacing-body-s-nkvets, normal);
133
133
  line-height: var(--line-height-body-m-2zx78l, 22px);
134
134
  display: inline-block;
135
- border-radius: var(--border-radius-badge-iqcxsr, 16px);
136
- padding: 0 var(--space-xs-xf5ch3, 8px);
135
+ border-start-start-radius: var(--border-radius-badge-iqcxsr, 16px);
136
+ border-start-end-radius: var(--border-radius-badge-iqcxsr, 16px);
137
+ border-end-start-radius: var(--border-radius-badge-iqcxsr, 16px);
138
+ border-end-end-radius: var(--border-radius-badge-iqcxsr, 16px);
139
+ padding-block: 0;
140
+ padding-inline: var(--space-xs-xf5ch3, 8px);
137
141
  color: var(--color-text-notification-default-hruauw, #fafafa);
138
142
  }
139
- .awsui_badge_1yjyg_eqbis_93.awsui_badge-color-grey_1yjyg_eqbis_113:not(#\9) {
143
+ .awsui_badge_1yjyg_1lozd_93.awsui_badge-color-grey_1yjyg_1lozd_117:not(#\9) {
140
144
  background-color: var(--color-background-notification-grey-hf7l1x, #545b64);
141
145
  }
142
- .awsui_badge_1yjyg_eqbis_93.awsui_badge-color-green_1yjyg_eqbis_116:not(#\9) {
146
+ .awsui_badge_1yjyg_1lozd_93.awsui_badge-color-green_1yjyg_1lozd_120:not(#\9) {
143
147
  background-color: var(--color-background-notification-green-igmdlm, #1d8102);
144
148
  }
145
- .awsui_badge_1yjyg_eqbis_93.awsui_badge-color-blue_1yjyg_eqbis_119:not(#\9) {
149
+ .awsui_badge_1yjyg_1lozd_93.awsui_badge-color-blue_1yjyg_1lozd_123:not(#\9) {
146
150
  background-color: var(--color-background-notification-blue-xgzcj2, #0073bb);
147
151
  }
148
- .awsui_badge_1yjyg_eqbis_93.awsui_badge-color-red_1yjyg_eqbis_122:not(#\9) {
152
+ .awsui_badge_1yjyg_1lozd_93.awsui_badge-color-red_1yjyg_1lozd_126:not(#\9) {
149
153
  background-color: var(--color-background-notification-red-k9i8vf, #d13212);
150
154
  }
@@ -2,10 +2,10 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "badge": "awsui_badge_1yjyg_eqbis_93",
6
- "badge-color-grey": "awsui_badge-color-grey_1yjyg_eqbis_113",
7
- "badge-color-green": "awsui_badge-color-green_1yjyg_eqbis_116",
8
- "badge-color-blue": "awsui_badge-color-blue_1yjyg_eqbis_119",
9
- "badge-color-red": "awsui_badge-color-red_1yjyg_eqbis_122"
5
+ "badge": "awsui_badge_1yjyg_1lozd_93",
6
+ "badge-color-grey": "awsui_badge-color-grey_1yjyg_1lozd_117",
7
+ "badge-color-green": "awsui_badge-color-green_1yjyg_1lozd_120",
8
+ "badge-color-blue": "awsui_badge-color-blue_1yjyg_1lozd_123",
9
+ "badge-color-red": "awsui_badge-color-red_1yjyg_1lozd_126"
10
10
  };
11
11