@carbon/styles 1.37.0 → 1.38.0-rc.0

package/scss/components/ui-shell/side-nav/_side-nav.scss

@@ -31,26 +31,26 @@
   .#{$prefix}--side-nav {
     position: fixed;
     z-index: z('header');
-    top: 0;
-    bottom: 0;
-    left: 0;
     // Useful to toggle this property to see what's going on when not expanded
     overflow: hidden;
-    width: mini-units(6);
-    max-width: mini-units(32);
     background-color: $background;
     color: $text-secondary;
+    inline-size: mini-units(6);
+    inset-block-end: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    max-inline-size: mini-units(32);
     // TODO: sync with motion work
     transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9);
     will-change: width;
   }
 
   .#{$prefix}--side-nav--ux {
-    top: $spacing-09;
-    width: mini-units(32);
+    inline-size: mini-units(32);
+    inset-block-start: $spacing-09;
 
     @include breakpoint-down('lg') {
-      width: 0;
+      inline-size: 0;
     }
   }
 
@@ -63,24 +63,24 @@
   // should have the same dimensions as when expanded on mouse over
 
   .#{$prefix}--side-nav--rail {
-    width: mini-units(6);
+    inline-size: mini-units(6);
   }
 
   .#{$prefix}--side-nav--hidden {
-    width: 0;
+    inline-size: 0;
   }
 
   .#{$prefix}--side-nav--expanded {
-    width: mini-units(32);
+    inline-size: mini-units(32);
   }
 
   .#{$prefix}--side-nav__overlay {
     position: fixed;
-    top: convert.to-rem(48px);
-    left: 0;
-    width: 0;
-    height: 0;
     background-color: transparent;
+    block-size: 0;
+    inline-size: 0;
+    inset-block-start: convert.to-rem(48px);
+    inset-inline-start: 0;
     opacity: 0;
     transition: opacity $transition-expansion $standard-easing,
       background-color $transition-expansion $standard-easing;
@@ -89,9 +89,9 @@
   .#{$prefix}--side-nav__overlay-active {
     @include breakpoint-down('lg') {
       z-index: z('overlay');
-      width: 100vw;
-      height: 100vh;
       background-color: $overlay;
+      block-size: 100vh;
+      inline-size: 100vw;
       opacity: 1;
       transition: opacity $transition-expansion $standard-easing,
         background-color $transition-expansion $standard-easing;
@@ -101,16 +101,16 @@
   // When used alongside the header, we update the `top` positioning so that we
   // can fit both widgets on the same page without overlapping.
   .#{$prefix}--header ~ .#{$prefix}--side-nav {
-    top: mini-units(6);
-    height: calc(100% - 48px);
+    block-size: calc(100% - 48px);
+    inset-block-start: mini-units(6);
   }
 
   .#{$prefix}--side-nav--fixed {
-    width: mini-units(32);
+    inline-size: mini-units(32);
   }
 
   .#{$prefix}--side-nav--collapsed {
-    width: mini-units(32);
+    inline-size: mini-units(32);
     transform: translateX(mini-units(-32));
   }
 
@@ -143,13 +143,13 @@
 
   .#{$prefix}--side-nav__item {
     overflow: hidden;
-    width: auto;
-    height: auto;
+    block-size: auto;
+    inline-size: auto;
   }
 
   .#{$prefix}--side-nav--ux .#{$prefix}--side-nav__item {
-    width: auto;
-    height: auto;
+    block-size: auto;
+    inline-size: auto;
   }
 
   .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active):hover
@@ -180,16 +180,16 @@
   }
 
   .#{$prefix}--side-nav__item--large {
-    height: mini-units(6);
+    block-size: mini-units(6);
   }
 
   //----------------------------------------------------------------------------
   // Side-nav > Navigation > Divider
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__divider {
-    height: 1px;
     margin: $spacing-03 $spacing-05;
     background-color: $border-subtle;
+    block-size: 1px;
     list-style-type: none;
   }
 
@@ -202,10 +202,10 @@
     @include focus-outline('reset');
 
     display: flex;
