@itwin/itwinui-css 0.59.2 → 1.0.0-dev.0

package/scss/file-upload/file-upload.scss

@@ -1,7 +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 '../text/index';
+@import '../utils/index';
 @import '../icon/index';
 
 @mixin iui-file-upload {
@@ -22,13 +22,10 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    box-sizing: border-box;
     user-select: none;
     padding: round($iui-baseline * 0.5) $iui-sm;
-    @include themed {
-      background-color: t(iui-color-background-2);
-      border: 1px solid t(iui-color-background-2);
-    }
+    background-color: var(--iui-color-background-2);
+    border: 1px solid var(--iui-color-background-2);
 
     .iui-browse-input {
       width: 0.1px;
@@ -36,7 +33,6 @@
       opacity: 0;
       overflow: hidden;
       position: absolute;
-      z-index: -1;
     }
 
     > svg,
@@ -52,10 +48,8 @@
       flex-direction: row;
 
       &:focus-within {
-        @include themed {
-          outline: 2px solid t(iui-color-foreground-primary);
-          outline-offset: -2px;
-        }
+        outline: 2px solid var(--iui-color-foreground-primary);
+        outline-offset: -2px;
       }
     }
 
@@ -69,22 +63,18 @@
   }
 
   &.iui-drag > .iui-content {
-    @include themed {
-      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));
-      border-color: t(iui-color-foreground-primary);
-      color: t(iui-color-foreground-primary);
-    }
+    background: linear-gradient(
+      rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)),
+      rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))
+    ),
+      linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+    border-color: var(--iui-color-foreground-primary);
+    color: var(--iui-color-foreground-primary);
     visibility: visible;
 
     > svg,
     .iui-template-icon {
-      @include themed {
-        fill: t(iui-icons-color-primary);
-      }
+      fill: var(--iui-icons-color-primary);
     }
   }
 }

package/scss/footer/footer.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../anchor/index';
+@import '../utils/index';
 
 @mixin iui-legal-footer {
   @include iui-reset;
@@ -25,20 +26,14 @@
       user-select: none;
       white-space: nowrap;
       word-break: keep-all;
-
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
+      color: var(--iui-text-color-muted);
 
       .iui-separator {
         margin: 0 $iui-s;
         width: 1px;
         height: $iui-baseline;
         display: inline-table;
-
-        @include themed {
-          background-color: t(iui-text-color-muted);
-        }
+        background-color: var(--iui-text-color-muted);
       }
 
       > a {
@@ -46,9 +41,7 @@
 
         &,
         &:hover {
-          @include themed {
-            color: t(iui-text-color-muted);
-          }
+          color: var(--iui-text-color-muted);
         }
       }
     }
@@ -57,9 +50,6 @@
   > .iui-legal-footer-developer {
     display: block;
     user-select: all;
-
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
+    color: var(--iui-text-color-muted);
   }
 }

package/scss/header/classes.scss

@@ -4,8 +4,76 @@
 
 .iui-page-header {
   @include iui-page-header;
+
+  &[data-iui-size='slim'] {
+    @include iui-page-header-slim;
+  }
+}
+
+.iui-page-header-left,
+.iui-page-header-center,
+.iui-page-header-right {
+  @include iui-page-header-zone;
+}
+
+.iui-page-header-right {
+  @include iui-page-header-right;
+}
+
+.iui-page-header-divider {
+  @include iui-page-header-divider;
+}
+
+.iui-header-breadcrumbs {
+  @include iui-page-header-breadcrumbs;
+}
+
+.iui-header-brand {
+  @include iui-header-brand;
+}
+
+.iui-header-brand-icon {
+  @include iui-header-brand-icon;
+}
+
+.iui-header-brand-label {
+  @include iui-header-brand-label;
+}
+
+.iui-header-breadcrumbs-list {
+  @include iui-breadcrumbs-list;
+}
+
+.iui-page-header-left,
+.iui-header-breadcrumbs,
+.iui-header-breadcrumbs-list {
+  @include iui-page-header-left;
+}
+
+.iui-header-breadcrumb-button {
+  @include iui-header-breadcrumb-button;
+}
+
+.iui-header-breadcrumb-button-split {
+  @include iui-header-breadcrumb-button-split;
+}
+
+.iui-header-breadcrumb-item {
+  @include iui-header-breadcrumb-item;
+}
+
+.iui-header-breadcrumb-button-wrapper {
+  @include iui-header-breadcrumb-button-wrapper;
+}
+
+.iui-header-breadcrumb-button-icon {
+  @include iui-header-breadcrumb-button-icon;
+}
+
+.iui-header-breadcrumb-button-dropdown-icon {
+  @include iui-header-breadcrumb-button-dropdown-icon;
 }
 
