@carbon/styles 1.37.0 → 1.38.0

package/scss/components/select/_select.scss

@@ -27,16 +27,16 @@
 
     position: relative;
     display: flex;
-    width: 100%;
     flex-direction: column;
     align-items: flex-start;
+    inline-size: 100%;
   }
 
   .#{$prefix}--select-input__wrapper {
     position: relative;
     display: flex;
-    width: 100%;
     align-items: center;
+    inline-size: 100%;
   }
 
   .#{$prefix}--select-input {
@@ -44,19 +44,20 @@
     @include focus-outline('reset');
 
     display: block;
-    width: 100%;
-    height: convert.to-rem(40px);
-    padding: 0 $spacing-09 0 $spacing-05;
     border: none;
-    border-bottom: 1px solid $border-strong;
     appearance: none;
     background-color: $field;
+    block-size: convert.to-rem(40px);
+    border-block-end: 1px solid $border-strong;
     border-radius: 0;
     color: $text-primary;
     cursor: pointer;
     font-family: inherit;
+    inline-size: 100%;
     // reset disabled <select> opacity
     opacity: 1;
+    padding-block: 0;
+    padding-inline: $spacing-05 $spacing-09;
     text-overflow: ellipsis;
 
     // Do not transition on background-color (see: https://github.com/carbon-design-system/carbon/issues/4464)
@@ -90,21 +91,21 @@
 
     &:disabled,
     &:hover:disabled {
-      border-bottom-color: transparent;
       background-color: $field;
+      border-block-end-color: transparent;
       color: $text-disabled;
       cursor: not-allowed;
     }
   }
 
   .#{$prefix}--select-input--sm {
-    height: convert.to-rem(32px);
-    max-height: convert.to-rem(32px);
+    block-size: convert.to-rem(32px);
+    max-block-size: convert.to-rem(32px);
   }
 
   .#{$prefix}--select-input--lg {
-    height: convert.to-rem(48px);
-    max-height: convert.to-rem(48px);
+    block-size: convert.to-rem(48px);
+    max-block-size: convert.to-rem(48px);
   }
 
   .#{$prefix}--select--disabled .#{$prefix}--label,
@@ -114,7 +115,7 @@
 
   .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input,
   .#{$prefix}--select--warning .#{$prefix}--select-input {
-    padding-right: $spacing-10;
+    padding-inline-end: $spacing-10;
   }
 
   .#{$prefix}--select-input:disabled ~ .#{$prefix}--select__arrow {
@@ -138,10 +139,10 @@
 
   .#{$prefix}--select__arrow {
     position: absolute;
-    top: 0;
-    right: $spacing-05;
-    height: 100%;
+    block-size: 100%;
     fill: $icon-primary;
+    inset-block-start: 0;
+    inset-inline-end: $spacing-05;
     pointer-events: none;
 
     // Windows, Firefox HCM Fix
@@ -156,7 +157,7 @@
 
   .#{$prefix}--select__invalid-icon {
     position: absolute;
-    right: $spacing-08;
+    inset-inline-end: $spacing-08;
   }
 
   .#{$prefix}--select-input__wrapper[data-invalid]
@@ -196,12 +197,12 @@
     .#{$prefix}--form__helper-text {
     align-self: flex-start;
     // Offset label text margin
-    margin-top: convert.to-rem(13px);
+    margin-block-start: convert.to-rem(13px);
   }
 
   .#{$prefix}--select--inline .#{$prefix}--form__helper-text {
-    margin-bottom: 0;
-    margin-left: $spacing-03;
+    margin-block-end: 0;
+    margin-inline-start: $spacing-03;
   }
 
   .#{$prefix}--select--inline .#{$prefix}--label {
@@ -210,12 +211,12 @@
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select-input {
-    width: auto;
-    padding-right: $spacing-07;
-    padding-left: $spacing-03;
-    border-bottom: none;
     background-color: transparent;
+    border-block-end: none;
     color: $text-primary;
+    inline-size: auto;
+    padding-inline-end: $spacing-07;
+    padding-inline-start: $spacing-03;
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select-input:focus,
@@ -230,18 +231,18 @@
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select__arrow {
-    right: $spacing-03;
+    inset-inline-end: $spacing-03;
   }
 
   .#{$prefix}--select--inline.#{$prefix}--select--invalid
     .#{$prefix}--select-input {
-    padding-right: convert.to-rem(56px);
+    padding-inline-end: convert.to-rem(56px);
   }
 
   .#{$prefix}--select--inline.#{$prefix}--select--invalid
     .#{$prefix}--select-input
     ~ .#{$prefix}--select__invalid-icon {
-    right: $spacing-07;
+    inset-inline-end: $spacing-07;
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select-input:disabled {
@@ -255,8 +256,8 @@
 
   // readonly
   .#{$prefix}--select--readonly .#{$prefix}--select-input {
-    border-bottom-color: $border-subtle;
     background-color: transparent;
+    border-block-end-color: $border-subtle;
     cursor: default;
   }
 
@@ -268,8 +269,9 @@
   .#{$prefix}--select.#{$prefix}--skeleton {
     @include skeleton;
 
