npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.531 → 3.0.533 - Mend

@cloudscape-design/components-themeable 3.0.531 → 3.0.533

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

package/lib/internal/scss/s3-resource-selector/s3-in-context/styles.scss CHANGED Viewed

@@ -21,25 +21,27 @@
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
-  margin: calc(-1 * #{awsui.$space-xs});
+  margin-block: calc(-1 * #{awsui.$space-xs});
+  margin-inline: calc(-1 * #{awsui.$space-xs});
   /* stylelint-disable selector-max-universal */
   & > * {
-    margin: awsui.$space-xs;
+    margin-block: awsui.$space-xs;
+    margin-inline: awsui.$space-xs;
   }
   &-uri {
-    min-width: 200px;
+    min-inline-size: 200px;
     flex: 1;
   }
   &-version {
-    max-width: 180px;
-    min-width: 140px;
-    width: 20%;
+    max-inline-size: 180px;
+    min-inline-size: 140px;
+    inline-size: 20%;
   }
   &-divider {
-    height: calc(
+    block-size: calc(
       2 * #{awsui.$border-divider-section-width} + 2 * #{awsui.$space-scaled-xxs} + #{awsui.$line-height-body-m}
     ); // replicate the button layout: 2x border, 2x vertical padding, text line-height
-    border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
   }
 }

package/lib/internal/scss/segmented-control/segment.scss CHANGED Viewed

@@ -38,9 +38,11 @@ $selected-color: awsui.$color-text-segment-active;
   @include styles.text-flex-wrapping;
   @include styles.font-button;
   letter-spacing: 0.25px;
-  border: styles.$control-border-width solid $default-border-color;
-  padding: styles.$control-padding-vertical awsui.$space-button-horizontal;
-  border-right-width: 0;
+  border-block: styles.$control-border-width solid $default-border-color;
+  border-inline: styles.$control-border-width solid $default-border-color;
+  padding-block: styles.$control-padding-vertical;
+  padding-inline: awsui.$space-button-horizontal;
+  border-inline-end-width: 0;
   background: $default-background;
   color: $default-color;
   overflow: visible;
@@ -57,11 +59,17 @@ $selected-color: awsui.$color-text-segment-active;
     @include styles.focus-highlight(awsui.$space-segmented-control-focus-outline-gutter);
   }
   &:last-child {
-    border-right-width: styles.$control-border-width;
-    border-radius: 0 awsui.$border-radius-button awsui.$border-radius-button 0;
+    border-inline-end-width: styles.$control-border-width;
+    border-start-start-radius: 0;
+    border-start-end-radius: awsui.$border-radius-button;
+    border-end-start-radius: 0;
+    border-end-end-radius: awsui.$border-radius-button;
   }
   &:first-child {
-    border-radius: awsui.$border-radius-button 0 0 awsui.$border-radius-button;
+    border-start-start-radius: awsui.$border-radius-button;
+    border-start-end-radius: 0;
+    border-end-start-radius: awsui.$border-radius-button;
+    border-end-end-radius: 0;
   }
   &.disabled {
@@ -71,7 +79,7 @@ $selected-color: awsui.$color-text-segment-active;
   }
   &:not(.disabled) + .segment.disabled {
-    border-left-color: $default-border-color;
+    border-inline-start-color: $default-border-color;
   }
   &.selected {
@@ -80,7 +88,7 @@ $selected-color: awsui.$color-text-segment-active;
     color: $selected-color;
     & + .segment,
     & + .segment.disabled {
-      border-left-color: $selected-border-color;
+      border-inline-start-color: $selected-border-color;
     }
   }
@@ -90,12 +98,12 @@ $selected-color: awsui.$color-text-segment-active;
     border-color: $hover-border-color;
     cursor: pointer;
     & + .segment:not(.selected) {
-      border-left-color: $hover-border-color;
+      border-inline-start-color: $hover-border-color;
     }
   }
   &.selected + .segment:hover:not(.selected):not(.disabled):not(:focus) {
-    border-left-color: $selected-border-color;
+    border-inline-start-color: $selected-border-color;
   }
 }
