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

package/scss/keyboard/keyboard.scss

@@ -1,33 +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-keyboard {
-  @include iui-reset;
-  border-radius: $iui-border-radius;
-  display: inline-block;
-  font-size: $iui-font-size-small;
-  font-weight: $iui-font-weight-semibold;
-  font-family: $iui-monospace;
-  line-height: 1;
-  padding: round($iui-baseline * 0.33) $iui-s;
-  white-space: nowrap;
-  text-transform: uppercase;
-  user-select: none;
-  cursor: default;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: box-shadow $iui-speed-fast ease-out;
-  }
-
-  @include themed {
-    background-color: t(iui-color-background-1);
-    border: 1px solid t(iui-color-background-5);
-    box-shadow: 0 1px 1px t(iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, t(iui-opacity-5)) inset;
-  }
-
-  &:hover {
-    @include themed {
-      box-shadow: 0 0 0 t(iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, t(iui-opacity-5)) inset;
-    }
-  }
-}

package/scss/location-marker/classes.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 './index';
-
-.iui-location-marker-default {
-  @include iui-location-marker-default;
-}
-
-.iui-location-marker-data-rich {
-  @include iui-location-marker-data-rich;
-}
-
-.iui-location-marker-me {
-  @include iui-location-marker-me;
-}

package/scss/location-marker/data-rich.scss

@@ -1,58 +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 './location-marker';
-
-@mixin iui-location-marker-data-rich {
-  @include iui-location-marker;
-  cursor: pointer;
-
-  > .iui-location-marker-data-rich-body {
-    min-width: $iui-icons-xl;
-    border-radius: $iui-border-radius;
-    text-align: center;
-    font-size: $iui-font-size-leading;
-    padding: round($iui-baseline * 0.25) $iui-s;
-    filter: drop-shadow($iui-elevation-2);
-    box-sizing: border-box;
-    position: relative;
-
-    @include themed {
-      border: solid 1px t(iui-color-foreground-accessory);
-      background-color: t(iui-color-foreground-accessory);
-      color: t(iui-color-foreground-accessory);
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      display: block;
-      width: 0;
-      height: 0;
-      bottom: -9px;
-      left: 0;
-      right: 0;
-      margin: auto;
-      border-width: $iui-xs;
-      border-style: solid;
-
-      @include themed {
-        border-color: t(iui-color-foreground-accessory) transparent transparent transparent;
-      }
-    }
-
-    > .iui-location-marker-data-rich-icon {
-      display: inline-block;
-      width: $iui-icons-default;
-      height: $iui-icons-default;
-      font-size: inherit;
-      vertical-align: -2px;
-
-      &.iui-location-marker-data-rich-icon-monochrome {
-        @include themed {
-          fill: t(iui-color-foreground-accessory);
-        }
-      }
-    }
-  }
-}

package/scss/location-marker/default.scss

@@ -1,21 +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 './location-marker';
-
-@mixin iui-location-marker-default {
-  @include iui-location-marker;
-  width: $iui-icons-large;
-  height: $iui-icons-large;
-  cursor: pointer;
-
-  > .iui-location-marker-default-pin {
-    filter: drop-shadow($iui-elevation-2);
-
-    > .iui-location-marker-default-pin-dot {
-      @include themed {
-        fill: t(iui-color-foreground-accessory);
-      }
-    }
-  }
-}

package/scss/location-marker/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 './location-marker';
-@import './default';
-@import './data-rich';
-@import './me';

package/scss/location-marker/location-marker.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 '../style/index';
-@import '../text/index';
-@import '../icon/index';
-
-@mixin iui-location-marker {
-  @include iui-reset;
-
-  display: inline-block;
-  user-select: none;
-  position: relative;
-}

package/scss/location-marker/me.scss

@@ -1,36 +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 './location-marker';
-
-@mixin iui-location-marker-me {
-  @include iui-location-marker;
-  position: relative;
-  width: $iui-icons-large;
-  height: $iui-icons-large;
-  border-radius: 50%;
-  cursor: default;
-
-  @include themed {
-    background: radial-gradient(
-      circle at center,
-      rgba(t(iui-color-foreground-primary-rgb), 0),
-      rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5))
-    );
-  }
-
-  > .iui-location-marker-me-dot {
-    width: $iui-icons-large * 0.5;
-    height: $iui-icons-large * 0.5;
-    position: absolute;
-    top: $iui-icons-large * 0.25;
-    left: $iui-icons-large * 0.25;
-    border-radius: 50%;
-    box-sizing: border-box;
-
-    @include themed {
-      border: 1px solid t(iui-color-foreground-accessory);
-      background-color: t(iui-color-background-primary);
-    }
-  }
-}

