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

package/scss/utils/input-container/input-container.scss

@@ -1,285 +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 '../mixins';
-
-/// 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 {
-    > .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;
-  }
-
-  .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;
-
-    &.iui-with-message {
-      grid-template:
-        'label inputs inputs'
-        '. icon message' / auto auto 1fr;
-    }
-
-    > .iui-input-group {
-      display: flex;
-      gap: $iui-m;
-
-      &: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;
-      color: var(--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;
-
-  &.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;
-  color: var(--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;
-  fill: var(--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 {
-  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 {
-      fill: var(--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 {
-      fill: var(--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} {
-    fill: var(--iui-color-foreground-#{$status});
-  }
-
-  #{$textSelector} {
-    color: var(--iui-color-foreground-#{$status});
-
-    a {
-      text-decoration: underline;
-      color: var(--iui-color-foreground-#{$status});
-
-      &:hover {
-        text-decoration: none;
-        color: var(--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;
-    }
-
-    border-bottom: $iui-xxs solid var(--iui-color-foreground-#{$status});
-
-    &:focus {
-      border-bottom: $iui-xxs solid var(--iui-color-foreground-#{$status});
-      outline: 2px solid var(--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;
-      background-color: var(--iui-color-foreground-#{$status});
-    }
-  }
-}

package/scss/utils/mixins.scss

@@ -1,171 +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/color';
-@import '../style/speed';
-
-@mixin focus-visible {
-  &:focus-visible {
-    @content;
-  }
-
-  @supports #{'not selector(*:focus-visible)'} {
-    &:focus {
-      @content;
-    }
-  }
-}
-
-@mixin iui-focus($color: var(--iui-color-foreground-primary), $offset: -1px, $thickness: 1px) {
-  @include focus-visible {
-    outline: $thickness solid $color;
-    outline-offset: $offset;
-  }
-}
-
-@mixin iui-reset {
-  margin: 0;
-  padding: 0;
-  border: none;
-  vertical-align: baseline;
-}
-
-@mixin iui-text-selection($status: primary) {
-  &::selection,
-  *::selection {
-    background-color: rgba(var(--iui-color-foreground-#{$status}-rgb), var(--iui-opacity-5));
-  }
-}
-
-@mixin iui-scrollbar {
-  scrollbar-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)) transparent;
-  scrollbar-width: thin;
-
-  &::-webkit-scrollbar {
-    width: $iui-s;
-    height: $iui-s;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-    border-radius: $iui-s * 0.5;
-
-    &:hover {
-      background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
-    }
-  }
-
-  &::-webkit-scrollbar-track,
-  &::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-}
-
-@mixin iui-line-clamp($lines: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box; /* stylelint-disable-line */
-  -webkit-line-clamp: $lines;
-  -webkit-box-orient: vertical; /* stylelint-disable-line */
-}
-
-@mixin iui-blur($opacity: 4) {
-  // Blur fallback
-  background-color: rgba(0, 0, 0, var(--iui-opacity-#{$opacity - 1}));
-
-  // With blur
-  @supports (backdrop-filter: $iui-blur-filter) {
-    background-color: rgba(0, 0, 0, var(--iui-opacity-#{$opacity}));
-    backdrop-filter: $iui-blur-filter;
-  }
-}
-
-/// Simulates display: none but keeps the element in DOM tree
-@mixin iui-display-none {
-  opacity: 0;
-  height: 0.1px;
-  width: 0.1px;
-  margin: 0;
-  padding: 0;
-}
-
-/// Visually hides an element but keeps it accessible to screen readers.
-/// Because it applies some potentially invasive styles, use this mixin on a wrapper element for best results.
-/// If it contains a focusable element, make sure to revert/exclude these styles.
-@mixin visually-hidden {
-  clip-path: inset(50%);
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  height: 1px;
-  width: 1px;
-  padding: 0;
-  margin: -1px;
-  border-width: 0;
-}
-
-/// Reverts visually-hidden styles, making it visible again.
-@mixin visually-hidden-revert {
-  clip-path: revert;
-  overflow: visible;
-  position: static;
-  white-space: normal;
-  height: auto;
-  width: auto;
-  padding: 0;
-  margin: 0;
-}
-
-/// Classes for react-transition-group
-/// Used for expand/collapse transitions. Needs height/width to be set in JS.
-@mixin iui-transition-group {
-  $transition-rule: opacity $iui-speed-fast ease-out, width $iui-speed-fast ease-out, height $iui-speed-fast ease-out;
-
-  &.iui-enter {
-    opacity: 0;
-  }
-
-  &.iui-enter-active {
-    opacity: 1;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: $transition-rule;
-    }
-  }
-
-  &.iui-exit {
-    opacity: 1;
-  }
-
-  &.iui-exit-active {
-    opacity: 0;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: $transition-rule;
-    }
-  }
-}
-
-/// Adds the ability to toggle vertical scroll snapping by setting `.iui-scroll-snapping` as a modifier (if used inside a class) or at root level.
-/// @arg $selector - selector to apply `scroll-snap-align: start` on. Defaults to '> *'
-@mixin iui-scroll-snapping($selector: '> *') {
-  #{if(&, '&.iui-scroll-snapping', '.iui-scroll-snapping')} {
-    scroll-snap-type: y mandatory;
-
-    #{$selector} {
-      scroll-snap-align: start none;
-    }
-  }
-}
-
-@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/utils/notification-marker/classes.scss

@@ -1,9 +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';
-
-@each $status in primary, positive, warning, negative, accessory {
-  .iui-notification-#{$status} {
-    @include iui-notification-marker($status: $status);
-  }
-}

package/scss/utils/notification-marker/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 './notification-marker';

package/scss/utils/notification-marker/notification-marker.scss

@@ -1,55 +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';
-
-$iui-notification-marker-border-width: $iui-xxs;
-
-@mixin iui-notification-marker($status: primary) {
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: $iui-s + $iui-notification-marker-border-width * 2;
-    height: $iui-s + $iui-notification-marker-border-width * 2;
-    top: $iui-sm * -0.5;
-    right: $iui-sm * -0.5;
-    border-radius: 100%;
-    background-color: var(--iui-color-foreground-#{$status});
-    border: $iui-notification-marker-border-width solid var(--iui-color-background-1);
-    @media (prefers-reduced-motion: no-preference) {
-      transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out;
-    }
-  }
-
-  &.iui-urgent::before {
-    @media (prefers-reduced-motion: no-preference) {
-      animation: pulse-#{$status} 2s infinite;
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @keyframes pulse-#{$status} {
-      0% {
-        box-shadow: 0 0 0 0 rgba(var(--iui-color-foreground-#{$status}-rgb), var(--iui-opacity-1));
-      }
-
-      70% {
-        box-shadow: 0 0 0 7px rgba(var(--iui-color-foreground-#{$status}-rgb), 0);
-      }
-
-      100% {
-        box-shadow: 0 0 0 0 rgba(var(--iui-color-foreground-#{$status}-rgb), 0);
-      }
-    }
-  }
-}
-
-@mixin iui-notification-marker-hover {
-  .iui-notification-primary::before,
-  .iui-notification-positive::before,
-  .iui-notification-warning::before,
-  .iui-notification-negative::before {
-    border-color: var(--iui-color-background-1-overlay);
-  }
-}

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

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

package/scss/utils/popover/popover.scss

@@ -1,21 +0,0 @@
-/* stylelint-disable selector-class-pattern */
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-
-// tippy.js helper class to hide Popover when it is scrolled out of view
-@mixin iui-popover {
-  &.tippy-box {
-    &[data-reference-hidden] {
-      visibility: hidden;
-      pointer-events: none;
-    }
-
-    // Resets tippy.js default stylings that interfere with our own
-    all: revert;
-  }
-
-  // Resets tippy.js default stylings that interfere with our own
-  .tippy-content {
-    all: revert;
-  }
-}

package/scss/variables.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 './style/index';

package/scss/workflow-diagram/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-workflow-diagram {
-  @include iui-workflow-diagram;
-}
-
-.iui-workflow-diagram-step {
-  @include iui-workflow-diagram-step;
-}
-
-.iui-workflow-diagram-content {
-  @include iui-workflow-diagram-content;
-}

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

package/scss/workflow-diagram/workflow-diagram.scss

@@ -1,64 +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 '../stepper/index';
-
-@mixin iui-workflow-diagram {
-  @include iui-stepper-list;
-  align-items: center;
-}
-
-@mixin iui-workflow-diagram-step {
-  --_iui-workflow-diagram-circle-background-color: var(--iui-color-background-positive);
-  --_iui-workflow-diagram-circle-border-color: var(--iui-color-background-positive);
-  --_iui-workflow-diagram-circle-border-radius: 0;
-  --_iui-workflow-diagram-circle-text-color: var(--iui-color-foreground-accessory);
-  --_iui-workflow-diagram-track-before-color: var(--iui-color-foreground-positive);
-  --_iui-workflow-diagram-track-after-color: var(--iui-color-foreground-positive);
-
-  flex: 1;
-  align-items: center;
-  display: flex;
-  @include iui-text(small);
-  color: var(--_iui-workflow-diagram-circle-text-color);
-
-  &:first-of-type,
-  &:last-of-type {
-    --_iui-workflow-diagram-circle-background-color: var(--iui-color-background-1);
-    --_iui-workflow-diagram-circle-border-color: var(--iui-color-foreground-positive);
-    --_iui-workflow-diagram-circle-border-radius: #{$iui-sm};
-    --_iui-workflow-diagram-circle-text-color: var(--iui-color-foreground-positive);
-  }
-
-  &::before,
-  &::after {
-    content: '';
-    height: $iui-xxs;
-    flex: 1 2 auto;
-  }
-
-  &::before {
-    background-color: var(--_iui-workflow-diagram-track-before-color);
-  }
-
-  &::after {
-    background-color: var(--_iui-workflow-diagram-track-after-color);
-  }
-
-  &:first-of-type {
-    --_iui-workflow-diagram-track-before-color: transparent;
-  }
-
-  &:last-of-type {
-    --_iui-workflow-diagram-track-after-color: transparent;
-  }
-}
-
-@mixin iui-workflow-diagram-content {
-  padding: 0 $iui-m;
-  font-weight: $iui-font-weight-normal;
-  text-align: center;
-  background-color: var(--_iui-workflow-diagram-circle-background-color);
-  border: 1px solid var(--_iui-workflow-diagram-circle-border-color);
-  border-radius: var(--_iui-workflow-diagram-circle-border-radius);
-}

package/src/index.scss

@@ -1,50 +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 './avatar/index';
-@import './badge/index';
-@import './backdrop/index';
-@import './blockquote/index';
-@import './breadcrumbs/index';
-@import './button/index';
-@import './carousel/index';
-@import './checkbox/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 './input/index';
-@import './keyboard/index';
-@import './location-marker/index';
-@import './menu/index';
-@import './non-ideal-state/index';
-@import './progress-indicator/index';
-@import './radio/index';
-@import './radio-tile/index';
-@import './select/index';
-@import './side-navigation/index';
-@import './skip-to-content/index';
-@import './slider/index';
-@import './stepper/index';
-@import './surface/index';
-@import './table/index';
-@import './tabs/index';
-@import './tag/index';
-@import './text/index';
-@import './textarea/index';
-@import './tile/index';
-@import './time-picker/index';
-@import './toast/index';
-@import './toggle-switch/index';
-@import './tooltip/index';
-@import './tree/index';
-@import './utils/index';
-@import './workflow-diagram/index';