@carbon/styles 1.37.0 → 1.38.0-rc.0

package/scss/components/form/_form.scss

@@ -54,10 +54,10 @@ $input-label-weight: 400 !default;
     @include type-style('label-01');
 
     display: inline-block;
-    margin-bottom: $spacing-03;
     color: $text-secondary;
     font-weight: $input-label-weight;
     line-height: 1rem;
+    margin-block-end: $spacing-03;
     vertical-align: baseline;
   }
 
@@ -66,13 +66,13 @@ $input-label-weight: 400 !default;
   }
 
   .#{$prefix}--label--no-margin {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 
   .#{$prefix}--label + .#{$prefix}--tooltip {
     position: relative;
-    top: 0.2rem;
-    left: 0.5rem;
+    inset-block-start: 0.2rem;
+    inset-inline-start: 0.5rem;
   }
 
   .#{$prefix}--label + .#{$prefix}--tooltip .#{$prefix}--tooltip__trigger {
@@ -103,16 +103,17 @@ $input-label-weight: 400 !default;
   }
 
   .#{$prefix}--label + .#{$prefix}--toggletip {
-    top: 0.2rem;
-    left: 0.5rem;
+    inset-block-start: 0.2rem;
+    inset-inline-start: 0.5rem;
   }
 
   // Skeleton State
   .#{$prefix}--label.#{$prefix}--skeleton {
     @include skeleton;
 
-    width: convert.to-rem(75px);
-    height: convert.to-rem(14px);
+    block-size: convert.to-rem(14px);
+
+    inline-size: convert.to-rem(75px);
   }
 
   input[type='number'] {
@@ -156,8 +157,8 @@ $input-label-weight: 400 !default;
     ~ .#{$prefix}--form-requirement {
       display: block;
       overflow: visible;
-      max-height: convert.to-rem(200px);
       font-weight: 400;
+      max-block-size: convert.to-rem(200px);
     }
   }
 
@@ -192,7 +193,7 @@ $input-label-weight: 400 !default;
   }
 
   // Fix for red ring when input is marked required in Firefox, refs #744
-  input:not(output):not([data-invalid]):-moz-ui-invalid {
+  input:not(output, [data-invalid]):-moz-ui-invalid {
     box-shadow: none;
   }
 
@@ -202,22 +203,22 @@ $input-label-weight: 400 !default;
 
     display: none;
     overflow: hidden;
-    max-height: 0;
     margin: $spacing-02 0 0;
+    max-block-size: 0;
   }
 
   .#{$prefix}--select--inline .#{$prefix}--form__helper-text {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   .#{$prefix}--form__helper-text {
     @include type-style('helper-text-01');
 
     z-index: 0;
-    // Added to prevent error text from displaying under helper text in Safari (#6392)
-    width: 100%;
-    margin-top: $spacing-02;
     color: $text-secondary;
+    // Added to prevent error text from displaying under helper text in Safari (#6392)
+    inline-size: 100%;
+    margin-block-start: $spacing-02;
     opacity: 1;
   }
 

package/scss/components/inline-loading/_inline-loading.scss

@@ -24,9 +24,9 @@ $-loading-gap-small: 110;
 @mixin inline-loading {
   .#{$prefix}--inline-loading {
     display: flex;
-    width: 100%;
-    min-height: 2rem;
     align-items: center;
+    inline-size: 100%;
+    min-block-size: 2rem;
   }
 
   .#{$prefix}--inline-loading__text {
@@ -40,7 +40,7 @@ $-loading-gap-small: 110;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: $spacing-03;
+    margin-inline-end: $spacing-03;
   }
 
   .#{$prefix}--inline-loading__checkmark-container {
@@ -49,8 +49,8 @@ $-loading-gap-small: 110;
     // For deprecated older markup
     &.#{$prefix}--inline-loading__svg {
       position: absolute;
-      top: 0.75rem;
-      width: 0.75rem;
+      inline-size: 0.75rem;
+      inset-block-start: 0.75rem;
     }
 
     &[hidden] {
@@ -71,9 +71,9 @@ $-loading-gap-small: 110;
   }
 
   .#{$prefix}--inline-loading--error {
-    width: convert.to-rem(16px);
-    height: convert.to-rem(16px);
+    block-size: convert.to-rem(16px);
     fill: $support-error;
+    inline-size: convert.to-rem(16px);
 
     &[hidden] {
       display: none;
@@ -87,8 +87,8 @@ $-loading-gap-small: 110;
   @media screen and (-ms-high-contrast: active),
     screen and (-ms-high-contrast: none) {
     .#{$prefix}--inline-loading__checkmark-container {
-      top: 1px;
-      right: 0.5rem;
+      inset-block-start: 1px;
+      inset-inline-end: 0.5rem;
     }
 
     .#{$prefix}--inline-loading__checkmark {

package/scss/components/link/_link.scss

@@ -111,6 +111,6 @@ $link-focus-text-color: custom-property.get-var(
   .#{$prefix}--link__icon {
     display: inline-flex;
     align-self: center;
-    margin-left: $spacing-03;
+    margin-inline-start: $spacing-03;
   }
 }

package/scss/components/list/_list.scss

@@ -31,7 +31,7 @@
   }
 
   .#{$prefix}--list--unordered:not(.#{$prefix}--list--nested) {
-    margin-left: $spacing-05;
+    margin-inline-start: $spacing-05;
   }
 
   .#{$prefix}--list--expressive,
@@ -48,11 +48,11 @@
   }
 
   .#{$prefix}--list--nested {
-    margin-left: convert.to-rem(32px);
+    margin-inline-start: convert.to-rem(32px);
   }
 
   .#{$prefix}--list--nested .#{$prefix}--list__item {
-    padding-left: $spacing-02;
+    padding-inline-start: $spacing-02;
   }
 
   .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested) {
@@ -67,9 +67,9 @@
   .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested)
     > .#{$prefix}--list__item::before {
     position: absolute;
-    left: convert.to-rem(-24px);
     content: counter(item) '.';
     counter-increment: item;
+    inset-inline-start: convert.to-rem(-24px);
   }
 
   .#{$prefix}--list--ordered.#{$prefix}--list--nested,
@@ -82,17 +82,17 @@
 
     &::before {
       position: absolute;
-      left: calc(-1 * #{$spacing-05});
       // – en dash
       content: '\002013';
+      inset-inline-start: calc(-1 * #{$spacing-05});
     }
   }
 
   .#{$prefix}--list--unordered.#{$prefix}--list--nested
     > .#{$prefix}--list__item::before {
-    // offset to account for smaller ▪ vs –
-    left: calc(-1 * #{$spacing-04});
     // ▪ square
     content: '\0025AA';
+    // offset to account for smaller ▪ vs –
+    inset-inline-start: calc(-1 * #{$spacing-04});
   }
 }