@itwin/itwinui-css 0.38.0 → 0.41.0

package/scss/table/table.scss

@@ -129,7 +129,7 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-
+  @include iui-scroll-snapping('.iui-row');
   @include themed {
     background-color: t(iui-color-background-1);
   }
@@ -151,10 +151,7 @@
     &:hover:not(.iui-disabled) {
       &:not(.iui-expanded-content) {
         @include themed {
-          background-color: rgba(
-            t(iui-color-foreground-primary-rgb),
-            t(iui-opacity-6)
-          );
+          background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
         }
       }
 
@@ -167,7 +164,7 @@
       visibility: visible;
     }
 
-    .iui-row-expander > .iui-icon {
+    .iui-row-expander > .iui-button-icon {
       @media (prefers-reduced-motion: no-preference) {
         transition: transform $iui-speed-fast ease-out;
       }
@@ -181,7 +178,7 @@
         border-bottom-color: transparent;
       }
 
-      .iui-row-expander > .iui-icon {
+      .iui-row-expander > .iui-button-icon {
         transform: rotate(90deg);
       }
 
@@ -328,6 +325,10 @@
     flex-basis: $iui-l * 2;
   }
 
+  &:not(.iui-slot):last-child {
+    padding-right: $iui-m;
+  }
+
   &.iui-positive {
     @include iui-table-cell-status($status: positive);
   }
@@ -367,10 +368,7 @@
 
     *::selection {
       @include themed {
-        background-color: rgba(
-          t(iui-color-foreground-#{$status}-rgb),
-          t(iui-opacity-4)
-        );
+        background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
       }
     }
   }
@@ -384,18 +382,12 @@
 
 @mixin iui-table-cell-status($status) {
   @include themed {
-    background-color: rgba(
-      t(iui-color-foreground-#{$status}-rgb),
-      t(iui-opacity-6)
-    );
+    background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-6));
   }
 
   &::selection {
     @include themed {
-      background-color: rgba(
-        t(iui-color-foreground-#{$status}-rgb),
-        t(iui-opacity-4)
-      );
+      background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
     }
   }
 }

package/scss/table/variables.scss

@@ -6,7 +6,5 @@ $iui-table-density-vertical: $iui-baseline * 1.5;
 $iui-table-density-vertical-condensed: $iui-baseline;
 $iui-table-density-vertical-extra-condensed: $iui-baseline * 0.5;
 $iui-table-density: $iui-table-density-vertical $iui-m;
-$iui-table-density-condensed: $iui-table-density-vertical-condensed
-  $iui-m;
-$iui-table-density-extra-condensed: $iui-table-density-vertical-extra-condensed
-  $iui-m;
+$iui-table-density-condensed: $iui-table-density-vertical-condensed $iui-m;
+$iui-table-density-extra-condensed: $iui-table-density-vertical-extra-condensed $iui-m;

package/scss/tabs/borderless.scss

@@ -16,19 +16,13 @@
 
     &:hover {
       @include themed {
-        background-color: rgba(
-          t(iui-color-foreground-primary-rgb),
-          t(iui-opacity-6)
-        );
+        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
       }
     }
 
     &.iui-active {
       @include themed {
-        background-color: rgba(
-          t(iui-color-foreground-primary-rgb),
-          t(iui-opacity-6)
-        );
+        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
       }
     }
   }
@@ -56,10 +50,7 @@
   &.iui-green .iui-active,
   &.iui-green .iui-tab:hover {
     @include themed {
-      background-color: rgba(
-        t(iui-color-foreground-positive-rgb),
-        t(iui-opacity-6)
-      );
+      background-color: rgba(t(iui-color-foreground-positive-rgb), t(iui-opacity-6));
     }
   }
 

package/scss/tabs/pill.scss

@@ -17,10 +17,7 @@
 
   &.iui-green .iui-tab:hover {
     @include themed {
-      background-color: rgba(
-        t(iui-color-foreground-positive-rgb),
-        t(iui-opacity-6)
-      );
+      background-color: rgba(t(iui-color-foreground-positive-rgb), t(iui-opacity-6));
     }
   }
 
@@ -38,10 +35,7 @@
 
     &:hover {
       @include themed {
-        background-color: rgba(
-          t(iui-color-foreground-primary-rgb),
-          t(iui-opacity-6)
-        );
+        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
       }
     }
 

package/scss/tabs/tabs.scss

@@ -177,29 +177,29 @@
       background-color: t(iui-color-foreground-positive);
     }
   }
