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

package/scss/table/variables.scss

@@ -1,10 +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-table-density-vertical: $iui-baseline * 1.5;
-$iui-table-density-vertical-condensed: $iui-baseline;
-$iui-table-density-vertical-extra-condensed: $iui-baseline * 0.5;
-$iui-table-density: $iui-table-density-vertical $iui-m;
-$iui-table-density-condensed: $iui-table-density-vertical-condensed $iui-m;
-$iui-table-density-extra-condensed: $iui-table-density-vertical-extra-condensed $iui-m;

package/scss/tabs/borderless.scss

@@ -1,71 +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-borderless {
-  .iui-tab {
-    padding: $iui-xs ($iui-component-padding-horizontal * 2);
-    background-color: transparent;
-
-    &::after {
-      bottom: 0;
-      right: 0;
-    }
-
-    &:hover {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-      }
-    }
-
-    &.iui-active {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-      }
-    }
-  }
-
-  @at-root {
-    .iui-horizontal & ~ .iui-tabs-content {
-      margin-top: -$iui-xxs;
-      @include themed {
-        border-top: $iui-xxs solid t(iui-color-background-4);
-      }
-    }
-  }
-
-  @at-root {
-    .iui-vertical & ~ .iui-tabs-content {
-      margin-left: -$iui-xxs;
-      padding-left: $iui-sm;
-      padding-right: $iui-sm;
-      @include themed {
-        border-left: $iui-xxs solid t(iui-color-background-4);
-      }
-    }
-  }
-
-  &.iui-green .iui-active,
-  &.iui-green .iui-tab:hover {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-positive-rgb), t(iui-opacity-6));
-    }
-  }
-
-  &.iui-large {
-    .iui-tab {
-      min-height: $iui-component-height-large;
-    }
-
-    .iui-tab-description {
-      display: -webkit-box; /* stylelint-disable-line */
-    }
-  }
-
-  .iui-tab[disabled]:hover {
-    @include themed {
-      background-color: transparent;
-    }
-  }
-}

package/scss/tabs/classes.scss

@@ -1,44 +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-tabs-wrapper {
-  display: flex;
-  position: relative;
-
-  &.iui-horizontal {
-    @include iui-tabs-horizontal;
-  }
-
-  &.iui-vertical {
-    @include iui-tabs-vertical;
-  }
-}
-
-.iui-tabs {
-  @include iui-tabs;
-
-  &.iui-default {
-    @include iui-tabs-default;
-  }
-
-  &.iui-borderless {
-    @include iui-tabs-borderless;
-  }
-
-  &.iui-pill {
-    @include iui-tabs-pill;
-  }
-
-  &.iui-animated {
-    @include iui-tab-animated;
-  }
-
-  &.iui-not-animated {
-    @include iui-tab-not-animated;
-  }
-}
-
-.iui-tab-label {
-  @include iui-tab-label;
-}

package/scss/tabs/default.scss

