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

package/scss/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-icons-default {
-  @include iui-icons-default;
-}
-
-.iui-icons-small {
-  @include iui-icons-small;
-}
-
-.iui-icons-large {
-  @include iui-icons-large;
-}
-
-.iui-icons-xl {
-  @include iui-icons-xl;
-}
-
-.iui-icons-xxl {
-  @include iui-icons-xxl;
-}
-
-.iui-icons-3xl {
-  @include iui-icons-3xl;
-}

package/scss/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 './variables';
-@import './mixins';

package/scss/icon/mixins.scss

@@ -1,78 +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-icons-default {
-  @include iui-icons-color();
-  display: inline-flex;
-  width: $iui-icons-default;
-  height: $iui-icons-default;
-}
-
-@mixin iui-icons-small {
-  @include iui-icons-color();
-  display: inline-flex;
-  width: $iui-icons-small;
-  height: $iui-icons-small;
-}
-
-@mixin iui-icons-large {
-  @include iui-icons-color();
-  display: inline-flex;
-  width: $iui-icons-large;
-  height: $iui-icons-large;
-}
-
-@mixin iui-icons-xl {
-  @include iui-icons-color();
-  display: inline-flex;
-  width: $iui-icons-xl;
-  height: $iui-icons-xl;
-}
-
-@mixin iui-icons-xxl {
-  @include iui-icons-color();
-  display: inline-flex;
-  width: $iui-icons-xxl;
-  height: $iui-icons-xxl;
-}
-
-@mixin iui-icons-3xl {
-  @include iui-icons-color();
-  display: inline-flex;
-  width: $iui-icons-3xl;
-  height: $iui-icons-3xl;
-}
-
-@mixin iui-icons-color {
-  @include themed {
-    fill: t(iui-icons-color);
-  }
-  @media (forced-colors: active) {
-    fill: CanvasText;
-  }
-
-  &.iui-informational {
-    @include themed {
-      fill: t(iui-icons-color-primary);
-    }
-  }
-
-  &.iui-positive {
-    @include themed {
-      fill: t(iui-icons-color-positive);
-    }
-  }
-
-  &.iui-warning {
-    @include themed {
-      fill: t(iui-icons-color-warning);
-    }
-  }
-
-  &.iui-negative {
-    @include themed {
-      fill: t(iui-icons-color-negative);
-    }
-  }
-}

package/scss/icon/variables.scss

@@ -1,14 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-
-/// Sizes
-
-$iui-icons-default: 16px;
-
-$iui-icons-small: 0.75 * $iui-icons-default; // 12px
-$iui-icons-large: 1.5 * $iui-icons-default; // 24px
-$iui-icons-xl: 2 * $iui-icons-default; // 32px
-$iui-icons-xxl: 3 * $iui-icons-default; // 48px
-$iui-icons-3xl: 4 * $iui-icons-default; // 64px
-
-$iui-icons-color-multicolor-disabled: grayscale(100%);

package/scss/index.scss

@@ -1,46 +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 './alert/index';
-@import './anchor/index';
-@import './badge/index';
-@import './backdrop/index';
-@import './blockquote/index';
-@import './breadcrumbs/index';
-@import './button/index';
-@import './carousel/index';
-@import './code/index';
-@import './color-picker/index';
-@import './date-picker/index';
-@import './dialog/index';
-@import './expandable-block/index';
-@import './file-upload/index';
-@import './footer/index';
-@import './header/index';
-@import './icon/index';
-@import './information-panel/index';
-@import './inputs/index';
-@import './keyboard/index';
-@import './location-marker/index';
-@import './menu/index';
-@import './non-ideal-state/index';
-@import './notification-marker/index';
-@import './popover/index';
-@import './progress-indicator/index';
-@import './radio-tile/index';
-@import './side-navigation/index';
-@import './skip-to-content/index';
-@import './slider/index';
-@import './surface/index';
-@import './table/index';
-@import './tabs/index';
-@import './tag/index';
-@import './text/index';
-@import './tile/index';
-@import './time-picker/index';
-@import './toast-notification/index';
-@import './toggle-switch/index';
-@import './tooltip/index';
-@import './tree/index';
-@import './user-icon/index';
-@import './wizard/index';

package/scss/information-panel/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-information-panel-wrapper {
-  @include iui-information-panel-wrapper;
-}
-
-.iui-information-panel {
-  @include iui-information-panel;
-
-  &.iui-right {
-    @include iui-information-panel-right;
-  }
-
-  &.iui-bottom {
-    @include iui-information-panel-bottom;
-  }
-
-  &.iui-visible {
-    @include iui-information-panel-visible;
-  }
-}
-
-.iui-information-body-content {
-  @include iui-information-body-content;
-}

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

package/scss/information-panel/information-panel.scss

