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

package/scss/tabs/default.scss

@@ -1,89 +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 './tabs';
-
-@mixin iui-tabs-default {
-  @include iui-tab-not-animated;
-
-  .iui-tab {
-    padding: $iui-xs $iui-m;
-    background-color: var(--iui-color-background-2);
-    border: 1px solid var(--iui-color-background-5);
-
-    &::after {
-      top: 0;
-      left: 0;
-    }
-
-    &:hover {
-      background-color: var(--iui-color-background-1);
-    }
-
-    &.iui-active {
-      background-color: var(--iui-color-background-1);
-    }
-
-    &[disabled] {
-      background-color: var(--iui-color-background-3);
-    }
-
-    &:focus {
-      outline-width: 2px;
-      outline-offset: -2px;
-    }
-  }
-
-  @at-root {
-    .iui-horizontal & {
-      .iui-tab.iui-active {
-        border-bottom-color: transparent;
-      }
-
-      :not(:first-child) .iui-tab {
-        border-left: none;
-      }
-
-      ~ .iui-tabs-content {
-        margin-top: -1px;
-      }
-    }
-  }
-
-  @at-root {
-    .iui-vertical & {
-      .iui-tab.iui-active {
-        border-right-color: transparent;
-      }
-
-      :not(:first-child) .iui-tab {
-        border-top: none;
-      }
-
-      ~ .iui-tabs-content {
-        margin-left: -1px;
-      }
-    }
-  }
-
-  &.iui-large {
-    .iui-tab {
-      min-height: $iui-component-height-large;
-    }
-
-    .iui-tab-description {
-      display: -webkit-box; /* stylelint-disable-line */
-    }
-  }
-
-  &.iui-green .iui-tab::after {
-    background-color: var(--iui-color-foreground-positive);
-  }
-
-  ~ .iui-tabs-content {
-    padding-left: $iui-m;
-    padding-right: $iui-m;
-    background-color: var(--iui-color-background-1);
-    border: 1px solid var(--iui-color-background-5);
-  }
-}

package/scss/tabs/index.scss

@@ -1,6 +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 './tabs';
-@import './default';
-@import './borderless';
-@import './pill';

package/scss/tabs/pill.scss

@@ -1,38 +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 './tabs';
-
-@mixin iui-tabs-pill {
-  justify-content: space-evenly;
-  gap: $iui-xxs;
-
-  > li {
-    flex: 1 1 0;
-  }
-
-  &.iui-green .iui-tab:hover {
-    background-color: rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
-  }
-
-  .iui-tab {
-    padding: $iui-xs;
-    background-color: transparent;
-    width: 100%;
-    justify-content: center;
-    border-radius: $iui-border-radius;
-
-    &::after {
-      bottom: 0;
-      left: 0;
-    }
-
-    &:hover {
-      background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-    }
-
-    &[disabled]:hover {
-      background-color: transparent;
-    }
-  }
-}

package/scss/tabs/tabs.scss