@@ -1,110 +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;
-    box-sizing: border-box;
-    @include themed {
-      background-color: t(iui-color-background-2);
-      border: 1px solid t(iui-color-background-5);
-    }
-
-    &::after {
-      top: 0;
-      left: 0;
-    }
-
-    &:hover {
-      @include themed {
-        background-color: t(iui-color-background-1);
-      }
-    }
-
-    &.iui-active {
-      @include themed {
-        background-color: t(iui-color-background-1);
-      }
-    }
-
-    &[disabled] {
-      @include themed {
-        background-color: t(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;
-      }
-
-      :where(.iui-button) {
-        height: 100%;
-      }
-    }
-  }
-
-  @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;
-      }
-
-      :where(.iui-button) {
-        width: 100%;
-      }
-    }
-  }
-
-  &.iui-large {
-    .iui-tab {
-      min-height: $iui-component-height-large;
-    }
-
-    .iui-tab-description {
-      display: -webkit-box; /* stylelint-disable-line */
-    }
-  }
-
-  &.iui-green .iui-tab::after {
-    @include themed {
-      background-color: t(iui-color-foreground-positive);
-    }
-  }
-
-  ~ .iui-tabs-content {
-    padding-left: $iui-m;
-    padding-right: $iui-m;
-    @include themed {
-      background-color: t(iui-color-background-1);
-      border: 1px solid t(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,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 '../icon/index';
-@import './tabs';
-
-@mixin iui-tabs-pill {
-  justify-content: space-evenly;
-
-  > li {
-    flex: 1 1 0;
-
-    &:not(:last-child) {
-      margin-right: $iui-xxs;
-    }
-  }
-
-  &.iui-green .iui-tab:hover {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-positive-rgb), t(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 {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-      }
-    }
-
-    &[disabled]:hover {
-      @include themed {
-        background-color: transparent;
-      }
-    }
-  }
-}

package/scss/tabs/tabs.scss

@@ -1,220 +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-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;
-    transition: background-color $iui-speed-fast ease-out;
-    @include themed {
-      color: t(iui-text-color);
-    }
-
-    &.iui-active {
-      @include themed {
-        color: t(iui-color-foreground-primary);
-      }
-
-      .iui-tab-icon {
-        @include themed {
-          fill: t(iui-icons-color-primary);
-        }
-      }
-
-      .iui-tab-description {
-        @include themed {
-          opacity: t(iui-opacity-1);
-        }
-      }
-    }
-
-    &[disabled] {
-      cursor: not-allowed;
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
-
-      .iui-tab-icon {
-        @include themed {
-          fill: t(iui-icons-color-actionable-disabled);
-        }
-      }
-    }
-
-    @include iui-focus;
-  }
-
-  .iui-tab-icon {
-    width: $iui-icons-default;
-    height: $iui-icons-default;
-    flex-shrink: 0;
-    transition: fill $iui-speed-fast ease-out;
-    @include themed {
-      fill: t(iui-icons-color-actionable);
-    }
-
-    + .iui-tab-label {
-      margin-left: $iui-s;
-    }
-  }
-
-  .iui-tab-description {
-    display: none;
-    font-size: $iui-font-size-small;
-    @include themed {
-      opacity: t(iui-opacity-3);
-    }
-  }
-
-  &.iui-green .iui-tab {
-    &:focus {
-      outline-color: t(iui-color-foreground-positive);
-    }
-
-    &.iui-active {
-      @include themed {
-        color: t(iui-color-foreground-positive);
-      }
-
-      .iui-tab-icon {
-        @include themed {
-          fill: t(iui-icons-color-positive);
-        }
-      }
-    }
-  }
-
-  ~ .iui-tabs-content {
-    padding-top: $iui-baseline;
-    padding-bottom: $iui-baseline;
-    box-sizing: border-box;
-  }
-}
-
-@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;
-    @include themed {
-      background-color: t(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 {
-    @include themed {
-      background-color: t(iui-color-foreground-positive);
-    }
-  }
-}
-
-@mixin iui-tab-animated {
-  &::after {
-    position: absolute;
-    content: ' ';
-    @include themed {
-      background-color: t(iui-color-foreground-primary);
-    }
-  }
-
-  &.iui-green::after {
-    @include themed {
-      background-color: t(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,29 +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';
-
-.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,99 +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';
-@import '../button/index';
-
-@mixin iui-tag-base {
-  user-select: all;
-  text-transform: lowercase;
-  display: inline-flex;
-}
-
-@mixin iui-tag-basic {
-  @include iui-tag-base;
-
-  &:not(a) {
-    @include themed {
-      color: t(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;
-  box-sizing: border-box;
-  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;
-  @include themed {
-    border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    background-color: t(iui-color-background-1);
-    color: t(iui-text-color);
-  }
-
-  &:hover {
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(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 {
-  @include themed {
-    color: t(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;
-    @include themed {
-      background-color: t(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';