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

package/scss/color-picker/color-picker.scss

@@ -1,241 +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 '../surface/index';
-@import '../button/borderless';
-@import '../utils/index';
-
-$iui-color-picker-content-width: ($iui-l * 9) + ($iui-s * 8); // (9 swatches per row) + (gaps)
-$iui-color-picker-max-width: ($iui-l * 10) + ($iui-s * 9); // (10 swatches per row) + (gaps)
-$iui-color-swatch-border-radius: 5px;
-$iui-inset-box-shadow: inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-$iui-active-box-shadow: 0 0 0 $iui-xxs rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
-$iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-
-@mixin iui-color-picker {
-  --iui-color-picker-selected-color: initial;
-
-  @include iui-surface;
-  border-radius: $iui-border-radius;
-  display: inline-flex;
-  padding: $iui-baseline $iui-sm;
-  user-select: none;
-  overflow-y: auto;
-  flex-direction: column;
-  max-height: $iui-baseline * 45;
-  @supports (overflow-y: overlay) {
-    overflow-y: overlay;
-  }
-  row-gap: $iui-baseline;
-}
-
-@mixin iui-color-swatch {
-  --iui-color-swatch-background: initial;
-
-  height: $iui-l;
-  width: $iui-l;
-  cursor: pointer;
-  border-radius: $iui-color-swatch-border-radius;
-  position: relative;
-  background-color: var(--iui-color-swatch-background);
-  forced-color-adjust: none;
-  @include iui-transparent-background;
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: inherit;
-    height: inherit;
-    border-radius: inherit;
-    background-color: inherit;
-    box-shadow: $iui-inset-box-shadow;
-  }
-
-  &:hover {
-    box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow;
-  }
-
-  @include iui-focus($offset: 1px, $thickness: 2px);
-
-  &.iui-active {
-    box-shadow: $iui-active-box-shadow, $iui-inset-box-shadow;
-
-    &:hover {
-      box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow, $iui-active-box-shadow;
-    }
-  }
-}
-
-@mixin iui-color-palette {
-  //Contains the color swatches
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  min-height: $iui-l;
-  min-width: $iui-l;
-  gap: $iui-s;
-
-  button[data-iui-variant='borderless'] {
-    --_iui-button-height: #{$iui-l};
-    --_iui-button-padding-inline: 0;
-  }
-
-  &-wrapper {
-    max-width: $iui-color-picker-content-width;
-
-    &:only-child {
-      max-width: $iui-color-picker-max-width;
-    }
-  }
-}
-
-@mixin iui-color-input {
-  display: flex;
-  align-items: center;
-
-  &-wrapper {
-    max-width: $iui-color-picker-content-width;
-  }
-
-  .iui-button {
-    margin-right: $iui-xs;
-  }
-
-  &-fields {
-    display: flex;
-    width: 100%;
-    gap: $iui-xxs;
-
-    > * {
-      flex-grow: 1;
-    }
-
-    input {
-      text-transform: uppercase;
-    }
-
-    input[type='number'] {
-      appearance: textfield;
-      text-align: right;
-
-      &::-webkit-inner-spin-button {
-        appearance: none;
-      }
-    }
-  }
-}
-
-@mixin iui-color-picker-section-label {
-  margin-bottom: $iui-baseline * 0.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-@mixin iui-color-selection-wrapper {
-  display: flex;
-  flex-direction: column;
-  min-width: $iui-color-picker-content-width;
-}
-
-@mixin iui-color-field {
-  --iui-color-field-hue: initial;
-
-  position: relative;
-  cursor: crosshair;
-  width: 100%;
-  height: $iui-baseline * 19;
-  forced-color-adjust: none;
-  background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),
-    linear-gradient(90deg, rgb(255, 255, 255), var(--iui-color-field-hue));
-
-  &:not(:last-child) {
-    margin-bottom: round($iui-baseline * 0.5);
-  }
-}
-
-@mixin iui-hue-slider {
-  .iui-slider-rail {
-    height: $iui-s;
-    forced-color-adjust: none;
-    background: linear-gradient(
-      to right,
-      $iui-color-system-red 0%,
-      $iui-color-system-yellow 17%,
-      rgb(0, 255, 0) 33%,
-      rgb(0, 255, 255) 50%,
-      $iui-color-system-blue 67%,
-      $iui-color-system-magenta 83%,
-      $iui-color-system-red 100%
-    );
-  }
-
-  .iui-slider-thumb {
-    top: 7px;
-  }
-}
-
-@mixin iui-opacity-slider {
-  .iui-slider-rail {
-    height: $iui-s;
-    forced-color-adjust: none;
-    @include iui-transparent-background($size: $iui-s);
-
-    &::before {
-      display: block;
-      content: '';
-      width: 100%;
-      height: 100%;
-      background-image: linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
-    }
-  }
-
-  .iui-slider-thumb {
-    top: 7px;
-  }
-}
-
-@mixin iui-color-dot {
-  --iui-color-dot-inset: initial;
-
-  position: absolute;
-  inset: var(--iui-color-dot-inset);
-  width: $iui-m;
-  height: $iui-m;
-  border-radius: 50%;
-  transform: translate(-$iui-s, -$iui-s);
-  cursor: crosshair;
-  box-shadow: rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 $iui-xxs - 1,
-    inset 0 0 0 $iui-xxs - 1 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
-  background-color: var(--iui-color-picker-selected-color);
-
-  &:hover {
-    box-shadow: $iui-hover-box-shadow;
-  }
-
-  @include iui-focus($offset: 0, $thickness: 2px);
-}
-
-@mixin iui-transparent-background($size: $iui-m) {
-  background-position: 0 0, ($size * 0.5) ($size * 0.5);
-  background-size: $size $size;
-  background-image: repeating-linear-gradient(
-    45deg,
-    var(--iui-color-background-3) 25%,
-    transparent 25%,
-    transparent 75%,
-    var(--iui-color-background-3) 75%,
-    var(--iui-color-background-3)
-  ),
-    repeating-linear-gradient(
-    45deg,
-    var(--iui-color-background-3) 25%,
-    var(--iui-color-background-5) 25%,
-    var(--iui-color-background-5) 75%,
-    var(--iui-color-background-3) 75%,
-    var(--iui-color-background-3)
-  );
-}

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

