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

package/scss/icon/icon.scss

@@ -1,65 +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-icons-default {
-  @include iui-icons-color();
-  display: inline-flex;
-  width: $iui-icons-default;
-  height: $iui-icons-default;
-}
-
-@mixin iui-icons-small {
-  @include iui-icons-color();
-  display: inline-flex;
-  width: $iui-icons-small;
-  height: $iui-icons-small;
-}
-
-@mixin iui-icons-large {
-  @include iui-icons-color();
-  display: inline-flex;
-  width: $iui-icons-large;
-  height: $iui-icons-large;
-}
-
-@mixin iui-icons-xl {
-  @include iui-icons-color();
-  display: inline-flex;
-  width: $iui-icons-xl;
-  height: $iui-icons-xl;
-}
-
-@mixin iui-icons-xxl {
-  @include iui-icons-color();
-  display: inline-flex;
-  width: $iui-icons-xxl;
-  height: $iui-icons-xxl;
-}
-
-@mixin iui-icons-3xl {
-  @include iui-icons-color();
-  display: inline-flex;
-  width: $iui-icons-3xl;
-  height: $iui-icons-3xl;
-}
-
-@mixin iui-icons-color {
-  fill: var(--iui-icons-color);
-
-  &.iui-informational {
-    fill: var(--iui-icons-color-primary);
-  }
-
-  &.iui-positive {
-    fill: var(--iui-icons-color-positive);
-  }
-
-  &.iui-warning {
-    fill: var(--iui-icons-color-warning);
-  }
-
-  &.iui-negative {
-    fill: var(--iui-icons-color-negative);
-  }
-}

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

package/scss/index.scss

@@ -1,50 +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 './alert/index';
-@import './anchor/index';
-@import './avatar/index';
-@import './badge/index';
-@import './backdrop/index';
-@import './blockquote/index';
-@import './breadcrumbs/index';
-@import './button/index';
-@import './carousel/index';
-@import './checkbox/index';
-@import './code/index';
-@import './color-picker/index';
-@import './date-picker/index';
-@import './dialog/index';
-@import './expandable-block/index';
-@import './file-upload/index';
-@import './footer/index';
-@import './header/index';
-@import './icon/index';
-@import './information-panel/index';
-@import './input/index';
-@import './keyboard/index';
-@import './location-marker/index';
-@import './menu/index';
-@import './non-ideal-state/index';
-@import './progress-indicator/index';
-@import './radio/index';
-@import './radio-tile/index';
-@import './select/index';
-@import './side-navigation/index';
-@import './skip-to-content/index';
-@import './slider/index';
-@import './stepper/index';
-@import './surface/index';
-@import './table/index';
-@import './tabs/index';
-@import './tag/index';
-@import './text/index';
-@import './textarea/index';
-@import './tile/index';
-@import './time-picker/index';
-@import './toast/index';
-@import './toggle-switch/index';
-@import './tooltip/index';
-@import './tree/index';
-@import './utils/index';
-@import './workflow-diagram/index';

package/scss/information-panel/classes.scss

@@ -1,27 +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-information-panel-wrapper {
-  @include iui-information-panel-wrapper;
-}
-
-.iui-information-panel {
-  @include iui-information-panel;
-
-  &.iui-right {
-    @include iui-information-panel-right;
-  }
-
-  &.iui-bottom {
-    @include iui-information-panel-bottom;
-  }
-
-  &.iui-visible {
-    @include iui-information-panel-visible;
-  }
-}
-
-.iui-information-body-content {
-  @include iui-information-body-content;
-}

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

package/scss/information-panel/information-panel.scss

