@carbon/styles 1.37.0 → 1.38.0-rc.0

package/scss/components/treeview/_treeview.scss

@@ -27,9 +27,9 @@
   }
 
   .#{$prefix}--tree-node {
-    padding-left: $spacing-05;
     background-color: $layer-01;
     color: $text-secondary;
+    padding-inline-start: $spacing-05;
 
     &:focus {
       outline: none;
@@ -47,7 +47,7 @@
   }
 
   .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-node {
-    margin-left: $spacing-03;
+    margin-inline-start: $spacing-03;
   }
 
   .#{$prefix}--tree-node:focus > .#{$prefix}--tree-node__label {
@@ -88,9 +88,9 @@
     @include type-style('body-compact-01');
 
     display: flex;
-    min-height: convert.to-rem(32px);
     flex: 1;
     align-items: center;
+    min-block-size: convert.to-rem(32px);
 
     &:hover {
       background-color: $layer-hover-01;
@@ -100,9 +100,9 @@
 
   .#{$prefix}--tree-node:not(.#{$prefix}--tree-parent-node)
     .#{$prefix}--tree-node__label {
+    padding-block-end: convert.to-rem(7px);
     // (min-height 32px - single line text height 18px) / 2 = 7px
-    padding-top: convert.to-rem(7px);
-    padding-bottom: convert.to-rem(7px);
+    padding-block-start: convert.to-rem(7px);
   }
 
   .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
@@ -117,16 +117,16 @@
 
   .#{$prefix}--tree-leaf-node {
     display: flex;
-    padding-left: $spacing-08;
+    padding-inline-start: $spacing-08;
   }
 
   .#{$prefix}--tree-leaf-node.#{$prefix}--tree-node--with-icon {
-    padding-left: $spacing-07;
+    padding-inline-start: $spacing-07;
   }
 
   .#{$prefix}--tree-leaf-node.#{$prefix}--tree-node--with-icon
     .#{$prefix}--tree-leaf-node {
-    padding-left: $spacing-06;
+    padding-inline-start: $spacing-06;
   }
 
   .#{$prefix}--tree-node__label__details {
@@ -135,20 +135,20 @@
   }
 
   .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-parent-node__toggle {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   .#{$prefix}--tree-parent-node__toggle {
     display: flex;
-    width: convert.to-rem(24px);
-    height: convert.to-rem(24px);
     align-items: center;
     align-self: flex-start;
-    padding-left: $spacing-02;
     border: 0;
-    margin-top: $spacing-02;
-    margin-right: $spacing-02;
-    margin-left: -$spacing-02;
+    block-size: convert.to-rem(24px);
+    inline-size: convert.to-rem(24px);
+    margin-block-start: $spacing-02;
+    margin-inline-end: $spacing-02;
+    margin-inline-start: -$spacing-02;
+    padding-inline-start: $spacing-02;
 
     &:hover {
       cursor: pointer;
@@ -170,19 +170,19 @@
   }
 
   .#{$prefix}--tree-node__icon {
-    min-width: 1rem;
-    min-height: 1rem;
     align-self: flex-start;
-    margin-top: convert.to-rem(1px);
-    margin-right: $spacing-03;
-    margin-left: $spacing-03;
     fill: $icon-secondary;
+    margin-block-start: convert.to-rem(1px);
+    margin-inline-end: $spacing-03;
+    margin-inline-start: $spacing-03;
+    min-block-size: 1rem;
+    min-inline-size: 1rem;
   }
 
   .#{$prefix}--tree-parent-node__toggle
     + .#{$prefix}--tree-node__label__details
     .#{$prefix}--tree-node__icon {
-    margin-left: $spacing-02;
+    margin-inline-start: $spacing-02;
   }
 
   .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
@@ -208,18 +208,18 @@
 
     &::before {
       position: absolute;
-      top: 0;
-      left: 0;
-      width: convert.to-rem(4px);
-      height: 100%;
       background-color: $interactive;
+      block-size: 100%;
       content: '';
+      inline-size: convert.to-rem(4px);
+      inset-block-start: 0;
+      inset-inline-start: 0;
     }
   }
 
   // xs size variant
   .#{$prefix}--tree--xs .#{$prefix}--tree-node__label {
-    min-height: convert.to-rem(24px);
+    min-block-size: convert.to-rem(24px);
   }
 
   .#{$prefix}--tree--xs
@@ -229,6 +229,6 @@
   }
 
   .#{$prefix}--tree--xs .#{$prefix}--tree-parent-node__toggle {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 }