-.iui-header-logo {
-  @include iui-header-logo;
+.iui-header-breadcrumb-button-text {
+  @include iui-header-breadcrumb-button-text;
 }

package/scss/header/header-buttons.scss

@@ -0,0 +1,316 @@
+// 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-header-brand {
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  white-space: nowrap;
+  background-color: transparent;
+  box-sizing: border-box;
+
+  @at-root {
+    a#{&}, // rendered as anchor element
+    button#{&}, // rendered as button element
+    &[role='button'] {
+      @include iui-focus;
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+      transition: background-color $iui-speed-fast ease-out;
+      @media (forced-colors: active) {
+        border: 1px solid CanvasText;
+        border-top-width: 0;
+        border-bottom-width: 0;
+      }
+
+      // #region resets for button
+      @include iui-reset;
+      font-family: inherit;
+      background-color: unset;
+      color: unset;
+      // #endregion
+
+      &:hover {
+        background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+      }
+    }
+  }
+
+  @at-root a#{&} {
+    text-decoration: none;
+  }
+}
+
+@mixin iui-header-brand-icon {
+  width: $iui-icons-large;
+  height: $iui-icons-large;
+  margin: 0 $iui-side-navigation-icon-margins;
+  fill: var(--iui-icons-color-actionable);
+  will-change: transform;
+  transform: var(--_iui-header-icon-scale);
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform $iui-speed-fast ease-out;
+  }
+}
+
+@mixin iui-header-brand-label {
+  margin-right: $iui-sm;
+  font-size: var(--_iui-header-brand-label-font-size);
+  @media (prefers-reduced-motion: no-preference) {
+    transition: font-size $iui-speed-fast ease-out;
+  }
+  @media (max-width: 991px) {
+    display: none;
+  }
+}
+
+@mixin iui-header-breadcrumb-item {
+  max-width: 25vw;
+  transition: background-color $iui-speed-fast ease-out;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  color: var(--iui-text-color);
+  box-sizing: border-box;
+  @media (forced-colors: active) {
+    color: LinkText;
+    border: none;
+  }
+
+  // Hover state
+  &:hover {
+    background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  }
+
+  // Active state
+  &[aria-current] {
+    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+    box-shadow: 0 $iui-xxs 0 0 currentColor;
+    color: var(--iui-color-foreground-primary);
+    @media (forced-colors: active) {
+      color: LinkText;
+      border-bottom: 3px solid LinkText;
+    }
+  }
+
+  // Disabled state
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    background-color: transparent;
+    color: var(--iui-text-color-placeholder);
+
+    // Disabled active state
+    &[aria-current] {
+      box-shadow: none;
+      background-color: var(--iui-color-background-2);
+
+      @media (forced-colors: active) {
+        border-bottom: 3px solid GrayText;
+      }
+    }
+  }
+}
+
+@mixin iui-header-breadcrumb-button-wrapper {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+}
+
+@mixin iui-header-breadcrumb-button {
+  @include iui-reset;
+  @include iui-focus;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
+  height: 100%;
+  border-radius: 0;
+  max-width: 25vw;
+  overflow: hidden;
+  padding-left: $iui-sm;
+  padding-right: $iui-sm;
+  box-sizing: border-box;
+  font-family: inherit;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color $iui-speed-fast ease-out;
+  color: inherit;
+  gap: $iui-sm;
+  cursor: pointer;
+  @media (forced-colors: active) {
+    border: 1px solid;
+    border-top-width: 0;
+    border-bottom-width: 0;
+
+    &:not(:last-child) {
+      border-right-width: 0;
+    }
+  }
+
+  // Default & hover state
+  &,
+  &:hover {
+    background-color: transparent;
+  }
+
+  // Disabled state
+  &:disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+}
+
+@mixin iui-header-breadcrumb-button-split {
+  padding: 0 $iui-s;
+  margin-left: -$iui-s;
+  flex-shrink: 0;
+
+  &:hover {
+    background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  }
+
+  @at-root [aria-current] &:hover {
+    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+@mixin iui-header-breadcrumb-button-dropdown-icon {
+  width: $iui-icons-default;
+  height: $iui-icons-default;
+  fill: currentColor;
+  flex-shrink: 0;
+  margin-right: -#{$iui-xs};
+
+  @at-root .iui-header-breadcrumb-button-split & {
+    margin-right: 0;
+  }
+
+  @at-root {
+    :disabled &,
+    [aria-disabled='true'] & {
+      @media (forced-colors: active) {
+        fill: GrayText;
+      }
+    }
+  }
+}
+
+@mixin iui-header-breadcrumb-button-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: $iui-font-size;
+  text-align: left;
+  overflow: hidden;
+  transition: color $iui-speed-fast ease-out;
+
+  &-label,
+  &-sublabel {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-sublabel {
+    font-size: $iui-font-size-small;
+    opacity: var(--iui-opacity-3);
+    @media (prefers-reduced-motion: no-preference) {
+      transition: visibility 0s linear 0s, width $iui-speed-fast ease-out, height $iui-speed-fast ease-out,
+        opacity $iui-speed-fast ease-out;
+    }
+
+    @at-root {
+      .iui-active &,
+      [aria-current] & {
+        opacity: var(--iui-opacity-1);
+      }
+    }
+
+    @at-root [data-iui-size='slim'] & {
+      visibility: hidden;
+      opacity: 0;
+      height: 0;
+      width: 0;
+    }
+  }
+}
+
+@mixin iui-header-breadcrumb-button-icon {
+  width: $iui-icons-large;
+  height: $iui-icons-large;
+  background-color: var(--iui-color-background-3);
+  border-radius: $iui-border-radius;
+  display: inline-flex;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: $iui-xs;
+  fill: var(--iui-icons-color);
+  will-change: transform;
+  transform: var(--_iui-header-icon-scale);
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform $iui-speed-fast ease-out;
+  }
+  @media (forced-colors: active) {
+    fill: LinkText;
+  }
+
+  @at-root {
+    img#{&},
+    div#{&} {
+      padding: 0;
+      transition: filter $iui-speed-fast ease-out;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: filter $iui-speed-fast ease-out, transform $iui-speed-fast ease-out;
+      }
+    }
+
+    img#{&} {
+      object-fit: cover;
+    }
+
+    div#{&} {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+
+    .iui-active &,
+    [aria-current] & {
+      background-color: var(--iui-color-background-1);
+      fill: currentColor;
+    }
+
+    :disabled &,
+    [aria-disabled='true'] & {
+      background-color: var(--iui-color-background-2);
+      fill: var(--iui-icons-color-actionable-disabled);
+
+      @media (forced-colors: active) {
+        fill: GrayText;
+      }
+    }
+
+    :disabled img#{&},
+    :disabled div#{&},
+    [aria-disabled='true'] img#{&},
+    [aria-disabled='true'] div#{&} {
+      filter: grayscale(1) opacity(0.7);
+    }
+  }
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+}