-    width: 100%;
-    height: 2.5rem;
+    block-size: 2.5rem;
+
+    inline-size: 100%;
   }
 
   .#{$prefix}--select.#{$prefix}--skeleton .#{$prefix}--select-input {

package/scss/components/skeleton-styles/_skeleton-styles.scss

@@ -19,29 +19,31 @@
     @include skeleton;
 
     display: inline-block;
-    width: convert.to-rem(16px);
-    height: convert.to-rem(16px);
+    block-size: convert.to-rem(16px);
+    inline-size: convert.to-rem(16px);
   }
 
   //skeleton placeholder
   .#{$prefix}--skeleton__placeholder {
     @include skeleton;
 
-    width: convert.to-rem(100px);
+    block-size: convert.to-rem(100px);
 
-    height: convert.to-rem(100px);
+    inline-size: convert.to-rem(100px);
   }
 
   //skeleton text
   .#{$prefix}--skeleton__text {
     @include skeleton;
 
-    width: 100%;
-    height: 1rem;
-    margin-bottom: $spacing-03;
+    block-size: 1rem;
+
+    inline-size: 100%;
+
+    margin-block-end: $spacing-03;
   }
 
   .#{$prefix}--skeleton__heading {
-    height: 1.5rem;
+    block-size: 1.5rem;
   }
 }

package/scss/components/slider/_slider.scss

@@ -35,12 +35,12 @@
 
   .#{$prefix}--slider {
     position: relative;
-    width: 100%;
-    min-width: convert.to-rem(200px);
-    max-width: convert.to-rem(640px);
     padding: $spacing-05 0;
     margin: 0 $spacing-05;
     cursor: pointer;
+    inline-size: 100%;
+    max-inline-size: convert.to-rem(640px);
+    min-inline-size: convert.to-rem(200px);
   }
 
   .#{$prefix}--slider__range-label {
@@ -50,35 +50,35 @@
     white-space: nowrap;
 
     &:last-of-type {
-      margin-right: $spacing-05;
+      margin-inline-end: $spacing-05;
     }
   }
 
   .#{$prefix}--slider__track {
     position: absolute;
-    width: 100%;
-    height: convert.to-rem(2px);
     background: $border-subtle;
+    block-size: convert.to-rem(2px);
+    inline-size: 100%;
     transform: translate(0%, -50%);
   }
 
   .#{$prefix}--slider__track:before {
     position: absolute;
-    top: convert.to-rem(-5px);
-    left: 50%;
     display: inline-block;
-    width: convert.to-rem(2px);
-    height: convert.to-rem(4px);
     background: $border-subtle;
+    block-size: convert.to-rem(4px);
     content: '';
+    inline-size: convert.to-rem(2px);
+    inset-block-start: convert.to-rem(-5px);
+    inset-inline-start: 50%;
     transform: translate(-50%, 0);
   }
 
   .#{$prefix}--slider__filled-track {
     position: absolute;
-    width: 100%;
-    height: convert.to-rem(2px);
     background: $layer-selected-inverse;
+    block-size: convert.to-rem(2px);
+    inline-size: 100%;
     pointer-events: none;
     transform: translate(0%, -50%);
     transform-origin: left;
@@ -88,11 +88,11 @@
   .#{$prefix}--slider__thumb {
     position: absolute;
     z-index: 3;
-    width: convert.to-rem(14px);
-    height: convert.to-rem(14px);
     background: $layer-selected-inverse;
+    block-size: convert.to-rem(14px);
     border-radius: 50%;
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
+    inline-size: convert.to-rem(14px);
     outline: none;
     transform: translate(-50%, -50%);
     transition: transform $duration-fast-02 motion(standard, productive),
@@ -123,10 +123,10 @@
 
   .#{$prefix}--slider-text-input,
   .#{$prefix}-slider-text-input {
-    width: convert.to-rem(64px);
-    height: convert.to-rem(40px);
     -moz-appearance: textfield;
     appearance: textfield;
+    block-size: convert.to-rem(40px);
+    inline-size: convert.to-rem(64px);
 
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
@@ -145,24 +145,24 @@
   // Invalid & warn state
   .#{$prefix}--slider-text-input.#{$prefix}--text-input--invalid,
   .#{$prefix}--slider-text-input--warn {
-    width: 6rem;
-    padding-right: $spacing-09;
+    inline-size: 6rem;
+    padding-inline-end: $spacing-09;
   }
 
   .#{$prefix}--slider__invalid-icon {
     position: absolute;
-    // top/transform used to center invalid icon in IE11
-    top: 50%;
-    right: $spacing-05;
     fill: $support-error;
+    // top/transform used to center invalid icon in IE11
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-05;
     transform: translateY(-50%);
   }
 
   .#{$prefix}--slider__validation-msg.#{$prefix}--form-requirement {
     display: block;
     overflow: visible;
-    max-height: 100%;
-    margin-top: 0;
+    margin-block-start: 0;
+    max-block-size: 100%;
   }
 
   .#{$prefix}--slider__validation-msg--invalid {