package/scss/components/ui-shell/content/_content.scss

@@ -20,14 +20,14 @@
   }
 
   .#{$prefix}--header ~ .#{$prefix}--content {
-    margin-top: mini-units(6);
+    margin-block-start: mini-units(6);
   }
 
   .#{$prefix}--side-nav ~ .#{$prefix}--content {
-    margin-left: mini-units(6);
+    margin-inline-start: mini-units(6);
   }
 
   .#{$prefix}--side-nav.#{$prefix}--side-nav--expanded ~ .#{$prefix}--content {
-    margin-left: mini-units(32);
+    margin-inline-start: mini-units(32);
   }
 }

package/scss/components/ui-shell/header/_header.scss

@@ -29,27 +29,27 @@
 
     position: fixed;
     z-index: z('header');
-    top: 0;
-    right: 0;
-    left: 0;
     display: flex;
-    height: mini-units(6);
     align-items: center;
-    border-bottom: 1px solid $border-subtle;
     background-color: $background;
+    block-size: mini-units(6);
+    border-block-end: 1px solid $border-subtle;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-inline-start: 0;
   }
 
   .#{$prefix}--header__action {
     @include button-reset.reset();
 
     display: inline-flex;
-    width: mini-units(6);
-    height: mini-units(6);
     border: convert.to-rem(1px) solid transparent;
+    block-size: mini-units(6);
+    inline-size: mini-units(6);
     transition: background-color $duration-fast-02,
       border-color $duration-fast-02;
     @include breakpoint-down('md') {
-      min-width: $spacing-09;
+      min-inline-size: $spacing-09;
     }
   }
 
@@ -78,10 +78,10 @@
   }
 
   .#{$prefix}--header__action--active {
-    border-right: 1px solid $border-subtle;
-    border-bottom: 1px solid transparent;
-    border-left: 1px solid $border-subtle;
     background: $layer;
+    border-block-end: 1px solid transparent;
+    border-inline-end: 1px solid $border-subtle;
+    border-inline-start: 1px solid $border-subtle;
   }
 
   .#{$prefix}--header__action--active > svg {
@@ -143,10 +143,10 @@
     @include type-style('body-compact-01');
 
     display: flex;
-    height: 100%;
     align-items: center;
     padding: 0 mini-units(4) 0 mini-units(2);
     border: convert.to-rem(2px) solid transparent;
+    block-size: 100%;
     font-weight: 600;
     letter-spacing: 0.1px;
     line-height: 1.25rem;
@@ -175,7 +175,7 @@
 
   .#{$prefix}--header__menu-toggle:not(.#{$prefix}--header__menu-toggle__hidden)
     ~ .#{$prefix}--header__name {
-    padding-left: convert.to-rem(8px);
+    padding-inline-start: convert.to-rem(8px);
   }
 
   //--------------------------------------------------------------------------
@@ -184,8 +184,8 @@
   .#{$prefix}--header__nav {
     position: relative;
     display: none;
-    height: 100%;
-    padding-left: mini-units(2);
+    block-size: 100%;
+    padding-inline-start: mini-units(2);
 
     @include breakpoint('lg') {
       display: block;
@@ -194,13 +194,13 @@
     // header nav divider
     &::before {
       position: absolute;
-      top: 50%;
-      left: 0;
       display: block;
-      width: convert.to-rem(1px);
-      height: convert.to-rem(24px);
       background-color: $border-subtle;
+      block-size: convert.to-rem(24px);
       content: '';
+      inline-size: convert.to-rem(1px);
+      inset-block-start: 50%;
+      inset-inline-start: 0;
       transform: translateY(-50%);
     }
   }
@@ -209,22 +209,22 @@
     @include component-reset.reset;
 
     display: flex;
-    height: 100%;
     padding: 0;
     margin: 0;
+    block-size: 100%;
     list-style: none;
   }
 
   a.#{$prefix}--header__menu-item {
     position: relative;
     display: flex;
-    // Used for links that are directly in the menubar to span the full height
-    height: 100%;
     align-items: center;
     padding: 0 mini-units(2);
     // Used for focus styles
     border: 2px solid transparent;
     background-color: $background;
+    // Used for links that are directly in the menubar to span the full height
+    block-size: 100%;
     color: $text-secondary;
     // Text styles
     font-size: convert.to-rem(14px);
@@ -269,12 +269,12 @@
   a.#{$prefix}--header__menu-item[aria-current='page']::after,
   .#{$prefix}--header__menu-item--current::after {
     position: absolute;
