@itwin/itwinui-css 0.56.0 → 0.59.0

package/scss/button/cta.scss

@@ -6,11 +6,14 @@
 @import './disabled';
 
 @mixin iui-button-cta {
+  --_iui-button-text-color: var(--iui-color-foreground-accessory);
+
   @include themed {
     background-color: t(iui-color-background-positive);
     border-color: t(iui-color-background-positive);
     color: t(iui-color-foreground-accessory);
   }
+  color: var(--_iui-button-text-color);
   @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
 
   &:hover,
@@ -18,7 +21,6 @@
     @include themed {
       background-color: t(iui-color-background-positive-overlay);
       border-color: t(iui-color-background-positive-overlay);
-      color: t(iui-color-foreground-accessory);
     }
   }
 

package/scss/button/default.scss

@@ -10,7 +10,6 @@
   @include themed {
     background-color: t(iui-color-background-1);
     border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
   }
   @include iui-focus($offset: -2px, $thickness: 2px);
 
@@ -19,7 +18,6 @@
     @include themed {
       background-color: t(iui-color-background-1-overlay);
       border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-      color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
     }
     @include iui-notification-marker-hover;
   }

package/scss/button/high-visibility.scss

@@ -6,11 +6,14 @@
 @import './button-icon';
 
 @mixin iui-button-high-visibility {
+  --_iui-button-text-color: var(--iui-color-foreground-accessory);
+
   @include themed {
     background-color: t(iui-color-background-primary);
     border-color: t(iui-color-background-primary);
     color: t(iui-color-foreground-accessory);
   }
+  color: var(--_iui-button-text-color);
   @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
 
   &:hover,
@@ -18,7 +21,6 @@
     @include themed {
       background-color: t(iui-color-background-primary-overlay);
       border-color: t(iui-color-background-primary-overlay);
-      color: t(iui-color-foreground-accessory);
     }
   }
 

package/scss/classes.scss

@@ -12,6 +12,7 @@
 @import './code/classes';
 @import './color-picker/classes';
 @import './date-picker/classes';
+@import './dialog/classes';
 @import './expandable-block/classes';
 @import './fieldset/classes';
 @import './file-upload/classes';
@@ -23,7 +24,6 @@
 @import './keyboard/classes';
 @import './location-marker/classes';
 @import './menu/classes';
-@import './modal/classes';
 @import './non-ideal-state/classes';
 @import './notification-marker/classes';
 @import './popover/classes';

package/scss/dialog/classes.scss

@@ -0,0 +1,47 @@
+// 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-dialog-backdrop {
+  @include iui-dialog-backdrop;
+
+  &.iui-dialog-backdrop-relative {
+    @include iui-dialog-backdrop-relative;
+  }
+}
+
+.iui-dialog {
+  @include iui-dialog;
+}
+
+.iui-dialog-default {
+  @include iui-dialog-default;
+}
+
+.iui-dialog-full-page {
+  @include iui-dialog-full-page;
+}
+
+.iui-dialog-draggable {
+  @include iui-dialog-draggable;
+}
+
+.iui-dialog-title {
+  @include iui-dialog-title;
+}
+
+.iui-dialog-title-bar {
+  @include iui-dialog-title-bar;
+}
+
+.iui-dialog-content {
+  @include iui-dialog-content;
+}
+
+.iui-dialog-button-bar {
+  @include iui-dialog-button-bar;
+}
+
+.iui-dialog-animation {
+  @include iui-dialog-animation;
+}

package/scss/dialog/dialog.scss