@@ -242,8 +242,8 @@
   }
 
   .#{$prefix}--slider--readonly .#{$prefix}--slider__thumb {
-    width: 0;
-    height: 0;
+    block-size: 0;
+    inline-size: 0;
   }
 
   .#{$prefix}--slider--readonly ~ .#{$prefix}--slider-text-input {
@@ -255,8 +255,8 @@
     .#{$prefix}--slider__range-label {
     @include skeleton;
 
-    width: convert.to-rem(20px);
-    height: convert.to-rem(12px);
+    block-size: convert.to-rem(12px);
+    inline-size: convert.to-rem(20px);
   }
 
   .#{$prefix}--slider-container.#{$prefix}--skeleton
@@ -267,8 +267,8 @@
 
   .#{$prefix}--slider-container.#{$prefix}--skeleton
     .#{$prefix}--slider__thumb {
-    left: 50%;
     cursor: default;
+    inset-inline-start: 50%;
     pointer-events: none;
   }
 

package/scss/components/structured-list/_mixins.scss

@@ -32,13 +32,13 @@ $structured-list-text-transform: none !default;
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding--data-structured-list($padding: $structured-list-padding) {
-  padding-right: $padding * 0.5;
-  padding-left: $padding * 0.5;
+  padding-inline-end: $padding * 0.5;
+  padding-inline-start: $padding * 0.5;
 
   // Controls gutter sizes for check
   &:first-child {
-    padding-right: $padding * 0.5;
-    padding-left: $padding * 0.5;
+    padding-inline-end: $padding * 0.5;
+    padding-inline-start: $padding * 0.5;
   }
 }
 

package/scss/components/structured-list/_structured-list.scss

@@ -31,11 +31,11 @@
     @include component-reset.reset;
 
     display: table;
-    width: 100%;
 
     background-color: transparent;
     border-collapse: collapse;
     border-spacing: 0;
+    inline-size: 100%;
     overflow-x: auto;
 
     // Condensed list
@@ -49,7 +49,7 @@
       .#{$prefix}--structured-list-td:first-of-type,
     .#{$prefix}--structured-list-row
       .#{$prefix}--structured-list-th:first-of-type {
-      padding-left: 1rem;
+      padding-inline-start: 1rem;
       // specs require 16px spacing between columns
       // 8px side padding between col creates 16 px, with exception of 1st col, which needs an override to be 16px
     }
@@ -67,21 +67,21 @@
     &.#{$prefix}--structured-list--flush
       .#{$prefix}--structured-list-row
       .#{$prefix}--structured-list-th:first-of-type {
-      padding-right: 1rem;
-      padding-left: 0;
+      padding-inline-end: 1rem;
+      padding-inline-start: 0;
     }
   }
 
   .#{$prefix}--structured-list-row {
     display: table-row;
-    border-top: 1px solid $border-subtle;
+    border-block-start: 1px solid $border-subtle;
     transition: background-color motion.$duration-fast-02
       motion.motion(standard, productive);
   }
 
   .#{$prefix}--structured-list-tbody
     .#{$prefix}--structured-list-row:last-child {
-    border-bottom: 1px solid $border-subtle;
+    border-block-end: 1px solid $border-subtle;
   }
 
   .#{$prefix}--structured-list-row--header-row {
@@ -149,10 +149,10 @@
     @include type-style('heading-compact-01');
 
     display: table-cell;
-    height: convert.to-rem(40px);
+    block-size: convert.to-rem(40px);
     color: $text-primary;
     font-weight: 600;
-    text-align: left;
+    text-align: start;
     text-transform: $structured-list-text-transform;
     vertical-align: top;
   }
@@ -169,8 +169,8 @@
 
     position: relative;
     display: table-cell;
-    max-width: 36rem;
     color: $text-secondary;
+    max-inline-size: 36rem;
 
     transition: color motion.$duration-fast-02
       motion.motion(standard, productive);
@@ -181,7 +181,7 @@
   }
 
   .#{$prefix}--structured-list-input + .#{$prefix}--structured-list-td {
-    text-align: right;
+    text-align: end;
   }
 
   .#{$prefix}--structured-list-svg {
@@ -204,15 +204,15 @@
   .#{$prefix}--structured-list.#{$prefix}--skeleton {
     .#{$prefix}--structured-list-th {
       &:first-child {
-        width: 8%;
+        inline-size: 8%;
       }
 
       &:nth-child(3n + 2) {
-        width: 30%;
+        inline-size: 30%;
       }
 
       &:nth-child(3n + 3) {
-        width: 15%;
+        inline-size: 15%;
       }
     }
 
@@ -220,15 +220,15 @@
       @include skeleton;
 
       display: block;
+      block-size: 1rem;
 
-      width: 75%;
-      height: 1rem;
+      inline-size: 75%;
     }
   }
 
   .#{$prefix}--structured-list.#{$prefix}--structured-list--selection.#{$prefix}--skeleton
     .#{$prefix}--structured-list-th:first-child {
-    width: 5%;
+    inline-size: 5%;
 
     span {
       display: none;