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

@cloudscape-design/components-themeable 3.0.531 → 3.0.532

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

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;
   }

package/lib/internal/scss/split-panel/styles.scss CHANGED Viewed

@@ -37,17 +37,17 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   z-index: 840;
   &-closed {
     cursor: pointer;
-    min-width: constants.$sidebar-size-closed;
+    min-inline-size: constants.$sidebar-size-closed;
   }
 }
 .drawer-content-side {
   display: flex;
   align-items: center;
-  height: 100%;
+  block-size: 100%;
   overflow: auto;
   .drawer-closed > & {
-    width: constants.$sidebar-size-closed;
+    inline-size: constants.$sidebar-size-closed;
     &:hover {
       background: awsui.$color-background-layout-panel-hover;
     }
@@ -62,23 +62,20 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   :not(.drawer-closed) > & {
     overflow-y: auto;
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
   }
 }
 .position-bottom {
   position: fixed;
   overflow-y: auto;
-  border-top: awsui.$border-panel-top-width solid awsui.$color-border-divider-panel-bottom;
+  border-block-start: awsui.$border-panel-top-width solid awsui.$color-border-divider-panel-bottom;
   &:not(.refresh) {
     // custom shadow because the existing one does not have shadow on top
     box-shadow: awsui.$shadow-split-bottom;
-    border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
-    border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
+    border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
+    border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-bottom;
   }
   &.drawer-closed {
     overflow: hidden;
@@ -100,16 +97,19 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
 }
 .position-side {
-  border-top: none;
+  border-block-start: none;
   box-shadow: awsui.$shadow-split-side;
-  height: 100%;
+  block-size: 100%;
 }
 .slider {
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
   cursor: ns-resize;
-  margin: 2px 0 0 0;
-  height: $slider-width;
+  margin-block-start: 2px;
+  margin-block-end: 0;
+  margin-inline: 0;
+  block-size: $slider-width;
   // Desktop Safari doesn't support touch events, but Safari on iOS does.
   // stylelint-disable-next-line plugin/no-unsupported-browser-features
   touch-action: none;
@@ -125,15 +125,17 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
 .slider-side {
   cursor: ew-resize;
-  margin: 0 0 0 2px;
+  margin-block: 0;
+  margin-inline-start: 2px;
+  margin-inline-end: 0;
 }
 .slider-wrapper-bottom {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: $slider-width + 2px;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: $slider-width + 2px;
   display: flex;
   justify-content: center;
   z-index: 2;
@@ -141,10 +143,10 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
 .slider-wrapper-side {
   position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: $slider-width + 2px;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  block-size: 100%;
+  inline-size: $slider-width + 2px;
   display: flex;
   align-items: center;
   z-index: 1;
@@ -158,7 +160,9 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   flex: 0 0 auto;
   align-self: flex-start;
   box-sizing: border-box;
-  margin: awsui.$space-xxs auto 0;
+  margin-block-start: awsui.$space-xxs;
+  margin-block-end: 0;
+  margin-inline: auto;
 }
 .slider-icon {
@@ -167,7 +171,8 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
     stroke: awsui.$color-text-interactive-hover;
   }
   &-bottom {
-    margin: auto;
+    margin-block: auto;
+    margin-inline: auto;
   }
   &-side {
     transform: rotate(90deg);
@@ -177,34 +182,41 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
 .pane-header-wrapper-bottom {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   display: flex;
   align-items: center;
   flex-direction: column;
   z-index: 1; // should be above .content-bottom
-  padding: 0 awsui.$space-layout-content-horizontal;
+  padding-block: 0;
+  padding-inline: awsui.$space-layout-content-horizontal;
   .drawer-mobile > .drawer-content-bottom > & {
-    padding: 0 awsui.$space-l;
+    padding-block: 0;
+    padding-inline: awsui.$space-l;
   }
   .drawer-disable-content-paddings > .drawer-content-bottom > & {
-    padding: 0 awsui.$space-l;
+    padding-block: 0;
+    padding-inline: awsui.$space-l;
   }
   :not(.drawer-closed) > .drawer-content-bottom > & {
     background-color: awsui.$color-background-layout-panel-content;
-    border-bottom: awsui.$border-panel-header-width solid awsui.$color-border-divider-default;
+    border-block-end: awsui.$border-panel-header-width solid awsui.$color-border-divider-default;
   }
 }
 .content-bottom {
-  padding: 0 awsui.$space-layout-content-horizontal;
-  margin-top: awsui.$space-panel-split-top;
+  padding-block: 0;
+  padding-inline: awsui.$space-layout-content-horizontal;
+  margin-block-start: awsui.$space-panel-split-top;
   position: relative;
   z-index: 0; // the content inside .content-bottom should not be above pane-header-wrapper-bottom
   .drawer-mobile > .drawer-content-bottom > & {
-    padding: 0 awsui.$space-l;
+    padding-block: 0;
+    padding-inline: awsui.$space-l;
   }
   .drawer-disable-content-paddings > .drawer-content-bottom > & {
-    padding: 0;
+    padding-block: 0;
+    padding-inline: 0;
   }
 }
@@ -214,16 +226,16 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
 }
 .pane-bottom-content-nav-padding {
-  padding-left: $app-layout-drawer-width;
+  padding-inline-start: $app-layout-drawer-width;
 }
 .pane-bottom-content-tools-padding {
-  padding-right: $app-layout-drawer-width;
+  padding-inline-end: $app-layout-drawer-width;
 }
 .content-bottom-max-width {
   flex-grow: 1;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 .content-side {
@@ -232,17 +244,20 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   box-sizing: border-box;
   overflow-y: auto;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
+  inset-block-start: 0;
+  inset-inline: 0;
+  block-size: 100%;
   > .pane-header-wrapper-side {
-    padding: 0 awsui.$space-m 0 awsui.$space-panel-side-left;
-    border-bottom: awsui.$border-panel-header-width solid awsui.$color-border-divider-default;
+    padding-block: 0;
+    padding-inline-end: awsui.$space-m;
+    padding-inline-start: awsui.$space-panel-side-left;
+    border-block-end: awsui.$border-panel-header-width solid awsui.$color-border-divider-default;
   }
   > .pane-content-wrapper-side {
-    padding: 0 awsui.$space-panel-side-right 0 awsui.$space-panel-side-left;
-    margin-top: awsui.$space-panel-split-top;
+    padding-block: 0;
+    padding-inline-start: awsui.$space-panel-side-left;
+    padding-inline-end: awsui.$space-panel-side-right;
+    margin-block-start: awsui.$space-panel-split-top;
   }
 }
@@ -252,13 +267,17 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   flex-direction: row;
   align-items: flex-start;
   justify-content: space-between;
-  width: 100%;
-  margin: awsui.$size-vertical-panel-icon-offset 0;
+  inline-size: 100%;
+  margin-block: awsui.$size-vertical-panel-icon-offset;
+  margin-inline: 0;
   &-text {
     @include styles.font-panel-header;
-    padding: 0;
-    margin: 0;
-    margin-top: calc(#{awsui.$space-scaled-xxs} + 1px);
+    padding-block: 0;
+    padding-inline: 0;
+    margin-block: 0;
+    margin-inline: 0;
+    margin-block-start: calc(#{awsui.$space-scaled-xxs} + 1px);
   }
 }
@@ -267,10 +286,11 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   flex-direction: row;
   justify-content: space-between;
   flex: 0 0 auto;
-  margin-left: awsui.$space-xs;
+  margin-inline-start: awsui.$space-xs;
 }
 .divider {
-  border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-  margin: awsui.$space-scaled-xxs awsui.$space-scaled-xs;
+  border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  margin-block: awsui.$space-scaled-xxs;
+  margin-inline: awsui.$space-scaled-xs;
 }