@itwin/itwinui-css 0.63.1 → 1.0.0-dev.2

package/scss/toast-notification/classes.scss

@@ -1,98 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './index';
-
-@mixin iui-bottom-placement {
-  bottom: 0;
-
-  .iui-toast {
-    margin: $iui-baseline $iui-m 0 $iui-m;
-  }
-}
-
-.iui-toast-wrapper {
-  pointer-events: none;
-  position: fixed;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  z-index: 99999;
-
-  @media screen and (max-width: 400px) {
-    width: calc(100vw - 36px);
-    margin-top: $iui-baseline;
-  }
-
-  @media screen and (min-width: 401px) {
-    min-width: 400px;
-    max-width: 640px;
-    margin: $iui-line-height 0;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .iui-toast-all {
-      transition: all 240ms cubic-bezier(0, 0, 0.2, 1);
-    }
-  }
-
-  &.iui-placement-top {
-    margin-left: auto;
-    margin-right: auto;
-    left: 0;
-    top: 0;
-    right: 0;
-  }
-
-  &.iui-placement-top-start {
-    left: 0;
-    top: 0;
-    align-items: flex-start;
-  }
-
-  &.iui-placement-top-end {
-    right: 0;
-    top: 0;
-    align-items: flex-end;
-  }
-
-  &.iui-placement-bottom {
-    @include iui-bottom-placement;
-    margin-left: auto;
-    margin-right: auto;
-    left: 0;
-    right: 0;
-  }
-
-  &.iui-placement-bottom-start {
-    @include iui-bottom-placement;
-    left: 0;
-    align-items: flex-start;
-  }
-
-  &.iui-placement-bottom-end {
-    @include iui-bottom-placement;
-    right: 0;
-    align-items: flex-end;
-  }
-}
-
-.iui-toast {
-  @include iui-toast;
-
-  &.iui-informational {
-    @include iui-toast-category($category: primary);
-  }
-
-  &.iui-positive {
-    @include iui-toast-category($category: positive);
-  }
-
-  &.iui-negative {
-    @include iui-toast-category($category: negative);
-  }
-
-  &.iui-warning {
-    @include iui-toast-category($category: warning);
-  }
-}

package/scss/toast-notification/index.scss

@@ -1,4 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './toast';
-@import './categories';

package/scss/toast-notification/toast.scss

@@ -1,79 +0,0 @@
-// 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 '../anchor/index';
-@import '../icon/index';
-
-@mixin iui-toast {
-  @include iui-reset;
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  pointer-events: all;
-  margin: 0 $iui-m $iui-baseline $iui-m;
-  min-height: $iui-baseline * 4;
-  border-radius: $iui-border-radius;
-  @include themed {
-    background-color: t(iui-color-background-1);
-    border: 1px solid t(iui-color-foreground-body);
-    box-shadow: 0 0 0 1px rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4)), $iui-elevation-24;
-  }
-
-  > .iui-status-area {
-    display: flex;
-    align-self: stretch;
-    justify-content: center;
-    align-items: center;
-    width: $iui-l * 2;
-    flex-shrink: 0;
-    @include themed {
-      background-color: t(iui-color-background-5);
-    }
-
-    > .iui-icon {
-      height: $iui-icons-default;
-      width: $iui-icons-default;
-      @include themed {
-        fill: t(iui-color-foreground-accessory);
-      }
-    }
-  }
-
-  > .iui-message {
-    flex-grow: 1;
-    font-size: $iui-font-size;
-    margin-top: $iui-baseline * 0.5;
-    margin-bottom: $iui-baseline * 0.5;
-    margin-right: $iui-l;
-    margin-left: $iui-m;
-    line-height: $iui-line-height;
-    font-weight: $iui-font-weight-normal;
-    font-style: normal;
-    @include themed {
-      color: t(iui-text-color);
-    }
-  }
-
-  &-anchor {
-    @include iui-anchor-underline('on-initial');
-    border-radius: $iui-border-radius;
-    cursor: pointer;
-    font-size: $iui-font-size-small;
-    margin-right: $iui-m;
-    user-select: none;
-    white-space: nowrap;
-  }
-
-  > .iui-button {
-    margin-right: $iui-s;
-  }
-
-  @media screen and (max-width: 400px) {
-    width: calc(100vw - 36px);
-  }
-
-  @media screen and (min-width: 401px) {
-    min-width: 400px;
-    max-width: 640px;
-  }
-}

