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

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/input-with-icon.scss

@@ -1,36 +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 to have inputs combined with icon (eg. select)
-@mixin iui-input-with-icon {
-  display: grid;
-  align-items: center;
-  cursor: pointer;
-
-  > :first-child {
-    grid-area: 1 / -1;
-    padding-right: $iui-icons-default + $iui-l;
-  }
-
-  &:focus-within {
-    > :first-child {
-      // --_focus-color can be used to control this from outside
-      outline: 2px solid var(--_focus-color, var(--iui-color-foreground-primary));
-      outline-offset: -2px;
-    }
-  }
-
-  &:hover {
-    > :first-child {
-      // --_hover-color can be used to control this from outside
-      border-color: var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)));
-    }
-  }
-}
-
-@mixin iui-end-icon {
-  @include iui-input-icon-inline;
-  display: flex;
-  grid-area: 1 / -1;
-}

package/scss/inputs/input.scss

@@ -1,80 +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-input {
-  @include iui-reset;
-  @include iui-focus($offset: -2px, $thickness: 2px);
-  width: 100%;
-  font-family: inherit;
-  font-size: $iui-font-size;
-  font-weight: $iui-font-weight-normal;
-  line-height: $iui-line-height;
-  border-radius: $iui-border-radius;
-  appearance: none;
-  box-sizing: border-box;
-  padding: $iui-component-padding-vertical $iui-component-padding-horizontal;
-  min-height: $iui-component-height;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: border-color $iui-speed-fast ease-out;
-  }
-  @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;
-  }
-
-  &::placeholder {
-    user-select: none;
-    @include themed {
-      color: t(iui-text-color-placeholder);
-    }
-  }
-
-  &:autofill {
-    @include iui-input-autofill;
-  }
-
-  &:hover {
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-    }
-    @media (prefers-reduced-motion: no-preference) {
-      transition: border-color $iui-speed-fast ease-out;
-    }
-  }
-
-  &[disabled] {
-    @include themed {
-      background-color: t(iui-color-background-disabled);
-      border-color: t(iui-color-background-disabled);
-    }
-    cursor: not-allowed;
-    --_hover-color: var(--iui-color-background-disabled);
-  }
-}
-
-@mixin iui-input-autofill {
-  @include themed {
-    border-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-1));
-    color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-1));
-    background: linear-gradient(
-      rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
-      rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))
-    ),
-      linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
-  }
-}

package/scss/inputs/labeled-inputs.scss

