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

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

@@ -1,210 +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 '../text/index';
-
-@mixin iui-side-navigation {
-  display: inline-flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  height: 100%;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: max-width $iui-speed-fast ease-out;
-  }
-  @include themed {
-    background-color: t(iui-color-background-3);
-    border-right: 1px solid t(iui-color-background-border);
-  }
-
-  > .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;
-      @include themed {
-        border-top: 1px solid t(iui-color-background-border);
-      }
-    }
-  }
-
-  &.iui-collapsed {
-    min-width: $iui-icons-large * 3;
-    max-width: $iui-icons-large * 3;
-
-    // iPhone notch support
-    @supports (min-width: unquote('max(0px)')) {
-      min-width: unquote('max(#{$iui-icons-large} * 3, #{$iui-icons-large} * 3 + env(safe-area-inset-left))');
-      max-width: unquote('max(#{$iui-icons-large} * 3, #{$iui-icons-large} * 3 + 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-icons-large;
-    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-icons-large}, #{$iui-icons-large} + env(safe-area-inset-left))');
-      }
-    }
-
-    > .iui-button-label {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &,
-    &:hover,
-    &[disabled] {
-      @include themed {
-        border-color: t(iui-color-background-border);
-      }
-    }
-
-    > .iui-button-icon:not(.iui-user-icon) {
-      width: $iui-icons-large;
-      height: $iui-icons-large;
-      flex-shrink: 0;
-    }
-
-    &.iui-submenu-open .iui-button-icon {
-      @include themed {
-        fill: t(iui-color-foreground-primary);
-      }
-    }
-
-    &[disabled],
-    &:disabled {
-      @include themed {
-        background-color: t(iui-color-background-2);
-      }
-    }
-
-    &.iui-expand {
-      height: $iui-line-height;
-      justify-content: center;
-      border: none;
-      @include themed {
-        border-bottom: 1px solid t(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%;
-  box-sizing: border-box;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overflow-y: overlay;
-  resize: horizontal;
-  @include themed {
-    background-color: t(iui-color-background-1);
-    border-right: 1px solid t(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;
-    box-sizing: border-box;
-  }
-
-  &-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,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-skip-to-content-link {
-  @include iui-blur($opacity: 3);
-  @include iui-focus($offset: 2px, $thickness: 2px);
-  @include themed {
-    color: t(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,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 './index';
-
-.iui-slider-horizontal {
-  @include iui-slider-horizontal;
-}
-
-.iui-slider-vertical {
-  @include iui-slider-vertical;
-}
-
-.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;
-}
-
-.iui-slider-min,
-.iui-slider-max {
-  @include iui-slider-endpoints;
-}

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

package/scss/slider/slider.scss

@@ -1,256 +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';
-
-$thumb-height: $iui-m; // 16px
-$track-height: $iui-xs; // 4px
-$tick-height: $iui-baseline; // 11px
-
-@mixin iui-slider-component-container {
-  display: flex;
-
-  &.iui-disabled {
-    @include iui-slider-disabled;
-  }
-}
-
-@mixin iui-slider-endpoints {
-  user-select: all;
-
-  svg {
-    @include iui-icons-default;
-    margin-top: $iui-xs;
-  }
-}
-
-@mixin iui-slider-container {
-  position: relative;
-  flex-grow: 1;
-  cursor: pointer;
-  touch-action: pan-y;
-
-  &.iui-grabbing {
-    cursor: grabbing;
-  }
-}
-
-@mixin iui-slider-rail {
-  position: absolute;
-  @include themed {
-    background-color: t(iui-color-background-border);
-  }
-  @media (forced-colors: active) {
-    background-color: CanvasText;
-  }
-}
-
-@mixin iui-slider-thumb {
-  position: absolute;
-  height: $thumb-height;
-  width: $thumb-height;
-  border-radius: 100%;
-  z-index: 1;
-  cursor: grab;
-  @include iui-focus($thickness: 2px);
-  @include themed {
-    background: t(iui-color-background-1);
-    border: 1px solid t(iui-color-background-border);
-  }
-  @media (forced-colors: active) {
-    background: Canvas;
-    border: 1px solid CanvasText;
-  }
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-@mixin iui-slider-track {
-  pointer-events: none;
-  position: absolute;
-  top: $iui-sm;
-  @include themed {
-    background-color: t(iui-color-foreground-primary);
-  }
-  @media (forced-colors: active) {
-    background-color: Highlight;
-  }
-}
-
-@mixin iui-slider-ticks {
-  position: relative;
-  display: flex;
-  pointer-events: none;
-  justify-content: space-between;
-  user-select: none;
-
-  .iui-slider-tick {
-    position: relative;
-    display: flex;
-    pointer-events: none;
-    justify-content: center;
-    align-items: center;
-
-    &::before {
-      @include themed {
-        background-color: t(iui-color-background-4);
-      }
-      @media (forced-colors: active) {
-        background-color: CanvasText;
-      }
-    }
-  }
-}
-
-@mixin iui-slider-disabled {
-  cursor: not-allowed;
-
-  .iui-slider-container {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .iui-slider-thumb {
-    cursor: not-allowed;
-    @include themed {
-      background-color: t(iui-color-background-4);
-      border-color: t(iui-color-background-4);
-    }
-    @media (forced-colors: active) {
-      background-color: GrayText;
-      border-color: GrayText;
-    }
-  }
-
-  .iui-slider-track {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    }
-    @media (forced-colors: active) {
-      background-color: GrayText;
-    }
-  }
-
-  .iui-slider-min,
-  .iui-slider-max,
-  .iui-slider-tick {
-    user-select: none;
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
-    @media (forced-colors: active) {
-      color: GrayText;
-    }
-  }
-}
-
-@mixin iui-slider-horizontal {
-  min-height: $iui-baseline * 2;
-
-  .iui-slider-rail {
-    width: 100%;
-    height: $track-height;
-    top: $iui-sm;
-  }
-
-  .iui-slider-thumb {
-    top: $track-height + 1; // position center of thumb in center of track
-    transform: translateX(
-      -50%
-    ); // Adjust the left (set in code) by radius of thumb so thumb center is at value position
-  }
-
-  .iui-slider-track {
-    height: $track-height;
-    left: 0;
-  }
-
-  .iui-slider-ticks {
-    padding-top: $iui-m;
-
-    .iui-slider-tick {
-      flex-direction: column;
-      width: 1px;
-
-      &::before {
-        content: '';
-        width: 1px;
-        height: $tick-height;
-      }
-    }
-  }
-
-  .iui-slider-min,
-  .iui-slider-max {
-    margin-top: $iui-xxs;
-  }
-
-  .iui-slider-min {
-    margin-right: $iui-sm;
-    text-align: right;
-  }
-
-  .iui-slider-max {
-    margin-left: $iui-sm;
-  }
-}
-
-@mixin iui-slider-vertical {
-  flex-direction: column-reverse;
-  min-width: $iui-baseline * 2;
-  height: 100%;
-
-  .iui-slider-rail {
-    width: $track-height;
-    height: 100%;
-    left: $iui-sm;
-  }
-
-  .iui-slider-thumb {
-    transform: translateY(
-      50%
-    ); // Adjust the bottom (set in code) by radius of thumb so thumb center is at value position
-    left: $track-height + 1;
-  }
-
-  .iui-slider-track {
-    width: $track-height;
-    bottom: 0;
-    left: $iui-sm;
-  }
-
-  .iui-slider-ticks {
-    padding-left: $iui-m;
-    flex-direction: column-reverse;
-    align-items: flex-start;
-    height: 100%;
-
-    .iui-slider-tick {
-      flex: row;
-      height: 1px;
-
-      &::before {
-        content: '';
-        width: $tick-height;
-        height: 1px;
-        margin-right: $tick-height * 1;
-      }
-    }
-  }
-
-  .iui-slider-min,
-  .iui-slider-max {
-    margin-left: $iui-xxs;
-    text-align: center;
-  }
-
-  .iui-slider-min {
-    margin-top: $iui-sm;
-  }
-
-  .iui-slider-max {
-    margin-bottom: $iui-sm;
-  }
-}

package/scss/style/anchor.scss

@@ -1,82 +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-anchor {
-  @include iui-anchor-status('primary');
-  border-radius: $iui-border-radius;
-  box-sizing: border-box;
-  cursor: pointer;
-
-  @include iui-anchor-underline('on-hover');
-
-  @media (prefers-contrast: more) {
-    @include iui-anchor-underline('on-initial');
-  }
-
-  @at-root {
-    .iui-theme-light &,
-    .iui-theme-dark & {
-      @include iui-anchor-underline('on-hover');
-    }
-  }
-
-  @at-root {
-    .iui-theme-light-hc &,
-    .iui-theme-dark-hc & {
-      @include iui-anchor-underline('on-initial');
-    }
-  }
-}
-
-@mixin iui-anchor-external {
-  --_iui-anchor-external-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
-
-  &::after {
-    content: '';
-    display: inline-block;
-    width: 1.5ch;
-    height: 1.5ch;
-    margin-left: 0.5ch;
-    vertical-align: -0.1ch;
-    background-color: currentColor;
-    mask: var(--_iui-anchor-external-svg);
-    @media (forced-colors: active) {
-      background-color: LinkText;
-    }
-  }
-}
-
-@mixin iui-anchor-status($status: primary) {
-  @include iui-focus($color: var(--iui-color-foreground-#{$status}), $offset: 1px);
-  @include themed {
-    color: t(iui-color-foreground-#{$status});
-    -webkit-tap-highlight-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-5));
-  }
-  @if $status != primary {
-    @include iui-text-selection($status);
-  }
-
-  &:hover {
-    @include themed {
-      color: t(iui-color-foreground-#{$status}-overlay);
-    }
-  }
-}
-
-/// $behavior should be one of: 'on-hover' or 'on-initial'
-@mixin iui-anchor-underline($behavior: 'on-hover') {
-  @if $behavior == 'on-hover' {
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  } @else {
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}

package/scss/style/baseline.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.
-$iui-baseline: 11px;
-$iui-line-height: $iui-baseline * 2; ///  22px; /// ~1.618;

package/scss/style/color.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.
-/// Data visualization colors:
-$iui-color-dataviz-skyblue: hsl(204, 77%, 67%);
-$iui-color-dataviz-celery: hsl(72, 51%, 56%);
-$iui-color-dataviz-froly: hsl(2, 90%, 70%);
-$iui-color-dataviz-steelblue: hsl(200, 41%, 46%);
-$iui-color-dataviz-sunglow: hsl(42, 100%, 60%);
-$iui-color-dataviz-seabuckthorn: hsl(29, 92%, 61%);
-$iui-color-dataviz-montecarlo: hsl(176, 43%, 62%);
-$iui-color-dataviz-poloblue: hsl(211, 44%, 67%);
-$iui-color-dataviz-bouquet: hsl(305, 19%, 55%);
-$iui-color-dataviz-ash: hsl(42, 15%, 75%);
-$iui-color-dataviz-oak: hsl(27, 32%, 49%);
-
-/// Soft background colors generated from dataviz colors:
-$iui-color-background-skyblue: hsl(197, 71%, 83%);
-$iui-color-background-celery: hsl(72, 51%, 66%);
-$iui-color-background-froly: hsl(2, 90%, 83%);
-$iui-color-background-steelblue: hsl(207, 44%, 73%);
-$iui-color-background-sunglow: hsl(42, 100%, 70%);
-$iui-color-background-seabuckthorn: hsl(29, 92%, 71%);
-$iui-color-background-montecarlo: hsl(176, 43%, 72%);
-$iui-color-background-poloblue: hsl(211, 44%, 77%);
-$iui-color-background-bouquet: hsl(305, 19%, 75%);
-$iui-color-background-ash: hsl(42, 15%, 85%);
-$iui-color-background-oak: hsl(27, 32%, 72%);
-
-/// System provided colors:
-$iui-color-system-red: #F00;
-$iui-color-system-burgundi: #900;
-$iui-color-system-orange: #F90;
-$iui-color-system-yellow: #FF0;
-$iui-color-system-green: #6C0;
-$iui-color-system-cyan: #0CF;
-$iui-color-system-blue: #03F;
-$iui-color-system-magenta: #C3F;
-$iui-color-system-turquoise: #6FC;
-$iui-color-system-gray: #999;

package/scss/style/elevation.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.
-/// Elevations:
-$iui-elevation-color: hsla(200, 12%, 0%, 0.25);
-
-$iui-elevation-0: 0;
-$iui-elevation-2: 0 1px 5px $iui-elevation-color;
-$iui-elevation-4: 0 1px 10px $iui-elevation-color;
-$iui-elevation-8: 0 3px 14px $iui-elevation-color;
-$iui-elevation-16: 0 6px 30px $iui-elevation-color;
-$iui-elevation-24: 0 9px 46px $iui-elevation-color;