package/scss/toggle-switch/classes.scss

@@ -1,11 +0,0 @@
-// 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-toggle-switch-wrapper {
-  @include iui-toggle-switch-wrapper;
-}
-
-.iui-toggle-switch {
-  @include iui-toggle-switch;
-}

package/scss/toggle-switch/index.scss

@@ -1,3 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './toggle-switch';

package/scss/toggle-switch/toggle-switch.scss

@@ -1,222 +0,0 @@
-// 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-toggle-switch-wrapper {
-  @include iui-reset;
-  display: grid;
-  grid-template-areas: 'toggle';
-  align-items: center;
-  gap: $iui-s;
-  font-size: $iui-font-size;
-  width: fit-content;
-  user-select: none;
-  cursor: pointer;
-  isolation: isolate;
-  @include themed {
-    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-  }
-
-  > * + * {
-    margin-left: $iui-s;
-    @supports (gap: $iui-s) {
-      margin-left: 0;
-    }
-  }
-
-  // Disabled
-  &.iui-disabled {
-    cursor: not-allowed;
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
-    @media (forced-colors: active) {
-      color: GrayText;
-    }
-  }
-
-  // For labels on the left
-  &.iui-label-on-left {
-    grid-template-areas: 'label toggle';
-  }
-
-  // For labels on the right
-  &.iui-label-on-right {
-    grid-template-areas: 'toggle label';
-  }
-}
-
-@mixin iui-toggle-switch {
-  $iui-toggle-switch-handle-size: $iui-icons-default;
-  $iui-toggle-switch-handle-offset: $iui-component-offset;
-  $iui-toggle-switch-border-thickness: 1px;
-
-  @include iui-reset;
-  @include iui-focus($thickness: $iui-toggle-switch-border-thickness, $offset: $iui-toggle-switch-border-thickness);
-  grid-area: toggle;
-  display: flex;
-  position: relative;
-  cursor: pointer;
-
-  // #region IE solution
-  width: $iui-toggle-switch-handle-size;
-  height: $iui-toggle-switch-handle-size;
-  @supports (appearance: none) {
-    appearance: none;
-    width: ($iui-toggle-switch-handle-size + ($iui-toggle-switch-handle-offset * 2)) * 2;
-    height: auto;
-    border-radius: $iui-border-radius-round;
-    box-sizing: border-box;
-    transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out;
-    background-color: var(--iui-color-background-1);
-    border: $iui-toggle-switch-border-thickness solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  }
-  // #endregion IE solution
-
-  &-label {
-    grid-area: label;
-  }
-
-  &::after {
-    content: '';
-    height: $iui-toggle-switch-handle-size;
-    width: $iui-toggle-switch-handle-size;
-    margin: $iui-toggle-switch-handle-offset;
-    aspect-ratio: 1 / 1;
-    border-radius: 50%;
-    transition: background-color $iui-speed-fast ease-out, opacity $iui-speed-fast ease-out;
-    z-index: 2;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: transform $iui-speed-fast ease-out, background-color $iui-speed-fast ease-out,
-        opacity $iui-speed-fast ease-out;
-    }
-  }
-
-  // #region Unchecked toggle switch
-  background-color: var(--iui-color-background-1);
-  border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  @media (forced-colors: active) {
-    border-color: CanvasText;
-  }
-
-  &::after {
-    background-color: var(--iui-color-foreground-body);
-    opacity: var(--iui-opacity-2);
-    @media (forced-colors: active) {
-      background-color: CanvasText;
-      opacity: 1;
-    }
-  }
-
-  &:hover {
-    border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-    @media (forced-colors: active) {
-      border-color: CanvasText;
-    }
-  }
-
-  @include focus-visible {
-    border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-  }
-  // #endregion Unchecked toggle switch
-
-  // #region Checked toggle switch
-  &:checked {
-    background-color: var(--iui-color-background-primary);
-    border-color: var(--iui-color-background-primary);
-    @media (forced-colors: active) {
-      background-color: Highlight;
-      border-color: Highlight;
-    }
-
-    &::after {
-      transform: translateX($iui-toggle-switch-handle-size + $iui-toggle-switch-handle-offset);
-      background-color: var(--iui-color-foreground-accessory);
-      opacity: var(--iui-opacity-2);
-      @media (forced-colors: active) {
-        background-color: HighlightText;
-        opacity: 1;
-      }
-    }
-
-    ~ .iui-toggle-switch-icon {
-      opacity: var(--iui-opacity-1);
-    }
-  }
-  // #endregion Checked toggle switch
-
-  // #region Focused or hovered toggle switch
-  &:hover::after {
-    opacity: var(--iui-opacity-1);
-  }
-
-  @include focus-visible {
-    &::after {
-      opacity: var(--iui-opacity-1);
-    }
-  }
-  // #endregion Focused or hovered toggle switch
-
-  // #region Disabled toggle switch
-  &:disabled {
-    cursor: not-allowed;
-    background-color: var(--iui-color-background-disabled);
-    border-color: var(--iui-color-background-disabled);
-    @media (forced-colors: active) {
-      border-color: GrayText;
-    }
-
-    &::after {
-      background-color: var(--iui-color-foreground-body);
-      opacity: var(--iui-opacity-5);
-
-      @media (forced-colors: active) {
-        background-color: GrayText;
-        opacity: 0.75;
-      }
-    }
-
-    ~ .iui-toggle-switch-icon {
-      opacity: 0;
-      fill: var(--iui-icons-color-actionable);
-    }
-
-    &:checked {
-      @media (forced-colors: active) {
-        background-color: GrayText;
-      }
-
-      &::after {
-        @media (forced-colors: active) {
-          background-color: Canvas;
-        }
-      }
-
-      ~ .iui-toggle-switch-icon {
-        opacity: var(--iui-opacity-5);
-        @media (forced-colors: active) {
-          fill: Canvas;
-          opacity: 0.75;
-        }
-      }
-    }
-  }
-  // #endregion Disabled toggle switch
-
-  &-icon {
-    opacity: 0;
-    grid-area: toggle;
-    width: $iui-toggle-switch-handle-size * 0.75;
-    height: $iui-toggle-switch-handle-size * 0.75;
-    padding: $iui-toggle-switch-handle-size * 0.125;
-    margin: $iui-toggle-switch-handle-offset + $iui-toggle-switch-border-thickness;
-    display: flex;
-    z-index: 1;
-    transition: opacity $iui-speed-fast ease-out;
-    pointer-events: none;
-    fill: var(--iui-color-foreground-accessory);
-    @media (forced-colors: active) {
-      fill: HighlightText;
-    }
-  }
-}

