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

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/index.scss

@@ -1,10 +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 './labeled-inputs';
-@import './input';
-@import './input-with-icon';
-@import './textarea';
-@import './select';
-@import './checkbox-radio';
-@import './checkbox';
-@import './radio';

package/scss/inputs/select.scss

@@ -1,66 +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';
-
-@mixin iui-select-button {
-  @include iui-focus($offset: -2px, $thickness: 2px);
-  width: 100%;
-  margin: 0;
-  border-radius: $iui-border-radius;
-  box-sizing: border-box;
-  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;
-
-  @include themed {
-    color: t(iui-text-color);
-    background-color: t(iui-color-background-1);
-    border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(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 {
-    @include themed {
-      background-color: t(iui-color-background-disabled);
-      border-color: t(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 {
-    @include themed {
-      color: t(iui-text-color-placeholder);
-    }
-  }
-}

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/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/ripple.scss

@@ -1,18 +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 './speed';
-
-@mixin iui-ripple($hoverColor, $rippleColor) {
-  background-position: center;
-  transition: background $iui-speed ease-out;
-
-  &:hover {
-    background: $hoverColor radial-gradient(circle, transparent 1%, #{$hoverColor} 1%) center/15000%;
-  }
-
-  &:active {
-    background-color: $rippleColor;
-    background-size: 100%;
-    transition: background $iui-speed-instant;
-  }
-}

package/scss/table/condensed.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 '../style/index';
-@import './variables';
-
-@mixin iui-table-condensed {
-  .iui-table-header .iui-cell,
-  .iui-paginator {
-    min-height: $iui-baseline * 4;
-  }
-
-  .iui-row .iui-cell {
-    min-height: $iui-baseline * 4 + 2px;
-  }
-}

package/scss/table/extra-condensed.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 '../style/index';
-@import './variables';
-
-@mixin iui-table-extra-condensed {
-  .iui-table-header .iui-cell,
-  .iui-paginator {
-    min-height: $iui-baseline * 3;
-  }
-
-  .iui-row .iui-cell {
-    min-height: $iui-baseline * 3 + 2px;
-  }
-
-  .iui-table-header .iui-cell {
-    padding-block: $iui-baseline * 0.25;
-  }
-}

package/scss/user-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-user-icon {
-  @include iui-user-icon;
-
-  &#{&} {
-    @include iui-user-icon-size;
-  }
-
-  &.iui-small {
-    @include iui-user-icon-size($size: $iui-icons-large, $font-size: $iui-font-size-small);
-  }
-
-  &.iui-large {
-    @include iui-user-icon-size($size: $iui-icons-xxl, $font-size: $iui-font-size-subheading);
-  }
-
-  &.iui-x-large {
-    @include iui-user-icon-size($size: $iui-icons-3xl, $font-size: $iui-font-size-title);
-  }
-}
-
-.iui-user-icon-list {
-  @include iui-user-icon-list;
-}

package/scss/wizard/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-wizard {
-  @include iui-wizard;
-
-  &.iui-long {
-    @include iui-wizard-long;
-  }
-
-  &.iui-workflow {
-    @include iui-wizard-workflow;
-  }
-}
-
-.iui-wizard-step {
-  @include iui-wizard-step;
-}
-
-.iui-wizard-track-content {
-  @include iui-wizard-track-content;
-}
-
-.iui-wizard-step-name {
-  @include iui-wizard-step-name;
-}

package/scss/wizard/index.scss

@@ -1,5 +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 './wizard';
-@import './long';
-@import './workflow';

package/scss/wizard/long.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 '../style/index';
-
-@mixin iui-wizard-long {
-  .iui-wizard-steps-label {
-    display: block;
-    font-size: $iui-font-size-subheading;
-    text-align: center;
-  }
-
-  .iui-steps-count {
-    user-select: none;
-    margin-right: $iui-s;
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
-  }
-}

package/scss/wizard/wizard.scss

@@ -1,160 +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/index';
-
-@mixin iui-wizard {
-  @include iui-reset;
-
-  > ol {
-    @include iui-reset;
-    display: flex;
-    justify-content: space-around;
-    align-items: flex-start;
-    width: 100%;
-    margin-bottom: $iui-baseline * 0.5;
-  }
-}
-
-@mixin iui-wizard-step {
-  flex: 1;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  @include iui-text(small);
-  @include themed {
-    color: t(iui-color-background-positive);
-  }
-
-  // Completed steps
-  .iui-wizard-circle {
-    align-items: center;
-    border-radius: 50%;
-    display: flex;
-    width: $iui-l;
-    height: $iui-l;
-    justify-content: center;
-    overflow-wrap: break-word;
-    user-select: none;
-    transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out,
-      color $iui-speed-fast ease-out;
-    @include themed {
-      border: 1px solid t(iui-color-foreground-positive);
-      background-color: t(iui-color-background-1);
-      color: t(iui-color-foreground-positive);
-    }
-  }
-
-  // Current step
-  &.iui-current {
-    font-weight: $iui-font-weight-semibold;
-
-    .iui-wizard-step-name {
-      @include themed {
-        color: t(iui-color-foreground-positive);
-      }
-    }
-
-    .iui-wizard-circle {
-      @include themed {
-        color: t(iui-color-foreground-accessory);
-        border-color: t(iui-color-background-positive);
-        background-color: t(iui-color-background-positive);
-      }
-    }
-
-    .iui-wizard-track-content::after {
-      @include themed {
-        background-color: t(iui-color-background-5);
-      }
-    }
-  }
-
-  // Future steps
-  &.iui-current ~ & {
-    .iui-wizard-circle {
-      @include themed {
-        border: 1px solid t(iui-color-background-border);
-        background-color: t(iui-color-background-1);
-        color: t(iui-text-color-muted);
-      }
-    }
-
-    .iui-wizard-step-name {
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
-    }
-
-    .iui-wizard-track-content::before,
-    &:not(:last-of-type) .iui-wizard-track-content::after {
-      @include themed {
-        background-color: t(iui-color-background-5);
-      }
-    }
-  }
-
-  // Clickable steps
-  &.iui-clickable {
-    .iui-wizard-circle {
-      cursor: pointer;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: background-color $iui-speed-fast ease-out;
-      }
-
-      &:hover {
-        @include themed {
-          color: t(iui-color-foreground-accessory);
-          border: 1px solid t(iui-color-background-positive);
-          background-color: t(iui-color-background-positive);
-        }
-      }
-    }
-
-    &:focus {
-      outline: 0;
-
-      .iui-wizard-circle {
-        @include themed {
-          outline: 2px solid t(iui-color-foreground-positive);
-        }
-        outline-offset: -1px;
-      }
-    }
-
-    &:focus:not(:focus-visible) {
-      .iui-wizard-circle {
-        outline: none;
-      }
-    }
-  }
-
-  &:first-of-type .iui-wizard-track-content::before,
-  &:last-of-type .iui-wizard-track-content::after {
-    background-color: transparent;
-  }
-}
-
-@mixin iui-wizard-track-content {
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    height: $iui-xxs;
-    flex: 1 2 auto;
-    @include themed {
-      background-color: t(iui-color-foreground-positive);
-    }
-  }
-}
-
-@mixin iui-wizard-step-name {
-  text-align: center;
-  user-select: all;
-  @include themed {
-    color: t(iui-color-foreground-positive);
-  }
-}

package/scss/wizard/workflow.scss

@@ -1,43 +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-wizard-workflow {
-  > ol {
-    align-items: center;
-  }
-
-  .iui-wizard-step {
-    .iui-wizard-circle {
-      padding-left: $iui-m;
-      padding-right: $iui-m;
-      height: 100%;
-      width: auto;
-      border-radius: 0;
-      font-weight: $iui-font-weight-normal;
-      text-align: center;
-      @include themed {
-        background-color: t(iui-color-background-positive);
-        border-color: t(iui-color-background-positive);
-        color: t(iui-color-foreground-accessory);
-      }
-    }
-
-    &:first-of-type .iui-wizard-circle,
-    &:last-of-type .iui-wizard-circle {
-      border-radius: $iui-sm;
-      @include themed {
-        background-color: t(iui-color-background-1);
-        border-color: t(iui-color-foreground-positive);
-        color: t(iui-color-foreground-positive);
-      }
-    }
-  }
-
-  .iui-wizard-track-content::before,
-  .iui-wizard-track-content::after {
-    @include themed {
-      background-color: t(iui-color-foreground-positive);
-    }
-  }
-}