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

package/scss/table/paginator.scss

@@ -1,79 +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/muted';
-
-@mixin iui-table-paginator {
-  @include iui-reset;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 $iui-m;
-  user-select: none;
-  background-color: var(--iui-color-background-3);
-
-  > .iui-left,
-  > .iui-center,
-  > .iui-right {
-    display: flex;
-    align-items: center;
-    position: relative;
-    flex: 1;
-    min-width: 0;
-  }
-
-  > .iui-center {
-    justify-content: center;
-    flex: 2 1;
-    color: var(--iui-text-color);
-  }
-
-  > .iui-right {
-    justify-content: flex-end;
-  }
-}
-
-@mixin iui-table-paginator-page-size-label {
-  @include iui-text-muted;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-@mixin iui-table-paginator-ellipsis {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: $iui-component-height;
-  color: var(--iui-text-color-muted);
-
-  &-small {
-    width: $iui-component-height-small;
-  }
-}
-
-@mixin iui-table-paginator-pages-group {
-  display: inline-flex;
-  align-items: center;
-  margin: 0 $iui-s;
-}
-
-@mixin iui-table-paginator-page-button {
-  @include iui-button;
-  @include iui-button-borderless;
-  width: $iui-component-height;
-
-  &-small {
-    @include iui-button-size(small);
-    width: $iui-component-height-small;
-  }
-
-  &[data-iui-active='true'] {
-    @include iui-button-default-active;
-    @include iui-button-borderless-active;
-    // Adds stripe above active button
-    --_iui-button-active-stripe-inset: calc(100% - #{$iui-xs}) #{$iui-xxs} #{$iui-xxs};
-  }
-}

package/scss/table/sizes.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-table-sizes {
-  --_iui-table-header-size: #{$iui-baseline * 5};
-  --_iui-table-row-size: #{$iui-baseline * 5 + 2px};
-
-  &[data-iui-size='condensed'] {
-    --_iui-table-header-size: #{$iui-baseline * 4};
-    --_iui-table-row-size: #{$iui-baseline * 4 + 2px};
-  }
-
-  &[data-iui-size='extra-condensed'] {
-    --_iui-table-header-size: #{$iui-baseline * 3};
-    --_iui-table-row-size: #{$iui-baseline * 3 + 2px};
-
-    .iui-table-header .iui-table-cell {
-      padding-block: $iui-baseline * 0.25;
-    }
-  }
-
-  .iui-table-header .iui-table-cell,
-  .iui-table-paginator {
-    min-height: var(--_iui-table-header-size);
-  }
-
-  .iui-table-cell {
-    min-height: var(--_iui-table-row-size);
-  }
-}

package/scss/table/table-densities.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 '../style/baseline';
-@import '../style/space';
-
-$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/table/table.scss

@@ -1,482 +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-table {
-  @include iui-reset;
-  display: flex;
-  flex-direction: column;
-  isolation: isolate;
-
-  @include iui-table-cell-icon;
-}
-
-@mixin iui-table-header-wrapper {
-  overflow: hidden;
-  // Fix for Firefox columns misalignment
-  @supports not (overflow: overlay) {
-    overflow-y: scroll;
-  }
-  display: flex;
-  flex-shrink: 0;
-}
-
-@mixin iui-table-header {
-  display: flex;
-  user-select: none;
-  min-width: 100%;
-  flex-shrink: 0;
-
-  .iui-table-cell {
-    background-color: var(--iui-color-background-3);
-  }
-
-  .iui-table-cell:not(.iui-slot) {
-    @include iui-focus;
-    column-gap: $iui-xs;
-    padding-block: $iui-baseline * 0.5;
-
-    &.iui-actionable {
-      cursor: pointer;
-    }
-
-    &.iui-grabbing {
-      cursor: grabbing;
-    }
-
-    .iui-table-filter-button:not([data-iui-active='true']) {
-      visibility: hidden;
-    }
-
-    > .iui-table-resizer {
-      height: 100%;
-      width: $iui-m;
-      position: absolute;
-      top: 0;
-      right: 0;
-      transform: translateX(50%);
-      touch-action: none;
-      cursor: ew-resize;
-      z-index: 1;
-      opacity: 0;
-
-      > .iui-table-resizer-bar {
-        height: 100%;
-        width: $iui-xxs;
-        margin: 0 auto;
-        transition: background-color $iui-speed-fast ease-out, width $iui-speed-fast ease-out;
-        background-color: var(--iui-color-background-border);
-      }
-
-      &:hover > .iui-table-resizer-bar {
-        width: $iui-xs;
-        background-color: var(--iui-color-foreground-primary);
-      }
-    }
-
-    &:hover > .iui-table-resizer {
-      opacity: 1;
-    }
-
-    &:hover,
-    &:focus,
-    &:focus-within {
-      background-color: var(--iui-color-background-4);
-
-      .iui-table-sort,
-      .iui-table-filter-button {
-        visibility: visible;
-      }
-    }
-  }
-
-  .iui-table-reorder-bar {
-    position: absolute;
-    height: 100%;
-    width: $iui-xxs;
-  }
-
-  .iui-table-reorder-column-right {
-    > .iui-table-reorder-bar {
-      right: 0;
-    }
-  }
-
-  .iui-table-reorder-column-left {
-    > .iui-table-reorder-bar {
-      left: 0;
-    }
-  }
-
-  .iui-table-reorder-column-left,
-  .iui-table-reorder-column-right {
-    > .iui-table-reorder-bar {
-      background-color: var(--iui-color-foreground-primary);
-    }
-  }
-
-  // Sort icon
-  .iui-table-sort {
-    visibility: hidden;
-    fill: var(--iui-icons-color);
-  }
-
-  // Sorted column
-  .iui-sorted {
-    background-color: var(--iui-color-background-4);
-
-    .iui-table-sort {
-      visibility: visible;
-      fill: var(--iui-icons-color-actionable);
-    }
-  }
-}
-
-@mixin iui-table-row {
-  min-width: 100%;
-  display: flex;
-
-  @at-root .iui-table-header & {
-    flex-grow: 1;
-  }
-  @at-root .iui-table-body & {
-    .iui-table-cell {
-      border-top: solid 1px transparent;
-      border-bottom: solid 1px transparent;
-      border-bottom-color: var(--iui-color-background-border);
-      background-color: var(--iui-color-background-1);
-      transition: border $iui-speed-fast ease-out;
-    }
-
-    > .iui-slot > .iui-table-more-options {
-      visibility: hidden;
-    }
-
-    &:hover:not([aria-disabled='true']) {
-      .iui-table-cell {
-        background: linear-gradient(
-          rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)),
-          rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))
-        ),
-          linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
-      }
-
-      > .iui-slot:not([aria-disabled='true']) > .iui-table-more-options {
-        visibility: visible;
-      }
-    }
-
-    &:focus-within > .iui-slot:not([aria-disabled='true']) > .iui-table-more-options {
-      visibility: visible;
-    }
-
-    .iui-table-row-expander > .iui-button-icon {
-      @media (prefers-reduced-motion: no-preference) {
-        transition: transform $iui-speed-fast ease-out;
-      }
-    }
-
-    &.iui-table-row-expanded {
-      overflow: hidden;
-
-      .iui-table-cell {
-        border-left-color: var(--iui-color-background-4);
-        border-right-color: var(--iui-color-background-4);
-        border-bottom-color: transparent;
-      }
-
-      .iui-table-row-expander > .iui-button-icon {
-        transform: rotate(90deg);
-      }
-
-      + .iui-table-expanded-content {
-        border-left-color: var(--iui-color-background-4);
-        border-right-color: var(--iui-color-background-4);
-      }
-    }
-
-    &.iui-table-expanded-content {
-      overflow: hidden;
-      border-left: 1px solid transparent;
-      border-right: 1px solid transparent;
-      border-bottom: 1px solid var(--iui-color-background-border);
-      @include iui-transition-group;
-    }
-
-    // #region Selection
-    &:not([aria-selected='true']) + [aria-selected='true'] .iui-table-cell,
-    &[aria-selected='true']:first-child .iui-table-cell {
-      border-bottom-color: transparent;
-    }
-
-    &[aria-selected='true'] {
-      .iui-table-cell {
-        border-color: var(--iui-color-foreground-primary);
-        background: linear-gradient(
-          rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)),
-          rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))
-        ),
-          linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
-      }
-
-      + [aria-selected='true'] .iui-table-cell {
-        border-bottom-color: transparent;
-        border-top-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
-      }
-
-      &:last-child .iui-table-cell {
-        border-bottom-color: var(--iui-color-foreground-primary);
-      }
-
-      + :not([aria-selected='true']) .iui-table-cell,
-      + .iui-table-expanded-content + .iui-table-row:not([aria-selected='true']) .iui-table-cell {
-        border-top-color: var(--iui-color-foreground-primary);
-      }
-
-      + .iui-table-expanded-content {
-        border-color: transparent var(--iui-color-foreground-primary);
-
-        &:last-child {
-          border-bottom-color: var(--iui-color-foreground-primary);
-        }
-      }
-    }
-    // #endregion Selection
-
-    // #region Statuses & states
-    &.iui-new {
-      font-weight: $iui-font-weight-semibold;
-
-      > .iui-main-column::before {
-        content: '•';
-        position: absolute;
-        left: 0;
-        font-size: $iui-font-size-title;
-        color: var(--iui-color-foreground-positive);
-      }
-    }
-
-    .iui-table-cell[aria-disabled='true'],
-    &.iui-table-expanded-content[aria-disabled='true'] {
-      font-style: italic;
-      cursor: not-allowed;
-      color: var(--iui-text-color-muted);
-
-      &.iui-slot:hover > .iui-table-more-options {
-        visibility: hidden;
-      }
-
-      img,
-      svg:not(.iui-radial),
-      .iui-avatar {
-        filter: $iui-icons-color-multicolor-disabled;
-      }
-    }
-
-    &[data-iui-status='positive'] {
-      @include iui-table-row-status($status: positive);
-    }
-
-    &[data-iui-status='warning'] {
-      @include iui-table-row-status($status: warning);
-    }
-
-    &[data-iui-status='negative'] {
-      @include iui-table-row-status($status: negative);
-    }
-    // #endregion Statuses & states
-  }
-}
-
-@mixin iui-table-header-actions-container {
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  margin-right: $iui-sm;
-
-  .iui-table-cell-end-icon {
-    // Hardcoded size of the borderless button so that the icons are centered
-    width: 28px;
-    height: 28px;
-    margin-right: initial;
-    margin-left: auto;
-  }
-}
-
-@mixin iui-table-body {
-  overflow-y: scroll;
-  overflow: overlay;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  // Allows columns with static width to take more space than the table width
-  align-items: flex-start;
-  @include iui-scroll-snapping('.iui-table-row');
-  background-color: var(--iui-color-background-1);
-
-  &.iui-zebra-striping .iui-table-row:nth-child(even):not([aria-selected='true']) .iui-table-cell {
-    background-color: rgba(var(--iui-color-foreground-body-rgb), 0.02);
-  }
-
-  // Empty & loading states
-  > .iui-table-empty {
-    text-align: center;
-    padding: $iui-xl;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex-grow: 1;
-    align-self: center;
-    color: var(--iui-text-color-muted);
-    background-color: var(--iui-color-background-1);
-  }
-}
-
-@mixin iui-table-cell {
-  align-items: center;
-  display: flex;
-  flex-grow: 1;
-  min-width: $iui-xxl;
-  padding-left: $iui-m;
-  flex-basis: $iui-xxl;
-  position: relative;
-  word-break: break-word;
-
-  &:first-of-type {
-    border-left: solid 1px transparent;
-  }
-
-  &:last-of-type {
-    border-right: solid 1px transparent;
-  }
-
-  &.iui-slot {
-    width: $iui-l * 2;
-    padding: 0;
-    flex-grow: 0;
-    min-width: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-basis: $iui-l * 2;
-  }
-
-  &.iui-table-cell-sticky {
-    position: sticky;
-    z-index: 1;
-    left: var(--iui-table-sticky-left, initial);
-    right: var(--iui-table-sticky-right, initial);
-  }
-
-  &:not(.iui-slot):last-child {
-    padding-right: $iui-m;
-  }
-
-  &[data-iui-status='positive'] {
-    @include iui-table-cell-status($status: positive);
-  }
-
-  &[data-iui-status='warning'] {
-    @include iui-table-cell-status($status: warning);
-  }
-
-  &[data-iui-status='negative'] {
-    @include iui-table-cell-status($status: negative);
-  }
-
-  &[contenteditable] {
-    outline-offset: -1px;
-
-    &:focus,
-    &:hover {
-      outline: 1px solid var(--iui-color-foreground-primary);
-    }
-
-    &:focus {
-      background-color: var(--iui-color-background-1);
-    }
-  }
-}
-
-@mixin iui-table-row-status($status) {
-  .iui-table-cell:first-of-type,
-  + .iui-table-expanded-content {
-    box-shadow: inset $iui-xxs 0 0 0 var(--iui-icons-color-#{$status});
-
-    @include iui-text-selection($status);
-  }
-
-  .iui-table-cell-end-icon svg {
-    fill: var(--iui-icons-color-#{$status});
-  }
-}
-
-@mixin iui-table-cell-status($status) {
-  background: linear-gradient(
-    rgba(var(--iui-color-foreground-#{$status}-rgb), var(--iui-opacity-6)),
-    rgba(var(--iui-color-foreground-#{$status}-rgb), var(--iui-opacity-6))
-  ),
-    linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
-  @include iui-text-selection($status);
-}
-
-@mixin iui-table-cell-icon {
-  .iui-table-cell-end-icon,
-  .iui-table-cell-start-icon {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    svg:not(.iui-radial) {
-      display: flex; // needed for vertical alignment of webcomponents
-      width: $iui-icons-default;
-      height: $iui-icons-default;
-    }
-  }
-
-  .iui-table-cell-start-icon {
-    margin-right: $iui-s;
-  }
-
-  .iui-table-cell-end-icon {
-    width: $iui-l;
-    height: $iui-l;
-    margin-right: $iui-sm;
-    margin-left: auto;
-  }
-}
-
-@mixin iui-table-cell-shadow-base {
-  position: absolute;
-  top: -1px;
-  bottom: -1px;
-  width: $iui-l;
-  pointer-events: none;
-
-  // Prevents scrollbar from appearing because `top: -1px` and `bottom: -1px`
-  // makes content to overflow
-  @at-root .iui-table-header & {
-    top: 0;
-    bottom: 0;
-  }
-}
-
-/// @arg side - must be one of: left, right
-@mixin iui-table-cell-shadow($side) {
-  @include iui-table-cell-shadow-base;
-  @if $side == left {
-    left: 0;
-    transform: translate(-100%);
-    box-shadow: inset -10px 0 5px -10px $iui-elevation-color;
-  }
-  @if $side == right {
-    right: 0;
-    transform: translate(100%);
-    box-shadow: inset 10px 0 5px -10px $iui-elevation-color;
-  }
-}

package/scss/tabs/borderless.scss

@@ -1,59 +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 {
-      background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-    }
-
-    &.iui-active {
-      background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-    }
-  }
-
-  @at-root {
-    .iui-horizontal & ~ .iui-tabs-content {
-      margin-top: -$iui-xxs;
-      border-top: $iui-xxs solid var(--iui-color-background-4);
-    }
-  }
-
-  @at-root {
-    .iui-vertical & ~ .iui-tabs-content {
-      margin-left: -$iui-xxs;
-      padding-left: $iui-sm;
-      padding-right: $iui-sm;
-      border-left: $iui-xxs solid var(--iui-color-background-4);
-    }
-  }
-
-  &.iui-green .iui-active,
-  &.iui-green .iui-tab:hover {
-    background-color: rgba(var(--iui-color-foreground-positive-rgb), var(--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 {
-    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;
-}