@@ -1,215 +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-information-panel-wrapper {
-  position: relative;
-  overflow: hidden;
-}
-
-@mixin iui-information-panel {
-  position: absolute;
-  opacity: 0;
-  visibility: hidden;
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  max-height: 100%;
-  background-color: var(--iui-color-background-1);
-  @media (prefers-reduced-motion: no-preference) {
-    transition: visibility $iui-speed-instant $iui-speed-fast ease-in, transform $iui-speed-fast ease-out,
-      opacity $iui-speed-fast ease;
-  }
-
-  > .iui-resizer {
-    display: none;
-    position: absolute;
-    touch-action: none;
-
-    > .iui-resizer-bar {
-      background-color: var(--iui-color-background-border);
-    }
-
-    &:hover > .iui-resizer-bar {
-      background-color: var(--iui-color-foreground-primary);
-    }
-  }
-
-  .iui-information-header,
-  .iui-information-body {
-    padding-left: $iui-sm;
-    padding-right: $iui-sm;
-  }
-
-  .iui-information-header {
-    height: $iui-baseline * 5;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: var(--iui-color-background-3);
-
-    .iui-information-header-label {
-      display: flex;
-      align-items: center;
-      overflow: hidden;
-
-      > * {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        user-select: all;
-      }
-
-      svg {
-        display: flex;
-        width: $iui-icons-large;
-        height: $iui-icons-large;
-        margin-right: $iui-s;
-        flex-shrink: 0;
-        fill: var(--iui-icons-color);
-      }
-    }
-
-    .iui-information-header-actions {
-      flex-shrink: 0;
-      margin-left: $iui-s;
-    }
-  }
-
-  .iui-information-body {
-    padding-top: $iui-baseline;
-    padding-bottom: $iui-baseline;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    overflow-y: overlay;
-
-    > hr {
-      border-color: var(--iui-color-background-border);
-    }
-  }
-}
-
-@mixin iui-information-panel-visible {
-  opacity: 1;
-  visibility: visible;
-  transform: translate(0);
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: transform $iui-speed-fast ease-out, opacity $iui-speed-fast ease;
-  }
-
-  > .iui-resizer {
-    display: flex;
-  }
-}
-
-@mixin iui-information-panel-vertical {
-  top: 0;
-  right: 0;
-  width: $iui-3xl * 4;
-  min-width: $iui-3xl * 2;
-  height: 100%;
-
-  > .iui-resizer {
-    height: 100%;
-    width: $iui-m;
-    top: 0;
-    cursor: ew-resize;
-    justify-content: center;
-
-    > .iui-resizer-bar {
-      height: 100%;
-      width: 1px;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: background-color $iui-speed-fast ease-out, width $iui-speed-fast ease-out;
-      }
-    }
-
-    &:hover > .iui-resizer-bar {
-      width: $iui-xs;
-    }
-  }
-}
-
-@mixin iui-information-panel-horizontal {
-  left: 0;
-  bottom: 0;
-  height: $iui-3xl * 4;
-  min-height: $iui-3xl * 2;
-  width: 100%;
-
-  > .iui-resizer {
-    width: 100%;
-    height: $iui-m;
-    left: 0;
-    cursor: ns-resize;
-    align-items: center;
-
-    > .iui-resizer-bar {
-      width: 100%;
-      height: 1px;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: background-color $iui-speed-fast ease-out, height $iui-speed-fast ease-out;
-      }
-    }
-
-    &:hover > .iui-resizer-bar {
-      height: $iui-xs;
-    }
-  }
-}
-
-@mixin iui-information-panel-right {
-  @include iui-information-panel-vertical;
-  transform: translateX(100%); // hide off screen
-  box-shadow: -1px 0 10px $iui-elevation-color;
-  clip-path: inset(0 0 0 -15px); // show box-shadow only on the left
-
-  > .iui-resizer {
-    left: $iui-m * -0.5;
-  }
-}
-
-@mixin iui-information-panel-bottom {
-  @include iui-information-panel-horizontal;
-  transform: translateY(100%); // hide off screen
-  box-shadow: 0 -1px 10px $iui-elevation-color;
-  clip-path: inset(-15px 0 0 0); // show box-shadow only on top
-
-  > .iui-resizer {
-    top: $iui-m * -0.5;
-  }
-}
-
-/// Labels and inputs aligned using css grid
-@mixin iui-information-body-content {
-  display: grid;
-
-  .iui-input-label {
-    font-weight: $iui-font-weight-normal;
-    color: var(--iui-text-color-muted);
-  }
-
-  &:not(.iui-inline) {
-    // add bottom margin between pairs of label+input
-    > *:nth-child(even):not(:last-child) {
-      margin-bottom: $iui-baseline;
-    }
-  }
-
-  &.iui-inline {
-    row-gap: $iui-baseline;
-    grid-template-columns: auto 1fr;
-    align-items: center;
-
-    .iui-input-label {
-      @include iui-input-label-inline;
-      // right align labels
-      justify-self: end;
-      text-align: end;
-    }
-  }
-}

