@itwin/itwinui-css 0.29.1 → 0.33.0

package/scss/notification-marker/classes.scss

@@ -0,0 +1,9 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './index';
+
+@each $status in primary, positive, warning, negative, accessory {
+  &.iui-notification-#{$status} {
+    @include iui-notification-marker($status: $status);
+  }
+}

package/scss/notification-marker/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 './notification-marker';

package/scss/notification-marker/notification-marker.scss

@@ -0,0 +1,63 @@
+// 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';
+
+@mixin iui-notification-marker($status: primary) {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: $iui-s;
+    height: $iui-s;
+    top: $iui-sm * -0.5;
+    right: $iui-sm * -0.5;
+    border-radius: 100%;
+    @include themed {
+      background-color: t(iui-color-foreground-#{$status});
+      border: 2px solid t(iui-color-background-1);
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out;
+    }
+  }
+
+  &.iui-urgent::before {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: pulse-#{$status} 2s infinite;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @keyframes pulse-#{$status} {
+      0% {
+        @include themed {
+          box-shadow: 0 0 0 0 rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-1));
+        }
+      }
+
+      70% {
+        @include themed {
+          box-shadow: 0 0 0 7px rgba(t(iui-color-foreground-#{$status}-rgb), 0);
+        }
+      }
+
+      100% {
+        @include themed {
+          box-shadow: 0 0 0 0 rgba(t(iui-color-foreground-#{$status}-rgb), 0);
+        }
+      }
+    }
+  }
+}
+
+@mixin iui-notification-marker-hover {
+  .iui-notification-primary::before,
+  .iui-notification-positive::before,
+  .iui-notification-warning::before,
+  .iui-notification-negative::before {
+    @include themed {
+      border-color: t(iui-color-background-1-overlay);
+    }
+  }
+}

package/scss/side-navigation/classes.scss

@@ -5,3 +5,11 @@
 .iui-side-navigation {
   @include iui-side-navigation;
 }
+
+.iui-side-navigation-submenu {
+  @include iui-side-navigation-submenu;
+}
+
+.iui-side-navigation-wrapper {
+  @include iui-side-navigation-wrapper;
+}

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/table/column-filter.scss

@@ -10,7 +10,7 @@
   flex-direction: column;
   align-items: flex-end;
 
-  > .iui-input-container:not(.iui-inline) {
+  > .iui-input-container:not(.iui-inline-label) {
     width: 100%;
   }
 

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;
+}

package/scss/toast-notification/classes.scss

@@ -31,44 +31,9 @@
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @keyframes openAnimation {
-      from {
-        opacity: 0;
-        transform: translateY(-120%);
-      }
-
-      to {
-        transform: translateY(0);
-      }
-    }
-
-    @keyframes closeAnimation {
-      from {
-        transform: scale(1);
-
-        @include themed {
-          opacity: t(iui-opacity-1);
-        }
-      }
-
-      to {
-        transform: scale(0.9);
-        opacity: 0;
-      }
-    }
-
     .iui-toast-all {
       transition: all 240ms cubic-bezier(0, 0, 0.2, 1);
     }
-
-    .iui-toast-entering,
-    .iui-toast-entered {
-      animation: openAnimation 240ms cubic-bezier(0.175, 0.885, 0.32, 1.175) both;
-    }
-
-    .iui-toast-exiting {
-      animation: closeAnimation 120ms cubic-bezier(0.4, 0, 1, 1) both;
-    }
   }
 
   &.iui-placement-top {