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

package/css/wizard.css

@@ -1,190 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-.iui-wizard{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-}
-.iui-wizard > ol{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:flex;
-  justify-content:space-around;
-  align-items:flex-start;
-  width:100%;
-  margin-bottom:5.5px;
-}
-.iui-wizard.iui-long .iui-wizard-steps-label{
-  display:block;
-  font-size:18px;
-  text-align:center;
-}
-.iui-wizard.iui-long .iui-steps-count{
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  margin-right:8px;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-.iui-wizard.iui-workflow > ol{
-  align-items:center;
-}
-.iui-wizard.iui-workflow .iui-wizard-step .iui-wizard-circle{
-  padding-left:16px;
-  padding-right:16px;
-  height:100%;
-  width:auto;
-  border-radius:0;
-  font-weight:400;
-  text-align:center;
-  background-color:#53a21a;
-  border-color:#53a21a;
-  color:white;
-  background-color:var(--iui-color-background-positive);
-  border-color:var(--iui-color-background-positive);
-  color:var(--iui-color-foreground-accessory);
-}
-.iui-wizard.iui-workflow .iui-wizard-step:first-of-type .iui-wizard-circle, .iui-wizard.iui-workflow .iui-wizard-step:last-of-type .iui-wizard-circle{
-  border-radius:12px;
-  background-color:white;
-  border-color:#53a21a;
-  color:#53a21a;
-  background-color:var(--iui-color-background-1);
-  border-color:var(--iui-color-foreground-positive);
-  color:var(--iui-color-foreground-positive);
-}
-.iui-wizard.iui-workflow .iui-wizard-track-content::before,
-.iui-wizard.iui-workflow .iui-wizard-track-content::after{
-  background-color:#53a21a;
-  background-color:var(--iui-color-foreground-positive);
-}
-
-.iui-wizard-step{
-  flex:1;
-  align-items:center;
-  display:flex;
-  flex-direction:column;
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-size:12px;
-  font-weight:400;
-  line-height:22px;
-  color:#53a21a;
-  color:var(--iui-color-background-positive);
-}
-.iui-wizard-step .iui-wizard-circle{
-  align-items:center;
-  border-radius:50%;
-  display:flex;
-  width:24px;
-  height:24px;
-  justify-content:center;
-  overflow-wrap:break-word;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  transition:background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
-  border:1px solid #53a21a;
-  background-color:white;
-  color:#53a21a;
-  border:1px solid var(--iui-color-foreground-positive);
-  background-color:var(--iui-color-background-1);
-  color:var(--iui-color-foreground-positive);
-}
-.iui-wizard-step.iui-current{
-  font-weight:600;
-}
-.iui-wizard-step.iui-current .iui-wizard-step-name{
-  color:#53a21a;
-  color:var(--iui-color-foreground-positive);
-}
-.iui-wizard-step.iui-current .iui-wizard-circle{
-  color:white;
-  border-color:#53a21a;
-  background-color:#53a21a;
-  color:var(--iui-color-foreground-accessory);
-  border-color:var(--iui-color-background-positive);
-  background-color:var(--iui-color-background-positive);
-}
-.iui-wizard-step.iui-current .iui-wizard-track-content::after{
-  background-color:#c7ccd1;
-  background-color:var(--iui-color-background-5);
-}
-.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-circle{
-  border:1px solid #c7ccd1;
-  background-color:white;
-  color:rgba(0, 0, 0, 0.4);
-  border:1px solid var(--iui-color-background-border);
-  background-color:var(--iui-color-background-1);
-  color:var(--iui-text-color-muted);
-}
-.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-step-name{
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-track-content::before, .iui-wizard-step.iui-current ~ .iui-wizard-step:not(:last-of-type) .iui-wizard-track-content::after{
-  background-color:#c7ccd1;
-  background-color:var(--iui-color-background-5);
-}
-.iui-wizard-step.iui-clickable .iui-wizard-circle{
-  cursor:pointer;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-wizard-step.iui-clickable .iui-wizard-circle{
-    transition:background-color 0.2s ease-out;
-  }
-}
-.iui-wizard-step.iui-clickable .iui-wizard-circle:hover{
-  color:white;
-  border:1px solid #53a21a;
-  background-color:#53a21a;
-  color:var(--iui-color-foreground-accessory);
-  border:1px solid var(--iui-color-background-positive);
-  background-color:var(--iui-color-background-positive);
-}
-.iui-wizard-step.iui-clickable:focus{
-  outline:0;
-}
-.iui-wizard-step.iui-clickable:focus .iui-wizard-circle{
-  outline:2px solid #53a21a;
-  outline:2px solid var(--iui-color-foreground-positive);
-  outline-offset:-1px;
-}
-.iui-wizard-step.iui-clickable:focus:not(:focus-visible) .iui-wizard-circle{
-  outline:none;
-}
-.iui-wizard-step:first-of-type .iui-wizard-track-content::before, .iui-wizard-step:last-of-type .iui-wizard-track-content::after{
-  background-color:transparent;
-}
-
-.iui-wizard-track-content{
-  display:flex;
-  align-items:center;
-  width:100%;
-}
-.iui-wizard-track-content::before, .iui-wizard-track-content::after{
-  content:"";
-  height:2px;
-  flex:1 2 auto;
-  background-color:#53a21a;
-  background-color:var(--iui-color-foreground-positive);
-}
-
-.iui-wizard-step-name{
-  text-align:center;
-  -webkit-user-select:all;
-     -moz-user-select:all;
-          user-select:all;
-  color:#53a21a;
-  color:var(--iui-color-foreground-positive);
-}

package/scss/alert/alert.scss

@@ -1,83 +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 '../icon/index';
-@import '../text/index';
-
-@mixin iui-alert {
-  @include iui-reset;
-  border-radius: $iui-border-radius;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  @include themed {
-    border: 1px solid t(iui-color-background-5);
-    color: t(iui-text-color);
-    background-color: t(iui-color-background-1);
-  }
-
-  &-icon {
-    @include iui-icons-default;
-    flex-shrink: 0;
-    margin-left: $iui-m;
-  }
-
-  &-message {
-    margin: $iui-baseline $iui-m;
-  }
-
-  &-link {
-    @include iui-anchor-underline('on-initial');
-    border-radius: $iui-border-radius;
-    cursor: pointer;
-    margin-left: $iui-s;
-    user-select: none;
-    white-space: nowrap;
-  }
-
-  > .iui-button {
-    margin-left: auto;
-    margin-right: $iui-s;
-  }
-
-  &.iui-sticky {
-    border-radius: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-  }
-}
-
-/// Modifier mixin to categorize the alert
-/// @arg $statusColor Can be one of: positive, negative, warning, primary
-/// @arg $rootSelector Selector of the root alert element. Defaults to .iui-alert
-@mixin iui-alert-category($statusColor, $rootSelector: '.iui-alert') {
-  @include themed {
-    background: linear-gradient(
-      rgba(t(iui-color-foreground-#{$statusColor}-rgb), t(iui-opacity-6)),
-      rgba(t(iui-color-foreground-#{$statusColor}-rgb), t(iui-opacity-6))
-    ),
-      linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
-    border-color: t(iui-color-foreground-#{$statusColor});
-  }
-
-  #{$rootSelector}-icon {
-    @include themed {
-      fill: t(iui-icons-color-#{$statusColor});
-    }
-  }
-
-  #{$rootSelector}-message {
-    @include iui-text-selection($statusColor);
-  }
-
-  #{$rootSelector}-link {
-    @include iui-anchor-status($statusColor);
-  }
-
-  > .iui-button {
-    outline-color: var(--iui-color-foreground-#{$statusColor});
-  }
-}

package/scss/alert/classes.scss

@@ -1,13 +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-alert {
-  @include iui-alert;
-
-  @each $status in positive, negative, warning, informational {
-    &.iui-#{$status} {
-      @include iui-alert-category($statusColor: if($status == informational, 'primary', $status));
-    }
-  }
-}

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

package/scss/anchor/anchor.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/anchor'; // Reimports anchor from global styles

package/scss/anchor/classes.scss

@@ -1,11 +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-anchor {
-  @include iui-anchor;
-
-  &-external {
-    @include iui-anchor-external;
-  }
-}

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

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,32 +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-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-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-xs * 1.5;
-  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: 20ch;
-  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,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 '../style/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;
-
-  @include themed {
-    background-color: t(iui-color-background-1);
-    border-left: $iui-s solid t(iui-color-foreground-primary);
-  }
-
-  > footer {
-    text-align: right;
-
-    @include themed {
-      color: t(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,124 +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 '../icon/index';
-
-@mixin iui-breadcrumbs {
-  @include iui-reset;
-  display: flex;
-  align-items: center;
-}
-
-@mixin iui-breadcrumbs-list {
-  @include iui-reset;
-  display: flex;
-  align-items: center;
-  list-style-type: none;
-  user-select: none;
-}
-
-@mixin iui-breadcrumbs-item {
-  display: flex;
-  align-items: center;
-  line-height: $iui-component-height;
-  height: $iui-component-height;
-
-  > * {
-    max-width: 26ch;
-  }
-}
-
-@mixin iui-breadcrumbs-item-overrides {
-  > * {
-    padding: 0 $iui-s;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    &:not(.iui-button) {
-      @include themed {
-        color: t(iui-text-color);
-      }
-    }
-  }
-
-  > :any-link {
-    @include iui-anchor;
-
-    &:focus {
-      outline-offset: -1px;
-    }
-  }
-
-  .iui-button {
-    &.iui-button {
-      @include iui-button-borderless;
-      @include iui-focus;
-      border: none;
-    }
-
-    &-label {
-      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;
-
-  @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;
-  @include themed {
-    color: t(iui-color-foreground-primary);
-  }
-
-  &[aria-current] {
-    @include themed {
-      color: t(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
-    @include themed {
-      fill: t(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,48 +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';
-@import './disabled';
-@import './button-icon';
-
-@mixin iui-button-borderless {
-  border-color: transparent;
-  background-color: transparent;
-
-  > .iui-button-icon:only-child {
-    margin-left: $iui-component-offset;
-    margin-right: $iui-component-offset;
-  }
-  @include iui-button-size(medium, borderless);
-
-  &:hover {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-      border-color: transparent;
-    }
-  }
-
-  &.iui-active {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-      color: t(iui-color-foreground-primary);
-    }
-    border-color: transparent;
-  }
-
-  &[disabled],
-  &:disabled {
-    @include iui-button-disabled;
-
-    @include themed {
-      background-color: transparent;
-      border-color: transparent;
-    }
-
-    &.iui-active {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-body-rgb), 0.05);
-      }
-    }
-  }
-}