-
-  ~ .iui-tab-stripe {
-    display: none;
-  }
 }
 
 @mixin iui-tab-animated {
-  ~ .iui-tab-stripe {
+  &::after {
     position: absolute;
+    content: ' ';
     @include themed {
       background-color: t(iui-color-foreground-primary);
     }
   }
 
-  &.iui-green ~ .iui-tab-stripe {
+  &.iui-green::after {
     @include themed {
       background-color: t(iui-color-foreground-positive);
     }
   }
 
   @at-root {
-    .iui-horizontal & ~ .iui-tab-stripe {
+    .iui-horizontal &::after {
+      top: calc(100% - #{$iui-xxs});
       height: $iui-xxs;
+      left: var(--stripe-left);
+      width: var(--stripe-width);
       @media (prefers-reduced-motion: no-preference) {
         transition: width $iui-speed-fast ease-out, left $iui-speed-fast ease-out;
       }
@@ -207,8 +207,11 @@
   }
 
   @at-root {
-    .iui-vertical & ~ .iui-tab-stripe {
+    .iui-vertical &::after {
+      left: calc(100% - #{$iui-xxs});
       width: $iui-xxs;
+      top: var(--stripe-top);
+      height: var(--stripe-height);
       @media (prefers-reduced-motion: no-preference) {
         transition: top $iui-speed-fast ease-out;
       }

package/scss/tile/tile.scss

@@ -35,6 +35,7 @@
     > .iui-type-indicator,
     > .iui-quick-action {
       @include iui-button-borderless;
+      @include iui-button-size(small, borderless);
       position: absolute;
       border-radius: 50%;
       top: round($iui-baseline * 0.5);
@@ -107,7 +108,7 @@
     > .iui-picture + .iui-button + .iui-button {
       @include iui-blur($opacity: 5);
 
-      &:enabled > .iui-icon {
+      &:enabled > .iui-button-icon {
         @include themed() {
           fill: t(iui-color-foreground-accessory);
           filter: drop-shadow(0 2px 1px rgba(0, 0, 0, t(iui-opacity-5)));
@@ -122,7 +123,7 @@
           background-color: rgba(0, 0, 0, t(iui-opacity-4));
         }
 
-        > .iui-icon {
+        .iui-button-icon {
           @include themed() {
             fill: t(iui-color-foreground-accessory);
           }
@@ -206,6 +207,7 @@
     }
 
     > .iui-more-options {
+      @include iui-button-size(small, borderless);
       position: absolute;
       bottom: $iui-baseline * 0.5;
       right: $iui-s;

package/scss/time-picker/time-picker.scss

@@ -49,10 +49,7 @@
         cursor: pointer;
         @include themed {
           color: t(iui-color-foreground-primary);
-          background-color: rgba(
-            t(iui-color-foreground-primary-rgb),
-            t(iui-opacity-6)
-          );
+          background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
         }
       }
 

package/scss/toast-notification/categories.scss

@@ -12,10 +12,7 @@
   > .iui-message {
     &::selection {
       @include themed {
-        background-color: rgba(
-          t(iui-color-foreground-#{$category}-rgb),
-          t(iui-opacity-4)
-        );
+        background-color: rgba(t(iui-color-foreground-#{$category}-rgb), t(iui-opacity-4));
       }
     }
   }

package/scss/toast-notification/toast.scss

@@ -15,9 +15,7 @@
   @include themed {
     background-color: t(iui-color-background-1);
     border: 1px solid t(iui-color-foreground-body);
-    box-shadow: 0 0 0 1px
-      rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4)),
-      $iui-elevation-24;
+    box-shadow: 0 0 0 1px rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4)), $iui-elevation-24;
   }
 
   > .iui-status-area {

package/scss/toggle-switch/toggle-switch.scss

@@ -31,13 +31,11 @@
       width: ($iui-m * 2) + ($iui-xxs * 3);
       border-radius: $iui-baseline;
       @media (prefers-reduced-motion: no-preference) {
-        transition: background-color $iui-speed-fast ease,
-          border-color $iui-speed-fast ease;
+        transition: background-color $iui-speed-fast ease, border-color $iui-speed-fast ease;
       }
       @include themed {
         background-color: t(iui-color-background-1);
-        border: 1px solid
-          rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+        border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
       }
 
       > .iui-icon {
@@ -64,8 +62,7 @@
         right: $iui-m + $iui-xs;
         border-radius: 50%;
         @media (prefers-reduced-motion: no-preference) {
-          transition: right $iui-speed-fast ease,
-            background-color $iui-speed-fast ease, opacity $iui-speed-fast ease;
+          transition: right $iui-speed-fast ease, background-color $iui-speed-fast ease, opacity $iui-speed-fast ease;
         }
         @include themed {
           background-color: t(iui-color-foreground-body);
@@ -78,8 +75,7 @@
     &:focus {
       ~ .iui-toggle {
         @include themed {
-          border: 1px solid
-            rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
+          border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
         }
 
         > .iui-handle {

package/scss/tooltip/tooltip.scss

@@ -30,8 +30,7 @@
   opacity: 0;
   /// Following this guide for animation on exit hover: https://greywyvern.com/?post=337
   @media (prefers-reduced-motion: no-preference) {
-    transition: visibility 0s linear $iui-speed-fast,
-      opacity $iui-speed-fast ease-out;
+    transition: visibility 0s linear $iui-speed-fast, opacity $iui-speed-fast ease-out;
   }
 }
 

package/scss/tree/classes.scss

@@ -0,0 +1,15 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './index';
+
+.iui-tree {
+  @include iui-tree;
+}
+
+.iui-sub-tree {
+  @include iui-sub-tree;
+}
+
+.iui-tree-node {
+  @include iui-tree-node;
+}

package/scss/tree/index.scss

@@ -0,0 +1,3 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './tree';

package/scss/tree/tree.scss

@@ -0,0 +1,137 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import '../style/index';
+@import '../icon/index';
+
+$iui-active-outline: thin solid t(iui-color-foreground-primary);
+$iui-expander-inline-padding: $iui-component-offset + $iui-xxs + 1px; // margin + padding + border
+$iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding * 2); // icon width + inline padding on both sides
+
+@mixin iui-tree {
+  @include iui-reset;
+  list-style: none;
+}
+
+@mixin iui-sub-tree {
+  @include iui-reset;
+  list-style: none;
+}
+
+@mixin iui-tree-node {
+  display: flex;
+  cursor: pointer;
+  padding: 0 $iui-s;
+
+  &-checkbox {
+    margin-right: $iui-s;
+  }
+
+  &-content {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: $iui-baseline * 3;
+    margin-left: calc(#{$iui-expander-button-width} * (var(--level, 0)));
+    overflow: hidden;
+    padding-left: $iui-xxs;
+
+    &-icon {
+      @include iui-icons-default;
+      padding: 0 $iui-expander-inline-padding;
+      flex-shrink: 0;
+
+      &:first-child {
+        margin-left: $iui-expander-button-width;
+      }
+    }
+
+    &-expander-icon {
+      @media (prefers-reduced-motion: no-preference) {
+        transition: transform $iui-speed-fast ease-out;
+      }
+
+      &-expanded {
+        transform: rotate(90deg);
+      }
+    }
+
+    &-label {
+      min-width: 0;
+      padding-left: $iui-expander-inline-padding;
+
+      &:first-child {
+        margin-left: $iui-expander-button-width;
+      }
+    }
+
+    &-title,
+    &-caption {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &-title {
+      font-size: $iui-font-size;
+    }
+
+    &-caption {
+      font-size: $iui-font-size-small;
+      @include themed {
+        color: t(iui-text-color-muted);
+      }
+    }
+  }
+
+  &:focus {
+    @include themed {
+      outline: thin solid rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
+      outline-offset: -1px;
+    }
+  }
+
+  &:focus:not(:focus-visible) {
+    outline-offset: -2px;
+  }
+
+  &:hover {
+    @include themed {
+      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
+    }
+
+    .iui-tree-node-content-caption {
+      @include themed {
+        color: t(iui-color-foreground-body);
+      }
+      transition: color $iui-speed-fast ease;
+    }
+  }
+
+  &.iui-active {
+    @include themed {
+      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
+      outline: $iui-active-outline;
+      outline-offset: -1px;
+    }
+
+    &:focus {
+      outline-width: $iui-xxs;
+      outline-offset: -2px;
+    }
+  }
+
+  &.iui-disabled {
+    cursor: not-allowed;
+    outline: none;
+    background-color: transparent;
+    @include themed {
+      color: t(iui-text-color-placeholder);
+    }
+
+    .iui-tree-node-content-caption {
+      @include themed {
+        color: t(iui-text-color-placeholder);
+      }
+    }
+  }
+}

package/scss/user-icon/user-icon.scss

@@ -23,8 +23,7 @@
     border-radius: 50%;
     box-sizing: border-box;
     @include themed {
-      box-shadow: inset 0 0 0 $iui-xxs
-        rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+      box-shadow: inset 0 0 0 $iui-xxs rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
     }
   }
 
@@ -71,6 +70,9 @@
     height: 100%;
     border-width: 0;
     border-radius: 50%;
+    @include themed {
+      background-color: t(iui-color-background-1);
+    }
   }
 
   > .iui-status {
@@ -86,8 +88,7 @@
     @include themed {
       border: $iui-xxs solid t(iui-color-background-1);
       background-color: t(iui-color-background-1);
-      box-shadow: inset 0 0 0 1px
-        rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
+      box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
     }
 
     > .iui-status-symbol {
@@ -155,8 +156,7 @@
     &:focus:not(:focus-visible) {
       > .iui-stroke {
         @include themed {
-          box-shadow: inset 0 0 0 $iui-xxs
-            rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+          box-shadow: inset 0 0 0 $iui-xxs rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
         }
       }
     }

package/scss/wizard/wizard.scss

@@ -36,7 +36,8 @@
     justify-content: center;
     overflow-wrap: break-word;
     user-select: none;
-    transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out, color $iui-speed-fast ease-out;
+    transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out,
+      color $iui-speed-fast ease-out;
     @include themed {
       border: 1px solid t(iui-color-foreground-positive);
       background-color: t(iui-color-background-1);