npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.536 → 3.0.538 - Mend

@cloudscape-design/components-themeable 3.0.536 → 3.0.538

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

package/lib/internal/scss/button-dropdown/category-elements/styles.scss CHANGED Viewed

@@ -8,19 +8,20 @@
 .header {
   position: relative;
-  margin: 0;
+  margin-block: 0;
+  margin-inline: 0;
   color: awsui.$color-text-dropdown-group-label;
-  border: awsui.$border-divider-list-width solid transparent;
+  border-block: awsui.$border-divider-list-width solid transparent;
+  border-inline: awsui.$border-divider-list-width solid transparent;
   // remove the borders completely to avoid the slating effect at the border ends (AWSUI-10545)
-  border-left: 0;
-  border-right: 0;
+  border-inline-width: 0;
   font-weight: bold;
   display: flex;
   justify-content: space-between;
   // to compensate for the loss of padding due to the removal of the left and right borders
   // and differences in default divider + selected border widths (visual refresh)
-  padding: styles.$option-padding-with-border-placeholder-vertical
-    calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
+  padding-block: styles.$option-padding-with-border-placeholder-vertical;
+  padding-inline: calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
   z-index: 1;
   &.disabled {
@@ -29,8 +30,8 @@
   }
   &.expandable-header {
-    border-top-color: awsui.$color-border-dropdown-group;
-    border-bottom-color: awsui.$color-border-dropdown-group;
+    border-block-start-color: awsui.$color-border-dropdown-group;
+    border-block-end-color: awsui.$color-border-dropdown-group;
     cursor: pointer;
     &.disabled {
       cursor: default;
@@ -39,16 +40,22 @@
       outline: none;
     }
     &.rolled-down {
-      border-bottom-color: transparent;
+      border-block-end-color: transparent;
     }
     &.highlighted {
       background-color: awsui.$color-background-dropdown-item-hover;
       color: awsui.$color-text-dropdown-item-highlighted;
       // reset padding when adding border back in
-      padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
-      border: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
-      border-radius: awsui.$border-radius-item;
+      padding-block: styles.$option-padding-vertical;
+      padding-inline: awsui.$space-button-horizontal;
+      border-block: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
+      border-inline: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
       z-index: 2;
       &.disabled {
         background-color: awsui.$color-background-dropdown-item-dimmed;
         border-color: awsui.$color-border-dropdown-item-dimmed-hover;
@@ -60,13 +67,13 @@
       }
     }
     &.variant-navigation {
-      padding-top: awsui.$space-xs;
-      padding-bottom: awsui.$space-xs;
+      padding-block-start: awsui.$space-xs;
+      padding-block-end: awsui.$space-xs;
       &.highlighted {
         border-color: transparent;
-        border-top-color: awsui.$color-border-dropdown-group;
-        border-bottom-color: awsui.$color-border-dropdown-group;
+        border-block-start-color: awsui.$color-border-dropdown-group;
+        border-block-end-color: awsui.$color-border-dropdown-group;
         background-color: transparent;
         color: awsui.$color-text-accent;
@@ -77,33 +84,34 @@
 .category {
   list-style: none;
-  margin-top: calc(-1 * #{awsui.$border-divider-list-width});
-  padding: 0;
+  margin-block-start: calc(-1 * #{awsui.$border-divider-list-width});
+  padding-block: 0;
+  padding-inline: 0;
   &:first-child {
-    margin-top: 0;
+    margin-block-start: 0;
   }
   &.expandable {
-    border-top: 0;
+    border-block-start: 0;
   }
   &:last-child {
-    border-bottom: none;
+    border-block-end: none;
   }
   &.variant-navigation {
-    padding-top: awsui.$space-xxs;
+    padding-block-start: awsui.$space-xxs;
     &.expandable {
-      padding-top: 0;
+      padding-block-start: 0;
     }
   }
 }
 .expand-icon {
   position: relative;
-  left: awsui.$space-s;
-  width: awsui.$space-m;
+  inset-inline-start: awsui.$space-s;
+  inline-size: awsui.$space-m;
   display: inline-block;
   &-up {
@@ -119,7 +127,10 @@
 }
 .items-list-container {
-  padding: 0;
-  margin: -1px 0 0 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block-start: -1px;
+  margin-block-end: 0;
+  margin-inline: 0;
   overflow-y: auto;
 }

package/lib/internal/scss/button-dropdown/item-element/styles.scss CHANGED Viewed

@@ -9,11 +9,13 @@
 .item-element {
   position: relative;
   z-index: 1;
-  border: awsui.$border-item-width solid transparent;
+  border-block: awsui.$border-item-width solid transparent;
+  border-inline: awsui.$border-item-width solid transparent;
   list-style: none;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
   color: awsui.$color-text-dropdown-item-default;
-  margin-top: calc(-1 * #{styles.$control-border-width});
+  margin-block-start: calc(-1 * #{styles.$control-border-width});
   cursor: pointer;
   &.disabled {
@@ -21,10 +23,10 @@
     color: awsui.$color-text-dropdown-item-disabled;
   }
   &:first-child {
-    margin-top: 0;
+    margin-block-start: 0;
   }
   &.last {
-    border-bottom: awsui.$border-item-width solid awsui.$color-border-dropdown-group;
+    border-block-end: awsui.$border-item-width solid awsui.$color-border-dropdown-group;
   }
   &.highlighted {
     color: awsui.$color-text-dropdown-item-highlighted;
@@ -36,7 +38,10 @@
     &.variant-primary {
       background-color: awsui.$color-background-dropdown-item-hover;
       border-color: awsui.$color-border-dropdown-item-hover;
-      border-radius: awsui.$border-radius-item;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
       &.disabled {
         color: awsui.$color-text-dropdown-item-dimmed;
@@ -58,18 +63,17 @@
     // Additional spacing for groups of items
     &.first:not(.has-category-header) {
-      padding-top: styles.$option-padding-vertical;
+      padding-block-start: styles.$option-padding-vertical;
     }
     &.last {
-      padding-bottom: styles.$option-padding-vertical;
+      padding-block-end: styles.$option-padding-vertical;
     }
     &.first.last {
-      padding-bottom: styles.$option-padding-vertical;
-      padding-top: styles.$option-padding-vertical;
+      padding-block: styles.$option-padding-vertical;
     }
     // Additional spacing for the very last item in the list
     &.last:last-child {
-      padding-bottom: styles.$option-padding-vertical;
+      padding-block-end: styles.$option-padding-vertical;
     }
   }
 }
@@ -78,7 +82,8 @@
   @include styles.text-wrapping;
   display: flex;
   align-items: flex-start;
-  padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
+  padding-block: styles.$option-padding-vertical;
+  padding-inline: awsui.$space-button-horizontal;
   color: inherit;
   text-decoration: none;
@@ -89,15 +94,15 @@
   /* stylelint-disable-next-line selector-max-type */
   .has-category-header > &,
   .has-category-header > span > & {
-    padding-left: calc(#{awsui.$space-s} + #{awsui.$space-button-horizontal});
+    padding-inline-start: calc(#{awsui.$space-s} + #{awsui.$space-button-horizontal});
   }
 }
 .icon {
-  padding-right: awsui.$space-xs;
+  padding-inline-end: awsui.$space-xs;
   flex-shrink: 0;
 }
 .external-icon {
-  margin-left: awsui.$space-xxs;
+  margin-inline-start: awsui.$space-xxs;
 }

package/lib/internal/scss/button-dropdown/mobile-expandable-group/styles.scss CHANGED Viewed

@@ -20,12 +20,12 @@
     user-select: none;
     background-color: awsui.$color-background-dropdown-item-default;
     outline: none;
-    border-top: none;
-    border-bottom: none;
+    border-block-start: none;
+    border-block-end: none;
     display: flex;
     flex-direction: column;
-    width: 100%;
+    inline-size: 100%;
     &.nowrap {
       white-space: nowrap;

package/lib/internal/scss/button-dropdown/styles.scss CHANGED Viewed

@@ -13,8 +13,10 @@ $dropdown-trigger-icon-offset: 2px;
 }
 .items-list-container {
-  padding: 0;
-  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
   @include styles.with-motion {
     animation: awsui-motion-fade-in-0 500ms awsui.$motion-easing-show-quick;
@@ -40,9 +42,11 @@ $dropdown-trigger-icon-offset: 2px;
   display: flex;
   flex-direction: column;
   list-style: none;
-  padding: awsui.$space-s awsui.$space-l;
-  border: styles.$control-border-width solid transparent;
-  border-bottom: styles.$control-border-width solid awsui.$color-border-dropdown-group;
+  padding-block: awsui.$space-s;
+  padding-inline: awsui.$space-l;
+  border-block-start: styles.$control-border-width solid transparent;
+  border-block-end: styles.$control-border-width solid awsui.$color-border-dropdown-group;
+  border-inline: styles.$control-border-width solid transparent;
 }
 .title,
@@ -61,24 +65,23 @@ $dropdown-trigger-icon-offset: 2px;
   & > .trigger-item:not(:last-child) {
     & > .trigger-button {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      padding-right: awsui.$space-m;
-      margin-right: awsui.$space-xxxs;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      padding-inline-end: awsui.$space-m;
+      margin-inline-end: awsui.$space-xxxs;
     }
   }
   & > .trigger-item:not(:first-child) {
     & > .trigger-button {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      padding-left: calc(#{awsui.$space-xs} - #{$dropdown-trigger-icon-offset});
-      padding-right: calc(#{awsui.$space-xs} - #{$dropdown-trigger-icon-offset});
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      padding-inline: calc(#{awsui.$space-xs} - #{$dropdown-trigger-icon-offset});
     }
     &.visual-refresh {
       & > .trigger-button {
-        padding-right: calc(#{awsui.$space-s} - #{$dropdown-trigger-icon-offset});
+        padding-inline-end: calc(#{awsui.$space-s} - #{$dropdown-trigger-icon-offset});
       }
     }
   }

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

@@ -17,12 +17,12 @@
 .calendar {
   display: block;
-  // IE11 does not calculate the height correctly when in nested flex containers (@see https://github.com/philipwalton/flexbugs#flexbug-3)
-  width: awsui.$size-calendar-grid-width;
+  inline-size: awsui.$size-calendar-grid-width;
   overflow: auto;
   &-inner {
-    margin: awsui.$space-xs;
+    margin-block: awsui.$space-xs;
+    margin-inline: awsui.$space-xs;
   }
   &-header {
@@ -35,7 +35,8 @@
     @include styles.font-body-m;
     font-weight: typographyConstants.$font-weight-bold;
     color: calendar.$header-color;
-    margin: 0;
+    margin-block: 0;
+    margin-inline: 0;
   }
   &-next-month-btn {
@@ -47,39 +48,45 @@
   }
   &-grid {
-    width: 100%;
+    inline-size: 100%;
     border-spacing: 0;
   }
   &-grid-cell {
-    width: calc(100% / 7);
+    inline-size: calc(100% / 7);
     word-break: break-word;
     text-align: center;
     font-weight: unset;
   }
   &-day-header {
-    padding: awsui.$space-s 0 awsui.$space-xxs;
+    padding-block-start: awsui.$space-s;
+    padding-block-end: awsui.$space-xxs;
+    padding-inline: 0;
     color: calendar.$grid-day-name-color;
     @include styles.font-body-s;
   }
   &-day {
-    border-bottom: calendar.$grid-border;
-    border-right: calendar.$grid-border;
-    padding: awsui.$space-xxs 0;
+    border-block-end: calendar.$grid-border;
+    border-inline-end: calendar.$grid-border;
+    padding-block: awsui.$space-xxs;
+    padding-inline: 0;
     color: calendar.$grid-disabled-day-color;
     position: relative;
     &:first-child {
-      border-left: calendar.$grid-border;
+      border-inline-start: calendar.$grid-border;
     }
     &-enabled {
       cursor: pointer;
       color: calendar.$grid-nonmonth-day-color;
       &::after {
-        border-radius: awsui.$border-radius-item;
+        border-start-start-radius: awsui.$border-radius-item;
+        border-start-end-radius: awsui.$border-radius-item;
+        border-end-start-radius: awsui.$border-radius-item;
+        border-end-end-radius: awsui.$border-radius-item;
       }
       &.calendar-day-current-month {
         color: calendar.$grid-day-color;
@@ -88,7 +95,8 @@
           background-color: calendar.$grid-hover-background-color;
           &:not(.calendar-day-selected) {
             &::after {
-              border: awsui.$border-item-width solid calendar.$grid-hover-border-color;
+              border-block: awsui.$border-item-width solid calendar.$grid-hover-border-color;
+              border-inline: awsui.$border-item-width solid calendar.$grid-hover-border-color;
             }
           }
         }
@@ -97,7 +105,10 @@
     &-today {
       background-color: calendar.$grid-today-background-color;
-      border-radius: awsui.$border-radius-item;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
       font-weight: styles.$font-weight-bold;
     }
@@ -105,10 +116,10 @@
       content: '';
       position: absolute;
       z-index: 1;
-      top: calc(-1 * #{awsui.$border-item-width});
-      left: -1px;
-      bottom: -1px;
-      right: calc(-1 * #{awsui.$border-item-width});
+      inset-block-start: calc(-1 * #{awsui.$border-item-width});
+      inset-block-end: -1px;
+      inset-inline-start: -1px;
+      inset-inline-end: calc(-1 * #{awsui.$border-item-width});
       background-color: transparent;
     }
     > .day-inner {
@@ -148,8 +159,12 @@
       }
       &::after {
         background-color: calendar.$grid-selected-background-color;
-        border: awsui.$border-item-width solid calendar.$grid-selected-border-color;
-        border-radius: awsui.$border-radius-item;
+        border-block: awsui.$border-item-width solid calendar.$grid-selected-border-color;
+        border-inline: awsui.$border-item-width solid calendar.$grid-selected-border-color;
+        border-start-start-radius: awsui.$border-radius-item;
+        border-start-end-radius: awsui.$border-radius-item;
+        border-end-start-radius: awsui.$border-radius-item;
+        border-end-end-radius: awsui.$border-radius-item;
       }
       > .day-inner {
         z-index: 2;
@@ -162,7 +177,7 @@
   &-week {
     &:first-child {
       > .calendar-day {
-        border-top: calendar.$grid-border;
+        border-block-start: calendar.$grid-border;
       }
     }
   }

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

@@ -11,27 +11,37 @@
 @use './motion';
 @mixin card-style {
-  border-radius: awsui.$border-radius-container;
+  border-start-start-radius: awsui.$border-radius-container;
+  border-start-end-radius: awsui.$border-radius-container;
+  border-end-start-radius: awsui.$border-radius-container;
+  border-end-end-radius: awsui.$border-radius-container;
   box-sizing: border-box;
   &::before {
     @include styles.base-pseudo-element;
     // Reset border color to prevent it from flashing black during card selection animation
     border-color: transparent;
-    border-top: awsui.$border-container-top-width solid awsui.$color-border-container-top;
-    border-radius: awsui.$border-radius-container;
+    border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top;
+    border-start-start-radius: awsui.$border-radius-container;
+    border-start-end-radius: awsui.$border-radius-container;
+    border-end-start-radius: awsui.$border-radius-container;
+    border-end-end-radius: awsui.$border-radius-container;
     z-index: 1;
   }
   &::after {
     @include styles.base-pseudo-element;
-    border-radius: awsui.$border-radius-container;
+    border-start-start-radius: awsui.$border-radius-container;
+    border-start-end-radius: awsui.$border-radius-container;
+    border-end-start-radius: awsui.$border-radius-container;
+    border-end-end-radius: awsui.$border-radius-container;
   }
   &:not(.refresh)::after {
     box-shadow: awsui.$shadow-container;
   }
   &.refresh::after {
-    border: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    border-block: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    border-inline: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
   }
 }
@@ -42,10 +52,12 @@
 .header {
   &-variant-full-page.header-refresh {
-    padding-top: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-bottom: calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
+    padding-block-start: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+    padding-block-end: calc(
+      #{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom}
+    );
   }
 }
@@ -54,14 +66,17 @@
   flex-wrap: wrap;
   box-sizing: border-box;
   // reset styles from OL
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
   list-style: none;
-  margin: 0 0 0 calc(#{awsui.$space-grid-gutter} * -1);
+  margin-block: 0;
+  margin-inline-start: calc(#{awsui.$space-grid-gutter} * -1);
+  margin-inline-end: 0;
   @for $i from 1 through 20 {
     &.list-grid-#{$i} {
       > .card {
-        width: math.div(100%, $i);
+        inline-size: math.div(100%, $i);
       }
     }
   }
@@ -70,10 +85,11 @@
 .selection-control {
   position: absolute;
   box-sizing: border-box;
-  width: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
-  top: 0;
-  right: 0;
-  padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
+  inline-size: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  padding-block: awsui.$space-card-vertical;
+  padding-inline: awsui.$space-card-horizontal;
 }
 .loading,
@@ -81,17 +97,17 @@
   overflow: hidden;
   text-align: center;
   color: awsui.$color-text-empty;
-  margin-bottom: awsui.$space-scaled-l;
+  margin-block-end: awsui.$space-scaled-l;
 }
 .has-header {
   // Unfortunately, we don't have access to the header of InternalContainer
   // in order to use margin-bottom instead.
-  margin-top: awsui.$space-grid-gutter;
+  margin-block-start: awsui.$space-grid-gutter;
   &.refresh {
     &.header-variant-full-page {
       &.remove-high-contrast-header {
-        margin-top: awsui.$space-scaled-s;
+        margin-block-start: awsui.$space-scaled-s;
       }
     }
   }
@@ -101,35 +117,42 @@
   display: flex;
   overflow-wrap: break-word;
   word-wrap: break-word;
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   list-style: none;
   &-inner {
     position: relative;
     background-color: awsui.$color-background-container-content;
-    margin: 0 0 awsui.$space-grid-gutter awsui.$space-grid-gutter;
-    padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
-    width: 100%;
-    min-width: 0;
+    margin-block-start: 0;
+    margin-block-end: awsui.$space-grid-gutter;
+    margin-inline-start: awsui.$space-grid-gutter;
+    margin-inline-end: 0;
+    padding-block: awsui.$space-card-vertical;
+    padding-inline: awsui.$space-card-horizontal;
+    inline-size: 100%;
+    min-inline-size: 0;
     @include card-style;
   }
   &-header {
     @include styles.font-heading-m;
     &-inner {
-      width: 100%;
+      inline-size: 100%;
       display: inline-block;
     }
   }
   &-selectable {
     > .card-inner > .card-header {
-      width: 90%;
+      inline-size: 90%;
     }
   }
   &-selected {
     > .card-inner {
       background-color: awsui.$color-background-item-selected;
       &::before {
-        border: awsui.$border-item-width solid awsui.$color-border-item-selected;
+        border-block: awsui.$border-item-width solid awsui.$color-border-item-selected;
+        border-inline: awsui.$border-item-width solid awsui.$color-border-item-selected;
       }
     }
   }
@@ -139,7 +162,9 @@
   display: inline-block;
   box-sizing: border-box;
   // only scale bottom padding to reduce padding between sections and after the last section.
-  padding: awsui.$space-xs 0 awsui.$space-scaled-xs 0;
+  padding-block-start: awsui.$space-xs;
+  padding-block-end: awsui.$space-scaled-xs;
+  padding-inline: 0;
   vertical-align: top;
   &-header {
     @include styles.font-label;
@@ -150,7 +175,9 @@
   }
 }
 .section:last-child {
-  padding: awsui.$space-xs 0 0 0;
+  padding-block-start: awsui.$space-xs;
+  padding-block-end: 0;
+  padding-inline: 0;
 }
 .footer-pagination {