package/scss/tooltip/classes.scss

@@ -1,24 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './index';
-
-// Statics version of hidden/visible animation handling
-.iui-tooltip-container {
-  width: fit-content;
-  height: fit-content;
-  position: relative;
-
-  > .iui-tooltip {
-    @include iui-tooltip-hidden;
-  }
-
-  > .iui-tooltip.iui-tooltip-visible,
-  &:hover > .iui-tooltip {
-    @include iui-tooltip-visible;
-  }
-}
-
-// Styling tooltip only
-.iui-tooltip {
-  @include iui-tooltip;
-}

package/scss/tooltip/index.scss

@@ -1,3 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './tooltip';

package/scss/tooltip/tooltip.scss

@@ -1,41 +0,0 @@
-// 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-tooltip {
-  @include iui-reset;
-  display: block;
-  text-align: center;
-  border-radius: $iui-border-radius;
-  font-size: $iui-font-size-small;
-  overflow: hidden;
-  max-width: 400px;
-  width: max-content;
-  overflow-wrap: break-word;
-  box-sizing: content-box;
-  padding: round($iui-baseline * 0.33) $iui-s;
-  z-index: 999;
-  box-shadow: $iui-elevation-8;
-  pointer-events: none;
-  @include themed {
-    background-color: rgba(0, 0, 0, t(iui-opacity-3));
-    color: t(iui-color-foreground-accessory);
-    border: 1px solid rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
-  }
-}
-
-@mixin iui-tooltip-hidden {
-  position: absolute;
-  visibility: hidden;
-  user-select: none;
-  opacity: 0;
-  /// Following this guide for animation on exit hover: https://greywyvern.com/?post=337
-  @media (prefers-reduced-motion: no-preference) {
-    transition: visibility $iui-speed-instant linear $iui-speed-fast, opacity $iui-speed-fast ease-out;
-  }
-}
-
-@mixin iui-tooltip-visible {
-  visibility: visible;
-  opacity: 1;
-}

