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

package/scss/avatar/avatar.scss

@@ -1,215 +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 '../utils/index';
-@import './avatar-sizes';
-
-@mixin iui-avatar {
-  @include iui-reset;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  margin: 0;
-  user-select: none;
-
-  > .iui-stroke {
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    border-radius: 50%;
-    box-shadow: inset 0 0 0 $iui-xxs rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-  }
-
-  > .iui-initials {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    border-radius: 50%;
-    font-style: normal;
-    font-weight: $iui-font-weight-semibold;
-    text-align: center;
-    text-decoration: none;
-    text-transform: uppercase;
-    background-color: $iui-color-dataviz-celery;
-    overflow: hidden;
-    color: var(--iui-color-foreground-accessory);
-  }
-
-  > .iui-icon {
-    display: inline-flex;
-    width: 50%;
-    height: 50%;
-    position: absolute;
-    fill: var(--iui-color-foreground-accessory);
-  }
-
-  > img {
-    display: block;
-    position: absolute;
-    object-fit: cover;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    border-width: 0;
-    border-radius: 50%;
-    background-color: var(--iui-color-background-1);
-  }
-
-  > .iui-status {
-    box-sizing: content-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    right: -$iui-xxs;
-    bottom: -$iui-xxs;
-    width: 25%;
-    height: 25%;
-    border-radius: 50%;
-    border: $iui-xxs solid var(--iui-color-background-1);
-    background-color: var(--iui-color-background-5);
-
-    &::after {
-      content: '';
-      width: var(--_iui-avatar-status-size, $iui-s);
-      height: var(--_iui-avatar-status-size, $iui-s);
-    }
-
-    &.iui-online {
-      background-color: var(--iui-color-background-positive);
-
-      &::after {
-        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
-        background-color: var(--iui-color-foreground-accessory);
-      }
-    }
-
-    &.iui-away {
-      background-color: var(--iui-color-background-warning);
-
-      &::after {
-        mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
-        background-color: var(--iui-color-foreground-accessory);
-      }
-    }
-
-    &.iui-busy {
-      background-color: var(--iui-color-background-negative);
-
-      &::after {
-        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
-        background-color: var(--iui-color-foreground-accessory);
-      }
-    }
-
-    &.iui-offline {
-      background-color: var(--iui-color-background-1);
-      box-shadow: inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
-
-      &::after {
-        mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
-        background-color: var(--iui-icons-color);
-      }
-    }
-  }
-
-  &.iui-avatar-count {
-    > .iui-initials {
-      background-color: var(--iui-color-background-3);
-      color: var(--iui-text-color-muted);
-    }
-
-    &:focus {
-      outline: none;
-
-      > .iui-stroke {
-        box-shadow: var(--iui-focus-box-shadow);
-      }
-    }
-
-    &:focus-visible {
-      outline: none;
-    }
-
-    &:focus:not(:focus-visible) {
-      > .iui-stroke {
-        box-shadow: inset 0 0 0 $iui-xxs rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-      }
-    }
-  }
-}
-
-@mixin iui-avatar-list {
-  display: inline-flex;
-  flex-wrap: wrap;
-
-  @include iui-avatar-margins;
-
-  &.iui-stacked {
-    .iui-avatar:not(:first-child) {
-      margin-left: -$iui-xs;
-
-      .iui-initials {
-        box-shadow: 0 0 0 $iui-xs var(--iui-color-background-1);
-      }
-
-      &.iui-small {
-        margin-left: -$iui-xxs;
-
-        .iui-initials {
-          box-shadow: 0 0 0 $iui-xxs var(--iui-color-background-1);
-        }
-      }
-
-      &.iui-large {
-        margin-left: -$iui-s;
-      }
-
-      &.iui-x-large {
-        margin-left: -$iui-sm;
-      }
-    }
-
-    &.iui-animated {
-      @media (prefers-reduced-motion: no-preference) {
-        .iui-avatar {
-          transition: margin-left $iui-speed ease-out;
-        }
-      }
-
-      &:hover {
-        @include iui-avatar-margins;
-      }
-    }
-  }
-}
-
-@mixin iui-avatar-margins {
-  .iui-avatar:not(:first-child) {
-    margin-left: $iui-xs;
-
-    &.iui-small {
-      margin-left: $iui-xxs;
-    }
-
-    &.iui-large {
-      margin-left: $iui-s;
-    }
-
-    &.iui-x-large {
-      margin-left: $iui-sm;
-    }
-  }
-}

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

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

package/scss/backdrop/backdrop.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 '../style/index';
-
-@mixin iui-backdrop {
-  z-index: 998;
-  isolation: isolate;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.4); // IE fallback
-  background-color: rgba(0, 0, 0, var(--iui-opacity-4));
-
-  &:not(.iui-backdrop-visible) {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  transition: visibility $iui-speed-instant linear, opacity $iui-speed-fast ease-out;
-  transition-delay: $iui-speed-fast, $iui-speed-instant;
-
-  &.iui-backdrop-visible {
-    transition-delay: $iui-speed-instant; // remove delay for entry animation
-  }
-}

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

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

