@carbon/styles 1.37.0 → 1.38.0-rc.0

package/scss/components/fluid-search/_fluid-search.scss

@@ -18,21 +18,21 @@
 
 @mixin fluid-search {
   .#{$prefix}--search--fluid {
-    height: convert.to-rem(64px);
+    block-size: convert.to-rem(64px);
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: convert.to-rem(13px);
-    left: $spacing-05;
     display: flex;
     overflow: initial;
-    width: calc(100% - 2rem);
-    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
+    block-size: convert.to-rem(16px);
     clip: initial;
+    inline-size: calc(100% - 2rem);
+    inset-block-start: convert.to-rem(13px);
+    inset-inline-start: $spacing-05;
     white-space: initial;
   }
 
@@ -53,9 +53,9 @@
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--search-input {
-    height: 100%;
     padding: convert.to-rem(32px) convert.to-rem(88px) convert.to-rem(13px)
       $spacing-05;
+    block-size: 100%;
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--search-magnifier-icon {
@@ -64,9 +64,9 @@
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--search-close {
-    width: convert.to-rem(40px);
-    height: convert.to-rem(40px);
     border: none;
+    block-size: convert.to-rem(40px);
+    inline-size: convert.to-rem(40px);
     inset: auto convert.to-rem(48px) 0 auto;
     transition: background-color $duration-fast-01 motion(standard, productive);
   }
@@ -74,10 +74,10 @@
   .#{$prefix}--search--fluid .#{$prefix}--search-close::before {
     position: absolute;
     display: block;
-    width: convert.to-rem(1px);
-    height: 1rem;
     background: $border-subtle;
+    block-size: 1rem;
     content: '';
+    inline-size: convert.to-rem(1px);
     inset: auto convert.to-rem(-1px) convert.to-rem(14px) auto;
   }
 
@@ -89,12 +89,12 @@
 
   .#{$prefix}--search--fluid .#{$prefix}--search-close::after {
     position: absolute;
-    bottom: 0;
-    left: 0;
     display: block;
-    width: 100%;
-    height: convert.to-rem(2px);
+    block-size: convert.to-rem(2px);
     content: '';
+    inline-size: 100%;
+    inset-block-end: 0;
+    inset-inline-start: 0;
   }
 
   .#{$prefix}--search--fluid
@@ -106,12 +106,12 @@
   .#{$prefix}--search--fluid
     .#{$prefix}--search-input:not(:focus)
     ~ .#{$prefix}--search-close:not([disabled])::after {
-    height: convert.to-rem(1px);
     background: $border-strong;
+    block-size: convert.to-rem(1px);
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--search-close svg {
-    margin-bottom: convert.to-rem(2px);
+    margin-block-end: convert.to-rem(2px);
   }
 
   // Disabled styles
@@ -128,6 +128,6 @@
 
   .#{$prefix}--search--fluid.#{$prefix}--search--disabled
     .#{$prefix}--search-input[disabled] {
-    border-bottom: 1px solid $border-subtle;
+    border-block-end: 1px solid $border-subtle;
   }
 }

package/scss/components/fluid-select/_fluid-select.scss

@@ -19,8 +19,8 @@
 @mixin fluid-select {
   .#{$prefix}--select--fluid .#{$prefix}--select {
     position: relative;
-    height: 100%;
     background: $field;
+    block-size: 100%;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
@@ -28,13 +28,13 @@
   .#{$prefix}--select--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: convert.to-rem(13px);
-    left: $spacing-05;
     display: flex;
-    width: calc(100% - 2rem);
-    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
+    block-size: convert.to-rem(16px);
+    inline-size: calc(100% - 2rem);
+    inset-block-start: convert.to-rem(13px);
+    inset-inline-start: $spacing-05;
   }
 
   .#{$prefix}--select--fluid .#{$prefix}--label::-webkit-scrollbar,
@@ -54,16 +54,16 @@
   }
 
   .#{$prefix}--select--fluid .#{$prefix}--select-input {