@@ -105,13 +113,11 @@ $selected-color: awsui.$color-text-segment-active;
 .with-text {
   position: relative;
-  left: calc(-1 * #{awsui.$space-xxs});
-  margin-right: awsui.$space-xxs;
+  inset-inline-start: calc(-1 * #{awsui.$space-xxs});
+  margin-inline-end: awsui.$space-xxs;
 }
 .with-no-text {
-  margin-right: auto;
-  margin-left: auto;
-  right: 0;
-  left: 0;
+  margin-inline: auto;
+  inset-inline: 0;
 }

package/lib/internal/scss/select/parts/styles.scss CHANGED Viewed

@@ -19,11 +19,11 @@ $checkbox-size: awsui.$size-control;
   > .checkbox {
     position: relative;
-    min-height: $checkbox-size;
-    min-width: $checkbox-size;
-    height: $checkbox-size;
-    width: $checkbox-size;
-    margin-right: styles.$control-padding-horizontal;
+    min-block-size: $checkbox-size;
+    min-inline-size: $checkbox-size;
+    block-size: $checkbox-size;
+    inline-size: $checkbox-size;
+    margin-inline-end: styles.$control-padding-horizontal;
   }
 }
@@ -40,7 +40,7 @@ $checkbox-size: awsui.$size-control;
 }
 .layout-strut {
-  width: 100%;
+  inline-size: 100%;
   position: relative;
   // Prevent incorrect layer ordering in Safari by making sure
   // this element is also offloaded to the GPU along with the virtual items
@@ -56,14 +56,14 @@ $checkbox-size: awsui.$size-control;
 }
 .show-label-tag > .selected-icon {
-  padding-left: awsui.$space-scaled-s;
+  padding-inline-start: awsui.$space-scaled-s;
 }
 .inline-token-trigger {
   display: flex;
   flex-wrap: nowrap;
   column-gap: awsui.$space-xxs;
-  width: 100%;
+  inline-size: 100%;
 }
 .inline-token-list {
@@ -71,7 +71,7 @@ $checkbox-size: awsui.$size-control;
   flex-wrap: nowrap;
   align-items: center;
   gap: awsui.$space-xxs;
-  width: 100%;
+  inline-size: 100%;
   overflow-x: hidden;
   // Fade out any overflow tokens
@@ -80,19 +80,27 @@ $checkbox-size: awsui.$size-control;
   > .inline-token {
     display: flex;
     align-items: center;
-    min-width: max-content;
-    height: 18px;
+    min-inline-size: max-content;
+    block-size: 18px;
-    border: awsui.$border-field-width solid awsui.$color-border-item-selected;
-    padding: 0 awsui.$space-xxs;
+    border-block: awsui.$border-field-width solid awsui.$color-border-item-selected;
+    border-inline: awsui.$border-field-width solid awsui.$color-border-item-selected;
+    padding-block: 0;
+    padding-inline: awsui.$space-xxs;
     background: awsui.$color-background-item-selected;
-    border-radius: awsui.$border-radius-token;
+    border-start-start-radius: awsui.$border-radius-token;
+    border-start-end-radius: awsui.$border-radius-token;
+    border-end-start-radius: awsui.$border-radius-token;
+    border-end-end-radius: awsui.$border-radius-token;
     color: awsui.$color-text-body-default;
   }
 }
 .visual-refresh > .inline-token-list > .inline-token {
-  border-radius: awsui.$border-radius-badge;
+  border-start-start-radius: awsui.$border-radius-badge;
+  border-start-end-radius: awsui.$border-radius-badge;
+  border-end-start-radius: awsui.$border-radius-badge;
+  border-end-end-radius: awsui.$border-radius-badge;
 }
 .inline-token-hidden-placeholder {

package/lib/internal/scss/side-navigation/styles.scss CHANGED Viewed

@@ -14,16 +14,18 @@
 .header {
   @include styles.font-panel-header;
-  margin: 0;
-  padding: awsui.$space-scaled-l awsui.$space-panel-nav-left;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: awsui.$space-scaled-l;
+  padding-inline-start: awsui.$space-panel-nav-left;
   // Additional xl space to prevent text from overlapping the close button.
-  padding-right: calc(#{awsui.$space-scaled-xxl} + #{awsui.$space-xl});
+  padding-inline-end: calc(#{awsui.$space-scaled-xxl} + #{awsui.$space-xl});
 }
 .header-link {
   @include styles.font-panel-header;
   color: awsui.$color-text-heading-default;
-  min-height: awsui.$font-panel-header-line-height;
+  min-block-size: awsui.$font-panel-header-line-height;
   display: flex;
@@ -36,78 +38,87 @@
 }
 .header-logo {
-  margin-right: awsui.$space-s;
-  margin-top: awsui.$space-xxxs;
-  max-width: calc(1.25 * #{awsui.$size-icon-big});
+  margin-inline-end: awsui.$space-s;
+  margin-block-start: awsui.$space-xxxs;
+  max-inline-size: calc(1.25 * #{awsui.$size-icon-big});
   align-self: flex-start;
   &--stretched {
-    max-width: 100%;
-    margin-right: 0;
+    max-inline-size: 100%;
+    margin-inline-end: 0;
   }
 }
 .list-container {
-  margin-top: awsui.$space-scaled-l;
+  margin-block-start: awsui.$space-scaled-l;
 }
 .list {
-  margin: 0;
-  padding: 0;
-  padding-left: awsui.$space-l;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline-end: 0;
+  padding-inline-start: awsui.$space-l;
 }
 .list-variant-root {
-  margin: 0;
-  padding: 0 awsui.$space-panel-side-right 0 awsui.$space-panel-nav-left;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline-start: awsui.$space-panel-nav-left;
+  padding-inline-end: awsui.$space-panel-side-right;
   &--last {
-    margin-bottom: awsui.$space-scaled-xxxl;
+    margin-block-end: awsui.$space-scaled-xxxl;
   }
 }
 .list-variant-expandable-link-group {
-  padding-left: awsui.$space-xxxl;
+  padding-inline-start: awsui.$space-xxxl;
 }
 .list-item {
-  margin: awsui.$space-scaled-xs 0;
-  padding: 0;
+  margin-block: awsui.$space-scaled-xs;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   list-style: none;
 }
 .section,
 .expandable-link-group {
-  margin-left: calc(-1 * #{awsui.$space-l});
+  margin-inline-start: calc(-1 * #{awsui.$space-l});
   &--no-ident {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 }
 .section {
-  margin-top: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
-  margin-bottom: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
+  margin-block: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
   &.refresh {
-    margin-top: calc(#{awsui.$space-scaled-2x-m} - #{awsui.$border-divider-section-width});
-    margin-bottom: calc(#{awsui.$space-scaled-2x-m} - #{awsui.$border-divider-section-width});
+    margin-block: calc(#{awsui.$space-scaled-2x-m} - #{awsui.$border-divider-section-width});
   }
   // HACK: Remove padding from section header and content to rely on margin collapsing rules.
   /* stylelint-disable-next-line selector-max-type */
   > div {
-    padding: 0;
+    padding-block: 0;
+    padding-inline: 0;
   }
 }
 .list-variant-section-group {
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
 }
 .section-group {
   @include styles.font-heading-m;
-  margin: 0;
+  margin-block: 0;
+  margin-inline: 0;
 }
 .section-group-title {
@@ -151,22 +162,24 @@
 }
 .info {
-  margin-left: awsui.$space-xs;
+  margin-inline-start: awsui.$space-xs;
 }
 .external-icon {
-  margin-left: awsui.$space-xxs;
+  margin-inline-start: awsui.$space-xxs;
 }
 .divider {
-  border: none;
-  border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  border-block: none;
+  border-inline: none;
+  border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
 .divider-default {
-  margin: awsui.$space-scaled-2x-xl calc(-1 * #{awsui.$space-s});
+  margin-block: awsui.$space-scaled-2x-xl;
+  margin-inline: calc(-1 * #{awsui.$space-s});
 }
 .divider-header {
-  margin-top: 0;
+  margin-block-start: 0;
 }

package/lib/internal/scss/spinner/mixins.scss CHANGED Viewed

@@ -44,11 +44,11 @@ $_spinner-variants: (
     $margin: calc((#{$supportedLineHeight} - #{$iconSizeMap}) / 2);
     &.size-#{$name} {
-      width: $iconSizeMap;
-      height: $iconSizeMap;
-      padding: $padding;
-      margin-top: $margin;
-      margin-bottom: $margin;
+      inline-size: $iconSizeMap;
+      block-size: $iconSizeMap;
+      padding-block: $padding;
+      padding-inline: $padding;
+      margin-block: $margin;
       box-sizing: border-box;
     }
   }

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

@@ -43,10 +43,14 @@
     position: absolute;
     box-sizing: border-box;
     content: '';
-    border-radius: 50%;
-    border: 0.2 * styles.$base-size solid;
-    border-right-color: transparent;
-    border-bottom-color: transparent;
+    border-start-start-radius: 50%;
+    border-start-end-radius: 50%;
+    border-end-start-radius: 50%;
+    border-end-end-radius: 50%;
+    border-block: 0.2 * styles.$base-size solid;
+    border-inline: 0.2 * styles.$base-size solid;
+    border-inline-end-color: transparent;
+    border-block-end-color: transparent;
   }
 }
@@ -65,25 +69,25 @@
 .circle {
   display: inline-block;
-  width: 50%;
-  height: 100%;
+  inline-size: 50%;
+  block-size: 100%;
   overflow: hidden;
   @include awsui-spinner-circle;
   &:after {
     /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
     animation: 1.5s ease-in-out infinite;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 200%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    block-size: 100%;
+    inline-size: 200%;
   }
   &.circle-left:after {
-    left: 0;
+    inset-inline-start: 0;
     /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
     animation-name: spinner-line-left;
   }
   &.circle-right:after {
-    left: -100%;
+    inset-inline-start: -100%;
     /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
     animation-name: spinner-line-right;
   }