package/scss/badge/badge.scss

@@ -1,34 +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 '../utils/index';
-
-$iui-badge-background-default: $iui-color-background-5--light;
-$iui-badge-background-positive: $iui-color-foreground-positive--dark;
-$iui-badge-background-negative: $iui-color-foreground-negative--dark;
-$iui-badge-background-warning: $iui-color-foreground-warning--dark;
-$iui-badge-background-primary: $iui-color-foreground-primary--dark;
-$iui-badge-horizontal-padding: $iui-xs * 1.5;
-
-$iui-badge-text-color: rgba($iui-color-foreground-body--light, $iui-opacity-3--light);
-
-@mixin iui-badge {
-  --iui-badge-background-color: #{$iui-badge-background-default};
-  --_iui-badge-text-color: #{$iui-badge-text-color};
-
-  @include iui-reset;
-  display: inline-block;
-  font-size: $iui-font-size-small;
-  padding: 0 $iui-badge-horizontal-padding;
-  margin: round($iui-baseline * 0.5) 0;
-  border-radius: $iui-border-radius;
-  background-color: var(--iui-badge-background-color);
-  color: var(--_iui-badge-text-color);
-  text-transform: uppercase;
-  user-select: none;
-  max-width: calc(20ch + $iui-badge-horizontal-padding * 2);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-weight: $iui-font-weight-semibold;
-}

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

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

package/scss/blockquote/blockquote.scss

@@ -1,26 +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 '../utils/index';
-
-@mixin iui-blockquote {
-  @include iui-reset;
-  display: block;
-  position: relative;
-  padding: $iui-baseline $iui-m;
-  margin: $iui-baseline 0;
-  text-align: justify;
-  box-shadow: $iui-elevation-2;
-  border-radius: $iui-border-radius;
-  background-color: var(--iui-color-background-1);
-  border-left: $iui-s solid var(--iui-color-foreground-primary);
-
-  > footer {
-    text-align: right;
-    color: var(--iui-text-color-muted);
-
-    > cite {
-      font-style: normal;
-    }
-  }
-}

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

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

package/scss/breadcrumbs/breadcrumbs.scss

@@ -1,119 +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 '../anchor/index';
-@import '../button/borderless';
-@import '../utils/index';
-
-@mixin iui-breadcrumbs($breadcrumbs-height: $iui-component-height) {
-  @include iui-reset;
-  display: flex;
-  align-items: center;
-  height: $breadcrumbs-height;
-}
-
-@mixin iui-breadcrumbs-list {
-  @include iui-reset;
-  display: flex;
-  align-items: center;
-  list-style-type: none;
-  user-select: none;
-  height: 100%;
-}
-
-@mixin iui-breadcrumbs-item {
-  display: flex;
-  align-items: center;
-  height: 100%;
-
-  > * {
-    max-width: 26ch;
-  }
-}
-
-@mixin iui-breadcrumbs-item-overrides {
-  > * {
-    padding: 0 $iui-s;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    &:not(.iui-button) {
-      color: var(--iui-text-color);
-    }
-  }
-
-  > :any-link {
-    @include iui-anchor;
-    box-sizing: border-box;
-    line-height: $iui-component-height;
-
-    &:focus {
-      outline-offset: -1px;
-    }
-  }
-
-  .iui-button {
-    &.iui-button {
-      @include iui-button-borderless;
-      border: none;
-    }
-
-    > span {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &:not([aria-current]) {
-      &,
-      &:hover,
-      &:active {
-        --_iui-button-text-color: var(--iui-color-foreground-primary);
-      }
-    }
-  }
-}
-
-@mixin iui-breadcrumbs-text {
-  padding: 0 $iui-s;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  line-height: $iui-component-height;
-
-  @at-root a#{&} {
-    @include iui-anchor;
-
-    &:focus {
-      outline-offset: -1px;
-    }
-  }
-}
-
-@mixin iui-breadcrumbs-button {
-  @include iui-button;
-  @include iui-button-borderless;
-  padding: 0;
-  border: none;
-  color: var(--iui-color-foreground-primary);
-
-  &[aria-current] {
-    color: var(--iui-text-color);
-  }
-}
-
-@mixin iui-breadcrumbs-separator {
-  display: flex;
-  margin: 0 $iui-xxs;
-
-  svg {
-    width: $iui-icons-small;
-    height: $iui-icons-small;
-    display: flex; // needed for vertical alignment of webcomponents
-    fill: var(--iui-icons-color);
-    @media (forced-colors: active) {
-      fill: CanvasText;
-    }
-  }
-}

package/scss/breadcrumbs/classes.scss