package/scss/tree/classes.scss

@@ -1,19 +0,0 @@
-// 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-tree {
-  @include iui-tree;
-}
-
-.iui-sub-tree {
-  @include iui-sub-tree;
-}
-
-.iui-tree-item {
-  @include iui-tree-item;
-}
-
-.iui-tree-node {
-  @include iui-tree-node;
-}

package/scss/tree/index.scss

@@ -1,3 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './tree';

package/scss/tree/tree.scss

@@ -1,138 +0,0 @@
-// 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';
-
-$iui-active-outline: thin solid t(iui-color-foreground-primary);
-$iui-expander-inline-padding: $iui-component-offset + $iui-xxs + 1px; // margin + padding + border
-$iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding * 2); // icon width + inline padding on both sides
-
-@mixin iui-tree {
-  @include iui-reset;
-  list-style: none;
-}
-
-@mixin iui-sub-tree {
-  @include iui-reset;
-  list-style: none;
-}
-
-@mixin iui-tree-item {
-  @include focus-visible {
-    outline: none;
-
-    > .iui-tree-node {
-      outline: 1px solid var(--iui-color-foreground-primary);
-      outline-offset: -1px;
-
-      &.iui-active {
-        outline: 2px solid var(--iui-color-foreground-primary);
-        outline-offset: -2px;
-      }
-    }
-  }
-}
-
-@mixin iui-tree-node {
-  display: flex;
-  cursor: pointer;
-  padding: 0 $iui-s;
-  align-items: center;
-
-  &-checkbox {
-    margin-right: $iui-s;
-  }
-
-  &-content {
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    min-height: $iui-baseline * 3;
-    margin-left: calc(#{$iui-expander-button-width} * (var(--level, 0)));
-    overflow: hidden;
-    padding-left: $iui-xxs;
-
-    &-icon {
-      @include iui-icons-default;
-      margin: 0 $iui-expander-inline-padding;
-      flex-shrink: 0;
-
-      &:first-child {
-        margin-left: $iui-expander-button-width + $iui-expander-inline-padding;
-      }
-    }
-
-    &-expander-icon {
-      @media (prefers-reduced-motion: no-preference) {
-        transition: transform $iui-speed-fast ease-out;
-      }
-
-      &-expanded {
-        transform: rotate(90deg);
-      }
-    }
-
-    &-label {
-      min-width: 0;
-      padding-left: $iui-expander-inline-padding;
-
-      &:first-child {
-        margin-left: $iui-expander-button-width;
-      }
-    }
-
-    &-title,
-    &-caption {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &-title {
-      font-size: $iui-font-size;
-    }
-
-    &-caption {
-      font-size: $iui-font-size-small;
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
-    }
-  }
-
-  &:hover {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-    }
-
-    .iui-tree-node-content-caption {
-      @include themed {
-        color: t(iui-color-foreground-body);
-      }
-      transition: color $iui-speed-fast ease;
-    }
-  }
-
-  &.iui-active {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
-      outline: $iui-active-outline;
-      outline-offset: -1px;
-    }
-  }
-
-  &.iui-disabled {
-    cursor: not-allowed;
-    outline: none;
-    background-color: transparent;
-    @include themed {
-      color: t(iui-text-color-placeholder);
-    }
-
-    .iui-tree-node-content-caption {
-      @include themed {
-        color: t(iui-text-color-placeholder);
-      }
-    }
-  }
-}

package/scss/user-icon/classes.scss

@@ -1,27 +0,0 @@
-// 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-user-icon {
-  @include iui-user-icon;
-
-  &#{&} {
-    @include iui-user-icon-size;
-  }
-
-  &.iui-small {
-    @include iui-user-icon-size($size: $iui-icons-large, $font-size: $iui-font-size-small);
-  }
-
-  &.iui-large {
-    @include iui-user-icon-size($size: $iui-icons-xxl, $font-size: $iui-font-size-subheading);
-  }
-
-  &.iui-x-large {
-    @include iui-user-icon-size($size: $iui-icons-3xl, $font-size: $iui-font-size-title);
-  }
-}
-
-.iui-user-icon-list {
-  @include iui-user-icon-list;
-}

package/scss/user-icon/index.scss

@@ -1,4 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './user-icon';
-@import './sizes';