@itwin/itwinui-css 0.63.0 → 1.0.0-dev.1

package/scss/user-icon/sizes.scss

@@ -1,22 +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';
-
-@mixin iui-user-icon-size($size: $iui-icons-xl, $font-size: $iui-font-size-leading) {
-  width: $size;
-  height: $size;
-
-  @if ($size == $iui-icons-xl) {
-    --_iui-user-icon-status-size: #{$iui-xs * 1.5};
-  } @else if ($size == $iui-icons-xxl) {
-    --_iui-user-icon-status-size: #{$iui-s};
-  } @else {
-    --_iui-user-icon-status-size: #{$iui-sm};
-  }
-
-  > .iui-initials {
-    line-height: $size;
-    font-size: $font-size;
-  }
-}

package/scss/user-icon/user-icon.scss

@@ -1,250 +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';
-
-@mixin iui-user-icon {
-  @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-sizing: border-box;
-    @include themed {
-      box-shadow: inset 0 0 0 $iui-xxs rgba(t(iui-color-foreground-body-rgb), t(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;
-    @include themed {
-      color: t(iui-color-foreground-accessory);
-    }
-  }
-
-  > .iui-icon {
-    display: inline-flex;
-    width: 50%;
-    height: 50%;
-    position: absolute;
-    @include themed {
-      fill: t(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%;
-    @include themed {
-      background-color: t(iui-color-background-1);
-    }
-  }
-
-  > .iui-status {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    right: -$iui-xxs;
-    bottom: -$iui-xxs;
-    width: 25%;
-    height: 25%;
-    border-radius: 50%;
-    @include themed {
-      border: $iui-xxs solid t(iui-color-background-1);
-      background-color: t(iui-color-background-5);
-    }
-
-    &::after {
-      content: '';
-      width: var(--_iui-user-icon-status-size, $iui-s);
-      height: var(--_iui-user-icon-status-size, $iui-s);
-    }
-
-    &.iui-online {
-      @include themed {
-        background-color: t(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>");
-        @include themed {
-          background-color: t(iui-color-foreground-accessory);
-        }
-      }
-    }
-
-    &.iui-away {
-      @include themed {
-        background-color: t(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>");
-        @include themed {
-          background-color: t(iui-color-foreground-accessory);
-        }
-      }
-    }
-
-    &.iui-busy {
-      @include themed {
-        background-color: t(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>");
-        @include themed {
-          background-color: t(iui-color-foreground-accessory);
-        }
-      }
-    }
-
-    &.iui-offline {
-      @include themed {
-        background-color: t(iui-color-background-1);
-        box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(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>");
-        @include themed {
-          background-color: t(iui-icons-color);
-        }
-      }
-    }
-  }
-
-  &.iui-user-icon-count {
-    > .iui-initials {
-      @include themed {
-        background-color: t(iui-color-background-3);
-        color: t(iui-text-color-muted);
-      }
-    }
-
-    &:focus {
-      outline: none;
-
-      > .iui-stroke {
-        @include themed {
-          box-shadow: t(iui-focus-box-shadow);
-        }
-      }
-    }
-
-    &:focus-visible {
-      outline: none;
-    }
-
-    &:focus:not(:focus-visible) {
-      > .iui-stroke {
-        @include themed {
-          box-shadow: inset 0 0 0 $iui-xxs rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-        }
-      }
-    }
-  }
-}
-
-@mixin iui-user-icon-list {
-  display: inline-flex;
-  flex-wrap: wrap;
-
-  @include iui-user-icon-margins;
-
-  &.iui-stacked {
-    .iui-user-icon:not(:first-child) {
-      margin-left: -$iui-xs;
-
-      .iui-initials {
-        @include themed {
-          box-shadow: 0 0 0 $iui-xs t(iui-color-background-1);
-        }
-      }
-
-      &.iui-small {
-        margin-left: -$iui-xxs;
-
-        .iui-initials {
-          @include themed {
-            box-shadow: 0 0 0 $iui-xxs t(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-user-icon {
-          transition: margin-left $iui-speed ease-out;
-        }
-      }
-
-      &:hover {
-        @include iui-user-icon-margins;
-      }
-    }
-  }
-}
-
-@mixin iui-user-icon-margins {
-  .iui-user-icon: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/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/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);
-    }
-  }
-}

package/src/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';