@@ -1,192 +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-tabs {
-  @include iui-reset;
-  position: relative;
-  list-style: none;
-  user-select: none;
-
-  .iui-tab {
-    @include iui-reset;
-    font-family: inherit;
-    position: relative;
-    display: flex;
-    align-items: center;
-    font-size: $iui-font-size;
-    min-height: $iui-component-height;
-    height: 100%;
-    cursor: pointer;
-    color: var(--iui-text-color);
-    transition: background-color $iui-speed-fast ease-out;
-
-    &.iui-active {
-      color: var(--iui-color-foreground-primary);
-
-      .iui-tab-icon {
-        fill: var(--iui-icons-color-primary);
-      }
-
-      .iui-tab-description {
-        opacity: var(--iui-opacity-1);
-      }
-    }
-
-    &[disabled] {
-      cursor: not-allowed;
-      color: var(--iui-text-color-muted);
-
-      .iui-tab-icon {
-        fill: var(--iui-icons-color-actionable-disabled);
-      }
-    }
-
-    @include iui-focus;
-  }
-
-  .iui-tab-icon {
-    width: $iui-icons-default;
-    height: $iui-icons-default;
-    flex-shrink: 0;
-    fill: var(--iui-icons-color-actionable);
-    transition: fill $iui-speed-fast ease-out;
-
-    + .iui-tab-label {
-      margin-left: $iui-s;
-    }
-  }
-
-  .iui-tab-description {
-    display: none;
-    font-size: $iui-font-size-small;
-    opacity: var(--iui-opacity-3);
-  }
-
-  &.iui-green .iui-tab {
-    &:focus {
-      outline-color: var(--iui-color-foreground-positive);
-    }
-
-    &.iui-active {
-      color: var(--iui-color-foreground-positive);
-
-      .iui-tab-icon {
-        fill: var(--iui-icons-color-positive);
-      }
-    }
-  }
-
-  ~ .iui-tabs-content {
-    padding-top: $iui-baseline;
-    padding-bottom: $iui-baseline;
-  }
-}
-
-@mixin iui-tab-label {
-  text-align: left;
-  max-width: 60ch;
-
-  > * {
-    @include iui-line-clamp(3);
-  }
-}
-
-@mixin iui-tabs-horizontal {
-  flex-direction: column;
-
-  .iui-tabs {
-    display: flex;
-  }
-
-  .iui-tab {
-    &::after {
-      width: 100%;
-      height: 0;
-    }
-
-    &.iui-active::after {
-      height: $iui-xxs;
-    }
-  }
-}
-
-@mixin iui-tabs-vertical {
-  .iui-tabs {
-    li,
-    .iui-tab {
-      width: 100%;
-      white-space: nowrap;
-    }
-
-    ~ .iui-tabs-content {
-      flex-grow: 1;
-    }
-  }
-
-  .iui-tab {
-    &::after {
-      width: 0;
-      height: 100%;
-    }
-
-    &.iui-active::after {
-      width: $iui-xxs;
-    }
-  }
-}
-
-@mixin iui-tab-not-animated {
-  .iui-tab::after {
-    content: '';
-    position: absolute;
-    background-color: var(--iui-color-foreground-primary);
-  }
-
-  .iui-active::after {
-    @media (prefers-reduced-motion: no-preference) {
-      transition: width $iui-speed-fast ease, height $iui-speed-fast ease;
-    }
-  }
-
-  &.iui-green .iui-tab::after {
-    background-color: var(--iui-color-foreground-positive);
-  }
-}
-
-@mixin iui-tab-animated {
-  &::after {
-    position: absolute;
-    content: ' ';
-    background-color: var(--iui-color-foreground-primary);
-  }
-
-  &.iui-green::after {
-    background-color: var(--iui-color-foreground-positive);
-  }
-
-  @at-root {
-    .iui-horizontal &::after {
-      top: calc(100% - #{$iui-xxs});
-      height: $iui-xxs;
-      left: var(--stripe-left);
-      width: var(--stripe-width);
-      @media (prefers-reduced-motion: no-preference) {
-        transition: width $iui-speed-fast ease-out, left $iui-speed-fast ease-out;
-      }
-    }
-  }
-
-  @at-root {
-    .iui-vertical &::after {
-      left: calc(100% - #{$iui-xxs});
-      width: $iui-xxs;
-      top: var(--stripe-top);
-      height: var(--stripe-height);
-      @media (prefers-reduced-motion: no-preference) {
-        transition: top $iui-speed-fast ease-out;
-      }
-    }
-  }
-}

package/scss/tag/classes.scss

@@ -1,30 +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 './tag';
-@import '../anchor/index';
-@import '../utils/index';
-
-.iui-tag {
-  @include iui-tag;
-}
-
-.iui-tag-basic {
-  @include iui-tag-basic;
-}
-
-.iui-tag-label {
-  @include iui-tag-label;
-}
-
-.iui-tag-button {
-  @include iui-tag-button;
-}
-
-a.iui-tag-basic {
-  @include iui-anchor;
-  @include iui-focus($offset: 1px);
-}
-
-.iui-tag-container {
-  @include iui-tag-container;
-}

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

package/scss/tag/tag.scss

@@ -1,89 +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 '../button/index';
-@import '../text/mixins';
-
-@mixin iui-tag-base {
-  user-select: all;
-  text-transform: lowercase;
-  display: inline-flex;
-}
-
-@mixin iui-tag-basic {
-  @include iui-tag-base;
-
-  &:not(a) {
-    color: var(--iui-text-color-muted);
-  }
-}
-
-@mixin iui-tag {
-  @include iui-tag-base;
-  height: $iui-baseline * 3;
-  margin-top: $iui-component-offset;
-  margin-bottom: $iui-component-offset;
-  border-radius: $iui-border-radius-round;
-  padding: 0 $iui-xxs;
-  align-items: center;
-  transition: border-color $iui-speed-fast ease-out;
-  font-size: $iui-font-size;
-  text-transform: none;
-  cursor: default;
-  -webkit-tap-highlight-color: transparent;
-  border: 1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  background-color: var(--iui-color-background-1);
-  color: var(--iui-text-color);
-
-  &:hover {
-    border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
-  }
-}
-
-@mixin iui-tag-label {
-  @include iui-text;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  margin: 0 $iui-xs 0 $iui-s;
-
-  &:only-child {
-    margin: 0 $iui-s;
-  }
-}
-
-@mixin iui-tag-button {
-  border-radius: 50%;
-}
-
-@mixin iui-tag-container {
-  color: var(--iui-text-color-muted);
-
-  > a.iui-tag-basic {
-    margin: $iui-xxs;
-  }
-
-  > *:not(last-child) {
-    margin-right: $iui-xs;
-  }
-
-  > .iui-tag-basic:not(:last-child)::after {
-    content: ',';
-  }
-
-  &.iui-truncate {
-    @include iui-line-clamp(1);
-  }
-
-  &.iui-scroll {
-    white-space: nowrap;
-    overflow-x: scroll;
-  }
-
-  &.iui-visible {
-    border-radius: $iui-border-radius;
-    padding: $iui-component-offset $iui-sm;
-    background-color: var(--iui-color-background-3);
-  }
-}

package/scss/text/classes.scss

@@ -1,40 +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';
-@import './mixins';
-
-.iui-text-headline {
-  @include iui-text(headline);
-}
-
-.iui-text-title {
-  @include iui-text(title);
-}
-
-.iui-text-subheading {
-  @include iui-text(subheading);
-}
-
-.iui-text-leading {
-  @include iui-text(leading);
-}
-
-.iui-text-block {
-  @include iui-text(body);
-}
-
-.iui-text-small {
-  @include iui-text(small);
-}
-
-.iui-text-muted {
-  @include iui-text-muted;
-}
-
-.iui-skeleton {
-  @include iui-text-skeleton;
-}
-
-.iui-text-spacing {
-  @include iui-text-block-spacing;
-}

package/scss/text/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 './mixins';
-@import './muted';
-@import './skeleton';

package/scss/text/mixins.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';
-@import '../utils/index';
-
-@mixin iui-text-block-spacing {
-  padding: 0;
-  margin: 0 0 $iui-line-height;
-}
-
-@mixin iui-text($type: body) {
-  @include iui-reset;
-
-  $sizes: (
-    headline: $iui-font-size-headline,
-    title: $iui-font-size-title,
-    subheading: $iui-font-size-subheading,
-    leading: $iui-font-size-leading,
-    body: $iui-font-size,
-    small: $iui-font-size-small,
-  );
-
-  $weights: (
-    headline: $iui-font-weight-light,
-    title: $iui-font-weight-light,
-    subheading: $iui-font-weight-normal,
-    leading: $iui-font-weight-normal,
-    body: $iui-font-weight-normal,
-    small: $iui-font-weight-normal,
-  );
-  $line-heights: (
-    headline: 2 * $iui-line-height,
-    title: 1.5 * $iui-line-height,
-    subheading: 1.5 * $iui-line-height,
-    leading: $iui-line-height,
-    body: $iui-line-height,
-    small: $iui-line-height,
-  );
-  $type: if(map-has-key($sizes, $type), $type, body);
-  font-size: map-get($sizes, $type);
-  font-weight: map-get($weights, $type);
-  line-height: map-get($line-heights, $type);
-}

package/scss/text/muted.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 '../style/theme';
-
-@mixin iui-text-muted {
-  color: var(--iui-text-color-muted);
-}

package/scss/text/skeleton.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-text-skeleton {
-  display: inline-block;
-  user-select: none;
-  color: transparent;
-  border-radius: $iui-border-radius;
-  cursor: progress;
-  background: linear-gradient(
-    292deg,
-    var(--iui-text-color-muted),
-    var(--iui-text-color-muted),
-    var(--iui-text-color-placeholder),
-    var(--iui-text-color-muted),
-    var(--iui-text-color-muted)
-  );
-  background-size: 200% 100%;
-
-  @media (forced-colors: active) {
-    forced-color-adjust: none;
-    background: linear-gradient(292deg, CanvasText, CanvasText, Canvas, CanvasText, CanvasText);
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    animation: skeleton-shimmer $iui-speed-slow linear infinite;
-
-    @keyframes skeleton-shimmer {
-      0% {
-        background-position: 200% 50%;
-      }
-
-      50% {
-        background-position: 100% 50%;
-      }
-
-      100% {
-        background-position: 0% 50%;
-      }
-    }
-  }
-}

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

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

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

package/scss/tile/classes.scss

@@ -1,51 +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-tile {
-  @include iui-tile;
-
-  &.iui-positive {
-    @include iui-tile-status(positive);
-  }
-
-  &.iui-warning {
-    @include iui-tile-status(warning);
-  }
-
-  &.iui-negative {
-    @include iui-tile-status(negative);
-  }
-}
-
-.iui-tile-thumbnail-type-indicator {
-  @include iui-tile-thumbnail-button(type-indicator);
-}
-
-.iui-tile-thumbnail-quick-action {
-  @include iui-tile-thumbnail-button(quick-action);
-}
-
-.iui-tile-thumbnail-badge-container {
-  @include iui-tile-thumbnail-badge;
-}
-
-.iui-tile-buttons {
-  @include iui-tile-buttons;
-}
-
-.iui-tile-thumbnail {
-  @include iui-tile-thumbnail;
-}
-
-.iui-tile-thumbnail-picture {
-  @include iui-tile-thumbnail-picture;
-}
-
-.iui-tile-content {
-  @include iui-tile-content;
-}
-
-.iui-tile-more-options {
-  @include iui-tile-more-options;
-}

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