package/scss/date-picker/classes.scss

@@ -1,47 +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-date-picker {
-  @include iui-date-picker;
-}
-
-.iui-calendar-month-year {
-  @include iui-calendar-month-year;
-}
-
-.iui-calendar-month {
-  @include iui-calendar-month;
-}
-
-.iui-calendar-weekdays {
-  @include iui-calendar-weekdays;
-}
-
-.iui-calendar-week {
-  @include iui-calendar-week;
-}
-
-.iui-calendar-day {
-  @include iui-calendar-day;
-}
-
-.iui-calendar-day-selected {
-  @include iui-calendar-day-selected;
-}
-
-.iui-calendar-day-outside-month {
-  @include iui-calendar-day-outside-month;
-}
-
-.iui-calendar-day-range-start {
-  @include iui-calendar-day-range-start;
-}
-
-.iui-calendar-day-range-end {
-  @include iui-calendar-day-range-end;
-}
-
-.iui-calendar-day-range {
-  @include iui-calendar-day-range;
-}

package/scss/date-picker/date-picker.scss

@@ -1,246 +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 '../surface/index';
-
-$iui-date-picker-cell-width: 40px;
-$iui-date-picker-cell-height: 36px;
-$iui-date-picker-today-circle-size: 32px;
-
-@mixin iui-date-picker {
-  @include iui-surface;
-  user-select: none;
-  display: inline-grid;
-  grid-template-columns: 1fr auto;
-
-  .iui-time-picker {
-    height: 0;
-    min-height: 100%;
-  }
-}
-
-@mixin iui-calendar-month-year {
-  display: inline-flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 $iui-xs;
-  font-weight: $iui-font-weight-bold;
-  gap: $iui-xs;
-
-  > span {
-    width: 156px;
-    white-space: nowrap;
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    line-height: $iui-baseline * 4;
-  }
-}
-
-@mixin iui-calendar-month {
-  overflow: hidden;
-  max-width: 15ch;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-@mixin iui-calendar-weekdays {
-  line-height: $iui-date-picker-cell-height;
-  display: flex;
-  padding: 0 $iui-s;
-  font-weight: $iui-font-weight-bold;
-  background-color: var(--iui-color-background-2);
-
-  > div {
-    white-space: nowrap;
-    overflow: hidden;
-    width: $iui-date-picker-cell-width;
-    text-align: center;
-  }
-}
-
-@mixin iui-calendar-week {
-  white-space: nowrap;
-  line-height: $iui-date-picker-cell-height;
-  display: flex;
-  padding: 0 $iui-s;
-  margin-bottom: $iui-xxs;
-}
-
-//#region Helper mixins
-@mixin iui-calendar-day-base {
-  @include iui-focus;
-  cursor: pointer;
-  text-align: center;
-  width: $iui-date-picker-cell-width;
-  height: $iui-date-picker-cell-height;
-  border-radius: $iui-border-radius;
-  font-variant-numeric: tabular-nums;
-}
-
-@mixin iui-calendar-day-base-hover {
-  &:hover {
-    font-weight: $iui-font-weight-semibold;
-    color: var(--iui-color-foreground-primary);
-    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  }
-}
-
-@mixin iui-calendar-day-today-base {
-  position: relative;
-  font-weight: $iui-font-weight-semibold;
-
-  &::before {
-    content: '';
-    position: absolute;
-    display: block;
-    width: $iui-date-picker-today-circle-size;
-    height: $iui-date-picker-today-circle-size;
-    border-radius: $iui-border-radius-round;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border: 2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-  }
-
-  &:hover {
-    background-color: initial;
-    color: var(--iui-color-foreground-primary);
-  }
-
-  &:hover::before {
-    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  }
-}
-
-@mixin iui-calendar-day-selected-base {
-  font-weight: $iui-font-weight-semibold;
-  background-color: var(--iui-color-background-primary);
-  color: var(--iui-color-foreground-accessory);
-  @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px);
-}
-
-@mixin iui-calendar-day-selected-today-base {
-  &:hover {
-    background-color: var(--iui-color-background-primary);
-    color: var(--iui-color-foreground-accessory);
-
-    &::before {
-      background-color: initial;
-    }
-  }
-
-  &::before {
-    border-color: rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
-  }
-}
-//#endregion Helper mixins
-
-@mixin iui-calendar-day {
-  &,
-  &-today {
-    @include iui-calendar-day-base;
-    @include iui-calendar-day-base-hover;
-  }
-
-  &-today {
-    @include iui-calendar-day-today-base;
-  }
-}
-
-@mixin iui-calendar-day-selected {
-  &,
-  &-today {
-    @include iui-calendar-day-base;
-    @include iui-calendar-day-selected-base;
-    cursor: default;
-  }
-
-  &-today {
-    @include iui-calendar-day-today-base;
-    @include iui-calendar-day-selected-today-base;
-  }
-}
-
-@mixin iui-calendar-day-range-start {
-  &,
-  &-today {
-    @include iui-calendar-day-base;
-    @include iui-calendar-day-selected-base;
-
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    cursor: pointer;
-  }
-
-  &-today {
-    @include iui-calendar-day-today-base;
-    @include iui-calendar-day-selected-today-base;
-  }
-}
-
-@mixin iui-calendar-day-range-end {
-  &,
-  &-today {
-    @include iui-calendar-day-base;
-    @include iui-calendar-day-selected-base;
-
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  &-today {
-    @include iui-calendar-day-today-base;
-    @include iui-calendar-day-selected-today-base;
-  }
-}
-
-@mixin iui-calendar-day-range {
-  &,
-  &-today {
-    @include iui-calendar-day-base;
-
-    border-radius: 0;
-    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-    color: var(--iui-text-color);
-
-    &:hover {
-      font-weight: $iui-font-weight-semibold;
-      background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
-    }
-  }
-
-  &-today {
-    @include iui-calendar-day-today-base;
-
-    &:hover {
-      background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-      color: var(--iui-text-color);
-
-      &::before {
-        background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
-      }
-    }
-
-    &::before {
-      border-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
-    }
-  }
-}
-
-@mixin iui-calendar-day-outside-month {
-  &,
-  &-today {
-    @include iui-calendar-day-base;
-    @include iui-calendar-day-base-hover;
-    color: var(--iui-text-color-muted);
-  }
-
-  &-today {
-    @include iui-calendar-day-today-base;
-  }
-}

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

package/scss/dialog/classes.scss

@@ -1,48 +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-dialog-wrapper {
-  @include iui-dialog-wrapper;
-}
-
-.iui-dialog {
-  @include iui-dialog;
-}
-
-.iui-dialog-default {
-  @include iui-dialog-default;
-  @include iui-dialog-placement;
-}
-
-.iui-dialog-full-page {
-  @include iui-dialog-full-page;
-}
-
-.iui-dialog-draggable {
-  @include iui-dialog-draggable;
-}
-
-.iui-dialog-title {
-  @include iui-dialog-title;
-}
-
-.iui-dialog-title-bar {
-  @include iui-dialog-title-bar;
-}
-
-.iui-dialog-title-bar-filled {
-  @include iui-dialog-title-bar-filled;
-}
-
-.iui-dialog-content {
-  @include iui-dialog-content;
-}
-
-.iui-dialog-button-bar {
-  @include iui-dialog-button-bar;
-}
-
-.iui-dialog-animation {
-  @include iui-dialog-animation;
-}