@itwin/itwinui-css 0.37.2 → 0.40.0

package/scss/header/header.scss

@@ -3,9 +3,11 @@
 @import '../style/index';
 @import '../user-icon/index';
 @import '../icon/index';
+@import '../button/index';
 
 @mixin iui-page-header {
   @include iui-reset;
+
   display: flex;
   justify-content: space-between;
   width: 100%;
@@ -13,8 +15,7 @@
   user-select: none;
   box-sizing: border-box;
   // iPhone notch support
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
-    env(safe-area-inset-left);
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
   @media (prefers-reduced-motion: no-preference) {
     transition: height $iui-speed-fast ease-out;
   }
@@ -32,9 +33,9 @@
     height: 100%;
   }
 
-  > .iui-left {
-    @include iui-header-buttons;
+  @include iui-header-buttons;
 
+  > .iui-left {
     > nav {
       display: flex;
       align-items: center;
@@ -44,6 +45,7 @@
     &,
     > nav {
       overflow: hidden;
+      box-sizing: content-box;
       margin-bottom: -$iui-xs;
       padding-bottom: $iui-xs;
     }
@@ -109,24 +111,21 @@
 
     > .iui-right {
       .iui-user-icon {
-        @include iui-user-icon-size(
-          $size: $iui-icons-large,
-          $font-size: $iui-font-size-small
-        );
+        @include iui-user-icon-size($size: $iui-icons-large, $font-size: $iui-font-size-small);
       }
     }
   }
 
   @media (max-width: 768px) {
     &,
-    &.iui-slim.iui-slim {
+    &.iui-slim {
       .iui-left {
-        .iui-header-button {
+        .iui-button {
           .iui-header-button-icon.iui-header-button-icon {
             @include iui-display-none;
           }
 
-          .iui-header-button-icon + .iui-label {
+          .iui-header-button-icon + .iui-button-label {
             margin-left: 0;
           }
         }
@@ -143,16 +142,12 @@
   }
 }
 
-@mixin iui-header-button-icon(
-  $size: $iui-icons-large,
-  $border-radius: $iui-border-radius
-) {
+@mixin iui-header-button-icon($size: $iui-icons-large, $border-radius: $iui-border-radius) {
   width: $size;
   height: $size;
   border-radius: $border-radius;
   @media (prefers-reduced-motion: no-preference) {
-    transition: width $iui-speed-fast ease-out, height $iui-speed-fast ease-out,
-      margin $iui-speed-fast ease-out;
+    transition: width $iui-speed-fast ease-out, height $iui-speed-fast ease-out, margin $iui-speed-fast ease-out;
   }
 }
 
@@ -161,45 +156,63 @@
     @include iui-header-button-icon;
   }
 
-  .iui-header-button {
+  // boost specificity
+  .iui-header-button.iui-header-button {
     @include iui-header-button;
   }
 
   .iui-header-split-button {
     @include iui-header-split-button;
   }
+}
 
-  .iui-header-logo {
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-    height: 100%;
+@mixin iui-header-logo {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  height: 100%;
 
+  @at-root {
+    a#{&}, // rendered as anchor element
+    button#{&}, // rendered as button element
     &[role='button'] {
       @include iui-header-button-focus;
       cursor: pointer;
 
+      // #region resets for button
+      @include iui-reset;
+      font-family: inherit;
+      background-color: unset;
+      color: unset;
+      // #endregion
+
       &:hover,
-      &:focus-visible {
+      &:focus {
         @include themed {
-          background-color: t(iui-color-background-1-overlay);
+          background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+        }
+
+        &:not(:focus-visible):not(:hover) {
+          @include themed {
+            background-color: t(iui-color-background-1);
+          }
         }
       }
     }
+  }
 
-    .iui-header-button-icon {
-      margin: 0 $iui-l;
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
+  .iui-header-button-icon {
+    margin: 0 $iui-l;
+    @include themed {
+      fill: t(iui-icons-color-actionable);
     }
+  }
 
-    > .iui-label {
-      margin-right: $iui-sm;
-      font-size: $iui-font-size-leading;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: font-size $iui-speed-fast ease-out;
-      }
+  > .iui-label {
+    margin-right: $iui-sm;
+    font-size: $iui-font-size-leading;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: font-size $iui-speed-fast ease-out;
     }
   }
 }
@@ -220,13 +233,18 @@
 }
 
 @mixin iui-header-button {
+  @include iui-button-size(large, borderless);
+
+  gap: 0;
   max-width: 25vw;
+  height: 100%;
+  border-radius: 0;
   overflow: hidden;
   padding-right: $iui-s;
 
   @include iui-header-button-focus;
 
-  > .iui-label {
+  > .iui-button-label {
     text-align: left;
     font-size: $iui-font-size;
     overflow: hidden;
@@ -247,10 +265,14 @@
     }
   }
 
-  > .iui-icon {
+  > .iui-button-icon {
     flex-shrink: 0;
   }
 
+  > * + * {
+    margin-left: $iui-sm;
+  }
+
   .iui-header-button-icon {
     padding: $iui-xs;
     @include iui-header-button-icon($iui-icons-default, $iui-border-radius);
@@ -279,11 +301,11 @@
             height: $iui-icons-small;
             padding: $iui-xxs;
           }
+        }
 
-          .iui-label {
-            .iui-description {
-              @include iui-display-none;
-            }
+        .iui-button-label {
+          .iui-description {
+            @include iui-display-none;
           }
         }
       }
@@ -324,10 +346,7 @@
 
       &:last-child: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));
         }
       }
     }
@@ -357,25 +376,19 @@
     // Blue background and darker blue bottom line
     @include themed {
       box-shadow: 0 $iui-xxs 0 0 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));
     }
 
     .iui-header-button-icon {
       @include themed {
         fill: t(iui-icons-color-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));
       }
     }
   }
 
   // Blue text
