npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.475 → 3.0.477 - Mend

@cloudscape-design/components-themeable 3.0.475 → 3.0.477

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 (304) hide show

package/lib/internal/scss/expandable-section/styles.scss CHANGED Viewed

@@ -40,29 +40,28 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 .icon-container {
   position: relative;
-  margin-inline: calc(#{$icon-margin-left}) calc(#{$icon-margin-right-normal});
+  margin-left: calc(#{$icon-margin-left});
   // For vertical alignment of text in side navigation items
+  margin-right: calc(#{$icon-margin-right-normal});
   &-container {
-    margin-inline-end: $icon-margin-right-medium;
+    margin-right: $icon-margin-right-medium;
   }
 }
 .wrapper {
   box-sizing: border-box;
-  border-block: none;
-  border-inline: none;
-  inline-size: 100%;
+  border: none;
+  width: 100%;
   line-height: awsui.$line-height-body-m;
-  text-align: start;
+  text-align: left;
   &-default,
   &-footer {
-    border-block: awsui.$border-divider-section-width solid transparent;
-    border-inline: awsui.$border-divider-section-width solid transparent;
+    border: awsui.$border-divider-section-width solid transparent;
   }
   &-navigation {
     // not needed for focus ring compensation, but to keep this variant vertically aligned with other variants when used together
-    border-inline-start: awsui.$border-divider-section-width solid transparent;
+    border-left: awsui.$border-divider-section-width solid transparent;
   }
   &-navigation,
@@ -73,60 +72,71 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   &-default,
   &-navigation,
-  &-footer {
+  &-footer,
+  &-compact {
     color: awsui.$color-text-expandable-section-default;
     @include styles.font-smoothing;
+  }
+  &-default,
+  &-navigation,
+  &-footer {
     font-size: awsui.$font-expandable-heading-size;
     letter-spacing: awsui.$letter-spacing-heading-s;
   }
   &-default {
-    padding-block: awsui.$space-scaled-xxs;
-    padding-inline-end: awsui.$space-xxs;
+    padding-top: awsui.$space-scaled-xxs;
+    padding-bottom: awsui.$space-scaled-xxs;
+    padding-right: awsui.$space-xxs;
     &.header-deprecated {
-      padding-inline-start: awsui.$space-xxs;
+      padding-left: awsui.$space-xxs;
     }
     &:not(.header-deprecated) {
-      padding-inline-start: calc(#{awsui.$space-xxs} + #{$icon-total-space-normal});
+      padding-left: calc(#{awsui.$space-xxs} + #{$icon-total-space-normal});
     }
   }
   &-footer {
-    // We remove left and right padding here to better align the carat icon
-    padding-block: awsui.$space-scaled-xxs;
-    padding-inline-end: 0;
+    padding-top: awsui.$space-scaled-xxs;
+    padding-bottom: awsui.$space-scaled-xxs;
+  }
+  &-footer,
+  &-compact {
+    padding-right: 0;
     &.header-deprecated {
-      padding-inline-start: 0;
+      padding-left: 0;
     }
     &:not(.header-deprecated) {
-      padding-inline-start: $icon-total-space-normal;
+      padding-left: $icon-total-space-normal;
     }
   }
   &-container {
-    padding-block: awsui.$space-container-header-top awsui.$space-container-header-bottom;
-    padding-inline-end: container.$header-padding-horizontal;
+    padding-top: awsui.$space-container-header-top;
+    padding-bottom: awsui.$space-container-header-bottom;
+    padding-right: container.$header-padding-horizontal;
     &:not(.wrapper-expanded) {
       // Equal top and bottom padding so standalone header has vertical symmetry.
-      padding-block-end: awsui.$space-container-header-top;
+      padding-bottom: awsui.$space-container-header-top;
     }
     &.header-deprecated {
-      padding-inline-start: container.$header-padding-horizontal;
+      padding-left: container.$header-padding-horizontal;
     }
     &:not(.header-deprecated) {
-      padding-inline-start: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
+      padding-left: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
     }
     @include focus-visible.when-visible {
       // HACK: Remediate focus border
-      padding-block: calc(#{awsui.$space-scaled-s} - #{awsui.$border-divider-section-width});
-      padding-inline: calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
+      padding: container.$header-focus-visible-padding;
     }
   }
   &-default.wrapper-expanded {
-    border-block-end-color: awsui.$color-border-divider-default;
+    border-bottom-color: awsui.$color-border-divider-default;
   }
 }
@@ -142,10 +152,14 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   &-wrapper {
     font-size: inherit;
     letter-spacing: inherit;
-    margin-block: 0;
-    margin-inline: 0;
-    padding-block: 0;
-    padding-inline: 0;
+    margin: 0;
+    padding: 0;
+  }
+  &-actions-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
   }
   &-button,
@@ -158,18 +172,18 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   &-button {
     box-sizing: border-box;
     display: flex;
-    margin-inline-start: calc(-1 * #{$icon-total-space-normal});
+    margin-left: calc(-1 * #{$icon-total-space-normal});
   }
   &-container-button {
-    margin-inline-start: calc(-1 * #{$icon-total-space-medium});
+    margin-left: calc(-1 * #{$icon-total-space-medium});
   }
   &-container {
-    inline-size: 100%;
+    width: 100%;
     // The icon-container style is kept for variant='container' and header
     > .icon-container {
-      margin-block-start: awsui.$space-expandable-section-icon-offset-top;
+      margin-top: awsui.$space-expandable-section-icon-offset-top;
     }
   }
@@ -178,10 +192,8 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
       display: inline-flex;
       cursor: pointer;
       color: awsui.$color-text-expandable-section-navigation-icon-default;
-      border-block: 0;
-      border-inline: 0;
-      padding-block: 0;
-      padding-inline: 0;
+      border: 0;
+      padding: 0;
       background: transparent;
       outline: none;
       text-decoration: none;
@@ -206,18 +218,20 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   display: none;
   &-default {
-    padding-block: awsui.$space-scaled-xs;
-    padding-inline: 0;
+    padding: awsui.$space-scaled-xs 0;
   }
   &-footer {
-    padding-block: awsui.$space-xs;
-    padding-inline: 0;
+    padding: awsui.$space-xs 0;
   }
   &-expanded {
     display: block;
   }
+  &-compact {
+    padding-inline-start: $icon-total-space-normal;
+  }
 }
 .focusable {

package/lib/internal/scss/file-upload/dropzone/styles.scss CHANGED Viewed

@@ -12,12 +12,8 @@
   align-items: center;
   justify-content: center;
   gap: awsui.$space-static-xxs;
-  padding-block: awsui.$space-static-l;
-  padding-inline: awsui.$space-static-l;
-  border-start-start-radius: awsui.$border-radius-dropzone;
-  border-start-end-radius: awsui.$border-radius-dropzone;
-  border-end-start-radius: awsui.$border-radius-dropzone;
-  border-end-end-radius: awsui.$border-radius-dropzone;
+  padding: awsui.$space-static-l;
+  border-radius: awsui.$border-radius-dropzone;
   color: awsui.$color-dropzone-text-active;
   background-color: awsui.$color-dropzone-background-active;
   font-weight: styles.$font-weight-bold;

package/lib/internal/scss/file-upload/file-option/styles.scss CHANGED Viewed

@@ -13,22 +13,22 @@
 }
 .file-option {
-  inline-size: 100%;
-  min-inline-size: 0;
+  width: 100%;
+  min-width: 0;
   display: flex;
   gap: awsui.$space-scaled-xs;
 }
 .file-option-thumbnail {
-  margin-block-start: awsui.$space-static-xxs;
-  max-inline-size: 60px;
+  margin-top: awsui.$space-static-xxs;
+  max-width: 60px;
 }
 .file-option-thumbnail-image {
-  inline-size: 100%;
-  block-size: auto;
+  width: 100%;
+  height: auto;
 }
 .file-option-metadata {
-  inline-size: 100%;
+  width: 100%;
 }

package/lib/internal/scss/file-upload/styles.scss CHANGED Viewed

@@ -11,5 +11,5 @@
 }
 .hints {
-  margin-block-start: awsui.$space-static-xxs;
+  margin-top: awsui.$space-static-xxs;
 }

package/lib/internal/scss/flashbar/collapsible.scss CHANGED Viewed

@@ -83,7 +83,7 @@ the grid layout will be:
        with one single line of text.
        This makes them look better during the collapse animation, in which they are already empty.
      */
-    min-block-size: calc(
+    min-height: calc(
       #{awsui.$line-height-body-m} + (
           #{awsui.$space-scaled-xs} + #{awsui.$border-field-width} + #{awsui.$space-scaled-xxs}
         ) * 2
@@ -114,7 +114,7 @@ the grid layout will be:
   #{custom-props.$stackedNotificationsDefaultBottomMargin}: calc(
     #{$notification-bar-line-height} + 2 * #{$notification-bar-padding-vertical} + 2 * #{$border-width} - #{$top-overlap}
   );
-  margin-block-end: calc(
+  margin-bottom: calc(
     var(
         #{custom-props.$stackedNotificationsBottomMargin},
         var(#{custom-props.$stackedNotificationsDefaultBottomMargin})
@@ -122,15 +122,16 @@ the grid layout will be:
   );
   > .notification-bar {
-    margin-block-start: calc(-1 * #{$top-overlap} + #{$offset-bottom});
+    margin-top: calc(-1 * #{$top-overlap} + #{$offset-bottom});
     /* $notification-bar-line-height + 2 * $notification-bar-padding-vertical + 2 * $border-width
     is the full height of the notification bar */
     /* stylelint-disable scss/operator-no-newline-after */
-    margin-block-end: calc(
+    margin-bottom: calc(
       #{$top-overlap} - #{$notification-bar-line-height} - 2 * #{$notification-bar-padding-vertical} - 2 * #{$border-width} -
         #{$offset-bottom}
     );
-    padding-block: $notification-bar-padding-vertical;
+    padding-top: $notification-bar-padding-vertical;
+    padding-bottom: $notification-bar-padding-vertical;
   }
 }
@@ -200,12 +201,8 @@ the grid layout will be:
   @include styles.text-wrapping;
   background: awsui.$color-background-notification-stack-bar;
   border-color: awsui.$color-border-notification-stack-bar;
-  border-start-start-radius: awsui.$border-radius-button;
-  border-start-end-radius: awsui.$border-radius-button;
-  border-end-start-radius: awsui.$border-radius-button;
-  border-end-end-radius: awsui.$border-radius-button;
-  border-block-style: solid;
-  border-inline-style: solid;
+  border-radius: awsui.$border-radius-button;
+  border-style: solid;
   box-shadow: awsui.$shadow-panel-toggle;
   color: awsui.$color-text-notification-stack-bar;
   cursor: pointer;
@@ -217,7 +214,8 @@ the grid layout will be:
   column-gap: calc(#{awsui.$space-m} + #{awsui.$space-xxs});
   justify-content: center;
   letter-spacing: awsui.$font-button-letter-spacing;
-  margin-inline: auto;
+  margin-left: auto;
+  margin-right: auto;
   row-gap: 0;
   text-align: center;
   text-decoration: none;
@@ -229,8 +227,10 @@ the grid layout will be:
     @include typography.default-text-style;
     color: awsui.$color-text-notification-stack-bar;
     cursor: pointer;
-    margin-block: 0;
-    padding-block: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
   }
   > .status {
@@ -255,7 +255,7 @@ the grid layout will be:
       row-gap: 0;
       > .type-count > .count-number {
-        margin-inline-start: awsui.$space-xxs;
+        margin-left: awsui.$space-xxs;
       }
     }
   }
@@ -271,16 +271,16 @@ the grid layout will be:
   &.visual-refresh {
     $border-width: map.get($notification-bar-border-width, 'visual-refresh');
-    border-block-width: $border-width;
-    border-inline-width: $border-width;
-    padding-inline: awsui.$space-l;
+    border-width: $border-width;
+    padding-left: awsui.$space-l;
+    padding-right: awsui.$space-l;
   }
   &:not(.visual-refresh) {
     $border-width: map.get($notification-bar-border-width, 'classic');
-    border-block-width: $border-width;
-    border-inline-width: $border-width;
-    padding-inline: awsui.$space-s;
+    border-width: $border-width;
+    padding-left: awsui.$space-s;
+    padding-right: awsui.$space-s;
     &:focus {
       text-decoration: none;
@@ -295,9 +295,9 @@ the grid layout will be:
     display: inline-block;
     flex-grow: 1;
     background: none;
-    border-block: 0;
-    border-inline: none;
-    padding-block: 0;
+    border: 0 none;
+    padding-top: 0;
+    padding-bottom: 0;
     > .icon {
       @include styles.with-motion {
@@ -321,5 +321,5 @@ the grid layout will be:
 // Prevent the sticky Flashbar from reaching the end of the window by leaving some space below.
 .stack.expanded:not(.floating) {
   // Default to 0 so that this does not apply to non-sticky Flashbar.
-  padding-block-end: var(#{custom-props.$flashbarStickyBottomMargin}, 0);
+  padding-bottom: var(#{custom-props.$flashbarStickyBottomMargin}, 0);
 }

package/lib/internal/scss/flashbar/styles.scss CHANGED Viewed

@@ -15,7 +15,7 @@
   /* stylelint-disable-next-line selector-max-type */
   > li + li {
     // Avoid Flashbar list gets additional padding to fix issue AWSUI-20382
-    padding-block-start: 0;
+    padding-top: 0;
   }
 }
@@ -29,22 +29,15 @@
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  padding-block: awsui.$space-scaled-xs;
-  padding-inline: awsui.$space-flashbar-horizontal;
-  border-start-start-radius: awsui.$border-radius-flashbar;
-  border-start-end-radius: awsui.$border-radius-flashbar;
-  border-end-start-radius: awsui.$border-radius-flashbar;
-  border-end-end-radius: awsui.$border-radius-flashbar;
+  padding: awsui.$space-scaled-xs awsui.$space-flashbar-horizontal;
+  border-radius: awsui.$border-radius-flashbar;
   color: awsui.$color-text-notification-default;
   overflow-wrap: break-word;
   word-wrap: break-word;
   &::before {
     @include styles.base-pseudo-element;
-    border-start-start-radius: awsui.$border-radius-flashbar;
-    border-start-end-radius: awsui.$border-radius-flashbar;
-    border-end-start-radius: awsui.$border-radius-flashbar;
-    border-end-end-radius: awsui.$border-radius-flashbar;
+    border-radius: awsui.$border-radius-flashbar;
     box-shadow: awsui.$shadow-flash-sticky;
   }
   &-refresh::before {
@@ -54,14 +47,12 @@
 .flash-list {
   list-style: none;
-  padding-block: 0;
-  padding-inline: 0;
-  margin-block: 0;
-  margin-inline: 0;
+  padding: 0;
+  margin: 0;
   &:not(.collapsed) {
     > li:not(:last-child) {
-      margin-block-end: awsui.$space-xxxs;
+      margin-bottom: awsui.$space-xxxs;
     }
   }
 }
@@ -69,13 +60,13 @@
 .flash-body {
   display: flex;
   flex-grow: 1;
-  min-inline-size: 0;
+  min-width: 0;
 }
 .flash-focus-container {
   display: flex;
   flex: 1;
-  min-inline-size: 0;
+  min-width: 0;
   &:focus {
     outline: none;
@@ -86,15 +77,13 @@
 }
 .flash-text {
-  margin-block: awsui.$border-field-width;
-  margin-inline: 0;
-  padding-block: awsui.$space-scaled-xxs;
-  padding-inline: awsui.$space-xxs;
+  margin: awsui.$border-field-width 0;
+  padding: awsui.$space-scaled-xxs awsui.$space-xxs;
 }
 .flash-icon {
   flex: 0 0 auto;
-  padding-inline-start: 0;
+  padding-left: 0;
 }
 .flash-message {
@@ -112,8 +101,9 @@
 .dismiss-button-wrapper {
   flex: 0 0 auto;
-  margin-inline: awsui.$space-s calc(-1 * #{awsui.$space-xxs});
-  padding-inline-end: awsui.$space-flashbar-dismiss-right;
+  margin-left: awsui.$space-s;
+  margin-right: calc(-1 * #{awsui.$space-xxs});
+  padding-right: awsui.$space-flashbar-dismiss-right;
 }
 .dismiss-button {
@@ -122,15 +112,15 @@
 .action-button-wrapper {
   white-space: nowrap;
-  margin-inline-start: awsui.$space-flashbar-action-left;
+  margin-left: awsui.$space-flashbar-action-left;
 }
 .flashbar.breakpoint-default > .flash-list > .flash-list-item > .flash > .flash-body {
   display: block;
   & > .action-button-wrapper {
-    margin-inline-start: awsui.$space-l;
-    padding-inline-start: awsui.$space-xxs;
-    margin-block-end: awsui.$space-xxs;
+    margin-left: awsui.$space-l;
+    padding-left: awsui.$space-xxs;
+    margin-bottom: awsui.$space-xxs;
   }
 }

package/lib/internal/scss/form/styles.scss CHANGED Viewed

@@ -11,7 +11,7 @@
 }
 .header:not(.full-page) {
-  margin-block-end: awsui.$space-scaled-m;
+  margin-bottom: awsui.$space-scaled-m;
 }
 .content {
@@ -23,23 +23,23 @@
 }
 .footer {
-  margin-block-start: awsui.$space-scaled-l;
+  margin-top: awsui.$space-scaled-l;
 }
 .actions-section {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   flex-wrap: wrap;
-  margin-inline-start: calc(-1 * #{awsui.$space-scaled-m});
-  margin-block-end: calc(-1 * #{awsui.$space-scaled-m});
+  margin-left: calc(-1 * #{awsui.$space-scaled-m});
+  margin-bottom: calc(-1 * #{awsui.$space-scaled-m});
 }
 .secondary-actions {
-  min-inline-size: 1px;
-  margin-inline-start: awsui.$space-scaled-m;
-  margin-block-end: awsui.$space-scaled-m;
+  min-width: 1px;
+  margin-left: awsui.$space-scaled-m;
+  margin-bottom: awsui.$space-scaled-m;
 }
 .actions {
-  min-inline-size: 1px;
-  margin-inline-start: awsui.$space-scaled-m;
-  margin-block-end: awsui.$space-scaled-m;
+  min-width: 1px;
+  margin-left: awsui.$space-scaled-m;
+  margin-bottom: awsui.$space-scaled-m;
 }

package/lib/internal/scss/form-field/styles.scss CHANGED Viewed

@@ -24,8 +24,8 @@
 }
 .info {
-  padding-inline-start: awsui.$space-xs;
-  border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  padding-left: awsui.$space-xs;
+  border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
 .description,
@@ -35,7 +35,7 @@
 .hints,
 .constraint-has-error {
-  padding-block-start: awsui.$space-xxs;
+  padding-top: awsui.$space-xxs;
 }
 .secondary-control {
@@ -44,7 +44,7 @@
 .controls {
   &:not(.label-hidden) {
-    padding-block-start: awsui.$space-xxs;
+    padding-top: awsui.$space-xxs;
   }
 }
@@ -61,7 +61,7 @@
 }
 .error__message {
-  margin-inline-start: awsui.$space-xxs;
+  margin-left: awsui.$space-xxs;
 }
 .visually-hidden {

package/lib/internal/scss/internal/components/chart-series-details/styles.scss CHANGED Viewed

@@ -7,10 +7,52 @@
 @use '../../styles/tokens' as awsui;
 @use './motion';
+@use '../chart-series-marker/styles' as marker;
+$font-weight-bold: awsui.$font-weight-heading-s;
 .root {
   @include styles.styles-reset;
 }
+.value {
+  text-align: right;
+  margin-inline-start: awsui.$space-xxl;
+  &.expandable {
+    font-weight: $font-weight-bold;
+  }
+}
+.list-item,
+.inner-list-item {
+  list-style: none;
+}
+.inner-list-item,
+.list-item > .key-value-pair,
+.list-item > .expandable-section {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  > .key {
+    display: inline-flex;
+    color: awsui.$color-text-group-label;
+  }
+}
+.sub-items {
+  &:not(.expandable) {
+    padding-inline-start: calc(marker.$marker-width + marker.$marker-margin-right);
+  }
+  &.expandable {
+    padding-inline-start: 0;
+    > .inner-list-item > .value {
+      white-space: nowrap;
+    }
+  }
+}
 .list {
   display: flex;
   margin: 0;
@@ -19,18 +61,27 @@
   flex-direction: column;
   > .list-item {
-    display: inline-flex;
-    justify-content: space-between;
+    > .key-value-pair > .key {
+      align-items: flex-start;
+    }
+    &.dimmed {
+      opacity: 0.35;
+    }
+  }
+}
+.list-item.with-sub-items:not(.expandable) > .key-value-pair {
+  > .key,
+  > .value {
+    font-weight: $font-weight-bold;
   }
 }
-.key {
-  display: inline-flex;
-  align-items: flex-start;
-  color: awsui.$color-text-group-label;
-  margin-right: awsui.$space-xxl;
+.full-width {
+  width: 100%;
 }
-.dimmed {
-  opacity: 0.35;
+.announced {
+  /* Used by getSeriesDetailText to select text to be announced by screen readers */
 }

package/lib/internal/scss/internal/components/chart-series-marker/styles.scss CHANGED Viewed

@@ -6,12 +6,15 @@
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
+$marker-width: 1.4 * styles.$base-size;
+$marker-margin-right: awsui.$space-xxs;
 .marker {
   @include styles.styles-reset;
-  margin-right: awsui.$space-xxs;
+  margin-right: $marker-margin-right;
   margin-top: awsui.$space-xxs;
   border-radius: 2px;
-  width: 1.4 * styles.$base-size;
+  width: $marker-width;
   flex-shrink: 0;
   cursor: inherit;