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

package/scss/tile/tile.scss

@@ -1,340 +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/index';
-@import '../surface/index';
-@import '../utils/index';
-@import '../icon/index';
-
-@mixin iui-tile {
-  @include iui-reset;
-  @include iui-surface;
-  display: inline-flex;
-  flex-direction: column;
-  width: $iui-3xl * 3;
-  backface-visibility: hidden;
-
-  &:hover,
-  &:focus-within {
-    .iui-tile-more-options {
-      @include visually-hidden-revert;
-      position: absolute;
-    }
-
-    .iui-tile-metadata:not(:last-child) {
-      width: calc(100% - #{$iui-xl});
-    }
-  }
-
-  &.iui-new {
-    .iui-tile-name,
-    .iui-tile-description {
-      font-weight: $iui-font-weight-semibold;
-    }
-  }
-
-  &.iui-selected {
-    @include iui-focus($offset: 0, $thickness: $iui-xs);
-    outline: solid 2px 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));
-  }
-
-  &.iui-actionable {
-    @include iui-focus($offset: $iui-xxs, $thickness: $iui-xxs);
-    cursor: pointer;
-    transition: box-shadow $iui-speed-fast ease-in-out;
-
-    &:hover {
-      box-shadow: $iui-elevation-8;
-    }
-
-    &:hover,
-    &:focus-within,
-    &.iui-selected {
-      .iui-tile-thumbnail-picture {
-        transform: translateZ(0) scale(1.1);
-      }
-    }
-  }
-
-  &.iui-folder {
-    display: inline-flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-
-    .iui-tile-thumbnail {
-      height: $iui-baseline * 10;
-      flex: 1;
-      border-bottom: none;
-      border-right: 1px solid var(--iui-color-background-border);
-    }
-
-    .iui-tile-content {
-      flex: 2;
-    }
-
-    .iui-tile-description {
-      height: 100%;
-      max-height: $iui-baseline * 4;
-      margin-bottom: 0;
-      -webkit-line-clamp: 2;
-    }
-  }
-
-  //#region Statuses
-  &.iui-progress {
-    cursor: progress;
-    font-style: italic;
-  }
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-
-    .iui-tile-name-label {
-      color: var(--iui-text-color-muted);
-    }
-
-    .iui-thumbnail-icon,
-    .iui-tile-thumbnail-picture {
-      filter: grayscale(100%);
-    }
-
-    &:hover .iui-tile-thumbnail-picture,
-    &:focus-within .iui-tile-thumbnail-picture {
-      transform: none;
-    }
-
-    .iui-tile-more-options {
-      display: none;
-    }
-  }
-  //#endregion Statuses
-}
-
-@mixin iui-tile-content {
-  padding: $iui-baseline $iui-sm;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 2;
-  min-width: 0;
-
-  .iui-tile-name {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    font-size: $iui-font-size-leading;
-    user-select: all;
-    margin-bottom: $iui-baseline * 0.5;
-    color: var(--iui-text-color);
-  }
-
-  .iui-tile-status-icon {
-    @include iui-icons-default;
-    margin-right: $iui-s;
-    flex-shrink: 0;
-  }
-
-  .iui-tile-name-label {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .iui-tile-description {
-    margin-bottom: $iui-baseline;
-    font-size: $iui-font-size;
-    height: 100%;
-    max-height: $iui-baseline * 6;
-    @include iui-line-clamp(3);
-    color: var(--iui-text-color-muted);
-  }
-
-  .iui-tile-metadata {
-    font-size: $iui-font-size-small;
-    flex-shrink: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    height: $iui-line-height;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    margin-top: auto;
-    color: var(--iui-text-color-muted);
-
-    > svg,
-    .iui-tile-metadata-icon {
-      @include iui-icons-default;
-      margin-right: $iui-s;
-      flex-shrink: 0;
-    }
-
-    > * {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-}
-
-@mixin iui-tile-thumbnail {
-  box-sizing: content-box;
-  width: 100%;
-  height: $iui-baseline * 14;
-  flex-shrink: 0;
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--iui-color-background-1-overlay);
-  border-bottom: 1px solid var(--iui-color-background-border);
-
-  .iui-thumbnail-icon {
-    @include iui-icons-3xl;
-  }
-}
-
-@mixin iui-tile-thumbnail-picture {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: transform $iui-speed ease;
-  }
-  @at-root {
-    div#{&} {
-      background-position: center;
-      background-size: cover;
-    }
-  }
-
-  ~ .iui-thumbnail-icon {
-    cursor: pointer;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: fill $iui-speed-fast ease;
-    }
-    fill: rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-3));
-    filter: drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
-
-    &:hover {
-      fill: rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-2));
-    }
-  }
-}
-
-/// @arg $variant Can be either: type-indicator, quick-action
-@mixin iui-tile-thumbnail-button($variant) {
-  @include iui-button-borderless;
-  @include iui-button-size(small, borderless);
-  position: absolute;
-  border-radius: 50%;
-  top: round($iui-baseline * 0.5);
-
-  @if $variant == type-indicator {
-    left: $iui-s;
-  }
-  @if $variant == quick-action {
-    right: $iui-s;
-  }
-
-  &[data-iui-active='true'] {
-    --_iui-button-text-color: var(--iui-color-foreground-primary);
-    --_iui-button-background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  }
-
-  @at-root .iui-tile-thumbnail-picture ~ & {
-    @include iui-blur($opacity: 5);
-    --_iui-button-text-color: var(--iui-color-foreground-accessory);
-
-    > .iui-button-icon {
-      filter: drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5)));
-    }
-
-    &:hover,
-    &[data-iui-active='true']:enabled,
-    &[data-iui-active='true']:enabled:hover,
-    &[data-iui-active='true']:active {
-      background-color: rgba(0, 0, 0, var(--iui-opacity-4));
-    }
-  }
-}
-
-@mixin iui-tile-thumbnail-badge {
-  position: absolute;
-  bottom: round($iui-baseline * 0.5);
-  width: calc(100% - 2 * #{$iui-sm});
-  height: auto;
-  right: $iui-sm;
-  display: flex;
-  justify-content: flex-end;
-  overflow: hidden;
-  gap: $iui-xs;
-}
-
-@mixin iui-tile-buttons {
-  display: flex;
-  flex-shrink: 0;
-  user-select: none;
-  white-space: nowrap;
-
-  > .iui-button {
-    font-size: $iui-font-size;
-    flex: 1;
-    height: auto;
-    padding: $iui-baseline $iui-sm;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    text-align: center;
-    margin: 0;
-    border: initial;
-    border-radius: 0;
-
-    &,
-    &:hover {
-      border-top: 1px solid var(--iui-color-background-border);
-      border-color: var(--iui-color-background-border);
-    }
-  }
-
-  > button:not(:last-child) {
-    border-right: 1px solid var(--iui-color-background-border);
-  }
-}
-
-@mixin iui-tile-more-options {
-  position: absolute;
-  bottom: $iui-baseline * 0.5;
-  right: $iui-s;
-
-  &:not(.iui-visible) {
-    @include visually-hidden;
-  }
-}
-
-@mixin iui-tile-status($status) {
-  @include iui-text-selection($status);
-
-  .iui-tile-thumbnail {
-    box-shadow: 0 $iui-xs 0 var(--iui-color-foreground-#{$status});
-  }
-
-  @at-root &.iui-folder .iui-tile-thumbnail {
-    box-shadow: $iui-xs 0 0 var(--iui-color-foreground-#{$status});
-  }
-
-  .iui-tile-name-label {
-    color: var(--iui-color-foreground-#{$status});
-  }
-
-  .iui-tile-status-icon {
-    fill: var(--iui-color-foreground-#{$status});
-  }
-}

package/scss/time-picker/classes.scss

@@ -1,16 +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-time-picker {
-  @include iui-time-picker;
-}
-
-.iui-time {
-  @include iui-time-picker-list;
-}
-
-.iui-period {
-  @include iui-time-picker-list;
-  @include iui-time-picker-period;
-}

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

package/scss/time-picker/time-picker.scss

@@ -1,63 +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 '../menu/index';
-@import '../utils/index';
-
-@mixin iui-time-picker {
-  @include iui-reset;
-  user-select: none;
-  text-align: center;
-  height: $iui-baseline * 26;
-  display: inline-flex;
-  background-color: var(--iui-color-background-1);
-
-  &:not(:first-child) {
-    border-left: 1px solid var(--iui-color-background-border);
-  }
-
-  &:first-child {
-    box-shadow: $iui-elevation-2;
-  }
-}
-
-@mixin iui-time-picker-list {
-  padding: $iui-baseline $iui-s;
-  overflow-y: auto;
-  overflow-y: overlay;
-  scrollbar-width: none;
-
-  &:not(:first-child) {
-    border-left: 1px solid var(--iui-color-background-border);
-  }
-
-  > ol {
-    @include iui-reset;
-    list-style: none;
-
-    > li {
-      @include iui-focus;
-      padding: round($iui-baseline * 0.5) $iui-m;
-      border-radius: $iui-border-radius;
-
-      &:hover {
-        cursor: pointer;
-        color: var(--iui-color-foreground-primary);
-        background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-      }
-
-      &.iui-selected {
-        font-weight: $iui-font-weight-semibold;
-        cursor: default;
-        @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px);
-        background-color: var(--iui-color-background-primary);
-        color: var(--iui-color-foreground-accessory);
-      }
-    }
-  }
-}
-
-@mixin iui-time-picker-period {
-  display: flex;
-  align-items: center;
-}

package/scss/toast/categories.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/theme';
-@import '../anchor/index';
-@import './toast';
-
-/// category must be one of: positive, negative, primary (informational), warning
-@mixin iui-toast-category($category) {
-  border-color: var(--iui-color-foreground-#{$category});
-
-  > .iui-message {
-    @include iui-text-selection($category);
-  }
-
-  > .iui-status-area {
-    background-color: var(--iui-color-background-#{$category});
-  }
-
-  > .iui-toast-anchor {
-    @include iui-anchor-status($category);
-  }
-}

package/scss/toast/classes.scss

@@ -1,98 +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';
-
-@mixin iui-bottom-placement {
-  bottom: 0;
-
-  .iui-toast {
-    margin: $iui-baseline $iui-m 0 $iui-m;
-  }
-}
-
-.iui-toast-wrapper {
-  pointer-events: none;
-  position: fixed;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  z-index: 99999;
-
-  @media screen and (max-width: 400px) {
-    width: calc(100vw - 36px);
-    margin-top: $iui-baseline;
-  }
-
-  @media screen and (min-width: 401px) {
-    min-width: 400px;
-    max-width: 640px;
-    margin: $iui-line-height 0;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .iui-toast-all {
-      transition: all 240ms cubic-bezier(0, 0, 0.2, 1);
-    }
-  }
-
-  &.iui-placement-top {
-    margin-left: auto;
-    margin-right: auto;
-    left: 0;
-    top: 0;
-    right: 0;
-  }
-
-  &.iui-placement-top-start {
-    left: 0;
-    top: 0;
-    align-items: flex-start;
-  }
-
-  &.iui-placement-top-end {
-    right: 0;
-    top: 0;
-    align-items: flex-end;
-  }
-
-  &.iui-placement-bottom {
-    @include iui-bottom-placement;
-    margin-left: auto;
-    margin-right: auto;
-    left: 0;
-    right: 0;
-  }
-
-  &.iui-placement-bottom-start {
-    @include iui-bottom-placement;
-    left: 0;
-    align-items: flex-start;
-  }
-
-  &.iui-placement-bottom-end {
-    @include iui-bottom-placement;
-    right: 0;
-    align-items: flex-end;
-  }
-}
-
-.iui-toast {
-  @include iui-toast;
-
-  &.iui-informational {
-    @include iui-toast-category($category: primary);
-  }
-
-  &.iui-positive {
-    @include iui-toast-category($category: positive);
-  }
-
-  &.iui-negative {
-    @include iui-toast-category($category: negative);
-  }
-
-  &.iui-warning {
-    @include iui-toast-category($category: warning);
-  }
-}

package/scss/toast/index.scss

@@ -1,4 +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 './toast';
-@import './categories';

package/scss/toast/toast.scss

@@ -1,70 +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 '../utils/index';
-
-@mixin iui-toast {
-  @include iui-reset;
-  display: inline-flex;
-  align-items: center;
-  pointer-events: all;
-  margin: 0 $iui-m $iui-baseline $iui-m;
-  min-height: $iui-baseline * 4;
-  border-radius: $iui-border-radius;
-  background-color: var(--iui-color-background-1);
-  border: 1px solid var(--iui-color-foreground-body);
-  box-shadow: 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)), $iui-elevation-24;
-
-  > .iui-status-area {
-    display: flex;
-    align-self: stretch;
-    justify-content: center;
-    align-items: center;
-    width: $iui-l * 2;
-    flex-shrink: 0;
-    background-color: var(--iui-color-background-5);
-
-    > .iui-icon {
-      height: $iui-icons-default;
-      width: $iui-icons-default;
-      fill: var(--iui-color-foreground-accessory);
-    }
-  }
-
-  > .iui-message {
-    flex-grow: 1;
-    font-size: $iui-font-size;
-    margin-top: $iui-baseline * 0.5;
-    margin-bottom: $iui-baseline * 0.5;
-    margin-right: $iui-l;
-    margin-left: $iui-m;
-    line-height: $iui-line-height;
-    font-weight: $iui-font-weight-normal;
-    font-style: normal;
-    color: var(--iui-text-color);
-  }
-
-  &-anchor {
-    @include iui-anchor-underline('on-initial');
-    border-radius: $iui-border-radius;
-    cursor: pointer;
-    font-size: $iui-font-size-small;
-    margin-right: $iui-m;
-    user-select: none;
-    white-space: nowrap;
-  }
-
-  > .iui-button {
-    margin-right: $iui-s;
-  }
-
-  @media screen and (max-width: 400px) {
-    width: calc(100vw - 36px);
-  }
-
-  @media screen and (min-width: 401px) {
-    min-width: 400px;
-    max-width: 640px;
-  }
-}

package/scss/toggle-switch/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-toggle-switch-wrapper {
-  @include iui-toggle-switch-wrapper;
-}
-
-.iui-toggle-switch {
-  @include iui-toggle-switch;
-}

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