-  .iui-label {
+  .iui-button-label {
     @include themed {
       color: t(iui-color-foreground-primary);
     }
@@ -384,8 +397,7 @@
   // Focus styling - blue outline
   &:focus {
     @include themed {
-      box-shadow: t(iui-focus-box-shadow),
-        0 $iui-xxs 0 0 t(iui-color-foreground-primary);
+      box-shadow: t(iui-focus-box-shadow), 0 $iui-xxs 0 0 t(iui-color-foreground-primary);
     }
   }
 
@@ -400,8 +412,7 @@
   &:disabled {
     @include themed {
       background-color: rgba(t(iui-color-foreground-body-rgb), 0.05);
-      box-shadow: 0 $iui-xxs 0 0
-        rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+      box-shadow: 0 $iui-xxs 0 0 rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
     }
 
     .iui-label {
@@ -410,7 +421,8 @@
       }
     }
 
-    .iui-icon {
+    .iui-icon,
+    svg {
       @include themed {
         fill: t(iui-icons-color-actionable-disabled);
       }

package/scss/information-panel/classes.scss

@@ -21,3 +21,7 @@
     @include iui-information-panel-visible;
   }
 }
+
+.iui-information-body-content {
+  @include iui-information-body-content;
+}

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

@@ -1,6 +1,7 @@
 // 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 '../inputs/labeled-inputs';
 
 @mixin iui-information-panel-wrapper {
   position: relative;
@@ -13,6 +14,8 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  max-width: 100%;
+  max-height: 100%;
   z-index: 2; // Needs to be higher than table's column resizers.
   @media (prefers-reduced-motion: no-preference) {
     transition: transform $iui-speed-fast ease-out, opacity $iui-speed-fast ease;
@@ -74,6 +77,7 @@
         width: $iui-icons-large;
         height: $iui-icons-large;
         margin-right: $iui-s;
+        flex-shrink: 0;
         @include themed {
           fill: t(iui-icons-color);
         }
@@ -138,6 +142,7 @@
     }
   }
 }
+
 @mixin iui-information-panel-horizontal {
   left: 0;
   bottom: 0;
@@ -187,3 +192,35 @@
     top: $iui-m * -0.5;
   }
 }
+
+/// Labels and inputs aligned using css grid
+@mixin iui-information-body-content {
+  display: grid;
+
+  .iui-input-label {
+    font-weight: $iui-font-weight-normal;
+    @include themed {
+      color: t(iui-text-color-muted);
+    }
+  }
+
+  &:not(.iui-inline) {
+    // add bottom margin between pairs of label+input
+    > *:nth-child(even):not(:last-child) {
+      margin-bottom: $iui-baseline;
+    }
+  }
+
+  &.iui-inline {
+    row-gap: $iui-baseline;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+
+    .iui-input-label {
+      @include iui-input-label-inline;
+      // right align labels
+      justify-self: end;
+      text-align: end;
+    }
+  }
+}

package/scss/inputs/checkbox-radio.scss

@@ -47,8 +47,7 @@
       width: $iui-sm;
       height: $iui-sm;
 