-    height: mini-units(4);
     align-items: center;
 
     padding: 0 mini-units(2);
+    block-size: mini-units(4);
     color: $text-secondary;
     transition: color $duration-fast-02, background-color $duration-fast-02,
       outline $duration-fast-02;
@@ -224,7 +224,7 @@
   .#{$prefix}--side-nav__submenu-title {
     @include text-overflow();
 
-    text-align: left;
+    text-align: start;
   }
 
   .#{$prefix}--side-nav__icon.#{$prefix}--side-nav__submenu-chevron {
@@ -234,8 +234,8 @@
   }
 
   .#{$prefix}--side-nav__submenu-chevron > svg {
-    width: convert.to-rem(16px);
-    height: convert.to-rem(16px);
+    block-size: convert.to-rem(16px);
+    inline-size: convert.to-rem(16px);
     transition: transform $duration-fast-02;
   }
 
@@ -246,7 +246,7 @@
   }
 
   .#{$prefix}--side-nav__item--large .#{$prefix}--side-nav__submenu {
-    height: mini-units(6);
+    block-size: mini-units(6);
   }
 
   .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu:hover {
@@ -263,12 +263,12 @@
 
     &::before {
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: 3px;
       background-color: $border-interactive;
       content: '';
+      inline-size: 3px;
+      inset-block-end: 0;
+      inset-block-start: 0;
+      inset-inline-start: 0;
     }
   }
 
@@ -285,26 +285,26 @@
     @include component-reset.reset;
 
     display: block;
-    max-height: 0;
+    max-block-size: 0;
     visibility: hidden;
   }
 
   .#{$prefix}--side-nav__submenu[aria-expanded='true']
     + .#{$prefix}--side-nav__menu {
-    max-height: convert.to-rem(1500px);
+    max-block-size: convert.to-rem(1500px);
     visibility: inherit;
   }
 
   .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link {
-    height: mini-units(4);
-    min-height: mini-units(4);
-    padding-left: mini-units(4);
+    block-size: mini-units(4);
     font-weight: 400;
+    min-block-size: mini-units(4);
+    padding-inline-start: mini-units(4);
   }
 
   .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
     a.#{$prefix}--side-nav__link {
-    padding-left: mini-units(9);
+    padding-inline-start: mini-units(9);
   }
   .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link--current,
   .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link[aria-current='page'],
@@ -330,16 +330,16 @@
 
     position: relative;
     display: flex;
-    min-height: mini-units(4);
     align-items: center;
     padding: 0 mini-units(2);
+    min-block-size: mini-units(4);
     text-decoration: none;
     transition: color $duration-fast-02, background-color $duration-fast-02,
       outline $duration-fast-02;
   }
 
   .#{$prefix}--side-nav__item--large a.#{$prefix}--side-nav__link {
-    height: mini-units(6);
+    block-size: mini-units(6);
   }
 
   a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text,
@@ -375,12 +375,12 @@
   a.#{$prefix}--side-nav__link[aria-current='page']::before,
   a.#{$prefix}--side-nav__link--current::before {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 3px;
     background-color: $border-interactive;
     content: '';
+    inline-size: 3px;
+    inset-block-end: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
   }
 
   //----------------------------------------------------------------------------
@@ -396,13 +396,13 @@
   }
 
   .#{$prefix}--side-nav__icon:not(.#{$prefix}--side-nav__submenu-chevron) {
-    margin-right: mini-units(3);
+    margin-inline-end: mini-units(3);
   }
 
   .#{$prefix}--side-nav__icon > svg {
-    width: mini-units(2);
-    height: mini-units(2);
+    block-size: mini-units(2);
     fill: $icon-secondary;
+    inline-size: mini-units(2);
   }
 
   .#{$prefix}--side-nav__icon > svg.#{$prefix}--side-nav-collapse-icon {
@@ -426,14 +426,14 @@
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav--fixed a.#{$prefix}--side-nav__link,
   .#{$prefix}--side-nav--fixed .#{$prefix}--side-nav__submenu {
