npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.534 → 3.0.535 - Mend

@cloudscape-design/components-themeable 3.0.534 → 3.0.535

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

package/lib/internal/scss/token-group/styles.scss CHANGED Viewed

@@ -12,14 +12,19 @@
   @include styles.styles-reset;
   &.has-items:not(.no-padding) {
-    padding-top: awsui.$space-xs;
+    padding-block-start: awsui.$space-xs;
   }
 }
 .dismiss-button {
-  margin: -1px -1px 0 awsui.$space-xxs;
-  border: 1px solid transparent;
-  padding: 0 awsui.$space-xxs;
+  margin-block-start: -1px;
+  margin-block-end: 0;
+  margin-inline-start: awsui.$space-xxs;
+  margin-inline-end: -1px;
+  border-block: 1px solid transparent;
+  border-inline: 1px solid transparent;
+  padding-block: 0;
+  padding-inline: awsui.$space-xxs;
   color: awsui.$color-text-button-inline-icon-default;
   background-color: transparent;
@@ -39,26 +44,33 @@
 }
 .token {
-  height: 100%;
+  block-size: 100%;
   display: flex;
   flex-direction: column;
   gap: awsui.$space-xxs;
 }
 .token-box {
-  height: 100%;
-  border: awsui.$border-field-width solid constants.$token-border-color;
-  padding: styles.$control-padding-vertical awsui.$space-xxs styles.$control-padding-vertical
-    styles.$control-padding-horizontal;
+  block-size: 100%;
+  border-block: awsui.$border-field-width solid constants.$token-border-color;
+  border-inline: awsui.$border-field-width solid constants.$token-border-color;
+  padding-block-start: styles.$control-padding-vertical;
+  padding-block-end: styles.$control-padding-vertical;
+  padding-inline-start: styles.$control-padding-horizontal;
+  padding-inline-end: awsui.$space-xxs;
   display: flex;
   align-items: flex-start;
   background: constants.$token-background;
-  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;
   box-sizing: border-box;
 }
 .token-box-error {
   border-color: awsui.$color-border-status-error;
-  border-left-width: awsui.$border-invalid-width;
+  border-inline-start-width: awsui.$border-invalid-width;
   > .dismiss-button {
     color: awsui.$color-text-interactive-default;

package/lib/internal/scss/top-navigation/1.0-beta/styles.scss CHANGED Viewed

@@ -18,25 +18,29 @@
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
-    height: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-m});
-    padding: 0 0 0 awsui.$space-l;
+    block-size: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-m});
+    padding-block: 0;
+    padding-inline-start: awsui.$space-l;
+    padding-inline-end: 0;
   }
   &.medium > .padding-box,
   &.narrow > .padding-box {
-    height: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-xs});
+    block-size: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-xs});
   }
   &.narrow > .padding-box {
-    height: awsui.$space-xxxl;
-    padding: 0 0 0 awsui.$space-xs;
+    block-size: awsui.$space-xxxl;
+    padding-block: 0;
+    padding-inline-start: awsui.$space-xs;
+    padding-inline-end: 0;
   }
 }
 .hidden {
   @include styles.awsui-util-hide;
   visibility: hidden;
-  width: 9000px;
+  inline-size: 9000px;
 }
 // Ensures that tabbable child elements are hidden to a11y software.
