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

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

@@ -1,203 +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 '../utils/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;
-  color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-
-  // Disabled
-  &.iui-disabled {
-    cursor: not-allowed;
-    color: var(--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;
-  appearance: none;
-  width: ($iui-toggle-switch-handle-size + ($iui-toggle-switch-handle-offset * 2)) * 2;
-  border-radius: $iui-border-radius-round;
-  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));
-
-  &-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;
-    height: $iui-toggle-switch-handle-size;
-    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,40 +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 '../utils/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;
-  background-color: rgba(0, 0, 0, var(--iui-opacity-3));
-  color: var(--iui-color-foreground-accessory);
-  border: 1px solid rgba(var(--iui-color-foreground-accessory-rgb), var(--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,126 +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';
-@import '../utils/index';
-
-$iui-active-outline: thin solid var(--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;
-    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;
-      color: var(--iui-text-color-muted);
-    }
-  }
-
-  &:hover {
-    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-
-    .iui-tree-node-content-caption {
-      color: var(--iui-color-foreground-body);
-      transition: color $iui-speed-fast ease;
-    }
-  }
-
-  &.iui-active {
-    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-    outline: $iui-active-outline;
-    outline-offset: -1px;
-  }
-
-  &.iui-disabled {
-    cursor: not-allowed;
-    outline: none;
-    background-color: transparent;
-    color: var(--iui-text-color-placeholder);
-
-    .iui-tree-node-content-caption {
-      color: var(--iui-text-color-placeholder);
-    }
-  }
-}

package/scss/utils/classes.scss

@@ -1,6 +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';
-@import './input-container/classes';
-@import './notification-marker/classes';
-@import './popover/classes';

package/scss/utils/index.scss

@@ -1,6 +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 './input-container/index';
-@import './mixins';
-@import './notification-marker/index';
-@import './popover/index';

package/scss/utils/input-container/classes.scss

@@ -1,39 +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-input-container {
-  @include iui-input-container;
-
-  > .iui-label {
-    @include iui-input-container-label;
-  }
-
-  .iui-input-icon {
-    @include iui-input-icon;
-  }
-
-  .iui-message {
-    @include iui-input-message;
-  }
-
-  &.iui-inline-icon > .iui-input-icon {
-    @include iui-input-icon-inline;
-  }
-
-  &.iui-inline-label {
-    > .iui-label {
-      @include iui-input-label-inline;
-    }
-  }
-
-  @each $status in positive, negative, warning {
-    &.iui-#{$status} {
-      @include iui-input-status($status: $status);
-    }
-  }
-}
-
-.iui-input-label {
-  @include iui-input-label;
-}

package/scss/utils/input-container/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 './input-container';