package/scss/input/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-input {
-  @include iui-input;
-}
-
-.iui-input-with-icon.iui-input-with-icon {
-  @include iui-input-with-icon;
-}
-
-.iui-end-icon {
-  @include iui-end-icon;
-}

package/scss/input/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 './input';
-@import './input-with-icon';

package/scss/input/input-with-icon.scss

@@ -1,37 +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 to have inputs combined with icon (eg. select)
-@mixin iui-input-with-icon {
-  display: grid;
-  align-items: center;
-  cursor: pointer;
-
-  > :first-child {
-    grid-area: 1 / -1;
-    padding-right: $iui-icons-default + $iui-l;
-  }
-
-  &:focus-within {
-    > :first-child {
-      // --_focus-color can be used to control this from outside
-      outline: 2px solid var(--_focus-color, var(--iui-color-foreground-primary));
-      outline-offset: -2px;
-    }
-  }
-
-  &:hover {
-    > :first-child {
-      // --_hover-color can be used to control this from outside
-      border-color: var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)));
-    }
-  }
-}
-
-@mixin iui-end-icon {
-  @include iui-input-icon-inline;
-  display: flex;
-  grid-area: 1 / -1;
-}

package/scss/input/input.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 '../utils/index';
-
-@mixin iui-input {
-  @include iui-reset;
-  @include iui-focus($offset: -2px, $thickness: 2px);
-  width: 100%;
-  font-family: inherit;
-  font-size: $iui-font-size;
-  font-weight: $iui-font-weight-normal;
-  line-height: $iui-line-height;
-  border-radius: $iui-border-radius;
-  appearance: none;
-  padding: $iui-component-padding-vertical $iui-component-padding-horizontal;
-  min-height: $iui-component-height;
-  color: var(--iui-text-color);
-  background-color: var(--iui-color-background-1);
-  border: 1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  @media (prefers-reduced-motion: no-preference) {
-    transition: border-color $iui-speed-fast ease-out;
-  }
-
-  &.iui-small {
-    padding-top: $iui-component-padding-vertical-small;
-    padding-bottom: $iui-component-padding-vertical-small;
-    min-height: $iui-component-height-small;
-  }
-
-  &.iui-large {
-    padding-top: $iui-component-padding-vertical-large;
-    padding-bottom: $iui-component-padding-vertical-large;
-    min-height: $iui-component-height-large;
-    font-size: $iui-font-size-leading;
-  }
-
-  &::placeholder {
-    user-select: none;
-    color: var(--iui-text-color-placeholder);
-  }
-
-  &:autofill {
-    @include iui-input-autofill;
-  }
-
-  &:hover {
-    border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-    @media (prefers-reduced-motion: no-preference) {
-      transition: border-color $iui-speed-fast ease-out;
-    }
-  }
-
-  &[disabled] {
-    background-color: var(--iui-color-background-disabled);
-    border-color: var(--iui-color-background-disabled);
-    cursor: not-allowed;
-    --_hover-color: var(--iui-color-background-disabled);
-  }
-}
-
-@mixin iui-input-autofill {
-  border-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  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));
-}

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

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

package/scss/keyboard/keyboard.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 '../style/index';
-@import '../utils/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;
-  background-color: var(--iui-color-background-1);
-  border: 1px solid var(--iui-color-background-5);
-  box-shadow: 0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: box-shadow $iui-speed-fast ease-out;
-  }
-
-  &:hover {
-    box-shadow: 0 0 0 var(--iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, var(--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,49 +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);
-    position: relative;
-    border: solid 1px var(--iui-color-foreground-accessory);
-    background-color: var(--iui-color-foreground-accessory);
-    color: var(--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;
-      border-color: var(--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 {
-        fill: var(--iui-color-foreground-accessory);
-      }
-    }
-  }
-}

package/scss/location-marker/default.scss

@@ -1,19 +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 {
-      fill: var(--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,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 '../utils/index';
-
-@mixin iui-location-marker {
-  @include iui-reset;
-
-  display: inline-block;
-  user-select: none;
-  position: relative;
-}

package/scss/location-marker/me.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 '../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;
-  background: radial-gradient(
-    circle at center,
-    rgba(var(--iui-color-foreground-primary-rgb), 0),
-    rgba(var(--iui-color-foreground-primary-rgb), var(--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%;
-    border: 1px solid var(--iui-color-foreground-accessory);
-    background-color: var(--iui-color-background-primary);
-  }
-}