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

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

@@ -1,167 +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-radio-tile {
-  cursor: pointer;
-  -webkit-tap-highlight-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-}
-
-@mixin iui-radio-tile-content {
-  width: $iui-xl * 5;
-  height: 100%;
-  padding: $iui-s;
-  position: relative;
-  z-index: 1;
-  outline: 1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  background-color: var(--iui-color-background-1);
-  @media (prefers-reduced-motion: no-preference) {
-    transition: outline-color $iui-speed-fast ease-out;
-  }
-
-  &:hover {
-    z-index: 2;
-    outline-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-
-    .iui-radio-tile-icon {
-      fill: var(--iui-icons-color-actionable);
-      @media (forced-colors: active) {
-        fill: CanvasText;
-      }
-    }
-  }
-}
-
-@mixin iui-radio-tile-container {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 1px; // prevent overlapping from outline
-  user-select: none;
-  // Create stacking context
-  position: relative;
-  isolation: isolate;
-}
-
-@mixin iui-radio-tile-input {
-  width: 0;
-  height: 0;
-  appearance: none;
-  opacity: 0;
-  position: absolute;
-
-  &:checked + * {
-    padding: $iui-s;
-    z-index: 3;
-    outline: $iui-xxs solid var(--iui-color-foreground-primary);
-    outline-offset: -1px;
-
-    @media (forced-colors: active) {
-      outline-color: Highlight;
-    }
-
-    .iui-radio-tile-icon {
-      fill: var(--iui-icons-color-primary);
-      @media (forced-colors: active) {
-        fill: Highlight;
-      }
-    }
-
-    &::after {
-      content: '';
-      width: $iui-icons-default;
-      height: $iui-icons-default;
-      position: absolute;
-      top: $iui-s;
-      right: $iui-s;
-      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
-      background-color: var(--iui-color-foreground-primary);
-      @media (forced-colors: active) {
-        background-color: Highlight;
-      }
-    }
-  }
-
-  &:disabled + * {
-    cursor: not-allowed;
-    z-index: 0;
-    outline-color: var(--iui-color-background-disabled);
-    background-color: var(--iui-color-background-disabled);
-
-    &::after {
-      background-color: var(--iui-icons-color-actionable-disabled);
-      @media (forced-colors: active) {
-        background-color: GrayText;
-      }
-    }
-
-    .iui-radio-tile-icon {
-      filter: $iui-icons-color-multicolor-disabled;
-      fill: var(--iui-icons-color-actionable-disabled);
-      @media (forced-colors: active) {
-        fill: GrayText;
-      }
-    }
-
-    .iui-radio-tile-label {
-      color: var(--iui-text-color-muted);
-    }
-
-    .iui-radio-tile-label,
-    .iui-radio-tile-sublabel {
-      @media (forced-colors: active) {
-        color: GrayText;
-      }
-    }
-  }
-
-  &:disabled:checked + * {
-    z-index: 3;
-    outline: $iui-xxs solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-    @media (forced-colors: active) {
-      outline-color: GrayText;
-    }
-  }
-
-  @include focus-visible {
-    + * { // outline for checkmark
-      z-index: 2;
-      outline-offset: -$iui-xxs;
-      outline: 3px solid var(--iui-color-foreground-primary);
-      @media (forced-colors: active) {
-        outline-color: Highlight;
-      }
-    }
-  }
-}
-
-@mixin iui-radio-tile-icon {
-  width: $iui-icons-xl;
-  height: $iui-icons-xl;
-  display: block;
-  margin: round($iui-baseline * 0.5) auto $iui-baseline;
-  fill: var(--iui-icons-color);
-  @media (prefers-reduced-motion: no-preference) {
-    transition: fill $iui-speed-fast ease-out;
-  }
-  @media (forced-colors: active) {
-    fill: CanvasText;
-  }
-}
-
-@mixin iui-radio-tile-label {
-  font-size: $iui-font-size;
-  font-weight: $iui-font-weight-semibold;
-  line-height: $iui-line-height;
-  text-align: center;
-  word-break: break-word;
-  color: var(--iui-text-color);
-}
-
-@mixin iui-radio-tile-sublabel {
-  font-size: $iui-font-size-small;
-  line-height: round($iui-baseline * 1.375);
-  text-align: center;
-  word-break: break-word;
-  color: var(--iui-text-color-muted);
-}

package/scss/select/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-select-button {
-  @include iui-select-button;
-}
-
-.iui-select-tag-container {
-  @include iui-select-tag-container;
-}
-
-.iui-select-tag {
-  @include iui-select-tag;
-}
-
-.iui-select-tag-label {
-  @include iui-select-tag-label;
-}
-
-.iui-select-tag-button {
-  @include iui-select-tag-button;
-}
-
-.iui-select-tag-button-icon {
-  @include iui-select-tag-button-icon;
-}

package/scss/select/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 './select';

package/scss/select/select.scss