@@ -1,382 +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 '../style/ripple';
-
-/// Container for grouping inputs with a label, an icon and a status message.
-/// Supported modifiers: .iui-inline-label, .iui-inline-icon and .iui-with-message
-@mixin iui-input-container {
-  @include iui-reset;
-  display: grid;
-  grid-template:
-    'label label'
-    'inputs inputs' / auto 1fr;
-
-  &.iui-inline-icon:not(.iui-inline-label) > .iui-input-icon {
-    // stylelint-disable -- fix position in IE
-    -ms-grid-row: 2;
-    -ms-grid-column: 2;
-    // stylelint-enable
-  }
-
-  &.iui-inline-icon {
-    > .iui-input,
-    > .iui-textarea {
-      padding-right: $iui-icons-default + $iui-l;
-
-      &:last-child {
-        padding-right: $iui-sm;
-      }
-    }
-  }
-
-  &.iui-with-message {
-    grid-template:
-      'label label'
-      'inputs inputs'
-      'icon message' / auto 1fr;
-
-    // add margin to the icon if it is below input
-    &:not(.iui-inline-icon) > .iui-input-icon {
-      margin-top: $iui-component-offset;
-    }
-  }
-
-  .iui-input,
-  .iui-input-with-icon,
-  .iui-textarea,
-  .iui-input-group {
-    grid-area: inputs;
-    // stylelint-disable -- fix position in IE
-    -ms-grid-row: 2;
-    -ms-grid-column: 1;
-    -ms-grid-column-span: 2;
-    // stylelint-enable
-  }
-
-  .iui-input-group .iui-toggle-switch-wrapper {
-    padding: round($iui-baseline * 0.5) 0;
-  }
-
-  // #region Cursors
-  @include iui-input-label-cursor;
-
-  &.iui-disabled {
-    label {
-      cursor: not-allowed;
-    }
-  }
-  // #endregion
-
-  // Appropriate spacing even if no text label is given
-  .iui-checkbox-wrapper,
-  .iui-radio-wrapper {
-    min-height: $iui-line-height;
-  }
-
-  &.iui-inline-label {
-    grid-template: 'label inputs icon' / auto 1fr auto;
-
-    // IE fix icon position for inline checkboxes/radios group
-    @at-root {
-      div#{&} {
-        // stylelint-disable -- fix position in IE
-        -ms-grid-columns: auto min-content auto;
-        // stylelint-enable
-      }
-    }
-
-    .iui-input,
-    .iui-input-with-icon,
-    .iui-textarea,
-    .iui-input-group {
-      // stylelint-disable -- fix position in IE
-      -ms-grid-row: 1;
-      -ms-grid-column: 2;
-      // stylelint-enable
-    }
-
-    .iui-input-icon {
-      // stylelint-disable -- fix position in IE
-      -ms-grid-row: 1;
-      -ms-grid-column: 3;
-      // stylelint-enable
-    }
-
-    &.iui-with-message {
-      grid-template:
-        'label inputs inputs'
-        '. icon message' / auto auto 1fr;
-
-      &:not(.iui-inline-icon) > .iui-input-icon {
-        // stylelint-disable -- fix position in IE
-        -ms-grid-row: 2;
-        -ms-grid-column: 2;
-        // stylelint-enable
-      }
-
-      .iui-message {
-        // stylelint-disable -- fix position in IE
-        -ms-grid-row: 2;
-        -ms-grid-column: 3;
-        // stylelint-enable
-      }
-    }
-
-    > .iui-input-group {
-      display: flex;
-      gap: $iui-m;
-
-      > .iui-checkbox-wrapper,
-      > .iui-radio-wrapper,
-      > .iui-toggle-switch-wrapper {
-        margin-right: $iui-m;
-
-        @supports (gap: $iui-m) {
-          margin-right: 0;
-        }
-      }
-
-      &:not(:last-child) {
-        margin-right: $iui-m;
-      }
-    }
-  }
-}
-
-/// Cursor styling for the label.
-@mixin iui-input-label-cursor {
-  cursor: default;
-
-  @at-root {
-    label#{&} {
-      cursor: pointer;
-
-      &.iui-disabled {
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-/// Text label for an input.
-/// Supports .iui-required modifier to show red asterisk.
-@mixin iui-input-label-styling {
-  font-weight: $iui-font-weight-semibold;
-  margin-bottom: $iui-component-offset;
-
-  &.iui-required {
-    &::after {
-      content: '*';
-      margin-left: $iui-xs;
-      @include themed {
-        color: t(iui-color-foreground-negative);
-      }
-    }
-  }
-}
-
-/// Modifier on iui-input-label-styling to place it inline.
-@mixin iui-input-label-inline {
-  margin: 0 $iui-m 0 0;
-  // stylelint-disable -- fix position in IE
-  -ms-grid-column-span: 1;
-  // stylelint-enable
-
-  &.iui-required {
-    margin-right: $iui-xs * 1.5;
-  }
-}
-
-/// Label inside the input-container grid.
-@mixin iui-input-container-label {
-  @include iui-input-label-styling;
-  grid-area: label;
-  align-self: center;
-}
-
-/// Independent label outside the grid.
-/// Supports .iui-inline modifier to place it inline.
-@mixin iui-input-label {
-  @include iui-input-label-styling;
-  @include iui-input-label-cursor;
-  display: block;
-
-  &.iui-inline {
-    @include iui-input-label-inline;
-    display: inline-flex;
-    align-items: center;
-  }
-}
-
-/// Message shown below input
-@mixin iui-input-message {
-  font-size: $iui-font-size-small;
-  grid-area: message;
-  margin-top: $iui-component-offset;
-  @include themed {
-    color: t(iui-text-color-muted);
-  }
-
-  a {
-    user-select: none;
-  }
-}
-
-/// Icon to be shown near a message.
-@mixin iui-input-icon {
-  display: flex;
-  grid-area: icon;
-  width: $iui-icons-default;
-  height: $iui-icons-default;
-  align-self: center;
-  @include themed {
-    fill: t(iui-icons-color);
-  }
-
-  &:not(:last-child) {
-    margin-right: $iui-xs;
-  }
-}
-
-/// Modifier on iui-input-icon to place it at the end of input.
-@mixin iui-input-icon-inline {
-  // stylelint-disable -- fix position in IE
-  -ms-grid-row: 1;
-  -ms-grid-column: 3;
-  // stylelint-enable
-
-  grid-area: inputs;
-  justify-self: end;
-  margin: 0 ($iui-sm + $iui-xxs) 0 0;
-  position: relative;
-
-  svg {
-    width: $iui-icons-default;
-    height: $iui-icons-default;
-  }
-
-  &.iui-button {
-    height: 100%;
-    width: fit-content;
-    margin-right: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-top-right-radius: inherit;
-    border-bottom-right-radius: inherit;
-  }
-
-  &.iui-actionable {
-    align-items: center;
-    height: 90%;
-    margin-right: $iui-xxs;
-    padding: 0 $iui-sm;
-    cursor: pointer;
-
-    @include iui-ripple(var(--iui-color-background-1), var(--iui-color-background-2));
-
-    svg {
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
-      transition: transform $iui-speed-fast ease-out;
-    }
-
-    &.iui-open svg {
-      transform: rotate(180deg); // transform for arrow icon (e.g. svg-caret-down), used in combobox
-    }
-  }
-
-  &.iui-disabled {
-    cursor: not-allowed;
-
-    svg {
-      @include themed {
-        fill: t(iui-icons-color-actionable-disabled);
-      }
-    }
-  }
-}
-
-/// Mixin for applying status colors to input container.
-/// @arg status - must be one of: positive, negative, warning
-/// @arg iconSelector - selector to apply status fill on. Defaults to .iui-input-icon
-/// @arg textSelector - selector to apply text color on. Defaults to .iui-message
-@mixin iui-input-status($status, $iconSelector: '.iui-input-icon', $textSelector: '.iui-message') {
-  @include iui-text-selection($status);
-
-  #{$iconSelector} {
-    @include themed {
-      fill: t(iui-color-foreground-#{$status});
-    }
-  }
-
-  #{$textSelector} {
-    @include themed {
-      color: t(iui-color-foreground-#{$status});
-    }
-
-    a {
-      text-decoration: underline;
-
-      @include themed {
-        color: t(iui-color-foreground-#{$status});
-      }
-
-      &:hover {
-        text-decoration: none;
-
-        @include themed {
-          color: t(iui-color-foreground-#{$status}-overlay);
-        }
-      }
-    }
-  }
-
-  .iui-input,
-  .iui-textarea {
-    padding-bottom: $iui-component-padding-vertical - 1px;
-
-    &.iui-small {
-      padding-bottom: $iui-component-padding-vertical-small - 1px;
-    }
-
-    &.iui-large {
-      padding-bottom: $iui-component-padding-vertical-large - 1px;
-    }
-
-    @include themed {
-      border-bottom: $iui-xxs solid t(iui-color-foreground-#{$status});
-    }
-
-    &:focus {
-      @include themed {
-        border-bottom: $iui-xxs solid t(iui-color-foreground-#{$status});
-        outline: 2px solid t(iui-color-foreground-#{$status});
-        outline-offset: -2px;
-      }
-    }
-  }
-
-  .iui-input-with-icon {
-    --_hover-color: var(--iui-color-foreground-#{$status});
-    --_focus-color: var(--iui-color-foreground-#{$status});
-  }
-
-  .iui-select-button {
-    border-bottom: transparent;
-
-    &::after {
-      content: '';
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      height: $iui-xxs;
-      @include themed {
-        background-color: t(iui-color-foreground-#{$status});
-      }
-    }
-  }
-}

package/scss/inputs/radio.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 '../style/index';
-
-@mixin iui-radio {
-  @include iui-checkbox;
-
-  border-radius: 50%;
-
-  &:checked {
-    --_iui-checkbox-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><circle cx="8" cy="8" r="4" /></svg>');
-  }
-
-  &:not(:checked),
-  &:indeterminate {
-    --_iui-checkbox-mask-image: var(--_iui-checkbox-unchecked-svg);
-  }
-}

package/scss/inputs/select.scss

@@ -1,132 +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 '../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;
-  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);
-    }
-  }
-}
-
-@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/inputs/textarea.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.
-@import '../style/index';
-
-@mixin iui-textarea {
-  @include iui-input;
-  resize: vertical;
-  min-height: $iui-component-height;
-
-  &[disabled],
-  &[readonly] {
-    resize: none;
-  }
-}

package/scss/keyboard/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-keyboard {
-  @include iui-keyboard;
-}

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