@@ -1,233 +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 '../inputs/labeled-inputs';
-
-@mixin iui-information-panel-wrapper {
-  position: relative;
-  overflow: hidden;
-}
-
-@mixin iui-information-panel {
-  position: absolute;
-  opacity: 0;
-  visibility: hidden;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  max-width: 100%;
-  max-height: 100%;
-  z-index: 2; // Needs to be higher than table's column resizers.
-  @media (prefers-reduced-motion: no-preference) {
-    transition: visibility $iui-speed-instant $iui-speed-fast ease-in, transform $iui-speed-fast ease-out,
-      opacity $iui-speed-fast ease;
-  }
-
-  @include themed {
-    background-color: t(iui-color-background-1);
-  }
-
-  > .iui-resizer {
-    display: none;
-    position: absolute;
-    touch-action: none;
-
-    > .iui-resizer-bar {
-      @include themed {
-        background-color: t(iui-color-background-border);
-      }
-    }
-
-    &:hover > .iui-resizer-bar {
-      @include themed {
-        background-color: t(iui-color-foreground-primary);
-      }
-    }
-  }
-
-  .iui-information-header,
-  .iui-information-body {
-    padding-left: $iui-sm;
-    padding-right: $iui-sm;
-    box-sizing: border-box;
-  }
-
-  .iui-information-header {
-    height: $iui-baseline * 5;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    @include themed {
-      background-color: t(iui-color-background-3);
-    }
-
-    .iui-information-header-label {
-      display: flex;
-      align-items: center;
-      overflow: hidden;
-
-      > * {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        user-select: all;
-      }
-
-      svg {
-        display: flex;
-        width: $iui-icons-large;
-        height: $iui-icons-large;
-        margin-right: $iui-s;
-        flex-shrink: 0;
-        @include themed {
-          fill: t(iui-icons-color);
-        }
-      }
-    }
-
-    .iui-information-header-actions {
-      flex-shrink: 0;
-      margin-left: $iui-s;
-    }
-  }
-
-  .iui-information-body {
-    padding-top: $iui-baseline;
-    padding-bottom: $iui-baseline;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    overflow-y: overlay;
-
-    > hr {
-      @include themed {
-        border-color: t(iui-color-background-border);
-      }
-    }
-  }
-}
-
-@mixin iui-information-panel-visible {
-  opacity: 1;
-  visibility: visible;
-  transform: translate(0);
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: transform $iui-speed-fast ease-out, opacity $iui-speed-fast ease;
-  }
-
-  > .iui-resizer {
-    display: flex;
-  }
-}
-
-@mixin iui-information-panel-vertical {
-  top: 0;
-  right: 0;
-  width: $iui-3xl * 4;
-  min-width: $iui-3xl * 2;
-  height: 100%;
-
-  > .iui-resizer {
-    height: 100%;
-    width: $iui-m;
-    top: 0;
-    cursor: ew-resize;
-    justify-content: center;
-
-    > .iui-resizer-bar {
-      height: 100%;
-      width: 1px;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: background-color $iui-speed-fast ease-out, width $iui-speed-fast ease-out;
-      }
-    }
-
-    &:hover > .iui-resizer-bar {
-      width: $iui-xs;
-    }
-  }
-}
-
-@mixin iui-information-panel-horizontal {
-  left: 0;
-  bottom: 0;
-  height: $iui-3xl * 4;
-  min-height: $iui-3xl * 2;
-  width: 100%;
-
-  > .iui-resizer {
-    width: 100%;
-    height: $iui-m;
-    left: 0;
-    cursor: ns-resize;
-    align-items: center;
-
-    > .iui-resizer-bar {
-      width: 100%;
-      height: 1px;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: background-color $iui-speed-fast ease-out, height $iui-speed-fast ease-out;
-      }
-    }
-
-    &:hover > .iui-resizer-bar {
-      height: $iui-xs;
-    }
-  }
-}
-
-@mixin iui-information-panel-right {
-  @include iui-information-panel-vertical;
-  transform: translateX(100%); // hide off screen
-  box-shadow: -1px 0 10px $iui-elevation-color;
-  clip-path: inset(0 0 0 -15px); // show box-shadow only on the left
-
-  > .iui-resizer {
-    left: $iui-m * -0.5;
-  }
-}
-
-@mixin iui-information-panel-bottom {
-  @include iui-information-panel-horizontal;
-  transform: translateY(100%); // hide off screen
-  box-shadow: 0 -1px 10px $iui-elevation-color;
-  clip-path: inset(-15px 0 0 0); // show box-shadow only on top
-
-  > .iui-resizer {
-    top: $iui-m * -0.5;
-  }
-}
-
-/// Labels and inputs aligned using css grid
-@mixin iui-information-body-content {
-  display: grid;
-
-  .iui-input-label {
-    font-weight: $iui-font-weight-normal;
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
-  }
-
-  &:not(.iui-inline) {
-    // add bottom margin between pairs of label+input
-    > *:nth-child(even):not(:last-child) {
-      margin-bottom: $iui-baseline;
-    }
-  }
-
-  &.iui-inline {
-    row-gap: $iui-baseline;
-    grid-template-columns: auto 1fr;
-    align-items: center;
-
-    .iui-input-label {
-      @include iui-input-label-inline;
-      // right align labels
-      justify-self: end;
-      text-align: end;
-    }
-  }
-}

package/scss/inputs/checkbox-radio.scss