-      > path,
-      > circle {
+      > * {
         opacity: 0;
         @media (prefers-reduced-motion: no-preference) {
           transition: opacity $iui-speed-fast ease;
@@ -84,7 +83,7 @@
   &:hover > input:enabled ~ .iui-checkbox-checkmark,
   &:hover > input:enabled ~ .iui-radio-dot {
     @include themed {
-      border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
+      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
     }
     @media (prefers-reduced-motion: no-preference) {
       transition: all $iui-speed-fast ease-out;
@@ -96,14 +95,14 @@
   input:indeterminate ~ .iui-checkbox-checkmark,
   input:checked ~ .iui-radio-dot {
     @include themed {
-      border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
+      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
     }
   }
 
   // Show check, partial, or dot depending on type
-  input:checked ~ .iui-checkbox-checkmark > svg > path.iui-check,
-  input:indeterminate ~ .iui-checkbox-checkmark > svg > path.iui-check-partial,
-  input:checked ~ .iui-radio-dot > svg > circle {
+  input:checked ~ .iui-checkbox-checkmark .iui-check,
+  input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
+  input:checked ~ .iui-radio-dot circle {
     opacity: 1;
     @media (prefers-reduced-motion: no-preference) {
       transition: opacity $iui-speed-fast ease;
@@ -141,8 +140,9 @@
   }
 
   // Styles disabled checks
-  input:disabled ~ .iui-checkbox-checkmark > svg > path,
-  input:disabled ~ .iui-radio-dot > svg > circle {
+  input:disabled ~ .iui-checkbox-checkmark path,
+  input:disabled ~ .iui-checkbox-checkmark g,
+  input:disabled ~ .iui-radio-dot circle {
     @include themed {
       fill: t(iui-icons-color-actionable-disabled);
     }

package/scss/inputs/checkbox.scss

@@ -26,4 +26,40 @@
       cursor: wait;
     }
   }
+
+  &-visibility {
+    // Adds hover to everything that is not disabled
+    &:hover > input:enabled ~ .iui-checkbox-checkmark {
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+      }
+    }
+
+    input ~ .iui-checkbox-checkmark,
+    &:hover > input:enabled ~ .iui-checkbox-checkmark {
+      border: none;
+    }
+
+    input ~ .iui-checkbox-checkmark {
+      background-color: transparent;
+    }
+
+    .iui-checkbox-checkmark svg:not(.iui-radial) {
+      width: $iui-icons-default;
+      height: $iui-icons-default;
+    }
+
+    input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
+    input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck {
+      opacity: 0;
+    }
+
+    input ~ .iui-checkbox-checkmark .iui-uncheck {
+      opacity: 1;
+      transition: opacity $iui-speed-fast ease;
+      @include themed {
+        fill: t(iui-icons-color-actionable);
+      }
+    }
+  }
 }

package/scss/inputs/classes.scss

@@ -6,7 +6,7 @@
   @include iui-input-container;
 
   > .iui-label {
-    @include iui-input-label;
+    @include iui-input-container-label;
   }
 
   .iui-input-icon {
@@ -36,6 +36,10 @@
   }
 }
 
+.iui-input-label {
+  @include iui-input-label;
+}
+
 .iui-input {
   @include iui-input;
 }

package/scss/inputs/labeled-inputs.scss

@@ -56,17 +56,7 @@
   }
 
   // #region Cursors
-  cursor: default;
-
-  @at-root {
-    label#{&} {
-      cursor: pointer;
-
-      &.iui-disabled {
-        cursor: not-allowed;
-      }
-    }
-  }
+  @include iui-input-label-cursor;
 
   &.iui-disabled {
     label {
@@ -151,17 +141,31 @@
   }
 }
 
+/// Cursor styling for the label.
+@mixin iui-input-label-cursor {
+  cursor: default;
+
+  @at-root {
+    label#{&} {
+      cursor: pointer;
+
+      &.iui-disabled {
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
 /// Text label for an input.
 /// Supports .iui-required modifier to show red asterisk.
-@mixin iui-input-label {
+@mixin iui-input-label-styling {
   font-weight: $iui-font-weight-semibold;
-  grid-area: label;
-  align-self: center;
   margin-bottom: $iui-component-offset;
 
   &.iui-required {
     &::after {
-      content: ' *';
+      content: '*';
+      margin-left: $iui-xs;
       @include themed {
         color: t(iui-color-foreground-negative);
       }
@@ -169,7 +173,7 @@
   }
 }
 
-/// Modifier on iui-input-label to place it inline.
+/// Modifier on iui-input-label-styling to place it inline.
 @mixin iui-input-label-inline {
   margin: 0 $iui-m 0 0;
   // stylelint-disable -- fix position in IE
@@ -181,6 +185,27 @@
   }
 }
 
+/// Label inside the input-container grid.
+@mixin iui-input-container-label {
+  @include iui-input-label-styling;
+  grid-area: label;
+  align-self: center;
+}
+
+/// Independent label outside the grid.
+/// Supports .iui-inline modifier to place it inline.
+@mixin iui-input-label {
+  @include iui-input-label-styling;
+  @include iui-input-label-cursor;
+  display: block;
+
+  &.iui-inline {
+    @include iui-input-label-inline;
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
 /// Message shown below input
 @mixin iui-input-message {
   font-size: $iui-font-size-small;

package/scss/inputs/radio-tile.scss

@@ -36,8 +36,7 @@
       }
 
       @include themed {
-        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));
         background-color: t(iui-color-background-1);
       }
 
@@ -189,8 +188,7 @@
       z-index: 3;
 
       @include themed {
-        border: 2px solid
-          rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+        border: 2px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
       }
     }
   }

package/scss/keyboard/keyboard.scss

@@ -22,14 +22,12 @@
   @include themed {
     background-color: t(iui-color-background-1);
     border: 1px solid t(iui-color-background-5);
-    box-shadow: 0 1px 1px t(iui-color-background-5),
-      0 1px 0 0 rgba(255, 255, 255, t(iui-opacity-5)) inset;
+    box-shadow: 0 1px 1px t(iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, t(iui-opacity-5)) inset;
   }
 
   &:hover {
     @include themed {
-      box-shadow: 0 0 0 t(iui-color-background-5),
-        0 0 0 0 rgba(255, 255, 255, t(iui-opacity-5)) inset;
+      box-shadow: 0 0 0 t(iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, t(iui-opacity-5)) inset;
     }
   }
 }

package/scss/location-marker/data-rich.scss

@@ -37,8 +37,7 @@
       border-style: solid;
 
       @include themed {
-        border-color: t(iui-color-foreground-accessory) transparent transparent
-          transparent;
+        border-color: t(iui-color-foreground-accessory) transparent transparent transparent;
       }
     }
 

package/scss/menu/menu.scss

@@ -10,6 +10,7 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
   box-shadow: $iui-elevation-2;
   @include themed {
     background-color: t(iui-color-background-1);
+    color: t(iui-text-color);
   }
 }
 
@@ -46,9 +47,6 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
   cursor: pointer;
   box-sizing: border-box;
   line-height: normal;
-  @include themed {
-    color: t(iui-text-color);
-  }
 
   + #{&} {
     margin-top: -1px;
@@ -85,10 +83,7 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
 
   &: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));
     }
   }
 