@@ -1,124 +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 '../menu/index';
-@import '../utils/index';
-@import '../tag/index';
-@import '../button/index';
-
-@mixin iui-select-button {
-  @include iui-focus($offset: -2px, $thickness: 2px);
-  width: 100%;
-  margin: 0;
-  border-radius: $iui-border-radius;
-  padding: $iui-component-padding-vertical $iui-component-padding-horizontal;
-  min-height: $iui-component-height;
-  transition: border-color $iui-speed-fast ease-out;
-  display: flex;
-  align-items: center;
-  user-select: none;
-  position: relative;
-  overflow: hidden;
-  color: var(--iui-text-color);
-  background-color: var(--iui-color-background-1);
-  border: 1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-
-  &.iui-small {
-    padding-top: $iui-component-padding-vertical-small;
-    padding-bottom: $iui-component-padding-vertical-small;
-    min-height: $iui-component-height-small;
-  }
-
-  &.iui-large {
-    padding-top: $iui-component-padding-vertical-large;
-    padding-bottom: $iui-component-padding-vertical-large;
-    min-height: $iui-component-height-large;
-    font-size: $iui-font-size-leading;
-  }
-
-  &.iui-disabled {
-    background-color: var(--iui-color-background-disabled);
-    border-color: var(--iui-color-background-disabled);
-    --_hover-color: var(--iui-color-background-disabled);
-    cursor: not-allowed;
-  }
-
-  .iui-icon {
-    @include iui-menu-icon;
-    fill: currentColor;
-  }
-
-  .iui-content {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &.iui-placeholder {
-    color: var(--iui-text-color-placeholder);
-  }
-}
-
-@mixin iui-select-tag-container {
-  position: absolute;
-  // align wth Select's padding
-  inset: 0 $iui-icons-default + $iui-l 0 $iui-sm;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  gap: $iui-xs;
-  overflow: hidden;
-
-  > * + * {
-    margin-left: $iui-xs;
-    @supports (gap: $iui-xs) {
-      margin-left: 0;
-    }
-  }
-}
-
-@mixin iui-select-tag {
-  @include iui-tag;
-  // Override hardcoded Tag margin
-  margin-top: 0;
-  margin-bottom: 0;
-  display: inline-flex;
-  align-items: center;
-  height: 80%;
-  max-height: $iui-baseline * 3;
-}
-
-@mixin iui-select-tag-label {
-  @include iui-tag-label;
-  display: inline-flex;
-  align-items: center;
-
-  @at-root .iui-select-button.iui-small & {
-    font-size: $iui-font-size-small;
-    line-height: floor($iui-baseline * 1.5);
-  }
-}
-
-@mixin iui-select-tag-button {
-  @include iui-button;
-  @include iui-button-borderless;
-  @include iui-tag-button;
-  padding: 0 $iui-xs;
-  height: 100%;
-  aspect-ratio: 1 / 1;
-
-  @at-root .iui-select-button.iui-small & {
-    font-size: $iui-font-size-small;
-    line-height: floor($iui-baseline * 1.5);
-  }
-}
-
-@mixin iui-select-tag-button-icon {
-  @include iui-button-icon;
-  flex-shrink: 0;
-
-  @at-root .iui-select-button.iui-small & {
-    width: $iui-icons-small;
-    height: $iui-icons-small;
-  }
-}

package/scss/side-navigation/classes.scss

@@ -1,15 +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-side-navigation {
-  @include iui-side-navigation;
-}
-
-.iui-side-navigation-submenu {
-  @include iui-side-navigation-submenu;
-}
-
-.iui-side-navigation-wrapper {
-  @include iui-side-navigation-wrapper;
-}

package/scss/side-navigation/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 './side-navigation';

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

@@ -1,202 +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';
-@import '../text/mixins';
-@import '../icon/index';
-
-@mixin iui-side-navigation {
-  display: inline-flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  height: 100%;
-  background-color: var(--iui-color-background-3);
-  border-right: 1px solid var(--iui-color-background-border);
-  @media (prefers-reduced-motion: no-preference) {
-    transition: max-width $iui-speed-fast ease-out;
-  }
-
-  > .iui-sidenav-content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    width: 100%;
-
-    > .iui-top,
-    > .iui-bottom {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-    }
-
-    > .iui-top {
-      .iui-sidenav-button:first-of-type {
-        border-top: none;
-      }
-
-      .iui-sidenav-button:not(:last-of-type) {
-        border-bottom: none;
-      }
-    }
-
-    > .iui-bottom {
-      justify-content: flex-end;
-
-      .iui-sidenav-button {
-        border-bottom: none;
-      }
-    }
-
-    + .iui-sidenav-button.iui-expand {
-      border: none;
-      border-top: 1px solid var(--iui-color-background-border);
-    }
-  }
-
-  &.iui-collapsed {
-    box-sizing: content-box;
-    min-width: $iui-icons-large + $iui-side-navigation-icon-margins * 2;
-    max-width: $iui-icons-large + $iui-side-navigation-icon-margins * 2;
-
-    // iPhone notch support
-    @supports (min-width: unquote('max(0px)')) {
-      min-width: unquote(
-        'max(#{$iui-icons-large} + #{$iui-side-navigation-icon-margins} * 2, #{$iui-icons-large} + #{$iui-side-navigation-icon-margins} * 2 + env(safe-area-inset-left))'
-      );
-      max-width: unquote(
-        'max(#{$iui-icons-large} + #{$iui-side-navigation-icon-margins} * 2, #{$iui-icons-large} + #{$iui-side-navigation-icon-margins} * 2 + env(safe-area-inset-left))'
-      );
-    }
-  }
-
-  &.iui-expanded,
-  > .iui-sidenav-content {
-    max-width: $iui-3xl * 3;
-
-    > .iui-sidenav-button.iui-expand > .iui-button-icon {
-      transform: scaleX(-1);
-    }
-  }
-
-  .iui-sidenav-button {
-    gap: $iui-side-navigation-icon-margins;
-    border-radius: 0;
-    border-left: none;
-    border-right: none;
-    overflow: hidden;
-    justify-content: flex-start;
-
-    // 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;
-      // iPhone notch support
-      @supports (padding: unquote('max(0px)')) {
-        padding-left: unquote(
-          'max(#{$iui-side-navigation-icon-margins}, #{$iui-side-navigation-icon-margins} + env(safe-area-inset-left))'
-        );
-      }
-    }
-
-    > span {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &,
-    &:hover,
-    &[disabled] {
-      border-color: var(--iui-color-background-border);
-    }
-
-    > .iui-button-icon:not(.iui-avatar) {
-      width: $iui-icons-large;
-      height: $iui-icons-large;
-      flex-shrink: 0;
-    }
-
-    &.iui-submenu-open .iui-button-icon {
-      fill: var(--iui-color-foreground-primary);
-    }
-
-    &[disabled],
-    &:disabled {
-      background-color: var(--iui-color-background-2);
-    }
-
-    &.iui-expand {
-      height: $iui-line-height;
-      justify-content: center;
-      border: none;
-      border-bottom: 1px solid var(--iui-color-background-border);
-
-      > .iui-button-icon {
-        @include iui-icons-small;
-        @media (prefers-reduced-motion: no-preference) {
-          transition: transform $iui-speed ease-out;
-        }
-      }
-    }
-  }
-}
-
-@mixin iui-side-navigation-submenu {
-  min-width: $iui-3xl * 2;
-  max-width: 50vw;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overflow-y: overlay;
-  resize: horizontal;
-  background-color: var(--iui-color-background-1);
-  border-right: 1px solid var(--iui-color-background-border);
-
-  @include iui-transition-group;
-
-  &.iui-enter-active,
-  &.iui-exit-active {
-    display: flex;
-  }
-
-  &-content {
-    padding: 0 $iui-sm $iui-baseline;
-    flex-shrink: 0;
-  }
-
-  &-header {
-    height: $iui-baseline * 5;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    &-label {
-      @include iui-text(title);
-      display: flex;
-      align-items: center;
-      overflow: hidden;
-
-      .iui-button {
-        flex-shrink: 0;
-      }
-
-      > * {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-
-    &-actions {
-      flex-shrink: 0;
-      margin-left: $iui-s;
-    }
-  }
-}
-
-@mixin iui-side-navigation-wrapper {
-  display: flex;
-  position: relative;
-  height: 100%;
-}

package/scss/skip-to-content/classes.scss

@@ -1,7 +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-skip-to-content-link {
-  @include iui-skip-to-content-link;
-}

package/scss/skip-to-content/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 './skip-to-content';

package/scss/skip-to-content/skip-to-content.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-skip-to-content-link {
-  @include iui-blur($opacity: 3);
-  @include iui-focus($offset: 2px, $thickness: 2px);
-  color: var(--iui-color-foreground-accessory);
-  border-radius: $iui-border-radius-round;
-  text-decoration: none;
-  user-select: none;
-  padding: ($iui-baseline * 0.75) $iui-m;
-  position: fixed;
-  text-align: center;
-  left: 50%;
-  top: $iui-baseline * 2;
-  opacity: 0;
-  z-index: 99;
-  transform: translateX(-50%) translateY(-170%);
-  transition: background-color $iui-speed-fast ease-in-out;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: opacity $iui-speed-slow ease-in-out, background-color $iui-speed-slow ease-in-out,
-      transform $iui-speed-slow ease-in-out, box-shadow $iui-speed-slow ease-in-out;
-  }
-
-  &:hover {
-    @include iui-blur($opacity: 2);
-  }
-
-  &:focus {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-    box-shadow: $iui-elevation-16;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: opacity $iui-speed-instant ease-in-out, background-color $iui-speed-fast ease-in-out,
-        transform $iui-speed-fast ease-in-out, box-shadow $iui-speed-fast ease-in-out;
-    }
-  }
-}

package/scss/slider/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-slider-component-container {
-  @include iui-slider-component-container;
-}
-
-.iui-slider-container {
-  @include iui-slider-container;
-}
-
-.iui-slider-ticks {
-  @include iui-slider-ticks;
-}
-
-.iui-slider-rail {
-  @include iui-slider-rail;
-}
-
-.iui-slider-thumb {
-  @include iui-slider-thumb;
-}
-
-.iui-slider-track {
-  @include iui-slider-track;
-}

package/scss/slider/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 './slider';