@@ -1,73 +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-inputs-checkbox-radio {
-  @include iui-reset;
-  display: flex;
-  align-items: center;
-  font-size: $iui-font-size;
-  width: fit-content;
-  user-select: none;
-  position: relative;
-  cursor: pointer;
-  @include themed {
-    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-  }
-
-  gap: $iui-s;
-
-  // #region flex gap fallback
-  > * + * {
-    margin-left: $iui-s;
-    @supports (gap: $iui-s) {
-      margin-left: 0;
-    }
-  }
-  // #endregion
-
-  &.iui-loading {
-    cursor: wait;
-    color: var(--iui-text-color-muted);
-  }
-
-  > .iui-checkbox-label,
-  > .iui-radio-label {
-    display: flex;
-    align-items: center;
-
-    svg {
-      width: $iui-icons-default;
-      height: $iui-icons-default;
-      vertical-align: middle;
-      fill: currentColor;
-    }
-  }
-
-  &.iui-disabled {
-    cursor: not-allowed;
-    color: var(--iui-text-color-muted);
-
-    svg {
-      fill: var(--iui-icons-color-actionable-disabled);
-    }
-  }
-
-  &.iui-positive {
-    @include themed {
-      color: t(iui-color-foreground-positive);
-    }
-  }
-
-  &.iui-warning {
-    @include themed {
-      color: t(iui-color-foreground-warning);
-    }
-  }
-
-  &.iui-negative {
-    @include themed {
-      color: t(iui-color-foreground-negative);
-    }
-  }
-}

package/scss/inputs/checkbox.scss

@@ -1,106 +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-checkbox {
-  &-wrapper {
-    @include iui-inputs-checkbox-radio;
-  }
-
-  --_iui-checkbox-checkmark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
-  --_iui-checkbox-indeterminate-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
-  --_iui-checkbox-unchecked-svg: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
-
-  --_iui-checkbox-svg-color: var(--iui-color-foreground-primary);
-  --_iui-checkbox-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  --_iui-checkbox-background-color: var(--iui-color-background-1);
-  --_iui-checkbox-mask-image: initial;
-
-  appearance: none; // disable default browser styles
-  margin: 0;
-  width: $iui-icons-default;
-  height: $iui-icons-default;
-  position: relative;
-  border-radius: $iui-border-radius;
-  background-color: var(--_iui-checkbox-background-color);
-  flex-shrink: 0;
-  cursor: pointer;
-
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    transition: border-color $iui-speed-fast ease-out;
-    border-radius: inherit;
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--_iui-checkbox-border-color);
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-color: var(--_iui-checkbox-svg-color);
-    mask: var(--_iui-checkbox-mask-image) no-repeat center;
-  }
-
-  &:not(:checked) {
-    --_iui-checkbox-mask-image: var(--_iui-checkbox-unchecked-svg);
-  }
-
-  &:checked {
-    --_iui-checkbox-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
-    --_iui-checkbox-mask-image: var(--_iui-checkbox-checkmark-svg);
-  }
-
-  &:indeterminate {
-    --_iui-checkbox-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
-    --_iui-checkbox-mask-image: var(--_iui-checkbox-indeterminate-svg);
-  }
-
-  &:hover {
-    --_iui-checkbox-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-  }
-
-  @include iui-focus($thickness: 2px);
-
-  &:disabled {
-    --_iui-checkbox-svg-color: var(--iui-icons-color-actionable-disabled);
-    --_iui-checkbox-border-color: var(--iui-color-background-border);
-    --_iui-checkbox-background-color: var(--iui-color-background-disabled);
-    cursor: not-allowed;
-  }
-
-  &.iui-checkbox-visibility {
-    --_iui-checkbox-checkmark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
-    --_iui-checkbox-indeterminate-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
-    --_iui-checkbox-unchecked-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
-
-    --_iui-checkbox-border-color: transparent;
-    --_iui-checkbox-background-color: transparent;
-
-    &:where(:not(:checked):not(:indeterminate)) {
-      --_iui-checkbox-svg-color: var(--iui-icons-color-actionable);
-    }
-
-    &:where(:hover) {
-      --_iui-checkbox-border-color: transparent;
-      --_iui-checkbox-background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-    }
-
-    &:where(:disabled) {
-      --_iui-checkbox-svg-color: var(--iui-icons-color-actionable-disabled);
-      --_iui-checkbox-background-color: var(--iui-color-background-disabled);
-    }
-  }
-
-  &.iui-loading {
-    --_iui-checkbox-border-color: transparent;
-    --_iui-checkbox-background-color: transparent;
-    opacity: 0;
-    position: absolute;
-    cursor: wait;
-  }
-}

package/scss/inputs/classes.scss

@@ -1,87 +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;
-}
-
-.iui-input {
-  @include iui-input;
-}
-
-.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;
-}
-
-.iui-textarea {
-  @include iui-textarea;
-}
-
-.iui-input-with-icon {
-  @include iui-input-with-icon;
-}
-
-.iui-end-icon {
-  @include iui-end-icon;
-}
-
-.iui-checkbox {
-  @include iui-checkbox;
-}
-
-.iui-radio {
-  @include iui-radio;
-}