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

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

@@ -1,280 +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 '../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;
-  box-sizing: border-box;
-  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;
-  @include themed {
-    background-color: t(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;
-    @include themed {
-      color: t(iui-color-foreground-primary);
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(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;
-    box-sizing: border-box;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    @include themed {
-      border: 2px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
-    }
-  }
-
-  &:hover {
-    background-color: initial;
-    @include themed {
-      color: t(iui-color-foreground-primary);
-    }
-  }
-
-  &:hover::before {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-    }
-  }
-}
-
-@mixin iui-calendar-day-selected-base {
-  font-weight: $iui-font-weight-semibold;
-  @include themed {
-    background-color: t(iui-color-background-primary);
-    color: t(iui-color-foreground-accessory);
-  }
-  @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px);
-}
-
-@mixin iui-calendar-day-selected-today-base {
-  &:hover {
-    @include themed {
-      background-color: t(iui-color-background-primary);
-      color: t(iui-color-foreground-accessory);
-    }
-
-    &::before {
-      @include themed {
-        background-color: initial;
-      }
-    }
-  }
-
-  &::before {
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-accessory-rgb), t(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;
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
-      color: t(iui-text-color);
-    }
-
-    &:hover {
-      font-weight: $iui-font-weight-semibold;
-
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
-      }
-    }
-  }
-
-  &-today {
-    @include iui-calendar-day-today-base;
-
-    &:hover {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
-        color: t(iui-text-color);
-      }
-
-      &::before {
-        @include themed {
-          background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
-        }
-      }
-    }
-
-    &::before {
-      @include themed {
-        border-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
-      }
-    }
-  }
-}
-
-@mixin iui-calendar-day-outside-month {
-  &,
-  &-today {
-    @include iui-calendar-day-base;
-    @include iui-calendar-day-base-hover;
-
-    @include themed {
-      color: t(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;
-}

package/scss/dialog/dialog.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 '../icon/index';
-
-$iui-dialog-width: 380px;
-
-@mixin iui-dialog-wrapper {
-  position: relative;
-  overflow: hidden;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  transform: translateX(0); // creates containing block for position: fixed
-}
-
-@mixin iui-dialog {
-  z-index: 999;
-  isolation: isolate;
-  border-radius: $iui-border-radius;
-  box-shadow: $iui-elevation-24;
-  box-sizing: border-box;
-  position: fixed;
-  padding: $iui-baseline $iui-m;
-  box-sizing: border-box;
-  padding: $iui-baseline $iui-m;
-  overflow: hidden;
-  pointer-events: auto;
-  background-color: #FFF; // IE fallback
-  background-color: var(--iui-color-background-1);
-  @media (forced-colors: active) {
-    border: 1px solid;
-  }
-
-  &:not(.iui-dialog-visible) {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  transition: visibility $iui-speed-instant linear, opacity $iui-speed-fast ease-out;
-  transition-delay: $iui-speed-fast, $iui-speed-instant;
-
-  &.iui-dialog-visible {
-    transition-delay: $iui-speed-instant; // remove delay for entry animation
-  }
-}
-
-@mixin iui-dialog-default {
-  max-width: Max(50%, $iui-dialog-width);
-  min-width: $iui-dialog-width;
-  max-height: 100vh;
-}
-
-@mixin iui-dialog-placement {
-  &:not([data-iui-placement]) {
-    left: 50%;
-    top: 33%;
-    transform: translate(-50%, -33%);
-  }
-
-  &[data-iui-placement='top-left'] {
-    top: 0;
-    left: 0;
-    margin-left: $iui-baseline;
-    margin-top: $iui-m;
-  }
-
-  &[data-iui-placement='top-right'] {
-    top: 0;
-    right: 0;
-    margin-right: $iui-baseline;
-    margin-top: $iui-m;
-  }
-
-  &[data-iui-placement='bottom-left'] {
-    bottom: 0;
-    left: 0;
-    margin-left: $iui-baseline;
-    margin-bottom: $iui-m;
-  }
-
-  &[data-iui-placement='bottom-right'] {
-    bottom: 0;
-    right: 0;
-    margin-right: $iui-baseline;
-    margin-bottom: $iui-m;
-  }
-}
-
-@mixin iui-dialog-full-page {
-  border-radius: 0;
-  height: 100vh;
-  height: 100dvh;
-  width: 100vw;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  will-change: transform;
-
-  &:not(.iui-dialog-visible) {
-    transform: translateY(100%);
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed,
-      transform $iui-speed-fast ease-in;
-
-    &.iui-dialog-visible {
-      transition: transform $iui-speed ease-out;
-    }
-  }
-}
-
-@mixin iui-dialog-draggable {
-  max-width: 100%;
-  max-height: 100vh;
-  min-width: $iui-dialog-width;
-  min-height: 144px;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--iui-color-background-border);
-}
-
-@mixin iui-dialog-animation {
-  &-enter {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-
-  &-enter-active {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@mixin iui-dialog-title {
-  display: flex;
-  align-items: center;
-  font-size: inherit;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.5;
-  margin-right: auto;
-}
-
-@mixin iui-dialog-title-bar {
-  display: flex;
-  align-items: center;
-  margin-bottom: $iui-baseline;
-  box-sizing: border-box;
-  font-size: $iui-font-size-subheading;
-}
-
-@mixin iui-dialog-title-bar-filled {
-  font-size: $iui-font-size-leading;
-  padding: round($iui-baseline * 0.5) $iui-m;
-  margin: -#{$iui-baseline} -#{$iui-m} $iui-baseline -#{$iui-m}; // negative margin to counteract dialog padding
-  cursor: grab;
-  background-color: var(--iui-color-background-3);
-  border-bottom: 1px solid var(--iui-color-background-border);
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-@mixin iui-dialog-content {
-  flex-grow: 2;
-  margin: 0 -#{$iui-m};
-  padding: 0 $iui-m;
-  overflow-y: auto;
-  overflow-y: overlay;
-}
-
-@mixin iui-dialog-button-bar {
-  margin-top: $iui-baseline;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: $iui-s;
-}

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

package/scss/expandable-block/block.scss

@@ -1,193 +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/mixins';
-@import '../icon/index';
-
-@mixin iui-expandable-block {
-  @include iui-reset;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  width: 100%;
-  @include themed {
-    background-color: t(iui-color-background-1);
-  }
-
-  > .iui-header {
-    @include iui-focus;
-    display: flex;
-    align-items: center;
-    padding: $iui-baseline $iui-sm;
-    cursor: pointer;
-    box-sizing: border-box;
-    user-select: none;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: background-color $iui-speed-fast ease-out;
-    }
-    @include themed {
-      border: 1px solid t(iui-color-background-3);
-      border-bottom-color: t(iui-color-background-4);
-      background-color: t(iui-color-background-3);
-    }
-
-    > .iui-icon,
-    > .iui-status-icon {
-      display: inline-flex;
-      flex-shrink: 0;
-      width: $iui-icons-default;
-      height: $iui-icons-default;
-    }
-
-    > .iui-icon {
-      @media (prefers-reduced-motion: no-preference) {
-        transition: transform $iui-speed-fast ease-out;
-      }
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
-    }
-
-    > .iui-status-icon {
-      margin-left: $iui-sm;
-      @include iui-icons-color;
-    }
-
-    .iui-expandable-block-label {
-      display: flex;
-      flex-direction: column;
-      flex: auto;
-      min-width: 0;
-      margin-left: $iui-sm;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: color $iui-speed-fast ease;
-      }
-      @include themed {
-        color: t(iui-text-color);
-      }
-    }
-
-    .iui-title,
-    .iui-caption {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .iui-title {
-      font-size: $iui-font-size-leading;
-    }
-
-    .iui-caption {
-      font-size: $iui-font-size-small;
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
-    }
-
-    @include iui-focus;
-  }
-
-  .iui-expandable-content {
-    overflow: hidden;
-    box-sizing: border-box;
-
-    @include themed {
-      border-bottom: 1px solid t(iui-color-background-4);
-      border-right: 1px solid t(iui-color-background-4);
-      border-left: 1px solid t(iui-color-background-4);
-    }
-
-    @include iui-transition-group;
-
-    // padding should be in a separate div because otherwise it messes up height transition
-    > div {
-      padding: $iui-baseline $iui-sm;
-    }
-  }
-
-  &:hover {
-    > .iui-header {
-      @include themed {
-        background-color: t(iui-color-background-4);
-      }
-
-      > .iui-icon {
-        @include themed {
-          fill: t(iui-icons-color-actionable-hover);
-        }
-      }
-
-      .iui-caption,
-      .iui-title {
-        @include themed {
-          color: t(iui-color-foreground-body);
-        }
-        @media (prefers-reduced-motion: no-preference) {
-          transition: color $iui-speed-fast ease;
-        }
-      }
-    }
-  }
-
-  &.iui-expanded {
-    > .iui-header {
-      @include themed {
-        background-color: t(iui-color-background-3);
-        border-left: 1px solid t(iui-color-background-4);
-        border-top: 1px solid t(iui-color-background-4);
-        border-right: 1px solid t(iui-color-background-4);
-
-        &:hover {
-          @include themed {
-            background-color: t(iui-color-background-4);
-          }
-        }
-      }
-
-      > .iui-icon {
-        transform: rotate(90deg);
-      }
-    }
-  }
-
-  &.iui-small .iui-header {
-    padding: ($iui-baseline * 0.5) $iui-s;
-
-    > .iui-icon {
-      width: $iui-icons-small;
-      height: $iui-icons-small;
-    }
-
-    > .iui-expandable-block-label {
-      margin-left: $iui-s;
-    }
-
-    > .iui-status-icon {
-      margin-left: $iui-s;
-    }
-  }
-
-  &.iui-borderless {
-    &,
-    .iui-header,
-    .iui-expandable-content {
-      background-color: transparent;
-      border: initial;
-    }
-
-    .iui-header {
-      border-radius: $iui-border-radius;
-
-      &:hover {
-        @include themed {
-          background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-        }
-      }
-    }
-
-    .iui-expandable-content > div {
-      padding: 0;
-    }
-  }
-}

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

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