@@ -1,31 +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-breadcrumbs {
-  @include iui-breadcrumbs;
-}
-
-.iui-breadcrumbs-list {
-  @include iui-breadcrumbs-list;
-}
-
-.iui-breadcrumbs-item {
-  @include iui-breadcrumbs-item;
-}
-
-.iui-breadcrumbs-item-overrides {
-  @include iui-breadcrumbs-item-overrides;
-}
-
-.iui-breadcrumbs-text {
-  @include iui-breadcrumbs-text;
-}
-
-.iui-breadcrumbs-button {
-  @include iui-breadcrumbs-button;
-}
-
-.iui-breadcrumbs-separator {
-  @include iui-breadcrumbs-separator;
-}

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

package/scss/button/borderless.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';
-@import './button';
-
-@mixin iui-button-borderless {
-  --_iui-button-text-color: var(--iui-text-color);
-  --_iui-button-background-color: transparent;
-  --_iui-button-border-color: transparent;
-  --_iui-button-icon-margin-x: #{$iui-component-offset};
-  @include iui-button-size(medium, borderless);
-
-  &:where(:hover, :active) {
-    --_iui-button-text-color: var(--iui-color-foreground-body);
-    --_iui-button-background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-  }
-
-  &:where(:focus) {
-    outline-offset: -1px;
-    outline-width: 1px;
-  }
-
-  &:where([disabled], :disabled, [aria-disabled='true']) {
-    --_iui-button-text-color: var(--iui-text-color-placeholder);
-    --_iui-button-background-color: transparent;
-    --_iui-button-border-color: transparent;
-  }
-}
-
-@mixin iui-button-borderless-active {
-  --_iui-button-background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-
-  &:where([disabled], :disabled, [aria-disabled='true']) {
-    --_iui-button-background-color: rgba(var(--iui-color-foreground-body-rgb), 0.05);
-  }
-}

package/scss/button/button-group.scss

@@ -1,118 +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 for button group or input+button combo group.
-/// @arg $orientation must be one of: horizontal, vertical
-/// Note: Vertical button-group should be used for icon buttons only.
-@mixin iui-button-group($orientation: horizontal) {
-  display: inline-flex;
-  align-items: center;
-  isolation: isolate;
-  pointer-events: none;
-
-  @if $orientation != 'horizontal' {
-    flex-direction: column;
-    max-height: 100%;
-  }
-
-  $childZindexSelector: '.iui-input-container, .iui-button, .iui-input:where(:not(.iui-input-container .iui-input))';
-  $childBorderSelector: '.iui-input, .iui-button:where(:not([data-iui-variant="borderless"]))';
-  $disabledSelector: '&:disabled, &.iui-disabled, &[aria-disabled="true"]';
-
-  > * {
-    display: flex;
-
-    > * {
-      pointer-events: all;
-    }
-
-    #{$childZindexSelector} {
-      position: relative;
-
-      // Adds stripe to active button
-      @if $orientation == 'horizontal' {
-        --_iui-button-active-stripe-inset: #{$iui-xxs} #{$iui-xxs} calc(100% - #{$iui-xs});
-      } @else {
-        --_iui-button-active-stripe-inset: #{$iui-xxs} calc(100% - #{$iui-xs}) #{$iui-xxs} #{$iui-xxs};
-      }
-
-      &:hover {
-        z-index: 1;
-      }
-
-      #{$disabledSelector} {
-        z-index: -1;
-      }
-
-      &:focus,
-      &:focus-within {
-        &,
-        &:where([aria-disabled='true']) {
-          z-index: 2;
-        }
-      }
-    }
-
-    #{$childBorderSelector} {
-      // Reset border radius
-      border-radius: 0;
-
-      transition-duration: 0ms; // disable exit animation to avoid border flicker
-
-      &:hover,
-      &:focus {
-        transition-duration: $iui-speed-fast; // re-enable enter animation
-      }
-    }
-
-    // Add rounded corners to first and last items
-    &:first-child {
-      #{$childBorderSelector} {
-        border-top-left-radius: $iui-border-radius;
-
-        @if $orientation == 'horizontal' {
-          border-bottom-left-radius: $iui-border-radius;
-        } @else {
-          border-top-right-radius: $iui-border-radius;
-        }
-      }
-    }
-
-    &:last-child {
-      #{$childBorderSelector} {
-        border-bottom-right-radius: $iui-border-radius;
-
-        @if $orientation == 'horizontal' {
-          border-top-right-radius: $iui-border-radius;
-        } @else {
-          border-bottom-left-radius: $iui-border-radius;
-        }
-      }
-    }
-
-    // Use negative margin to make adjacent borders overlap
-    + * {
-      @if $orientation == 'horizontal' {
-        margin-left: -1px;
-      } @else {
-        margin-top: -1px;
-      }
-    }
-
-    // Add slight border between disabled items
-    &:not(:first-child) :not([data-iui-variant='borderless']) {
-      #{$disabledSelector} {
-        @if $orientation == 'horizontal' {
-          border-left-color: var(--iui-color-background-4);
-        } @else {
-          border-top-color: var(--iui-color-background-4);
-        }
-      }
-    }
-  }
-}
-
-@mixin iui-button-group-overflow-x {
-  width: 100%;
-}