-    bottom: -2px;
-    left: -2px;
-    width: calc(100% + 4px);
-    height: 3px;
     background-color: $border-interactive;
+    block-size: 3px;
     content: '';
+    inline-size: calc(100% + 4px);
+    inset-block-end: -2px;
+    inset-inline-start: -2px;
   }
 
   a.#{$prefix}--header__menu-item[aria-current='page']:focus::after,
@@ -285,21 +285,21 @@
   .#{$prefix}--header__submenu .#{$prefix}--header__menu {
     a.#{$prefix}--header__menu-item[aria-current='page']::after,
     .#{$prefix}--header__menu-item--current::after {
-      top: -2px;
-      left: -2px;
-      width: 3px;
-      height: calc(100% + 4px);
       background-color: $border-interactive;
+      block-size: calc(100% + 4px);
+      inline-size: 3px;
+      inset-block-start: -2px;
+      inset-inline-start: -2px;
     }
 
     a.#{$prefix}--header__menu-item[aria-current='page']:focus::after,
     .#{$prefix}--header__menu-item--current:focus::after {
-      top: -2px;
-      left: -2px;
-      // extra, hidden width prevents flickering on focus change
-      width: 5px;
-      height: calc(100% + 4px);
       background-color: $border-interactive;
+      block-size: calc(100% + 4px);
+      // extra, hidden width prevents flickering on focus change
+      inline-size: 5px;
+      inset-block-start: -2px;
+      inset-inline-start: -2px;
     }
   }
 
@@ -340,13 +340,13 @@
     + .#{$prefix}--header__menu {
     position: absolute;
     z-index: #{z('header') + 1};
-    bottom: 0;
-    left: 0;
     display: flex;
-    width: mini-units(25);
     flex-direction: column;
     background-color: $layer;
     box-shadow: 0 4px 8px 0 rgb(0 0 0 / 50%);
+    inline-size: mini-units(25);
+    inset-block-end: 0;
+    inset-inline-start: 0;
     transform: translateY(100%);
   }
 
@@ -382,12 +382,12 @@
   }
 
   .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
-    height: mini-units(6);
+    block-size: mini-units(6);
   }
 
   .#{$prefix}--header__menu-arrow {
-    margin-left: mini-units(1);
     fill: $icon-secondary;
+    margin-inline-start: mini-units(1);
     transition: transform $duration-fast-02, fill $duration-fast-02;
   }
 
@@ -396,9 +396,9 @@
   //--------------------------------------------------------------------------
   .#{$prefix}--header__global {
     display: flex;
-    height: 100%;
     flex: 1 1 0%;
     justify-content: flex-end;
+    block-size: 100%;
   }
 
   //--------------------------------------------------------------------------
@@ -407,29 +407,29 @@
   .#{$prefix}--skip-to-content {
     position: absolute;
     overflow: hidden;
-    width: 1px;
-    height: 1px;
     padding: 0;
     border: 0;
     margin: -1px;
+    block-size: 1px;
     clip: rect(0, 0, 0, 0);
+    inline-size: 1px;
     visibility: inherit;
     white-space: nowrap;
   }
 
   .#{$prefix}--skip-to-content:focus {
     z-index: 9999;
-    top: 0;
-    left: 0;
     display: flex;
-    width: auto;
-    height: 3rem;
     align-items: center;
     padding: 0 1rem;
     border: 4px solid $focus;
     background-color: $background;
+    block-size: 3rem;
     clip: auto;
     color: $text-secondary;
+    inline-size: auto;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     //TO-DO: double check with design that these tokens are correct, missing spec for it
     outline: none;
   }

package/scss/components/ui-shell/header-panel/_header-panel.scss

@@ -22,21 +22,21 @@
   .#{$prefix}--header-panel {
     position: fixed;
     z-index: z('header');
-    top: mini-units(6);
-    right: 0;
-    bottom: 0;
     overflow: hidden;
-    width: 0;
     border: none;
     background-color: $layer;
     color: $text-secondary;
+    inline-size: 0;
+    inset-block-end: 0;
+    inset-block-start: mini-units(6);
+    inset-inline-end: 0;
     transition: width $duration-fast-02 motion(exit, productive);
     will-change: width;
   }
 
   .#{$prefix}--header-panel--expanded {
-    width: mini-units(32);
-    border-right: 1px solid $border-subtle;
-    border-left: 1px solid $border-subtle;
+    border-inline-end: 1px solid $border-subtle;
+    border-inline-start: 1px solid $border-subtle;
+    inline-size: mini-units(32);
   }
 }