@itwin/itwinui-css 0.44.2 → 0.47.0

package/scss/tile/tile.scss

@@ -11,309 +11,305 @@
   width: $iui-3xl * 3;
   box-shadow: $iui-elevation-2;
   backface-visibility: hidden;
-
+  @include iui-focus($offset: $iui-xxs, $thickness: $iui-xxs);
   @include themed() {
     background-color: t(iui-color-background-1);
     color: t(iui-text-color);
   }
 
-  .iui-thumbnail {
-    width: 100%;
-    height: $iui-baseline * 14;
-    flex-shrink: 0;
-    overflow: hidden;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    @include themed() {
-      background-color: t(iui-color-background-1-overlay);
-      border-bottom: 1px solid t(iui-color-background-4);
-    }
-
-    > .iui-type-indicator,
-    > .iui-quick-action {
-      @include iui-button-borderless;
-      @include iui-button-size(small, borderless);
+  &:hover,
+  &:focus-within {
+    .iui-tile-more-options {
+      @include visually-hidden-revert;
       position: absolute;
-      border-radius: 50%;
-      top: round($iui-baseline * 0.5);
     }
 
-    > .iui-type-indicator {
-      left: $iui-s;
+    .iui-tile-metadata:not(:last-child) {
+      width: calc(100% - #{$iui-xl});
     }
 
-    > .iui-quick-action {
-      right: $iui-s;
+    .iui-tile-thumbnail-picture {
+      transform: translateZ(0) scale(1.1);
     }
+  }
 
-    > .iui-badge-container {
-      position: absolute;
-      bottom: round($iui-baseline * 0.5);
-      width: calc(100% - 2 * #{$iui-sm});
-      height: auto;
-      right: $iui-sm;
-      display: flex;
-      justify-content: flex-end;
-      overflow: hidden;
+  &.iui-new {
+    .iui-tile-name,
+    .iui-tile-description {
+      font-weight: $iui-font-weight-semibold;
+    }
+  }
 
-      > .iui-badge:not(:last-child) {
-        margin-right: $iui-xs;
-      }
+  &.iui-selected {
+    @include iui-focus($offset: 0, $thickness: $iui-xs);
+    @include themed() {
+      outline: solid 2px t(iui-color-foreground-primary);
+      background: linear-gradient(
+        rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
+        rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))
+      ),
+        linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
     }
 
-    .iui-thumbnail-icon {
-      @include iui-icons-3xl;
+    .iui-tile-thumbnail-picture {
+      transform: translateZ(0) scale(1.1);
     }
+  }
 
-    > .iui-picture ~ .iui-thumbnail-icon {
-      z-index: 1;
-      cursor: pointer;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: fill $iui-speed-fast ease;
-      }
+  &.iui-folder {
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+
+    .iui-tile-thumbnail {
+      height: $iui-baseline * 10;
+      flex: 1;
+      border-bottom: none;
       @include themed() {
-        fill: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-3));
-        filter: drop-shadow(0 2px 1px rgba(0, 1, 5, t(iui-opacity-5)));
+        border-right: 1px solid t(iui-color-background-4);
       }
+    }
 
-      &:hover {
-        @include themed() {
-          fill: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-2));
-        }
-      }
+    .iui-tile-content {
+      flex: 2;
     }
 
-    > .iui-picture {
-      width: 100%;
+    .iui-tile-description {
       height: 100%;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: transform $iui-speed ease;
-      }
-      position: absolute;
-      top: 0;
-      left: 0;
-
-      @at-root {
-        div#{&} {
-          background-position: center;
-          background-size: cover;
-        }
-      }
+      max-height: $iui-baseline * 4;
+      margin-bottom: 0;
+      -webkit-line-clamp: 2;
     }
+  }
+}
 
