@cloudscape-design/components-themeable 3.0.476 → 3.0.477

package/lib/internal/scss/code-editor/pane.scss

@@ -11,17 +11,17 @@
   $border: awsui.$border-item-width solid $border-color;
   $radius: awsui.$border-radius-item;
   > .pane__cell {
-    border-block-start: $border;
-    border-block-end: $border;
+    border-top: $border;
+    border-bottom: $border;
     &:first-child {
-      border-inline-start: $border;
-      border-start-start-radius: $radius;
-      border-end-start-radius: $radius;
+      border-left: $border;
+      border-top-left-radius: $radius;
+      border-bottom-left-radius: $radius;
     }
     &:last-child {
-      border-inline-end: $border;
-      border-start-end-radius: $radius;
-      border-end-end-radius: $radius;
+      border-right: $border;
+      border-top-right-radius: $radius;
+      border-bottom-right-radius: $radius;
     }
   }
 }
@@ -32,31 +32,30 @@
   flex-direction: row;
   flex: 1;
 
-  border-block-start: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
-  border-end-start-radius: awsui.$border-radius-code-editor;
-  border-end-end-radius: awsui.$border-radius-code-editor;
+  border-top: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-bottom-left-radius: awsui.$border-radius-code-editor;
+  border-bottom-right-radius: awsui.$border-radius-code-editor;
   background: awsui.$color-background-code-editor-status-bar;
   color: awsui.$color-text-body-default;
 
   &__close-container {
     position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: calc(#{awsui.$space-s} / 2);
+    top: 0;
+    right: calc(#{awsui.$space-s} / 2);
   }
 
   &__list {
     flex: 1;
     overflow: auto;
-    max-block-size: 100%;
+    max-height: 100%;
     box-sizing: border-box;
-    margin-inline-end: calc(#{awsui.$line-height-body-m} + 2 * #{awsui.$space-xs});
+    margin-right: calc(#{awsui.$line-height-body-m} + 2 * #{awsui.$space-xs});
   }
 
   &__table {
-    inline-size: 100%;
+    width: 100%;
     border-spacing: 0;
-    margin-block: awsui.$space-s;
-    margin-inline: 0;
+    margin: awsui.$space-s 0;
   }
 
   &__item {
@@ -76,22 +75,21 @@
 
   &__location,
   &__description {
-    padding-block: awsui.$space-xxs;
-    padding-inline: awsui.$space-s;
+    padding: awsui.$space-xxs awsui.$space-s;
   }
 
   &__location {
     vertical-align: baseline;
     white-space: nowrap;
-    padding-inline-start: calc(#{awsui.$space-l} + #{awsui.$space-s});
+    padding-left: calc(#{awsui.$space-l} + #{awsui.$space-s});
   }
 
   &__description {
-    padding-inline-end: 0;
+    padding-right: 0;
     @include styles.text-wrapping;
   }
 }
 
 .focus-lock {
-  block-size: 100%;
+  height: 100%;
 }

package/lib/internal/scss/code-editor/resizable-box/styles.scss

@@ -7,17 +7,17 @@
 
 .resizable-box {
   position: relative;
-  inline-size: 100%;
+  width: 100%;
 }
 
 .resizable-box-handle {
   position: absolute;
-  inset-inline-end: 0;
-  inset-block-end: 0;
+  right: 0;
+  bottom: 0;
   z-index: 10; // above editor, when editor is overflowing
 
-  inline-size: awsui.$space-l;
-  block-size: awsui.$space-l;
+  width: awsui.$space-l;
+  height: awsui.$space-l;
 
   background-repeat: no-repeat;
   background-origin: content-box;

package/lib/internal/scss/code-editor/styles.scss

@@ -13,18 +13,17 @@
 .code-editor {
   @include styles.styles-reset;
   display: inline-block;
-  border-block: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
-  border-inline: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
-  border-start-start-radius: awsui.$border-radius-code-editor;
-  border-start-end-radius: awsui.$border-radius-code-editor;
-  border-end-start-radius: awsui.$border-radius-code-editor;
-  border-end-end-radius: awsui.$border-radius-code-editor;
-  inline-size: 100%;
+  border: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-radius: awsui.$border-radius-code-editor;
+  width: 100%;
 }
 
 .editor {
   position: absolute;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 
   &:focus {
     @include styles.focus-highlight(3px);
@@ -34,19 +33,19 @@
 }
 
 .editor-refresh {
-  border-start-start-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
-  border-start-end-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);
+  border-top-right-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
 }
 
 .status-bar {
   display: flex;
   vertical-align: middle;
 
-  border-block-start: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-top: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
   background-color: awsui.$color-background-code-editor-status-bar;
   &-with-hidden-pane {
-    border-end-start-radius: awsui.$border-radius-code-editor;
-    border-end-end-radius: awsui.$border-radius-code-editor;
+    border-bottom-left-radius: awsui.$border-radius-code-editor;
+    border-bottom-right-radius: awsui.$border-radius-code-editor;
   }
 
   @include styles.text-wrapping;
@@ -55,8 +54,8 @@
     flex: 1;
     display: flex;
     flex-wrap: wrap;
-    padding-inline-start: awsui.$space-l;
-    border-inline-end: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+    padding-left: awsui.$space-l;
+    border-right: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
   }
 
   &__left-virtual {
@@ -73,13 +72,11 @@
   &__cursor-position {
     display: inline-block;
     color: awsui.$color-text-body-default;
-    padding-block: awsui.$space-scaled-xs;
-    padding-inline: awsui.$space-s;
+    padding: awsui.$space-scaled-xs awsui.$space-s;
   }
 
   &__cog-button {
-    padding-block: calc(#{awsui.$space-scaled-xxs} - 1px);
-    padding-inline: calc(#{awsui.$space-xs} - 2px);
+    padding: calc(#{awsui.$space-scaled-xxs} - 1px) calc(#{awsui.$space-xs} - 2px);
   }
 }
 
@@ -90,13 +87,11 @@
 .tab-button {
   position: relative;
   display: inline-block;
-  padding-block: awsui.$space-scaled-xs;
-  padding-inline: awsui.$space-s;
+  padding: awsui.$space-scaled-xs awsui.$space-s;
   line-height: inherit;
   color: awsui.$color-text-status-error;
   background: none;
-  border-block: none;
-  border-inline: none;
+  border: none;
   font-weight: bold;
   outline: none;
   cursor: pointer;
@@ -110,19 +105,17 @@
   &::after {
     content: '';
     position: absolute;
-    inset-inline: 0;
-    inset-block-end: 0;
-    block-size: awsui.$border-active-width;
-    border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
-    border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
-    border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
-    border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: awsui.$border-active-width;
+    border-radius: awsui.$border-radius-tabs-focus-ring;
     background: awsui.$color-text-status-error;
     opacity: 0;
   }
 
   &--refresh {
-    padding-block-end: calc(#{awsui.$space-scaled-xs} + #{awsui.$border-active-width} - 2px);
+    padding-bottom: calc(#{awsui.$space-scaled-xs} + #{awsui.$border-active-width} - 2px);
   }
 
   &--warnings {
@@ -168,8 +161,8 @@
 
   &--divider {
     display: inline-block;
-    block-size: awsui.$line-height-body-m;
-    inline-size: awsui.$border-code-editor-status-divider-width;
+    height: awsui.$line-height-body-m;
+    width: awsui.$border-code-editor-status-divider-width;
     background: awsui.$color-border-tabs-divider;
     vertical-align: middle;
   }
@@ -185,13 +178,12 @@ $default-height: 480px;
   display: flex;
   align-items: center;
   justify-content: center;
-  block-size: $default-height;
+
+  height: $default-height;
+
   color: awsui.$color-text-body-secondary;
   background: awsui.$color-background-code-editor-loading;
-  border-start-start-radius: awsui.$border-radius-code-editor;
-  border-start-end-radius: awsui.$border-radius-code-editor;
-  border-end-start-radius: awsui.$border-radius-code-editor;
-  border-end-end-radius: awsui.$border-radius-code-editor;
+  border-radius: awsui.$border-radius-code-editor;
 }
 
 .error-screen {

package/lib/internal/scss/collection-preferences/content-display/content-display-option.scss

@@ -29,20 +29,15 @@ $border-radius: awsui.$border-radius-item;
   @include styles.styles-reset;
   display: flex;
   align-items: flex-start;
-  padding-block: awsui.$space-xs;
-  padding-inline-start: 0;
-  padding-inline-end: awsui.$space-scaled-xs;
+  padding: awsui.$space-xs awsui.$space-scaled-xs awsui.$space-xs 0;
   background-color: awsui.$color-background-container-content;
-  border-start-start-radius: $border-radius;
-  border-start-end-radius: $border-radius;
-  border-end-start-radius: $border-radius;
-  border-end-end-radius: $border-radius;
+  border-radius: $border-radius;
 }
 
 .content-display-option {
   list-style: none;
   position: relative;
-  border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
+  border-top: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
   &:not(.placeholder).sorting {
     @include animated;
   }
@@ -52,12 +47,12 @@ $border-radius: awsui.$border-radius-item;
       &:after {
         content: ' ';
         position: absolute;
-        inset: 0;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         background: awsui.$color-drag-placeholder-hover;
-        border-start-start-radius: $border-radius;
-        border-start-end-radius: $border-radius;
-        border-end-start-radius: $border-radius;
-        border-end-end-radius: $border-radius;
+        border-radius: $border-radius;
       }
     }
   }
@@ -66,15 +61,12 @@ $border-radius: awsui.$border-radius-item;
 .content-display-option-label {
   flex-grow: 1;
   @include styles.text-wrapping;
-  padding-inline-end: awsui.$space-l;
+  padding-right: awsui.$space-l;
 }
 
 .drag-overlay {
   box-shadow: awsui.$shadow-container-active;
-  border-start-start-radius: $border-radius;
-  border-start-end-radius: $border-radius;
-  border-end-start-radius: $border-radius;
-  border-end-end-radius: $border-radius;
+  border-radius: $border-radius;
   @include focus-visible {
     @include styles.focus-highlight(0px, $border-radius);
   }

package/lib/internal/scss/collection-preferences/content-display/styles.scss

@@ -15,18 +15,16 @@
 .content-display-title {
   @include styles.font-label;
   color: awsui.$color-text-form-label;
-  margin-block: 0;
-  margin-inline: 0;
+  margin: 0;
 }
 
 .content-display-description {
   @include styles.form-control-description;
-  margin-block-start: awsui.$space-scaled-xxxs;
+  margin-top: awsui.$space-scaled-xxxs;
 }
 
 .content-display-option-list {
   position: relative;
   list-style: none;
-  padding-block: 0;
-  padding-inline: 0;
+  padding: 0;
 }

package/lib/internal/scss/collection-preferences/styles.scss

@@ -18,7 +18,7 @@
 }
 
 .second-column-small {
-  padding-block-start: calc(2 * #{awsui.$space-scaled-l});
+  padding-top: calc(2 * #{awsui.$space-scaled-l});
 }
 
 .wrap-lines,

package/lib/internal/scss/collection-preferences/visible-content.scss

@@ -18,33 +18,30 @@ $border: awsui.$border-divider-list-width solid awsui.$color-border-divider-defa
 .visible-content-title {
   @include styles.font-label;
   color: awsui.$color-text-form-label;
-  margin-block-start: 0;
-  margin-block-end: awsui.$space-scaled-l;
-  margin-inline: 0;
+  margin: 0;
+  margin-bottom: awsui.$space-scaled-l;
 }
 
 .visible-content-group-label {
   color: awsui.$color-text-group-label;
-  padding-block-end: awsui.$space-xs;
-  border-block-end: $border;
+  padding-bottom: awsui.$space-xs;
+  border-bottom: $border;
 }
 
 .visible-content-option {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
-  padding-block: awsui.$space-xs;
-  padding-inline-start: awsui.$space-scaled-l;
-  padding-inline-end: 0px;
-  border-block-end: $border;
+  padding: awsui.$space-xs 0px awsui.$space-xs awsui.$space-scaled-l;
+  border-bottom: $border;
   &:last-child {
-    border-block-end: none;
+    border-bottom: none;
   }
 }
 
 .visible-content-option-label {
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-inline-end: awsui.$space-l;
+  padding-right: awsui.$space-l;
   flex-grow: 1;
 }

package/lib/internal/scss/column-layout/flexible-column-layout/styles.scss

@@ -14,12 +14,13 @@
 
   &.grid-variant-text-grid {
     > .item {
-      border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-      padding-inline: awsui.$space-grid-gutter;
+      border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+      padding-left: awsui.$space-grid-gutter;
+      padding-right: awsui.$space-grid-gutter;
 
       &.first-column {
-        border-inline-start: 0;
-        padding-inline-start: 0;
+        border-left: 0;
+        padding-left: 0;
       }
     }
   }

package/lib/internal/scss/column-layout/styles.scss

@@ -63,10 +63,10 @@ $column-breakpoint-spans: (
 @mixin make-horizontal-borders() {
   /* stylelint-disable selector-max-universal */
   > * {
-    border-block-end: $column-layout-border;
+    border-bottom: $column-layout-border;
 
     &:last-child {
-      border-block-end-width: 0;
+      border-bottom-width: 0;
     }
   }
   /* stylelint-enable selector-max-universal */
@@ -89,7 +89,7 @@ $column-breakpoint-spans: (
       @for $h from 1 through $items-per-row - $m + 1 {
         @if $h > 0 {
           > *:nth-last-child(#{$m}):nth-child(#{$items-per-row}n + #{$h}) {
-            border-block-end-width: 0;
+            border-bottom-width: 0;
           }
         }
       }
@@ -103,31 +103,25 @@ div.column-layout {
   word-wrap: break-word;
 
   > .grid {
-    margin-block: calc(#{$grid-gutter-width} / -2);
-    margin-inline: calc(#{$grid-gutter-width} / -2);
+    margin: calc(#{$grid-gutter-width} / -2);
 
     &.grid-no-gutters {
-      margin-block: 0;
-      margin-inline: 0;
+      margin: 0;
     }
 
     &.grid-variant-text-grid {
       @include make-vertical-borders('left');
-      margin-block: calc(-1 * #{$grid-gutter-width} / 2);
-      margin-inline: calc(-1 * #{$grid-gutter-width});
+      margin: calc(-1 * #{$grid-gutter-width} / 2) calc(-1 * #{$grid-gutter-width});
     }
     /* stylelint-disable-next-line selector-max-universal */
     &:not(.grid-no-gutters) > * {
-      padding-block: calc(#{$grid-gutter-width} / 2);
-      padding-inline: calc(#{$grid-gutter-width} / 2);
+      padding: calc(#{$grid-gutter-width} / 2);
     }
 
     /* stylelint-disable-next-line selector-max-universal */
     &:not(.grid-no-gutters).grid-variant-text-grid > * {
-      padding-block: 0;
-      padding-inline: $grid-gutter-width;
-      margin-block: calc(#{$grid-gutter-width} / 2);
-      margin-inline: 0;
+      padding: 0 $grid-gutter-width;
+      margin: calc(#{$grid-gutter-width} / 2) 0;
     }
 
     &.grid-vertical-borders {

package/lib/internal/scss/container/shared.scss

@@ -7,6 +7,8 @@
 @use '../internal/styles/tokens' as awsui;
 
 $header-padding-horizontal: awsui.$space-container-horizontal;
+$header-padding: awsui.$space-container-header-top awsui.$space-container-horizontal
+  awsui.$space-container-header-bottom;
 $footer-padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
 
 // HACK: Remediate focus border for expandable section
@@ -18,5 +20,5 @@ $header-focus-visible-padding: calc(#{awsui.$space-scaled-s} - #{awsui.$border-d
 }
 
 @mixin divider {
-  border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }