npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.476 → 3.0.478 - Mend

@cloudscape-design/components-themeable 3.0.476 → 3.0.478

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

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

@@ -8,20 +8,19 @@
 .header {
   position: relative;
-  margin-block: 0;
-  margin-inline: 0;
+  margin: 0;
   color: awsui.$color-text-dropdown-group-label;
-  border-block: awsui.$border-divider-list-width solid transparent;
-  border-inline: awsui.$border-divider-list-width solid transparent;
+  border: awsui.$border-divider-list-width solid transparent;
   // remove the borders completely to avoid the slating effect at the border ends (AWSUI-10545)
-  border-inline-width: 0;
+  border-left: 0;
+  border-right: 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-block: styles.$option-padding-with-border-placeholder-vertical;
-  padding-inline: calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
+  padding: styles.$option-padding-with-border-placeholder-vertical
+    calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
   z-index: 1;
   &.disabled {
@@ -30,8 +29,8 @@
   }
   &.expandable-header {
-    border-block-start-color: awsui.$color-border-dropdown-group;
-    border-block-end-color: awsui.$color-border-dropdown-group;
+    border-top-color: awsui.$color-border-dropdown-group;
+    border-bottom-color: awsui.$color-border-dropdown-group;
     cursor: pointer;
     &.disabled {
       cursor: default;
@@ -40,22 +39,16 @@
       outline: none;
     }
     &.rolled-down {
-      border-block-end-color: transparent;
+      border-bottom-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-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;
+      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;
       z-index: 2;
       &.disabled {
         background-color: awsui.$color-background-dropdown-item-dimmed;
         border-color: awsui.$color-border-dropdown-item-dimmed-hover;
@@ -68,12 +61,14 @@
     }
     &.variant-navigation {
-      padding-block: awsui.$space-xs;
+      padding-top: awsui.$space-xs;
+      padding-bottom: awsui.$space-xs;
       &.highlighted {
         border-color: transparent;
-        border-block-start-color: awsui.$color-border-dropdown-group;
-        border-block-end-color: awsui.$color-border-dropdown-group;
+        border-top-color: awsui.$color-border-dropdown-group;
+        border-bottom-color: awsui.$color-border-dropdown-group;
         background-color: transparent;
         color: awsui.$color-text-accent;
       }
@@ -83,34 +78,33 @@
 .category {
   list-style: none;
-  margin-block-start: calc(-1 * #{awsui.$border-divider-list-width});
-  padding-block: 0;
-  padding-inline: 0;
+  margin-top: calc(-1 * #{awsui.$border-divider-list-width});
+  padding: 0;
   &:first-child {
-    margin-block-start: 0;
+    margin-top: 0;
   }
   &.expandable {
-    border-block-start: 0;
+    border-top: 0;
   }
   &:last-child {
-    border-block-end: none;
+    border-bottom: none;
   }
   &.variant-navigation {
-    padding-block-start: awsui.$space-xxs;
+    padding-top: awsui.$space-xxs;
     &.expandable {
-      padding-block-start: 0;
+      padding-top: 0;
     }
   }
 }
 .expand-icon {
   position: relative;
-  inset-inline-start: awsui.$space-s;
-  inline-size: awsui.$space-m;
+  left: awsui.$space-s;
+  width: awsui.$space-m;
   display: inline-block;
   &-up {
@@ -126,10 +120,7 @@
 }
 .items-list-container {
-  padding-block: 0;
-  padding-inline: 0;
-  margin-block-start: -1px;
-  margin-block-end: 0;
-  margin-inline: 0;
+  padding: 0;
+  margin: -1px 0 0 0;
   overflow-y: auto;
 }

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

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

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

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

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

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

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

@@ -18,11 +18,10 @@
 .header {
   &-variant-full-page.header-refresh {
     @include container.borders-and-shadows;
-    padding-block-start: 0;
-    padding-block-end: calc(
-      #{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom}
-    );
-    padding-inline: 0;
+    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});
   }
 }
@@ -31,17 +30,14 @@
   flex-wrap: wrap;
   box-sizing: border-box;
   // reset styles from OL
-  padding-block: 0;
-  padding-inline: 0;
+  padding: 0;
   list-style: none;
-  margin-block: 0;
-  margin-inline-start: calc(#{awsui.$space-grid-gutter} * -1);
-  margin-inline-end: 0;
+  margin: 0 0 0 calc(#{awsui.$space-grid-gutter} * -1);
   @for $i from 1 through 20 {
     &.list-grid-#{$i} {
       > .card {
-        inline-size: math.div(100%, $i);
+        width: math.div(100%, $i);
       }
     }
   }
@@ -50,11 +46,10 @@
 .selection-control {
   position: absolute;
   box-sizing: border-box;
-  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;
+  width: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
+  top: 0;
+  right: 0;
+  padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
 }
 .loading,
@@ -62,55 +57,48 @@
   overflow: hidden;
   text-align: center;
   color: awsui.$color-text-empty;
-  margin-block-end: awsui.$space-scaled-l;
+  margin-bottom: 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-block-start: awsui.$space-grid-gutter;
+  margin-top: awsui.$space-grid-gutter;
 }
 .card {
   display: flex;
   overflow-wrap: break-word;
   word-wrap: break-word;
-  margin-block: 0;
-  margin-inline: 0;
-  padding-block: 0;
-  padding-inline: 0;
+  margin: 0;
+  padding: 0;
   list-style: none;
   &-inner {
     position: relative;
     background-color: awsui.$color-background-container-content;
-    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;
+    margin: 0 0 awsui.$space-grid-gutter awsui.$space-grid-gutter;
+    padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
     @include styles.container-shadow;
-    inline-size: 100%;
-    min-inline-size: 0;
+    width: 100%;
+    min-width: 0;
   }
   &-header {
     @include styles.font-heading-m;
     &-inner {
-      inline-size: 100%;
+      width: 100%;
       display: inline-block;
     }
   }
   &-selectable {
     > .card-inner > .card-header {
-      inline-size: 90%;
+      width: 90%;
     }
   }
   &-selected {
     > .card-inner {
       background-color: awsui.$color-background-item-selected;
       &::before {
-        border-block: awsui.$border-item-width solid awsui.$color-border-item-selected;
-        border-inline: awsui.$border-item-width solid awsui.$color-border-item-selected;
+        border: awsui.$border-item-width solid awsui.$color-border-item-selected;
       }
     }
   }
@@ -120,9 +108,7 @@
   display: inline-block;
   box-sizing: border-box;
   // only scale bottom padding to reduce padding between sections and after the last section.
-  padding-block-start: awsui.$space-xs;
-  padding-block-end: awsui.$space-scaled-xs;
-  padding-inline: 0;
+  padding: awsui.$space-xs 0 awsui.$space-scaled-xs 0;
   vertical-align: top;
   &-header {
     @include styles.font-label;
@@ -133,9 +119,7 @@
   }
 }
 .section:last-child {
-  padding-block-start: awsui.$space-xs;
-  padding-block-end: 0;
-  padding-inline: 0;
+  padding: awsui.$space-xs 0 0 0;
 }
 .footer-pagination {

package/lib/internal/scss/code-editor/ace-editor.scss CHANGED Viewed

@@ -12,10 +12,10 @@
 .code-editor-refresh :global .ace_editor {
   .ace_gutter {
-    border-start-start-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
+    border-top-left-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
   }
   .ace_scroller {
-    border-start-end-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
+    border-top-right-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
   }
 }
@@ -50,7 +50,8 @@
   }
   .ace_gutter-cell {
-    padding-inline: $gutter-padding-left $gutter-padding-right;
+    padding-left: $gutter-padding-left;
+    padding-right: $gutter-padding-right;
   }
   .ace_fold-widget {
@@ -58,17 +59,16 @@
        <<html<<<<
        </html>
     */
-    inline-size: $gutter-padding-right - 2 * 1px; // gutter padding - 1px margin each side
-    margin-inline-end: -$gutter-padding-right + 1px; // leave 1px margin on each side
+    width: $gutter-padding-right - 2 * 1px; // gutter padding - 1px margin each side
+    margin-right: -$gutter-padding-right + 1px; // leave 1px margin on each side
     background-color: transparent;
-    border-block: none;
-    border-inline: none;
+    border: none;
   }
   .ace_gutter_annotation {
     // To align our custom icon with the annotation clickable/focus area.
     // Based on -19px in ace's default stylesheet.
-    margin-inline-start: -21px;
+    margin-left: -21px;
   }
   .ace_fold-widget,
@@ -85,13 +85,13 @@
   .ace_marker-layer > .ace_active-line {
     background: transparent;
     box-sizing: border-box;
-    border-block-start: 1px solid $active-line-border-color-light;
-    border-block-end: 1px solid $active-line-border-color-light;
+    border-top: 1px solid $active-line-border-color-light;
+    border-bottom: 1px solid $active-line-border-color-light;
   }
   &.ace_dark .ace_marker-layer > .ace_active-line {
-    border-block-start: 1px solid $active-line-border-color-dark;
-    border-block-end: 1px solid $active-line-border-color-dark;
+    border-top: 1px solid $active-line-border-color-dark;
+    border-bottom: 1px solid $active-line-border-color-dark;
   }
   .ace_gutter {