-    min-height: convert.to-rem(64px);
     padding: convert.to-rem(32px) convert.to-rem(32px) convert.to-rem(13px)
       $spacing-05;
+    min-block-size: convert.to-rem(64px);
     outline: none;
     text-overflow: ellipsis;
   }
 
   .#{$prefix}--select--fluid .#{$prefix}--select__arrow {
-    top: $spacing-07;
-    height: 1rem;
+    block-size: 1rem;
+    inset-block-start: $spacing-07;
   }
 
   .#{$prefix}--select--fluid .#{$prefix}--select__divider {
@@ -85,10 +85,10 @@
     .#{$prefix}--select--warning
     .#{$prefix}--select__divider {
     display: block;
-    width: calc(100% - 2rem);
     border: none;
-    border-bottom: 1px solid $border-subtle;
     margin: 0 1rem;
+    border-block-end: 1px solid $border-subtle;
+    inline-size: calc(100% - 2rem);
   }
 
   .#{$prefix}--select--fluid
@@ -97,12 +97,12 @@
   .#{$prefix}--select--fluid
     .#{$prefix}--select--warning
     .#{$prefix}--select-input {
-    padding-right: convert.to-rem(32px);
-    border-bottom: 1px solid transparent;
+    border-block-end: 1px solid transparent;
+    padding-inline-end: convert.to-rem(32px);
   }
 
   .#{$prefix}--select--fluid .#{$prefix}--select--warning {
-    border-bottom: 1px solid $border-strong;
+    border-block-end: 1px solid $border-strong;
   }
 
   .#{$prefix}--select--fluid .#{$prefix}--select-input__wrapper {
@@ -126,7 +126,7 @@
     .#{$prefix}--form-requirement {
     display: block;
     overflow: visible;
-    max-height: 100%;
+    max-block-size: 100%;
   }
 
   .#{$prefix}--select--fluid
@@ -156,8 +156,8 @@
   .#{$prefix}--select--fluid
     .#{$prefix}--select--warning
     .#{$prefix}--select__invalid-icon {
-    top: convert.to-rem(73px);
-    right: $spacing-05;
+    inset-block-start: convert.to-rem(73px);
+    inset-inline-end: $spacing-05;
     pointer-events: none;
   }
 
@@ -173,7 +173,7 @@
     .#{$prefix}--select-input,
   .#{$prefix}--select--fluid
     .#{$prefix}--select--fluid--focus.#{$prefix}--select--warning {
-    border-bottom: 1px solid transparent;
+    border-block-end: 1px solid transparent;
   }
 
   // Disabled state

package/scss/components/fluid-text-area/_fluid-text-area.scss

@@ -18,9 +18,9 @@
 @mixin fluid-text-area {
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper {
     position: relative;
-    height: 100%;
     flex-direction: column;
     background: $field;
+    block-size: 100%;
   }
 
   .#{$prefix}--modal
@@ -31,19 +31,19 @@
 
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area__label-wrapper {
     position: relative;
-    height: 100%;
+    block-size: 100%;
   }
 
   .#{$prefix}--text-area--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: convert.to-rem(13px);
-    left: $spacing-05;
     display: flex;
-    width: calc(100% - 2rem);
-    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
+    block-size: convert.to-rem(16px);
+    inline-size: calc(100% - 2rem);
+    inset-block-start: convert.to-rem(13px);
+    inset-inline-start: $spacing-05;
   }
 
   .#{$prefix}--text-area--fluid .#{$prefix}--label::-webkit-scrollbar,
@@ -71,9 +71,9 @@
   }
 
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area {
-    min-height: convert.to-rem(64px);
     padding: 0 $spacing-05 convert.to-rem(13px);
-    margin-top: 2rem;
+    margin-block-start: 2rem;
+    min-block-size: convert.to-rem(64px);
     outline: none;
   }
 
