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

package/scss/progress-indicator/radial.scss

@@ -1,243 +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-progress-indicator-radial-ie {
-  @include iui-reset;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-
-  @include themed {
-    color: t(iui-color-foreground-primary);
-  }
-
-  &::after {
-    position: relative;
-    box-sizing: border-box;
-    content: '';
-    width: 100%;
-    height: 100%;
-    display: inline-block;
-    border: 3px solid currentColor;
-    border-radius: 100%;
-    background-color: transparent;
-    animation: dash $iui-speed-slow linear infinite;
-
-    @include themed {
-      border-bottom-color: t(iui-color-background-border);
-    }
-  }
-
-  @keyframes dash {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-}
-
-@mixin iui-progress-indicator-radial {
-  position: relative;
-  display: inline-block;
-  @include iui-progress-indicator-radial-size($size: $iui-icons-xl);
-
-  > .iui-radial {
-    height: 100%;
-    width: 100%;
-
-    > circle.iui-fill {
-      @include themed {
-        stroke: t(iui-color-foreground-primary);
-      }
-      fill: none;
-      stroke-width: 3.2;
-    }
-
-    > circle.iui-track {
-      @include themed {
-        stroke: t(iui-color-background-5);
-      }
-      fill: none;
-      stroke-width: 3.2;
-    }
-  }
-
-  .iui-inner-content {
-    position: absolute;
-    display: flex;
-    width: calc(100% - #{$iui-s});
-    height: calc(100% - #{$iui-s});
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    align-items: center;
-    justify-content: center;
-    font-size: $iui-font-size-small;
-    user-select: none;
-    overflow: hidden;
-
-    svg,
-    img {
-      display: flex;
-      width: $iui-icons-default;
-      height: $iui-icons-default;
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
-
-      &:hover {
-        @include themed {
-          fill: t(iui-icons-color-actionable-hover);
-        }
-      }
-    }
-  }
-
-  &.iui-positive {
-    @include themed {
-      color: t(iui-color-foreground-positive);
-    }
-
-    svg.iui-radial {
-      circle.iui-fill,
-      circle.iui-track {
-        @include themed {
-          stroke: t(iui-color-foreground-positive);
-        }
-      }
-    }
-
-    .iui-inner-content svg {
-      @include themed {
-        fill: t(iui-icons-color-positive);
-      }
-    }
-
-    .iui-progress-indicator-radial-ie {
-      @include themed {
-        color: t(iui-color-foreground-positive);
-      }
-
-      &::after {
-        animation: none;
-
-        @include themed {
-          border-bottom-color: t(iui-color-foreground-positive);
-        }
-      }
-    }
-  }
-
-  &.iui-negative {
-    @include themed {
-      color: t(iui-color-foreground-negative);
-    }
-
-    svg.iui-radial circle.iui-fill {
-      @include themed {
-        stroke: t(iui-color-foreground-negative);
-      }
-    }
-
-    .iui-inner-content svg {
-      @include themed {
-        fill: t(iui-icons-color-negative);
-      }
-    }
-
-    .iui-progress-indicator-radial-ie {
-      @include themed {
-        color: t(iui-color-foreground-negative);
-      }
-
-      &::after {
-        animation: none;
-
-        @include themed {
-          border-bottom-color: t(iui-color-foreground-negative);
-        }
-      }
-    }
-  }
-
-  &.iui-x-small {
-    @include iui-progress-indicator-radial-size($size: $iui-icons-default);
-
-    .iui-inner-content {
-      display: none;
-    }
-  }
-
-  &.iui-small {
-    @include iui-progress-indicator-radial-size($size: $iui-icons-large);
-  }
-
-  &.iui-large {
-    @include iui-progress-indicator-radial-size($size: $iui-icons-xxl);
-
-    .iui-inner-content {
-      font-size: $iui-font-size-leading;
-
-      svg,
-      img {
-        width: $iui-icons-large;
-        height: $iui-icons-large;
-      }
-    }
-  }
-}
-
-@mixin iui-progress-indicator-radial-determinate {
-  svg.iui-radial {
-    transform: rotate(-90deg);
-
-    circle.iui-fill {
-      // C = 2πR
-      stroke-dasharray: 88;
-      transition: stroke-dashoffset 0.5s ease-in-out;
-    }
-  }
-}
-
-@mixin iui-progress-indicator-radial-indeterminate {
-  svg.iui-radial {
-    animation: rotate-indeterminate 2s linear infinite;
-
-    circle.iui-fill {
-      animation: dash-indeterminate 1.5s ease-in-out infinite;
-    }
-  }
-
-  @keyframes rotate-indeterminate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes dash-indeterminate {
-    0% {
-      stroke-dasharray: 1, 88;
-    }
-
-    50% {
-      stroke-dasharray: 88, 88;
-      stroke-dashoffset: -22;
-    }
-
-    100% {
-      stroke-dasharray: 88, 88;
-      stroke-dashoffset: -88;
-    }
-  }
-}
-
-@mixin iui-progress-indicator-radial-size($size) {
-  width: $size;
-  height: $size;
-}

package/scss/radio-tile/classes.scss

@@ -1,31 +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-radio-tile {
-  @include iui-radio-tile;
-}
-
-.iui-radio-tile-content {
-  @include iui-radio-tile-content;
-}
-
-.iui-radio-tile-container {
-  @include iui-radio-tile-container;
-}
-
-.iui-radio-tile-input {
-  @include iui-radio-tile-input;
-}
-
-.iui-radio-tile-icon {
-  @include iui-radio-tile-icon;
-}
-
-.iui-radio-tile-label {
-  @include iui-radio-tile-label;
-}
-
-.iui-radio-tile-sublabel {
-  @include iui-radio-tile-sublabel;
-}

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

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

@@ -1,209 +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';
-
-@mixin iui-radio-tile {
-  cursor: pointer;
-  @include themed {
-    -webkit-tap-highlight-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-  }
-
-  &:first-of-type > .iui-radio-tile-content {
-    border-radius: $iui-border-radius 0 0 $iui-border-radius;
-  }
-
-  &:last-of-type > .iui-radio-tile-content {
-    border-radius: 0 $iui-border-radius $iui-border-radius 0;
-  }
-
-  &:not(:first-of-type) > .iui-radio-tile-content {
-    margin-left: -1px;
-  }
-}
-@mixin iui-radio-tile-content {
-  width: $iui-xl * 5;
-  height: 100%;
-  box-sizing: border-box;
-  padding: $iui-s;
-  position: relative;
-  z-index: 1;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: border-color $iui-speed-fast ease-out;
-  }
-  @include themed {
-    border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    background-color: t(iui-color-background-1);
-  }
-
-  &:hover {
-    z-index: 2;
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-    }
-
-    .iui-radio-tile-icon {
-      @media (forced-colors: active) {
-        fill: CanvasText;
-      }
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
-    }
-  }
-}
-
-@mixin iui-radio-tile-container {
-  display: inline-flex;
-  flex-wrap: wrap;
-  user-select: none;
-  // Create stacking context
-  position: relative;
-  z-index: 0;
-}
-
-@mixin iui-radio-tile-input {
-  width: 0;
-  height: 0;
-  appearance: none;
-  opacity: 0;
-  position: absolute;
-  @include focus-visible {
-    + * {
-      outline-offset: -4px;
-      @media (forced-colors: active) {
-        outline-color: Highlight;
-      }
-      @include themed {
-        outline: 2px solid t(iui-color-foreground-primary);
-      }
-    }
-  }
-
-  &:checked + * {
-    padding: $iui-s - 1;
-    z-index: 3;
-    @media (forced-colors: active) {
-      border-color: Highlight;
-    }
-    @include themed {
-      border: 2px solid t(iui-color-foreground-primary);
-    }
-
-    .iui-radio-tile-icon {
-      @media (forced-colors: active) {
-        fill: Highlight;
-      }
-      @include themed {
-        fill: t(iui-icons-color-primary);
-      }
-    }
-
-    &::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>');
-      @media (forced-colors: active) {
-        background-color: Highlight;
-      }
-      @include themed {
-        background-color: t(iui-color-foreground-primary);
-      }
-    }
-  }
-
-  &:disabled + * {
-    cursor: not-allowed;
-    z-index: 0;
-    @include themed {
-      border-color: t(iui-color-background-disabled);
-      background-color: t(iui-color-background-disabled);
-    }
-
-    &::after {
-      @media (forced-colors: active) {
-        background-color: GrayText;
-      }
-      @include themed {
-        background-color: t(iui-icons-color-actionable-disabled);
-      }
-    }
-
-    .iui-radio-tile-icon {
-      filter: $iui-icons-color-multicolor-disabled;
-      @media (forced-colors: active) {
-        fill: GrayText;
-      }
-      @include themed {
-        fill: t(iui-icons-color-actionable-disabled);
-      }
-    }
-
-    .iui-radio-tile-label,
-    .iui-radio-tile-sublabel {
-      @media (forced-colors: active) {
-        color: GrayText;
-      }
-    }
-
-    .iui-radio-tile-label {
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
-    }
-  }
-
-  &:disabled:checked + * {
-    z-index: 3;
-    @media (forced-colors: active) {
-      border-color: GrayText;
-    }
-    @include themed {
-      border: 2px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    }
-  }
-}
-
-@mixin iui-radio-tile-icon {
-  width: $iui-icons-xl;
-  height: $iui-icons-xl;
-  display: block;
-  margin: 0 auto;
-  padding-top: round($iui-baseline * 0.5);
-  padding-bottom: $iui-baseline;
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: fill $iui-speed-fast ease-out;
-  }
-  @media (forced-colors: active) {
-    fill: CanvasText;
-  }
-  @include themed {
-    fill: t(iui-icons-color);
-  }
-}
-
-@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;
-  @include themed {
-    color: t(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;
-  @include themed {
-    color: t(iui-text-color-muted);
-  }
-}

package/scss/reset-global-styles.scss

@@ -1,33 +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 './text/mixins';
-
-html,
-body {
-  @include iui-font-family;
-  @include iui-text(body);
-}
-
-b,
-strong {
-  font-weight: $iui-font-weight-bold;
-}
-
-caption,
-small {
-  @include iui-text(small);
-}
-
-p {
-  margin-bottom: $iui-line-height;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  @include iui-text(body);
-}

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';