-    padding-left: mini-units(2);
+    padding-inline-start: mini-units(2);
   }
 
   .#{$prefix}--side-nav--fixed
     .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--icon)
     .#{$prefix}--side-nav__menu
     a.#{$prefix}--side-nav__link {
-    padding-left: mini-units(4);
+    padding-inline-start: mini-units(4);
   }
 
   //----------------------------------------------------------------------------
@@ -453,18 +453,18 @@
     @include breakpoint-down('lg') {
       position: relative;
       display: block;
-      margin-bottom: convert.to-rem(32px);
+      margin-block-end: convert.to-rem(32px);
     }
   }
 
   .#{$prefix}--side-nav__header-divider::after {
     position: absolute;
-    bottom: convert.to-rem(-16px);
-    left: convert.to-rem(16px);
-    width: calc(100% - 32px);
-    height: convert.to-rem(1px);
     background: $border-subtle;
+    block-size: convert.to-rem(1px);
     content: '';
+    inline-size: calc(100% - 32px);
+    inset-block-end: convert.to-rem(-16px);
+    inset-inline-start: convert.to-rem(16px);
   }
 
   //header menu items overrides
@@ -481,20 +481,20 @@
   .#{$prefix}--side-nav
     .#{$prefix}--header__menu-title[aria-expanded='true']
     + .#{$prefix}--header__menu {
-    bottom: inherit;
-    width: 100%;
     padding: 0;
     background-color: transparent;
     box-shadow: none;
+    inline-size: 100%;
+    inset-block-end: inherit;
     transform: none;
 
     li {
-      width: 100%;
+      inline-size: 100%;
     }
 
     a.#{$prefix}--header__menu-item {
-      padding-left: 4.25rem;
       font-weight: 400;
+      padding-inline-start: 4.25rem;
     }
 
     a.#{$prefix}--header__menu-item:hover {
@@ -514,14 +514,14 @@
   .#{$prefix}--side-nav
     .#{$prefix}--side-nav__header-navigation
     .#{$prefix}--header__menu-item--current::after {
-    width: 3px;
-    height: calc(100% + 4px);
+    block-size: calc(100% + 4px);
+    inline-size: 3px;
   }
 
   .#{$prefix}--side-nav
     .#{$prefix}--header__menu
     a.#{$prefix}--header__menu-item {
-    height: inherit;
+    block-size: inherit;
   }
 
   .#{$prefix}--side-nav

package/scss/components/ui-shell/switcher/_switcher.scss

@@ -30,29 +30,29 @@
   }
 
   .#{$prefix}--switcher__item {
-    width: 100%;
-    height: $spacing-07;
+    block-size: $spacing-07;
+    inline-size: 100%;
   }
 
   .#{$prefix}--switcher__item:nth-child(1) {
-    margin-top: $spacing-05;
+    margin-block-start: $spacing-05;
   }
 
   .#{$prefix}--switcher__item--divider {
     display: block;
-    width: convert.to-rem(224px);
-    height: 1px;
     border: none;
     margin: $spacing-03 $spacing-05;
     background: $border-subtle;
+    block-size: 1px;
+    inline-size: convert.to-rem(224px);
   }
 
   .#{$prefix}--switcher__item-link {
     @include type-style('heading-compact-01');
 
     display: block;
-    height: $spacing-07;
     padding: convert.to-rem(6px) $spacing-05;
+    block-size: $spacing-07;
     color: $text-secondary;
     text-decoration: none;
 

package/scss/utilities/_button-reset.scss