@@ -0,0 +1,213 @@
+// 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';
+
+@mixin iui-dialog-backdrop {
+  @include iui-reset;
+  z-index: 999;
+  isolation: isolate;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  @include themed {
+    background-color: rgba(0, 0, 0, t(iui-opacity-4));
+  }
+
+  // Small/Resizable Dialog Animations for CSS
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility $iui-speed-instant linear $iui-speed-fast, opacity $iui-speed-fast ease-out;
+
+  &.iui-dialog-visible {
+    visibility: visible;
+    opacity: 1;
+    // remove delay for entry animation so dialog is instantly visible
+    transition-delay: $iui-speed-instant;
+  }
+}
+
+@mixin iui-dialog-backdrop-relative {
+  position: relative;
+  overflow: hidden;
+}
+
+@mixin iui-dialog {
+  border-radius: $iui-border-radius;
+  box-shadow: $iui-elevation-24;
+  box-sizing: border-box;
+  position: absolute;
+  padding: $iui-baseline $iui-m;
+  box-sizing: border-box;
+  padding: $iui-baseline $iui-m;
+  overflow: hidden;
+  @include themed {
+    background-color: t(iui-color-background-1);
+  }
+  @media (forced-colors: active) {
+    border: 1px solid;
+  }
+}
+
+@mixin iui-dialog-default {
+  .iui-dialog {
+    left: 50%;
+    top: 33%;
+    transform: translate(-50%, -33%);
+    max-width: 50%;
+    min-width: 380px;
+    max-height: 100vh;
+
+    @media screen and (max-width: 400px) {
+      max-width: 95%;
+      width: 95%;
+      min-width: 95%;
+    }
+  }
+}
+
+@mixin iui-dialog-full-page {
+  @media (prefers-reduced-motion: no-preference) {
+    transition: visibility $iui-speed-instant linear $iui-speed-slow, opacity $iui-speed ease-out $iui-speed-fast;
+  }
+
+  .iui-dialog {
+    border-radius: 0;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    max-width: initial;
+    min-width: initial;
+    display: flex;
+    flex-direction: column;
+    will-change: transform;
+    @media (prefers-reduced-motion: no-preference) {
+      transform: translateY(100%);
+      transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed,
+        transform $iui-speed-fast ease-in;
+    }
+  }
+
+  &.iui-dialog-visible .iui-dialog {
+    transform: translateY(0);
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform $iui-speed ease-out;
+    }
+  }
+}
+
+@mixin iui-dialog-draggable {
+  background-color: transparent;
+  pointer-events: none;
+  z-index: 998;
+
+  .iui-dialog {
+    pointer-events: initial;
+    max-width: 100vw;
+    max-height: 100vh;
+    min-width: 380px;
+    min-height: 144px;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    @include themed {
+      border: 1px solid t(iui-color-background-border);
+    }
+  }
+}
+
+@mixin iui-dialog-animation {
+  // Full Page Dialog Animations for React
+  &-enter .iui-dialog-full-page .iui-dialog {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  &-enter-active .iui-dialog-full-page .iui-dialog {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  // Small Dialog Animations for React
+  &-enter .iui-dialog-backdrop {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &-enter-active .iui-dialog-backdrop {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+@mixin iui-dialog-title {
+  font-size: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.5;
+}
+
+@mixin iui-dialog-title-bar {
+  display: flex;
+  align-items: center;
+  margin-bottom: $iui-baseline;
+  justify-content: space-between;
+  box-sizing: border-box;
+  font-size: $iui-font-size-subheading;
+
+  @at-root .iui-dialog-draggable & {
+    user-select: none;
+    font-size: $iui-font-size-leading;
+    padding: round($iui-baseline * 0.5) $iui-m;
+    cursor: grab;
+    @include themed {
+      background-color: t(iui-color-background-3);
+      border-bottom: 1px solid t(iui-color-background-border);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+
+@mixin iui-dialog-content {
+  flex-grow: 2;
+  margin: 0 -#{$iui-m};
+  padding: 0 $iui-m;
+  overflow-y: auto;
+  overflow-y: overlay;
+
+  @at-root .iui-dialog-draggable & {
+    margin: 0;
+  }
+}
+
+@mixin iui-dialog-button-bar {
+  margin-top: $iui-baseline;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  @at-root .iui-dialog-draggable & {
+    padding: 0 $iui-m $iui-baseline $iui-m;
+  }
+
+  // #region IE support
+  > .iui-button:not(:last-child) {
+    margin-right: $iui-s;
+  }
+
+  @supports (column-gap: $iui-s) {
+    column-gap: $iui-s;
+
+    > .iui-button:not(:last-child) {
+      margin-right: 0;
+    }
+  }
+  // #endregion IE support
+}

package/scss/{modal → dialog}/index.scss

@@ -1,3 +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 './modal';
+@import './dialog';

package/scss/index.scss

@@ -11,6 +11,7 @@
 @import './code/index';
 @import './color-picker/index';
 @import './date-picker/index';
+@import './dialog/index';
 @import './expandable-block/index';
 @import './file-upload/index';
 @import './footer/index';
@@ -21,7 +22,6 @@
 @import './keyboard/index';
 @import './location-marker/index';
 @import './menu/index';
-@import './modal/index';
 @import './non-ideal-state/index';
 @import './notification-marker/index';
 @import './popover/index';

package/scss/information-panel/information-panel.scss

@@ -181,7 +181,7 @@
 @mixin iui-information-panel-right {
   @include iui-information-panel-vertical;
   transform: translateX(100%); // hide off screen
-  box-shadow: -1px 0 14px rgba(0, 0, 0, 0.25);
+  box-shadow: -1px 0 10px $iui-elevation-color;
   clip-path: inset(0 0 0 -15px); // show box-shadow only on the left
 
   > .iui-resizer {
@@ -192,7 +192,7 @@
 @mixin iui-information-panel-bottom {
   @include iui-information-panel-horizontal;
   transform: translateY(100%); // hide off screen
-  box-shadow: 0 -1px 14px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 -1px 10px $iui-elevation-color;
   clip-path: inset(-15px 0 0 0); // show box-shadow only on top
 
   > .iui-resizer {

package/scss/radio-tile/radio-tile.scss

@@ -42,7 +42,7 @@
       border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
     }
 
-    svg {
+    .iui-radio-tile-icon {
       @media (forced-colors: active) {
         fill: CanvasText;
       }
@@ -90,7 +90,7 @@
       border: 2px solid t(iui-color-foreground-primary);
     }
 
-    svg {
+    .iui-radio-tile-icon {
       @media (forced-colors: active) {
         fill: Highlight;
       }
@@ -133,7 +133,8 @@
       }
     }
 
-    svg {
+    .iui-radio-tile-icon {
+      filter: $iui-icons-color-multicolor-disabled;
       @media (forced-colors: active) {
         fill: GrayText;
       }
@@ -142,10 +143,6 @@
       }
     }
 
-    .iui-radio-tile-icon {
-      filter: $iui-icons-color-multicolor-disabled;
-    }
-
     .iui-radio-tile-label,
     .iui-radio-tile-sublabel {
       @media (forced-colors: active) {
@@ -179,16 +176,14 @@
   padding-top: round($iui-baseline * 0.5);
   padding-bottom: $iui-baseline;
 
-  svg {
-    @media (prefers-reduced-motion: no-preference) {
-      transition: fill $iui-speed-fast ease-out;
-    }
-    @media (forced-colors: active) {
-      fill: CanvasText;
-    }
-    @include themed {
-      fill: t(iui-icons-color);
-    }
+  @media (prefers-reduced-motion: no-preference) {
+    transition: fill $iui-speed-fast ease-out;
+  }
+  @media (forced-colors: active) {
+    fill: CanvasText;
+  }
+  @include themed {
+    fill: t(iui-icons-color);
   }
 }
 

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

@@ -84,8 +84,8 @@
     overflow: hidden;
     justify-content: flex-start;
 
-    // Adds stripe to the left of active button
-    --_iui-button-active-stripe-inset: 0 calc(100% - #{$iui-xxs}) 0 0;
+    // Adds stripe to the right of active button
+    --_iui-button-active-stripe-inset: 0 0 0 calc(100% - #{$iui-xxs});
 
     &:not(.iui-expand) {
       height: $iui-baseline * 5;

package/scss/style/anchor.scss

@@ -3,26 +3,11 @@
 @import './index';
 
 @mixin iui-anchor {
-  --_iui-anchor-external-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
-
   @include iui-anchor-status('primary');
   border-radius: $iui-border-radius;
+  box-sizing: border-box;
   cursor: pointer;
 
-  &-external::after {
-    content: '';
-    display: inline-block;
-    width: 1.5ch;
-    height: 1.5ch;
-    margin-left: 0.5ch;
-    vertical-align: -0.1ch;
-    background-color: currentColor;
-    mask: var(--_iui-anchor-external-svg);
-    @media (forced-colors: active) {
-      background-color: LinkText;
-    }
-  }
-
   @include iui-anchor-underline('on-hover');
 
   @media (prefers-contrast: more) {
@@ -44,6 +29,24 @@
   }
 }
 
+@mixin iui-anchor-external {
+  --_iui-anchor-external-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
+
+  &::after {
+    content: '';
+    display: inline-block;
+    width: 1.5ch;
+    height: 1.5ch;
+    margin-left: 0.5ch;
+    vertical-align: -0.1ch;
+    background-color: currentColor;
+    mask: var(--_iui-anchor-external-svg);
+    @media (forced-colors: active) {
+      background-color: LinkText;
+    }
+  }
+}
+
 @mixin iui-anchor-status($status: primary) {
   @include iui-focus($color: var(--iui-color-foreground-#{$status}), $offset: 1px);
   @include themed {

package/scss/style/elevation.scss

@@ -1,10 +1,11 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 /// Elevations:
+$iui-elevation-color: hsla(200, 12%, 0%, 0.25);
 
 $iui-elevation-0: 0;
-$iui-elevation-2: 0 1px 5px hsla(200, 12%, 0%, 0.25);
-$iui-elevation-4: 0 1px 10px hsla(200, 12%, 0%, 0.25);
-$iui-elevation-8: 0 3px 14px hsla(200, 12%, 0%, 0.25);
-$iui-elevation-16: 0 6px 30px hsla(200, 12%, 0%, 0.25);
-$iui-elevation-24: 0 9px 46px hsla(200, 12%, 0%, 0.25);
+$iui-elevation-2: 0 1px 5px $iui-elevation-color;
+$iui-elevation-4: 0 1px 10px $iui-elevation-color;
+$iui-elevation-8: 0 3px 14px $iui-elevation-color;
+$iui-elevation-16: 0 6px 30px $iui-elevation-color;
+$iui-elevation-24: 0 9px 46px $iui-elevation-color;

package/scss/table/classes.scss

@@ -14,10 +14,18 @@
   }
 }
 
+.iui-table-header-wrapper {
+  @include iui-table-header-wrapper;
+}
+
 .iui-table-header {
   @include iui-table-header;
 }
 
+.iui-table-header-actions-container {
+  @include iui-table-header-actions-container;
+}
+
 .iui-table-body {
   @include iui-table-body;
 }
@@ -26,6 +34,14 @@
   @include iui-table-cell;
 }
 
+.iui-cell-shadow-left {
+  @include iui-table-cell-shadow-left;
+}
+
+.iui-cell-shadow-right {
+  @include iui-table-cell-shadow-right;
+}
+
 .iui-paginator {
   @include iui-paginator;
 }

package/scss/table/condensed.scss

@@ -5,8 +5,11 @@
 
 @mixin iui-table-condensed {
   .iui-table-header .iui-cell,
-  .iui-row .iui-cell,
   .iui-paginator {
     min-height: $iui-baseline * 4;
   }
+
+  .iui-row .iui-cell {
+    min-height: $iui-baseline * 4 + 2px;
+  }
 }

package/scss/table/extra-condensed.scss

@@ -5,8 +5,15 @@
 
 @mixin iui-table-extra-condensed {
   .iui-table-header .iui-cell,
-  .iui-row .iui-cell,
   .iui-paginator {
     min-height: $iui-baseline * 3;
   }
+
+  .iui-row .iui-cell {
+    min-height: $iui-baseline * 3 + 2px;
+  }
+
+  .iui-table-header .iui-cell {
+    padding-block: $iui-baseline * 0.25;
+  }
 }

package/scss/table/paginator.scss

@@ -73,6 +73,10 @@
   @include iui-button-borderless;
   width: $iui-component-height;
 
+  &.iui-active {
+    @include iui-button-active;
+  }
+
   // Adds stripe above active button
   --_iui-button-active-stripe-inset: calc(100% - #{$iui-xs}) #{$iui-xxs} #{$iui-xxs};