@@ -84,7 +84,7 @@
   // invalid
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid,
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area:focus {
-    border-bottom: 1px solid transparent;
+    border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--text-area__divider,
@@ -100,7 +100,7 @@
   // accounts for 2px of border when invalid
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid {
     padding: 0 convert.to-rem(14px) convert.to-rem(13px);
-    margin-top: convert.to-rem(30px);
+    margin-block-start: convert.to-rem(30px);
   }
 
   .#{$prefix}--text-area--fluid
@@ -112,8 +112,8 @@
     display: block;
     border-style: solid;
     border-color: $border-subtle;
-    border-bottom: none;
     margin: 0 1rem;
+    border-block-end: none;
   }
 
   // invalid & warning error message container
@@ -126,28 +126,28 @@
     position: relative;
     display: block;
     overflow: visible;
-    max-height: 12.5rem;
     padding: 0.5rem 2.5rem 0.5rem 1rem;
     margin: 0;
     background: $field;
+    max-block-size: 12.5rem;
   }
 
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper--warn
     .#{$prefix}--form-requirement.#{$prefix}--form-requirement {
-    border-bottom: 1px solid $border-strong;
+    border-block-end: 1px solid $border-strong;
     color: $text-primary;
   }
 
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper[data-invalid]
     .#{$prefix}--form-requirement.#{$prefix}--form-requirement {
-    border-bottom: none;
+    border-block-end: none;
     color: $text-error;
   }
 
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area--warn {
-    border-bottom: none;
+    border-block-end: none;
   }
 
   .#{$prefix}--modal
@@ -159,7 +159,7 @@
   }
 
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area__invalid-icon {
-    top: 0.5rem;
+    inset-block-start: 0.5rem;
   }
 
   //invalid outline
@@ -197,23 +197,23 @@
   // Skeleton
   .#{$prefix}--text-area--fluid__skeleton {
     padding: $spacing-05;
-    border-bottom: 1px solid $skeleton-element;
     background: $skeleton-background;
+    border-block-end: 1px solid $skeleton-element;
   }
 
   .#{$prefix}--text-area--fluid__skeleton .#{$prefix}--skeleton,
   .#{$prefix}--text-area--fluid__skeleton
     .#{$prefix}--text-area.#{$prefix}--skeleton::before {
-    height: 0.5rem;
+    block-size: 0.5rem;
   }
 
   .#{$prefix}--text-area--fluid__skeleton .#{$prefix}--label {
-    margin-bottom: $spacing-04;
+    margin-block-end: $spacing-04;
   }
 
   .#{$prefix}--text-area--fluid__skeleton
     .#{$prefix}--text-area.#{$prefix}--skeleton {
-    width: 80%;
-    height: 4rem;
+    block-size: 4rem;
+    inline-size: 80%;
   }
 }

package/scss/components/fluid-text-input/_fluid-text-input.scss

@@ -19,8 +19,8 @@
 @mixin fluid-text-input {
   .#{$prefix}--text-input--fluid.#{$prefix}--text-input-wrapper {
     position: relative;
-    height: 100%;
     background: $field;
+    block-size: 100%;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
@@ -28,13 +28,13 @@
   .#{$prefix}--text-input--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: convert.to-rem(13px);
-    left: $spacing-05;
     display: flex;
-    width: calc(100% - 2rem);
-    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
+    block-size: convert.to-rem(16px);
+    inline-size: calc(100% - 2rem);
+    inset-block-start: convert.to-rem(13px);
+    inset-inline-start: $spacing-05;
   }
 
   .#{$prefix}--text-input--fluid .#{$prefix}--label::-webkit-scrollbar,
@@ -60,8 +60,8 @@
   }
 
   .#{$prefix}--text-input--fluid .#{$prefix}--text-input {
-    min-height: convert.to-rem(64px);
     padding: convert.to-rem(32px) $spacing-05 convert.to-rem(13px);
+    min-block-size: convert.to-rem(64px);
   }
 
   .#{$prefix}--text-input__divider,
