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

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,185 +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';
-
-$iui-active-outline: thin solid var(--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;
-  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;
-    opacity: var(--iui-opacity-3);
-  }
-
-  > .iui-icon {
-    @include iui-menu-icon;
-  }
-
-  &:hover {
-    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  }
-
-  &:focus,
-  &.iui-focused {
-    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 {
-      background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-      color: var(--iui-color-foreground-primary);
-      outline: $iui-active-outline;
-      outline-offset: -1px;
-    }
-
-    .iui-menu-description {
-      opacity: 1;
-    }
-
-    > .iui-icon {
-      fill: var(--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;
-      background-color: var(--iui-color-background-1);
-      color: var(--iui-text-color-placeholder);
-
-      > .iui-icon {
-        fill: var(--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;
-  background-color: var(--iui-color-background-border);
-}
-
-@mixin iui-menu-icon {
-  width: $iui-icons-default;
-  height: $iui-icons-default;
-  flex: 0 0 auto;
-  fill: var(--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,56 +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 '../text/mixins';
-
-@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/progress-indicator/classes.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 './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 {
-  @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';

package/scss/progress-indicator/linear.scss

@@ -1,108 +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-progress-indicator-linear($height: 4px) {
-  @include iui-reset;
-  text-align: left;
-  display: block;
-
-  > .iui-track {
-    width: 100%;
-    height: $height;
-    overflow: hidden;
-    background-color: var(--iui-color-background-border);
-
-    > .iui-fill {
-      display: inline-block;
-      height: 100%;
-      vertical-align: top;
-      background-color: var(--iui-color-foreground-primary);
-    }
-  }
-
-  > .iui-label {
-    align-items: center;
-    width: 100%;
-    overflow: hidden;
-    margin-top: $iui-xs;
-    display: flex;
-    font-size: $iui-font-size-small;
-    justify-content: space-between;
-
-    > :only-child {
-      margin: 0 auto;
-    }
-
-    > :last-child:not(:first-child) {
-      user-select: none;
-    }
-
-    svg {
-      display: flex; // needed for vertical alignment of webcomponents
-      width: $iui-icons-default;
-      height: $iui-icons-default;
-    }
-  }
-
-  &.iui-positive {
-    > .iui-track,
-    > .iui-track > * {
-      background-color: var(--iui-color-foreground-positive);
-    }
-
-    > .iui-label {
-      color: var(--iui-color-foreground-positive);
-
-      svg {
-        fill: var(--iui-icons-color-positive);
-      }
-
-      > span {
-        @include iui-text-selection(positive);
-      }
-    }
-  }
-
-  &.iui-negative {
-    > .iui-track > * {
-      width: 100%;
-      background-color: var(--iui-color-foreground-negative);
-    }
-
-    > .iui-label {
-      color: var(--iui-color-foreground-negative);
-
-      svg {
-        fill: var(--iui-icons-color-negative);
-      }
-
-      > span {
-        @include iui-text-selection(negative);
-      }
-    }
-  }
-}
-
-@mixin iui-progress-indicator-linear-determinate($speed: 2s) {
-  transition: width $speed ease-in-out;
-}
-
-@mixin iui-progress-indicator-linear-indeterminate() {
-  @keyframes iui-progress-indicator-linear-animate-indeterminate {
-    0% {
-      transform: translateX(-60%) scaleX(0);
-    }
-
-    40% {
-      transform: translateX(-40%) scaleX(0.4);
-    }
-
-    100% {
-      transform: translateX(100%) scaleX(0.5);
-    }
-  }
-  width: 100%;
-  animation: iui-progress-indicator-linear-animate-indeterminate 1.5s infinite linear;
-}

package/scss/progress-indicator/overlay.scss

@@ -1,51 +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-progress-indicator-overlay {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  left: 0;
-  z-index: 10000;
-  pointer-events: none;
-
-  // Blur fallback
-  background-color: rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-2));
-
-  // With blur
-  @supports (backdrop-filter: $iui-blur-filter) {
-    background-color: rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-3));
-    backdrop-filter: $iui-blur-filter;
-  }
-
-  // Focus trap
-  &:focus,
-  &:focus-visible {
-    outline: 0;
-  }
-
-  .iui-progress-indicator-linear {
-    width: 50%;
-    max-width: 33vw;
-  }
-
-  // Fade out on completion
-  @keyframes closeAnimation {
-    from {
-      opacity: var(--iui-opacity-1);
-    }
-
-    to {
-      opacity: 0;
-    }
-  }
-
-  .iui-overlay-exiting {
-    animation: closeAnimation $iui-speed-fast linear;
-  }
-}

package/scss/progress-indicator/radial.scss

@@ -1,155 +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-progress-indicator-radial {
-  position: relative;
-  display: inline-block;
-  @include iui-progress-indicator-radial-size($size: $iui-icons-xl);
-
-  > .iui-radial {
-    height: 100%;
-    width: 100%;
-
-    > circle.iui-fill {
-      stroke: var(--iui-color-foreground-primary);
-      fill: none;
-      stroke-width: 3.2;
-    }
-
-    > circle.iui-track {
-      stroke: var(--iui-color-background-5);
-      fill: none;
-      stroke-width: 3.2;
-    }
-  }
-
-  .iui-inner-content {
-    position: absolute;
-    display: flex;
-    width: calc(100% - #{$iui-s});
-    height: calc(100% - #{$iui-s});
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    align-items: center;
-    justify-content: center;
-    font-size: $iui-font-size-small;
-    user-select: none;
-    overflow: hidden;
-
-    svg,
-    img {
-      display: flex;
-      width: $iui-icons-default;
-      height: $iui-icons-default;
-      fill: var(--iui-icons-color-actionable);
-
-      &:hover {
-        fill: var(--iui-icons-color-actionable-hover);
-      }
-    }
-  }
-
-  &.iui-positive {
-    color: var(--iui-color-foreground-positive);
-
-    svg.iui-radial {
-      circle.iui-fill,
-      circle.iui-track {
-        stroke: var(--iui-color-foreground-positive);
-      }
-    }
-
-    .iui-inner-content svg {
-      fill: var(--iui-icons-color-positive);
-    }
-  }
-
-  &.iui-negative {
-    color: var(--iui-color-foreground-negative);
-
-    svg.iui-radial circle.iui-fill {
-      stroke: var(--iui-color-foreground-negative);
-    }
-
-    .iui-inner-content svg {
-      fill: var(--iui-icons-color-negative);
-    }
-  }
-
-  &.iui-x-small {
-    @include iui-progress-indicator-radial-size($size: $iui-icons-default);
-
-    .iui-inner-content {
-      display: none;
-    }
-  }
-
-  &.iui-small {
-    @include iui-progress-indicator-radial-size($size: $iui-icons-large);
-  }
-
-  &.iui-large {
-    @include iui-progress-indicator-radial-size($size: $iui-icons-xxl);
-
-    .iui-inner-content {
-      font-size: $iui-font-size-leading;
-
-      svg,
-      img {
-        width: $iui-icons-large;
-        height: $iui-icons-large;
-      }
-    }
-  }
-}
-
-@mixin iui-progress-indicator-radial-determinate {
-  svg.iui-radial {
-    transform: rotate(-90deg);
-
-    circle.iui-fill {
-      // C = 2πR
-      stroke-dasharray: 88;
-      transition: stroke-dashoffset 0.5s ease-in-out;
-    }
-  }
-}
-
-@mixin iui-progress-indicator-radial-indeterminate {
-  svg.iui-radial {
-    animation: rotate-indeterminate 2s linear infinite;
-
-    circle.iui-fill {
-      animation: dash-indeterminate 1.5s ease-in-out infinite;
-    }
-  }
-
-  @keyframes rotate-indeterminate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes dash-indeterminate {
-    0% {
-      stroke-dasharray: 1, 88;
-    }
-
-    50% {
-      stroke-dasharray: 88, 88;
-      stroke-dashoffset: -22;
-    }
-
-    100% {
-      stroke-dasharray: 88, 88;
-      stroke-dashoffset: -88;
-    }
-  }
-}
-
-@mixin iui-progress-indicator-radial-size($size) {
-  width: $size;
-  height: $size;
-}

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

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

package/scss/radio/radio.scss

@@ -1,18 +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 '../checkbox/index';
-
-@mixin iui-radio {
-  @include iui-checkbox;
-
-  border-radius: 50%;
-
-  &:checked {
-    --_iui-checkbox-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><circle cx="8" cy="8" r="4" /></svg>');
-  }
-
-  &:not(:checked),
-  &:indeterminate {
-    --_iui-checkbox-mask-image: var(--_iui-checkbox-unchecked-svg);
-  }
-}

package/scss/radio-tile/classes.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 './index';
-
-.iui-radio-tile {
-  @include iui-radio-tile;
-}
-
-.iui-radio-tile-content {
-  @include iui-radio-tile-content;
-}
-
-.iui-radio-tile-container {
-  @include iui-radio-tile-container;
-}
-
-.iui-radio-tile-input {
-  @include iui-radio-tile-input;
-}
-
-.iui-radio-tile-icon {
-  @include iui-radio-tile-icon;
-}
-
-.iui-radio-tile-label {
-  @include iui-radio-tile-label;
-}
-
-.iui-radio-tile-sublabel {
-  @include iui-radio-tile-sublabel;
-}

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