@itwin/itwinui-css 0.32.0 → 0.33.0

package/scss/side-navigation/side-navigation.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../icon/index';
+@import '../text/index';
 
 @mixin iui-side-navigation {
   display: inline-flex;
@@ -170,3 +171,57 @@
     }
   }
 }
+
+@mixin iui-side-navigation-submenu {
+  min-width: $iui-3xl * 2;
+  width: $iui-3xl * 4;
+  max-width: 50vw;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 $iui-sm $iui-baseline;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overflow-y: overlay;
+  resize: horizontal;
+  @include themed {
+    background-color: t(iui-color-background-1);
+    border-right: 1px solid t(iui-color-background-5);
+  }
+
+  @include iui-transition-group;
+
+  &-header {
+    height: $iui-baseline * 5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &-label {
+      @include iui-text(title);
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+
+      .iui-button {
+        flex-shrink: 0;
+      }
+
+      > * {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &-actions {
+        flex-shrink: 0;
+        margin-left: $iui-s;
+      }
+    }
+  }
+}
+
+@mixin iui-side-navigation-wrapper {
+  display: flex;
+  position: relative;
+  height: 100%;
+}

package/scss/style/mixins.scss

@@ -155,7 +155,7 @@
   &.iui-enter-active,
   &.iui-exit-active {
     @media (prefers-reduced-motion: no-preference) {
-      transition: opacity $iui-speed-fast ease-out, height $iui-speed-fast ease-out;
+      transition: opacity $iui-speed-fast ease-out, width $iui-speed-fast ease-out, height $iui-speed-fast ease-out;
     }
   }
 }

package/scss/style/ripple.scss

@@ -0,0 +1,18 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './speed';
+
+@mixin iui-ripple($hoverColor, $rippleColor) {
+  background-position: center;
+  transition: background $iui-speed ease-out;
+
+  &:hover {
+    background: $hoverColor radial-gradient(circle, transparent 1%, #{$hoverColor} 1%) center/15000%;
+  }
+
+  &:active {
+    background-color: $rippleColor;
+    background-size: 100%;
+    transition: background 0s;
+  }
+}

package/scss/time-picker/classes.scss

@@ -5,3 +5,12 @@
 .iui-time-picker {
   @include iui-time-picker;
 }
+
+.iui-time {
+  @include iui-time-picker-list;
+}
+
+.iui-period {
+  @include iui-time-picker-list;
+  @include iui-time-picker-period;
+}

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

@@ -22,52 +22,53 @@
   &:first-child {
     box-shadow: $iui-elevation-2;
   }
+}
 
-  > .iui-time,
-  > .iui-period {
-    padding: $iui-baseline $iui-s;
-    overflow-y: auto;
+@mixin iui-time-picker-list {
+  padding: $iui-baseline $iui-s;
+  overflow-y: auto;
+  overflow-y: overlay;
+  scrollbar-width: none;
 
-    &:not(:first-child) {
-      @include themed {
-        border-left: 1px solid t(iui-color-background-4);
-      }
+  &:not(:first-child) {
+    @include themed {
+      border-left: 1px solid t(iui-color-background-4);
     }
+  }
 
-    > ol {
-      @include iui-reset;
-      list-style: none;
+  > ol {
+    @include iui-reset;
+    list-style: none;
 
-      > li {
-        @include iui-focus;
-        padding: $iui-baseline $iui-m;
-        border-radius: $iui-border-radius;
+    > li {
+      @include iui-focus;
+      padding: round($iui-baseline * 0.5) $iui-m;
+      border-radius: $iui-border-radius;
 
-        &:hover {
-          cursor: pointer;
-          @include themed {
-            color: t(iui-color-foreground-primary);
-            background-color: rgba(
-              t(iui-color-foreground-primary-rgb),
-              t(iui-opacity-6)
-            );
-          }
+      &:hover {
+        cursor: pointer;
+        @include themed {
+          color: t(iui-color-foreground-primary);
+          background-color: rgba(
+            t(iui-color-foreground-primary-rgb),
+            t(iui-opacity-6)
+          );
         }
+      }
 
-        &.iui-selected {
-          font-weight: $iui-font-weight-semibold;
-          cursor: default;
-          @include themed {
-            background-color: t(iui-color-background-primary);
-            color: t(iui-color-foreground-accessory);
-          }
+      &.iui-selected {
+        font-weight: $iui-font-weight-semibold;
+        cursor: default;
+        @include themed {
+          background-color: t(iui-color-background-primary);
+          color: t(iui-color-foreground-accessory);
         }
       }
     }
   }
+}
 
-  > .iui-period {
-    display: flex;
-    align-items: center;
-  }
-};
+@mixin iui-time-picker-period {
+  display: flex;
+  align-items: center;
+}