package/scss/menu/classes.scss

@@ -1,21 +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 '../surface/index';
-
-.iui-menu {
-  @include iui-surface;
-  @include iui-list-menu;
-}
-
-.iui-menu-item {
-  @include iui-menu-item;
-}
-
-.iui-menu-content {
-  @include iui-menu-content;
-}
-
-.iui-menu-divider {
-  @include iui-menu-divider;
-}

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

package/scss/menu/menu.scss

@@ -1,205 +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 '../text/index';
-
-$iui-active-outline: thin solid t(iui-color-foreground-primary);
-
-@mixin iui-list-menu {
-  @include iui-reset;
-  list-style-type: none;
-  user-select: none;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-
-  .iui-header-menu-icon {
-    margin: 0 $iui-xs;
-  }
-
-  div.iui-header-menu-icon {
-    margin: 0;
-    width: $iui-icons-large;
-    height: $iui-icons-large;
-    border-radius: $iui-border-radius;
-  }
-
-  &.iui-scroll {
-    overflow-y: auto;
-    overflow-y: overlay;
-  }
-}
-
-@mixin iui-menu-item {
-  display: flex;
-  align-items: center;
-  font-size: $iui-font-size;
-  padding: 0 ($iui-component-padding-horizontal + 1px);
-  height: $iui-component-height;
-  cursor: pointer;
-  box-sizing: border-box;
-  line-height: normal;
-
-  + #{&} {
-    margin-top: -1px;
-  }
-
-  .iui-content,
-  .iui-menu-label,
-  .iui-menu-description {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .iui-content {
-    flex: 1 1 auto;
-
-    + .iui-icon {
-      margin-right: 0;
-      margin-left: $iui-s;
-    }
-  }
-
-  .iui-menu-description {
-    display: none;
-    font-size: $iui-font-size-small;
-    @include themed {
-      opacity: t(iui-opacity-3);
-    }
-  }
-
-  > .iui-icon {
-    @include iui-menu-icon;
-  }
-
-  &:hover {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-    }
-  }
-
-  &:focus,
-  &.iui-focused {
-    @include themed {
-      outline: $iui-active-outline;
-      outline-offset: -1px;
-    }
-  }
-
-  &:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  &.iui-large {
-    height: $iui-component-height-large;
-
-    .iui-menu-description {
-      display: block;
-    }
-  }
-
-  &.iui-active {
-    &,
-    &:hover {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-        color: t(iui-color-foreground-primary);
-        outline: $iui-active-outline;
-        outline-offset: -1px;
-      }
-    }
-
-    .iui-menu-description {
-      opacity: 1;
-    }
-
-    > .iui-icon {
-      @include themed {
-        fill: t(iui-icons-color-primary);
-      }
-    }
-
-    &:focus,
-    &.iui-focused {
-      outline-width: $iui-xxs;
-      outline-offset: -2px;
-    }
-
-    &:focus:not(:focus-visible) {
-      outline: $iui-active-outline;
-      outline-offset: -1px;
-    }
-  }
-
-  &.iui-disabled {
-    &,
-    &:hover {
-      cursor: not-allowed;
-      outline: none;
-      @include themed {
-        background-color: t(iui-color-background-1);
-        color: t(iui-text-color-placeholder);
-      }
-
-      > .iui-icon {
-        @include themed {
-          fill: t(iui-icons-color-actionable-disabled);
-        }
-      }
-    }
-  }
-
-  &-skeleton {
-    --iui-menu-item-content-skeleton-max-width: 30%;
-    cursor: auto;
-
-    .iui-content {
-      max-width: var(--iui-menu-item-content-skeleton-max-width);
-    }
-
-    .iui-menu-label {
-      width: 100%;
-      height: $iui-font-size;
-      vertical-align: middle;
-    }
-
-    .iui-menu-description {
-      width: 70%;
-      height: $iui-font-size-small;
-      vertical-align: middle;
-      margin-top: $iui-xs;
-    }
-
-    &:hover {
-      background-color: unset;
-    }
-  }
-}
-
-@mixin iui-menu-content {
-  padding: $iui-baseline ($iui-component-padding-horizontal + 1px);
-}
-
-@mixin iui-menu-divider {
-  height: 1px;
-  width: calc(100% - #{$iui-l});
-  margin: 1px auto;
-  @include themed {
-    background-color: t(iui-color-background-border);
-  }
-}
-
-@mixin iui-menu-icon {
-  width: $iui-icons-default;
-  height: $iui-icons-default;
-  flex: 0 0 auto;
-  @include themed {
-    fill: t(iui-icons-color-actionable);
-  }
-
-  + .iui-content {
-    margin-left: $iui-s;
-  }
-}

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

package/scss/non-ideal-state/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 './non-ideal-state';

package/scss/non-ideal-state/non-ideal-state.scss

@@ -1,55 +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/index';
-
-@mixin iui-non-ideal-state {
-  @include iui-reset;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  position: absolute;
-  left: 50%;
-  top: 40%;
-  min-width: 220px;
-  transform: translate(-50%, -40%);
-
-  > .iui-non-ideal-state-illustration {
-    max-width: 220px;
-    max-height: 242px;
-    margin-bottom: $iui-line-height;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  > .iui-non-ideal-state-title {
-    @include iui-text(headline);
-    @include iui-text-block-spacing;
-  }
-
-  > .iui-non-ideal-state-description {
-    @include iui-text(body);
-    @include iui-text-block-spacing;
-  }
-
-  > .iui-non-ideal-state-actions {
-    display: flex;
-    align-items: center;
-    margin-bottom: $iui-s;
-
-    > .iui-input-container {
-      display: inline-block;
-      width: 200px;
-      text-align: left;
-      margin: 0 $iui-xs 0 0;
-    }
-
-    > .iui-button {
-      margin: 0 $iui-xs;
-    }
-  }
-}

package/scss/notification-marker/classes.scss

@@ -1,9 +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';
-
-@each $status in primary, positive, warning, negative, accessory {
-  .iui-notification-#{$status} {
-    @include iui-notification-marker($status: $status);
-  }
-}

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

package/scss/notification-marker/notification-marker.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';
-
-@mixin iui-notification-marker($status: primary) {
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: $iui-s;
-    height: $iui-s;
-    top: $iui-sm * -0.5;
-    right: $iui-sm * -0.5;
-    border-radius: 100%;
-    @include themed {
-      background-color: t(iui-color-foreground-#{$status});
-      border: 2px solid t(iui-color-background-1);
-    }
-    @media (prefers-reduced-motion: no-preference) {
-      transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out;
-    }
-  }
-
-  &.iui-urgent::before {
-    @media (prefers-reduced-motion: no-preference) {
-      animation: pulse-#{$status} 2s infinite;
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @keyframes pulse-#{$status} {
-      0% {
-        @include themed {
-          box-shadow: 0 0 0 0 rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-1));
-        }
-      }
-
-      70% {
-        @include themed {
-          box-shadow: 0 0 0 7px rgba(t(iui-color-foreground-#{$status}-rgb), 0);
-        }
-      }
-
-      100% {
-        @include themed {
-          box-shadow: 0 0 0 0 rgba(t(iui-color-foreground-#{$status}-rgb), 0);
-        }
-      }
-    }
-  }
-}
-
-@mixin iui-notification-marker-hover {
-  .iui-notification-primary::before,
-  .iui-notification-positive::before,
-  .iui-notification-warning::before,
-  .iui-notification-negative::before {
-    @include themed {
-      border-color: t(iui-color-background-1-overlay);
-    }
-  }
-}

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

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

package/scss/popover/popover.scss

@@ -1,22 +0,0 @@
-/* stylelint-disable selector-class-pattern */
-// 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';
-
-// tippy.js helper class to hide Popover when it is scrolled out of view
-@mixin iui-popover {
-  &.tippy-box {
-    &[data-reference-hidden] {
-      visibility: hidden;
-      pointer-events: none;
-    }
-
-    // Resets tippy.js default stylings that interfere with our own
-    all: revert;
-  }
-
-  // Resets tippy.js default stylings that interfere with our own
-  .tippy-content {
-    all: revert;
-  }
-}

package/scss/progress-indicator/classes.scss

@@ -1,35 +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-progress-indicator-linear {
-  @include iui-progress-indicator-linear;
-
-  > .iui-track > .iui-determinate {
-    @include iui-progress-indicator-linear-determinate;
-  }
-
-  &:not(.iui-negative):not(.iui-positive) > .iui-track > .iui-indeterminate {
-    @include iui-progress-indicator-linear-indeterminate;
-  }
-}
-
-.iui-progress-indicator-radial-ie {
-  @include iui-progress-indicator-radial-ie;
-}
-
-.iui-progress-indicator-radial {
-  @include iui-progress-indicator-radial;
-
-  &.iui-determinate:not(.iui-positive) {
-    @include iui-progress-indicator-radial-determinate;
-  }
-
-  &.iui-indeterminate:not(.iui-negative):not(.iui-positive) {
-    @include iui-progress-indicator-radial-indeterminate;
-  }
-}
-
-.iui-progress-indicator-overlay {
-  @include iui-progress-indicator-overlay;
-}

package/scss/progress-indicator/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 './linear';
-@import './radial';
-@import './overlay';