@@ -87,7 +87,7 @@
 
   .#{$prefix}--text-input--fluid .#{$prefix}--text-input--invalid,
   .#{$prefix}--text-input--fluid .#{$prefix}--text-input--warning {
-    border-bottom: none;
+    border-block-end: none;
   }
 
   .#{$prefix}--text-input--fluid
@@ -99,12 +99,12 @@
     display: block;
     border-style: solid;
     border-color: $border-subtle;
-    border-bottom: none;
     margin: 0 1rem;
+    border-block-end: none;
   }
 
   .#{$prefix}--text-input--fluid .#{$prefix}--text-input__invalid-icon {
-    top: convert.to-rem(80px);
+    inset-block-start: convert.to-rem(80px);
   }
 
   .#{$prefix}--text-input--fluid
@@ -118,7 +118,7 @@
 
   .#{$prefix}--text-input--fluid
     .#{$prefix}--text-input__field-wrapper--warning {
-    border-bottom: 1px solid $border-strong;
+    border-block-end: 1px solid $border-strong;
   }
 
   .#{$prefix}--text-input--fluid
@@ -145,44 +145,44 @@
   // Password Input
   .#{$prefix}--text-input--fluid
     .#{$prefix}--text-input.#{$prefix}--password-input {
-    padding-right: $spacing-08;
+    padding-inline-end: $spacing-08;
   }
 
   .#{$prefix}--text-input--fluid.#{$prefix}--password-input-wrapper
     .#{$prefix}--text-input__invalid-icon {
-    right: $spacing-05;
+    inset-inline-end: $spacing-05;
   }
 
   .#{$prefix}--text-input--fluid
     .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
-    top: convert.to-rem(26px);
-    right: $spacing-03;
-    width: convert.to-rem(32px);
-    height: convert.to-rem(32px);
+    block-size: convert.to-rem(32px);
+    inline-size: convert.to-rem(32px);
+    inset-block-start: convert.to-rem(26px);
+    inset-inline-end: $spacing-03;
   }
 
   // Skeleton
   .#{$prefix}--text-input--fluid__skeleton {
     position: relative;
-    height: convert.to-rem(64px);
-    border-bottom: 1px solid $skeleton-element;
     background: $skeleton-background;
+    block-size: convert.to-rem(64px);
+    border-block-end: 1px solid $skeleton-element;
   }
 
   .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--skeleton {
     position: absolute;
-    top: $spacing-05;
-    left: $spacing-05;
-    width: 25%;
-    height: convert.to-rem(8px);
+    block-size: convert.to-rem(8px);
+    inline-size: 25%;
+    inset-block-start: $spacing-05;
+    inset-inline-start: $spacing-05;
   }
 
   .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--label {
     position: absolute;
-    top: convert.to-rem(36px);
-    left: $spacing-05;
-    width: 50%;
-    height: convert.to-rem(8px);
     padding: 0;
+    block-size: convert.to-rem(8px);
+    inline-size: 50%;
+    inset-block-start: convert.to-rem(36px);
+    inset-inline-start: $spacing-05;
   }
 }

package/scss/components/fluid-time-picker/_fluid-time-picker.scss

@@ -46,22 +46,22 @@
     .#{$prefix}--select-input__wrapper::before {
     position: absolute;
     display: block;
-    width: 1px;
-    height: calc(100% - 1px);
     background-color: $border-strong;
+    block-size: calc(100% - 1px);
     content: '';
+    inline-size: 1px;
     opacity: 1;
     transition: opacity $duration-fast-01 motion(standard, productive);
   }
 
   .#{$prefix}--time-picker--fluid__wrapper
     .#{$prefix}--select-input__wrapper::after {
-    right: 0;
+    inset-inline-end: 0;
   }
 
   .#{$prefix}--time-picker--fluid__wrapper
     .#{$prefix}--select-input__wrapper::before {