@@ -23,7 +23,7 @@
   text-align: start;
 
   @if ($width == true) {
-    width: 100%;
+    inline-size: 100%;
   }
 
   &::-moz-focus-inner {

package/scss/utilities/_skeleton.scss

@@ -30,11 +30,11 @@
 
   &::before {
     position: absolute;
-    width: 100%;
-    height: 100%;
     animation: 3000ms ease-in-out skeleton infinite;
     background: $skeleton-element;
+    block-size: 100%;
     content: '';
+    inline-size: 100%;
     will-change: transform-origin, transform, opacity;
 
     @media (prefers-reduced-motion: reduce) {
@@ -55,11 +55,11 @@
 
   &::before {
     position: absolute;
-    width: 200%;
-    height: 100%;
     animation: 3000ms ease-in-out skeleton infinite;
     background: $skeleton-element;
+    block-size: 100%;
     content: '';
+    inline-size: 200%;
     will-change: transform-origin, transform, opacity;
 
     @media (prefers-reduced-motion: reduce) {

package/scss/utilities/_text-overflow.scss

@@ -18,6 +18,6 @@
 
   // apply a width if width parameter exists
   @if ($width) {
-    width: $width;
+    inline-size: $width;
   }
 }

package/scss/utilities/_text-truncate.scss

@@ -11,7 +11,7 @@
 @mixin text-truncate-end {
   display: inline-block;
   overflow: hidden;
-  width: 100%;
+  inline-size: 100%;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -22,8 +22,8 @@
 @mixin text-truncate-front {
   display: inline-block;
   overflow: hidden;
-  width: 100%;
   direction: rtl;
+  inline-size: 100%;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

package/scss/utilities/_tooltip.scss

@@ -21,10 +21,10 @@
 @mixin tooltip--caret {
   position: absolute;
   z-index: z('floating');
-  width: 0;
-  height: 0;
   border-style: solid;
+  block-size: 0;
   content: '';
+  inline-size: 0;
 }
 
 // Tooltip
@@ -36,33 +36,33 @@
   @include box-shadow;
 
   z-index: z('floating');
-  width: max-content;
-  min-width: convert.to-rem(24px);
-  max-width: convert.to-rem(208px);
-  height: auto;
   padding: if(
     $tooltip-type == 'definition',
     convert.to-rem(8px) convert.to-rem(16px),
     convert.to-rem(3px) convert.to-rem(16px)
   );
   background-color: $background-inverse;
+  block-size: auto;
   border-radius: convert.to-rem(2px);
   color: $text-inverse;
   font-weight: 400;
-  text-align: left;
+  inline-size: max-content;
+  max-inline-size: convert.to-rem(208px);
+  min-inline-size: convert.to-rem(24px);
+  text-align: start;
   transform: translateX(-50%);
   @include type.type-style('body-compact-01');
 
   // IE media query
   @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-    width: auto;
+    inline-size: auto;
   }
   // Edge 12-15 and Edge 16 feature queries
   @supports (-ms-accelerator: true) {
-    width: auto;
+    inline-size: auto;
   }
   @supports (-ms-ime-align: auto) {
-    width: auto;
+    inline-size: auto;
   }
 
   // Windows, Firefox HCM Fix
@@ -140,10 +140,10 @@
 
   // caret
   &::before {
-    width: 0;
-    height: 0;
     border-style: solid;
+    block-size: 0;
     content: '';
+    inline-size: 0;
   }
 
   .#{$prefix}--assistive-text,
@@ -251,28 +251,28 @@
     // clip-path: polygon(50% 100%, 0 0, 100% 0);
 
     @if ($position == 'top' or $position == 'bottom') {
-      left: 0;
-      width: 100%;
-      height: convert.to-rem(12px);
+      block-size: convert.to-rem(12px);
+      inline-size: 100%;
+      inset-inline-start: 0;
     }
 
     @if ($position == 'left' or $position == 'right') {
-      top: 0;
-      width: convert.to-rem(12px);
-      height: 100%;
+      block-size: 100%;
+      inline-size: convert.to-rem(12px);
+      inset-block-start: 0;
     }
 
     @if ($position == 'top') {
-      bottom: convert.to-rem(-12px);
+      inset-block-end: convert.to-rem(-12px);
     }
     @if ($position == 'right') {
-      left: convert.to-rem(-12px);
+      inset-inline-start: convert.to-rem(-12px);
     }
     @if ($position == 'bottom') {
-      top: convert.to-rem(-12px);
+      inset-block-start: convert.to-rem(-12px);
     }
     @if ($position == 'left') {
-      right: convert.to-rem(-12px);
+      inset-inline-end: convert.to-rem(-12px);
     }
   }
 
@@ -282,58 +282,58 @@
   .#{$prefix}--assistive-text,
   + .#{$prefix}--assistive-text {
     @if ($position == 'top') {
-      top: 0;
-      left: 50%;
+      inset-block-start: 0;
+      inset-inline-start: 50%;
     }
     @if ($position == 'right') {
-      top: 50%;
-      right: 0;
+      inset-block-start: 50%;
+      inset-inline-end: 0;
     }
     @if ($position == 'bottom') {
-      bottom: 0;
-      left: 50%;
+      inset-block-end: 0;
+      inset-inline-start: 50%;
     }
     @if ($position == 'left') {
-      top: 50%;
-      left: 0;
+      inset-block-start: 50%;
+      inset-inline-start: 0;
     }
   }
 
   &::before {
     @if ($position == 'top') {
-      top: -$caret-spacing;
       border-width: convert.to-rem(5px)
         convert.to-rem(4px)
         0
         convert.to-rem(4px);
       border-color: $background-inverse transparent transparent transparent;
+      inset-block-start: -$caret-spacing;
       transform: translate(-50%, -100%);
     }
     @if ($position == 'right') {
-      right: -$caret-spacing;
       border-width: convert.to-rem(4px)
         convert.to-rem(5px)
         convert.to-rem(4px)
         0;
       border-color: transparent $background-inverse transparent transparent;
+      inset-inline-end: -$caret-spacing;
       transform: translate(100%, -50%);
     }
     @if ($position == 'bottom') {
-      bottom: -$caret-spacing;
       border-width: 0
         convert.to-rem(4px)
         convert.to-rem(5px)
         convert.to-rem(4px);
       border-color: transparent transparent $background-inverse transparent;
+      inset-block-end: -$caret-spacing;
       transform: translate(-50%, 100%);
     }
     @if ($position == 'left') {
-      left: -$caret-spacing;
       border-width: convert.to-rem(4px)
         0
         convert.to-rem(4px)
         convert.to-rem(5px);
       border-color: transparent transparent transparent $background-inverse;
+      inset-inline-start: -$caret-spacing;
       transform: translate(-100%, -50%);
     }
   }
@@ -344,38 +344,36 @@
   .#{$prefix}--assistive-text,
   + .#{$prefix}--assistive-text {
     @if ($position == 'top') {
-      top: -$body-spacing;
+      inset-block-start: -$body-spacing;
       @if ($align == 'start') {
-        left: 0;
+        inset-inline-start: 0;
         transform: translate(0, -100%);
       } @else if ($align == 'end') {
-        right: 0;
-        left: auto;
+        inset-inline: auto 0;
         transform: translate(0, -100%);
       } @else {
-        left: 50%;
+        inset-inline-start: 50%;
         transform: translate(-50%, -100%);
       }
     }
     @if ($position == 'right') {
-      right: -$body-spacing;
+      inset-inline-end: -$body-spacing;
       transform: translate(100%, -50%);
     }
     @if ($position == 'bottom') {
-      bottom: -$body-spacing;
+      inset-block-end: -$body-spacing;
       @if ($align == 'start') {
-        left: 0;
+        inset-inline-start: 0;
         transform: translate(0, 100%);
       } @else if ($align == 'end') {
-        right: 0;
-        left: auto;
+        inset-inline: auto 0;
         transform: translate(0, 100%);
       } @else {
         transform: translate(-50%, 100%);
       }
     }
     @if ($position == 'left') {
-      left: -$body-spacing;
+      inset-inline-start: -$body-spacing;
       transform: translate(-100%, -50%);
     }
   }
@@ -385,7 +383,7 @@
     &.#{$prefix}--tooltip--a11y + .#{$prefix}--assistive-text {
       @if ($position == 'bottom') {
         // carryover from https://github.com/carbon-design-system/carbon/pull/3151/files#diff-93734be0784e9530b6d14a7b03b0d352R261-R265
-        bottom: -($body-spacing - convert.to-rem(1px));
+        inset-block-end: -($body-spacing - convert.to-rem(1px));
         @if ($align == 'start' or $align == 'end') {
           transform: translate(0, 100%);
         } @else {