@@ -116,10 +111,7 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
     &,
     &:hover {
       @include themed {
-        background-color: rgba(
-          t(iui-color-foreground-primary-rgb),
-          t(iui-opacity-5)
-        );
+        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
         outline: $iui-active-outline;
         outline-offset: -1px;
       }

package/scss/modal/modal.scss

@@ -14,8 +14,7 @@
   visibility: hidden;
   opacity: 0;
   @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;
   }
   @include themed {
     background-color: rgba(0, 0, 0, t(iui-opacity-4));

package/scss/progress-indicator/linear.scss

@@ -73,10 +73,7 @@
       > span {
         &::selection {
           @include themed {
-            background-color: rgba(
-              t(iui-color-foreground-positive-rgb),
-              t(iui-opacity-4)
-            );
+            background-color: rgba(t(iui-color-foreground-positive-rgb), t(iui-opacity-4));
           }
         }
       }
@@ -106,10 +103,7 @@
       > span {
         &::selection {
           @include themed {
-            background-color: rgba(
-              t(iui-color-foreground-negative-rgb),
-              t(iui-opacity-4)
-            );
+            background-color: rgba(t(iui-color-foreground-negative-rgb), t(iui-opacity-4));
           }
         }
       }
@@ -136,6 +130,5 @@
     }
   }
   width: 100%;
-  animation: iui-progress-indicator-linear-animate-indeterminate 1.5s infinite
-    linear;
+  animation: iui-progress-indicator-linear-animate-indeterminate 1.5s infinite linear;
 }