-    left: 0;
+    inset-inline-start: 0;
   }
 
   .#{$prefix}--time-picker--fluid:not(.#{$prefix}--time-picker--fluid--disabled)
@@ -108,12 +108,12 @@
   }
 
   .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select-input {
-    padding-top: convert.to-rem(30px);
-    border-top: 2px solid transparent;
+    border-block-start: 2px solid transparent;
+    padding-block-start: convert.to-rem(30px);
   }
 
   .#{$prefix}--select--fluid:last-of-type .#{$prefix}--select-input {
-    border-right: 2px solid transparent;
+    border-inline-end: 2px solid transparent;
   }
 
   .#{$prefix}--time-picker--fluid--invalid
@@ -122,13 +122,13 @@
   }
 
   .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select-input:hover {
-    border-top: 2px solid $support-error;
+    border-block-start: 2px solid $support-error;
   }
 
   .#{$prefix}--time-picker--fluid--invalid
     .#{$prefix}--select--fluid:last-of-type
     .#{$prefix}--select-input:hover {
-    border-right: 2px solid $support-error;
+    border-inline-end: 2px solid $support-error;
   }
 
   .#{$prefix}--time-picker--fluid--warning {
@@ -142,9 +142,9 @@
   .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--time-picker__icon,
   .#{$prefix}--time-picker--fluid--warning .#{$prefix}--time-picker__icon {
     position: absolute;
-    top: convert.to-rem(72px);
-    right: $spacing-05;
     display: block;
+    inset-block-start: convert.to-rem(72px);
+    inset-inline-end: $spacing-05;
   }
 
   .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--time-picker__icon {
@@ -165,7 +165,7 @@
   .#{$prefix}--time-picker--fluid--warning .#{$prefix}--form-requirement {
     display: block;
     overflow: visible;
-    max-height: 100%;
+    max-block-size: 100%;
   }
 
   .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--form-requirement {
@@ -188,48 +188,48 @@
     .#{$prefix}--time-picker--fluid__wrapper
     > *:last-child
     .#{$prefix}--select-input__wrapper::before {
-    top: 8px;
-    height: calc(100% - 1rem);
+    block-size: calc(100% - 1rem);
+    inset-block-start: 8px;
   }
 
   .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--text-input,
   .#{$prefix}--time-picker--fluid--warning .#{$prefix}--text-input,
   .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select-input,
   .#{$prefix}--time-picker--fluid--warning .#{$prefix}--select-input {
-    border-bottom: 1px solid transparent;
+    border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--time-picker--fluid.#{$prefix}--time-picker--fluid--invalid
     .#{$prefix}--time-picker__divider,
   .#{$prefix}--time-picker--fluid.#{$prefix}--time-picker--fluid--warning
     .#{$prefix}--time-picker__divider {
-    width: calc(100% - 2rem);
     border-style: solid;
     border-color: $border-subtle;
-    border-bottom: none;
     margin: 0 1rem;
+    border-block-end: none;
+    inline-size: calc(100% - 2rem);
   }
 
   // Skeleton styles
   .#{$prefix}--time-picker--fluid--skeleton {
     display: flex;
-    width: 100%;
-    height: convert.to-rem(64px);
+    block-size: convert.to-rem(64px);
+    inline-size: 100%;
   }
 
   .#{$prefix}--time-picker--fluid--skeleton > * {
-    width: auto;
-    height: 100%;
+    block-size: 100%;
+    inline-size: auto;
   }
 
   .#{$prefix}--time-picker--fluid--skeleton > *:nth-child(1),
   .#{$prefix}--time-picker--fluid--skeleton > *:nth-child(2) {
-    width: 25%;
+    inline-size: 25%;
   }
 
   .#{$prefix}--time-picker--fluid--skeleton > *:last-child,
   .#{$prefix}--time-picker--fluid--skeleton.#{$prefix}--time-picker--equal-width
     > *:first-child {
-    width: 50%;
+    inline-size: 50%;
   }
 }