@@ -64,27 +68,27 @@
   &.no-logo {
     // Prevent responsiveness from completely hiding the title.
-    min-width: 100px;
+    min-inline-size: 100px;
   }
 }
 .logo {
   display: block;
-  max-height: awsui.$space-xxl;
-  margin-left: awsui.$space-s;
-  width: auto;
+  max-block-size: awsui.$space-xxl;
+  margin-inline-start: awsui.$space-s;
+  inline-size: auto;
   // Setting an arbitrary min-width here discourages browser from lazy rendering
-  min-width: 10px;
+  min-inline-size: 10px;
   &.narrow {
-    max-height: awsui.$space-xl;
+    max-block-size: awsui.$space-xl;
   }
 }
 .title {
   @include styles.font-heading-m;
-  margin-left: awsui.$space-s;
+  margin-inline-start: awsui.$space-s;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -96,19 +100,19 @@
 .inputs {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
   display: flex;
   justify-content: center;
 }
 .search {
-  width: 100%;
-  max-width: 340px;
-  padding-left: awsui.$space-xxxl;
+  inline-size: 100%;
+  max-inline-size: 340px;
+  padding-inline-start: awsui.$space-xxxl;
   &-expanded {
-    max-width: none;
-    padding-left: awsui.$space-s;
+    max-inline-size: none;
+    padding-inline-start: awsui.$space-s;
   }
 }
@@ -117,14 +121,14 @@
   flex-shrink: 0;
   flex-direction: row;
   align-items: stretch;
-  padding-left: awsui.$space-m;
+  padding-inline-start: awsui.$space-m;
   // Expand height of utilies fully so that the dropdown is anchored directly underneath it.
-  height: 100%;
+  block-size: 100%;
   .medium > .padding-box > &,
   .narrow > .padding-box > & {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 }
@@ -139,16 +143,15 @@
     position: absolute;
     content: '';
-    width: 1px;
-    right: 0;
-    top: awsui.$space-s;
-    bottom: awsui.$space-s;
+    inline-size: 1px;
+    inset-inline-end: 0;
+    inset-block: awsui.$space-s;
     background: awsui.$color-border-divider-default;
   }
   &.utility-wrapper-last:not(.utility-type-button-primary-button) {
-    padding-right: 0;
+    padding-inline-end: 0;
     &::after {
       display: none;
@@ -157,53 +160,54 @@
   .medium > .padding-box > .utilities > &::after,
   .narrow > .padding-box > .utilities > &::after {
-    top: awsui.$space-xs;
-    bottom: awsui.$space-xs;
+    inset-block: awsui.$space-xs;
   }
 }
 .utility-wrapper-last {
   // Add appropriate space to the right for the last utility
-  margin-right: awsui.$space-s;
+  margin-inline-end: awsui.$space-s;
   &.utility-type-menu-dropdown {
     // Remove the margin in case of a dropdown, because it's added as padding to the trigger.
     // This makes sure that the dropdown trigger (and therefore the dropdown itself)
     // will expand completely to the right edge of the top nav.
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   // Adjust spacing in the smaller variant
   .narrow > .padding-box > .utilities > & {
-    margin-right: 0;
+    margin-inline-end: 0;
     &.utility-type-button-primary-button {
-      padding-right: awsui.$space-l;
+      padding-inline-end: awsui.$space-l;
     }
   }
 }
 .utility-type-menu-dropdown {
-  padding: 0 awsui.$space-s;
+  padding-block: 0;
+  padding-inline: awsui.$space-s;
   align-items: stretch;
 }
 .utility-type-button-link,
 .utility-type-button-primary-button {
-  padding: 0 awsui.$space-m;
+  padding-block: 0;
+  padding-inline: awsui.$space-m;
 }
 .utility-type-button-primary-button {
   // Hide dividers around primary buttons.
-  left: -1px;
-  border-left: 1px solid awsui.$color-background-container-content;
+  inset-inline-start: -1px;
+  border-inline-start: 1px solid awsui.$color-background-container-content;
   &::after {
     display: none;
   }
 }
 .utility-link-icon {
-  margin-right: awsui.$space-xxs;
+  margin-inline-end: awsui.$space-xxs;
 }
 .utility-button-external-icon {

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

@@ -20,27 +20,27 @@
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
-    height: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-m});
-    padding-left: awsui.$space-xxl;
+    block-size: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-m});
+    padding-inline-start: awsui.$space-xxl;
   }
   &.medium > .padding-box,
   &.narrow > .padding-box {
-    padding-left: awsui.$space-l;
+    padding-inline-start: awsui.$space-l;
   }
   &.medium > .padding-box {
-    height: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-xs});
-    padding-right: 0;
+    block-size: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-xs});
+    padding-inline-end: 0;
   }
   &.narrow > .padding-box {
-    height: awsui.$space-xxxl;
+    block-size: awsui.$space-xxxl;
   }
 }
 .virtual {
-  width: 9000px;
+  inline-size: 9000px;
 }
 .hidden {
@@ -57,7 +57,7 @@
 }
 .identity {
-  min-width: 0;
+  min-inline-size: 0;
   > .identity-link {
     display: flex;
@@ -76,22 +76,22 @@
   &.no-logo {
     // Prevent responsiveness from completely hiding the title.
-    min-width: 100px;
+    min-inline-size: 100px;
   }
 }
 .logo {
   display: block;
-  max-height: awsui.$space-xxl;
-  margin-right: awsui.$space-s;
-  width: auto;
+  max-block-size: awsui.$space-xxl;
+  margin-inline-end: awsui.$space-s;
+  inline-size: auto;
   flex-shrink: 0;
   // Setting an arbitrary min-width here discourages browser from lazy rendering
-  min-width: 10px;
+  min-inline-size: 10px;
   &.narrow {
-    max-height: awsui.$space-xl;
+    max-block-size: awsui.$space-xl;
   }
 }
@@ -109,16 +109,17 @@
 .inputs {
   display: flex;
   flex: 1;
-  padding: 0 awsui.$space-m;
+  padding-block: 0;
+  padding-inline: awsui.$space-m;
   justify-content: center;
 }
 .search {
-  width: 100%;
-  max-width: 340px;
+  inline-size: 100%;
+  max-inline-size: 340px;
   &-expanded {
-    max-width: none;
+    max-inline-size: none;
   }
 }
@@ -129,11 +130,11 @@
   align-items: stretch;
   // Expand height of utilies fully so that the dropdown is anchored directly underneath it.
-  height: 100%;
+  block-size: 100%;
   .medium > .padding-box > &,
   .narrow > .padding-box > & {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 }
@@ -142,17 +143,17 @@
   position: relative;
   flex-shrink: 0;
   align-items: center;
-  padding: 0 awsui.$space-m;
+  padding-block: 0;
+  padding-inline: awsui.$space-m;
   &::after {
     display: block;
     position: absolute;
     content: '';
-    width: 1px;
-    right: 0;
-    top: awsui.$space-s;
-    bottom: awsui.$space-s;
+    inline-size: 1px;
+    inset-inline-end: 0;
+    inset-block: awsui.$space-s;
     background: awsui.$color-border-divider-default;
   }
@@ -163,30 +164,32 @@
 }
 .utility-type-button-link {
-  padding: 0 awsui.$space-l;
+  padding-block: 0;
+  padding-inline: awsui.$space-l;
 }
 .utility-type-menu-dropdown {
-  padding: 0 awsui.$space-s;
+  padding-block: 0;
+  padding-inline: awsui.$space-s;
   align-items: stretch;
   &:not(.narrow):last-of-type,
   &:not(.medium):last-of-type {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 }
 .utility-type-button-primary-button {
   // Hide dividers around primary buttons.
-  left: -1px;
-  border-left: 1px solid awsui.$color-background-container-content;
+  inset-inline-start: -1px;
+  border-inline-start: 1px solid awsui.$color-background-container-content;
   &::after {
     display: none;
   }
 }
 .utility-link-icon {
-  margin-left: awsui.$space-xxs;
+  margin-inline-start: awsui.$space-xxs;
 }
 .utility-button-external-icon {
@@ -194,43 +197,45 @@
 }
 .offset-right-none {
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 .offset-right-l {
-  margin-right: awsui.$space-xxs;
+  margin-inline-end: awsui.$space-xxs;
 }
 .offset-right-xxl {
-  margin-right: awsui.$space-m;
+  margin-inline-end: awsui.$space-m;
 }
 /* Overflow Menu */
 .overflow-menu-drawer {
   position: fixed;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   z-index: 1001;
 }
 .overflow-menu {
   @include styles.styles-reset;
   background: awsui.$color-background-container-content;
-  height: 100%;
+  block-size: 100%;
 }
 .overflow-menu-header {
   display: flex;
   align-items: center;
-  min-height: awsui.$font-panel-header-line-height;
-  padding: awsui.$space-scaled-m;
-  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  min-block-size: awsui.$font-panel-header-line-height;
+  padding-block: awsui.$space-scaled-m;
+  padding-inline: awsui.$space-scaled-m;
+  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
   &-text {
     @include styles.font-panel-header;
     color: awsui.$color-text-heading-default;
     flex: 1;
-    margin: 0;
+    margin-block: 0;
+    margin-inline: 0;
     text-align: center;
     &--secondary {
@@ -256,13 +261,16 @@
 .overflow-menu-control {
   @include styles.styles-reset;
   display: flex;
-  width: 100%;
-  padding: 0;
+  inline-size: 100%;
+  padding-block: 0;
+  padding-inline: 0;
   background: none;
-  border: none;
+  border-block: none;
+  border-inline: none;
   .overflow-menu-list-item-utility > & {
-    padding: awsui.$space-scaled-m;
+    padding-block: awsui.$space-scaled-m;
+    padding-inline: awsui.$space-scaled-m;
   }
   &:hover {
@@ -292,11 +300,14 @@
 .overflow-menu-list {
   list-style: none;
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   &-submenu {
-    margin: awsui.$space-scaled-xxs 0;
+    margin-block: awsui.$space-scaled-xxs;
+    margin-inline: 0;
   }
 }
@@ -305,7 +316,7 @@
   letter-spacing: awsui.$font-button-letter-spacing;
   &-icon {
-    margin-right: awsui.$space-xxs;
+    margin-inline-end: awsui.$space-xxs;
   }
   &-text {
@@ -314,22 +325,24 @@
   &-utility {
     @include styles.font-button;
-    border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
   }
   &-submenu {
-    border-top: awsui.$border-divider-section-width solid transparent;
-    border-bottom: awsui.$border-divider-section-width solid transparent;
-    padding: awsui.$space-scaled-xxs awsui.$space-scaled-l;
+    border-block-start: awsui.$border-divider-section-width solid transparent;
+    border-block-end: awsui.$border-divider-section-width solid transparent;
+    padding-block: awsui.$space-scaled-xxs;
+    padding-inline: awsui.$space-scaled-l;
   }
   &-dropdown-menu {
-    padding: awsui.$space-scaled-xxs awsui.$space-scaled-s;
+    padding-block: awsui.$space-scaled-xxs;
+    padding-inline: awsui.$space-scaled-s;
   }
   &-expandable {
-    border-top-color: awsui.$color-border-divider-default;
-    border-bottom-color: awsui.$color-border-divider-default;
+    border-block-start-color: awsui.$color-border-divider-default;
+    border-block-end-color: awsui.$color-border-divider-default;
   }
 }

package/lib/internal/scss/tutorial-panel/components/tutorial-detail-view/styles.scss CHANGED Viewed

@@ -8,29 +8,31 @@
 .tutorial-list {
   @include styles.styles-reset;
-  padding: 0;
-  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
 }
 .tutorial-title {
   display: flex;
   align-items: flex-start;
-  margin-left: calc(-1 * #{awsui.$space-xxs});
-  padding-bottom: awsui.$space-xxxs;
+  margin-inline-start: calc(-1 * #{awsui.$space-xxs});
+  padding-block-end: awsui.$space-xxxs;
 }
 .task {
   list-style: none;
-  padding-top: 0;
+  padding-block-start: 0;
   &:not(:first-child) {
-    margin-top: awsui.$space-xl;
+    margin-block-start: awsui.$space-xl;
   }
 }
 .task-title {
   display: flex;
   align-items: flex-start;
-  padding-left: awsui.$border-divider-section-width;
+  padding-inline-start: awsui.$border-divider-section-width;
   @include styles.font(heading-s);
   &--status {
@@ -62,20 +64,22 @@
 }
 .divider {
-  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
 .step-list {
   list-style: none;
-  padding: 0 0 0 awsui.$space-xxxs;
+  padding-block: 0;
+  padding-inline-start: awsui.$space-xxxs;
+  padding-inline-end: 0;
 }
 .step:not(:first-child) {
-  padding-top: awsui.$space-xxs;
+  padding-block-start: awsui.$space-xxs;
 }
 .expandable-section-wrapper {
-  width: 100%;
+  inline-size: 100%;
 }
 .expandable-section-header {

package/lib/internal/scss/tutorial-panel/components/tutorial-list/styles.scss CHANGED Viewed

@@ -11,19 +11,26 @@
 .tutorial-list {
   @include styles.styles-reset;
-  padding: 0;
-  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
 }
 .tutorial-box {
   @include styles.styles-reset;
   list-style: none;
-  border: awsui.$border-divider-section-width solid awsui.$color-border-tutorial;
-  border-radius: awsui.$border-radius-tutorial-panel-item;
-  padding: awsui.$space-m;
+  border-block: awsui.$border-divider-section-width solid awsui.$color-border-tutorial;
+  border-inline: awsui.$border-divider-section-width solid awsui.$color-border-tutorial;
+  border-start-start-radius: awsui.$border-radius-tutorial-panel-item;
+  border-start-end-radius: awsui.$border-radius-tutorial-panel-item;
+  border-end-start-radius: awsui.$border-radius-tutorial-panel-item;
+  border-end-end-radius: awsui.$border-radius-tutorial-panel-item;
+  padding-block: awsui.$space-m;
+  padding-inline: awsui.$space-m;
   &:not(:first-child) {
-    margin-top: awsui.$space-l;
+    margin-block-start: awsui.$space-l;
   }
 }
@@ -47,7 +54,7 @@
 .expandable-section {
   display: none;
-  margin-top: awsui.$space-m;
+  margin-block-start: awsui.$space-m;
   &.expanded {
     display: block;
@@ -55,7 +62,8 @@
 }
 .button-wrapper {
-  margin: calc(-1 * #{awsui.$space-xxs} - #{styles.$control-border-width});
+  margin-block: calc(-1 * #{awsui.$space-xxs} - #{styles.$control-border-width});
+  margin-inline: calc(-1 * #{awsui.$space-xxs} - #{styles.$control-border-width});
 }
 .start {

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

@@ -8,5 +8,7 @@
 .tutorial-panel {
   @include styles.styles-reset;
-  padding: 0 awsui.$space-l awsui.$space-m;
+  padding-block-start: 0;
+  padding-block-end: awsui.$space-m;
+  padding-inline: awsui.$space-l;
 }