-    > .iui-picture + .iui-button,
-    > .iui-picture + .iui-button + .iui-button {
-      @include iui-blur($opacity: 5);
-
-      &: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)));
-        }
-      }
-
-      &:hover,
-      &.iui-active:enabled,
-      &.iui-active:enabled:hover,
-      &.iui-active:active {
-        @include themed() {
-          background-color: rgba(0, 0, 0, t(iui-opacity-4));
-        }
+@mixin iui-tile-content {
+  padding: $iui-baseline $iui-sm;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 2;
+  min-width: 0;
 
-        .iui-button-icon {
-          @include themed() {
-            fill: t(iui-color-foreground-accessory);
-          }
-        }
-      }
+  .iui-tile-name {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    font-size: $iui-font-size-leading;
+    user-select: all;
+    margin-bottom: $iui-baseline * 0.5;
+    @include themed() {
+      color: t(iui-text-color);
     }
   }
 
-  > .iui-content {
-    padding: $iui-baseline $iui-sm;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 2;
-    min-width: 0;
-
-    > .iui-name {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      font-size: $iui-font-size-leading;
-      user-select: all;
-      margin-bottom: $iui-baseline * 0.5;
-
-      @include themed() {
-        color: t(iui-text-color);
-      }
+  .iui-tile-status-icon {
+    @include iui-icons-default;
+    margin-right: $iui-s;
+    flex-shrink: 0;
+  }
 
-      .iui-tile-status-icon {
-        @include iui-icons-default;
-        margin-right: $iui-s;
-        flex-shrink: 0;
-      }
+  .iui-tile-name-label {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 
-      > .iui-name-label {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
+  .iui-tile-description {
+    margin-bottom: $iui-baseline;
+    font-size: $iui-font-size;
+    height: 100%;
+    max-height: $iui-baseline * 6;
+    @include iui-line-clamp(3);
+    @include themed() {
+      color: t(iui-text-color-muted);
     }
+  }
 
-    > .iui-description {
-      margin-bottom: $iui-baseline;
-      font-size: $iui-font-size;
-      height: 100%;
-      max-height: $iui-baseline * 6;
-
-      @include iui-line-clamp(3);
-      @include themed() {
-        color: t(iui-text-color-muted);
-      }
+  .iui-tile-metadata {
+    font-size: $iui-font-size-small;
+    flex-shrink: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: $iui-line-height;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin-top: auto;
+    @include themed() {
+      color: t(iui-text-color-muted);
     }
 
-    > .iui-metadata {
-      font-size: $iui-font-size-small;
+    > svg,
+    .iui-tile-metadata-icon {
+      @include iui-icons-default;
+      margin-right: $iui-s;
       flex-shrink: 0;
+    }
+
+    > * {
+      white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      height: $iui-line-height;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      margin-top: auto;
+    }
+  }
+}
 
-      @include themed() {
-        color: t(iui-text-color-muted);
-      }
+@mixin iui-tile-thumbnail {
+  width: 100%;
+  height: $iui-baseline * 14;
+  flex-shrink: 0;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @include themed() {
+    background-color: t(iui-color-background-1-overlay);
+    border-bottom: 1px solid t(iui-color-background-4);
+  }
 
-      > svg,
-      .iui-metadata-icon {
-        @include iui-icons-default;
-        margin-right: $iui-s;
-        flex-shrink: 0;
-      }
+  .iui-thumbnail-icon {
+    @include iui-icons-3xl;
+  }
+}
 
-      > * {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
+@mixin iui-tile-thumbnail-picture {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform $iui-speed ease;
+  }
+  @at-root {
+    div#{&} {
+      background-position: center;
+      background-size: cover;
     }
+  }
 
-    > .iui-more-options {
-      @include iui-button-size(small, borderless);
-      position: absolute;
-      bottom: $iui-baseline * 0.5;
-      right: $iui-s;
-      visibility: hidden;
+  ~ .iui-thumbnail-icon {
+    z-index: 1;
+    cursor: pointer;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: fill $iui-speed-fast ease;
+    }
+    @include themed() {
+      fill: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-3));
+      filter: drop-shadow(0 2px 1px rgba(0, 1, 5, t(iui-opacity-5)));
+    }
 
-      &.iui-visible {
-        visibility: visible;
+    &:hover {
+      @include themed() {
+        fill: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-2));
       }
     }
   }
 
-  .iui-tile-buttons {
-    display: flex;
-    flex-shrink: 0;
-    user-select: none;
-    white-space: nowrap;
-
-    > .iui-button {
-      font-size: $iui-font-size;
-      flex: 1;
-      height: auto;
-      padding: $iui-baseline $iui-sm;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      text-align: center;
-      margin: 0;
-      border: initial;
-      border-radius: 0;
+  ~ .iui-tile-thumbnail-type-indicator,
+  ~ .iui-tile-thumbnail-quick-action {
+    @include iui-blur($opacity: 5);
 
-      &,
-      &:hover {
-        @include themed() {
-          border-top: 1px solid t(iui-color-background-4);
-        }
+    > .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)));
       }
     }
 
-    > button:not(:last-child) {
+    &:hover,
+    &.iui-active:enabled,
+    &.iui-active:enabled:hover,
+    &.iui-active:active {
       @include themed() {
-        border-right: 1px solid t(iui-color-background-4);
+        background-color: rgba(0, 0, 0, t(iui-opacity-4));
+      }
+
+      .iui-button-icon {
+        @include themed() {
+          fill: t(iui-color-foreground-accessory);
+        }
       }
     }
   }
+}
 
-  &:hover,
-  &:focus-within {
-    .iui-metadata:not(:last-child) {
-      width: calc(100% - #{$iui-xl});
-    }
+@mixin iui-tile-thumbnail-type-indicator {
+  @include iui-button-borderless;
+  @include iui-button-size(small, borderless);
+  position: absolute;
+  border-radius: 50%;
+  top: round($iui-baseline * 0.5);
+  left: $iui-s;
+}
 
-    .iui-more-options {
-      visibility: visible;
-    }
+@mixin iui-tile-thumbnail-quick-action {
+  @include iui-button-borderless;
+  @include iui-button-size(small, borderless);
+  position: absolute;
+  border-radius: 50%;
+  top: round($iui-baseline * 0.5);
+  right: $iui-s;
+}
 
-    .iui-picture {
-      transform: translateZ(0) scale(1.1);
-    }
+@mixin iui-tile-thumbnail-badge {
+  position: absolute;
+  bottom: round($iui-baseline * 0.5);
+  width: calc(100% - 2 * #{$iui-sm});
+  height: auto;
+  right: $iui-sm;
+  display: flex;
+  justify-content: flex-end;
+  overflow: hidden;
+
+  > .iui-badge:not(:last-child) {
+    margin-right: $iui-xs;
   }
+}
 
-  &.iui-new {
-    .iui-name,
-    .iui-description {
-      font-weight: $iui-font-weight-semibold;
+@mixin iui-tile-buttons {
+  display: flex;
+  flex-shrink: 0;
+  user-select: none;
+  white-space: nowrap;
+
+  > .iui-button {
+    font-size: $iui-font-size;
+    flex: 1;
+    height: auto;
+    padding: $iui-baseline $iui-sm;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: center;
+    margin: 0;
+    border: initial;
+    border-radius: 0;
+
+    &,
+    &:hover {
+      @include themed() {
+        border-top: 1px solid t(iui-color-background-4);
+        border-color: t(iui-color-background-4);
+      }
     }
   }
 
-  &.iui-selected {
+  > button:not(:last-child) {
     @include themed() {
-      outline: solid 2px t(iui-color-foreground-primary);
-      background: linear-gradient(
-        rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
-        rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))
-      ),
-        linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
-    }
-
-    .iui-picture {
-      transform: translateZ(0) scale(1.1);
+      border-right: 1px solid t(iui-color-background-4);
     }
   }
+}
 
-  &.iui-folder {
-    display: inline-flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-
-    > .iui-thumbnail {
-      height: $iui-baseline * 10;
-      flex: 1;
-      border-bottom: none;
-
-      @include themed() {
-        border-right: 1px solid t(iui-color-background-4);
-      }
-    }
-
-    > .iui-content {
-      flex: 2;
+@mixin iui-tile-more-options {
+  position: absolute;
+  bottom: $iui-baseline * 0.5;
+  right: $iui-s;
 
-      > .iui-description {
-        height: 100%;
-        max-height: $iui-baseline * 4;
-        margin-bottom: 0;
-        -webkit-line-clamp: 2;
-      }
-    }
+  &:not(.iui-visible) {
+    @include visually-hidden;
   }
 }

package/scss/tree/classes.scss

@@ -10,6 +10,10 @@
   @include iui-sub-tree;
 }
 
+.iui-tree-item {
+  @include iui-tree-item;
+}
+
 .iui-tree-node {
   @include iui-tree-node;
 }

package/scss/tree/tree.scss

@@ -17,6 +17,22 @@ $iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding
   list-style: none;
 }
 
+@mixin iui-tree-item {
+  @include focus-visible {
+    outline: none;
+
+    > .iui-tree-node {
+      outline: 1px solid var(--iui-color-foreground-primary);
+      outline-offset: -1px;
+
+      &.iui-active {
+        outline: 2px solid var(--iui-color-foreground-primary);
+        outline-offset: -2px;
+      }
+    }
+  }
+}
+
 @mixin iui-tree-node {
   display: flex;
   cursor: pointer;
@@ -83,8 +99,6 @@ $iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding
     }
   }
 
-  @include iui-focus;
-
   &:hover {
     @include themed {
       background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
@@ -104,8 +118,6 @@ $iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding
       outline: $iui-active-outline;
       outline-offset: -1px;
     }
-
-    @include iui-focus($offset: -2px, $thickness: $iui-xxs);
   }
 
   &.iui-disabled {