@itwin/itwinui-css 0.55.0 → 0.58.0

package/scss/inputs/radio-tile.scss

@@ -1,200 +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';
-
-@mixin iui-radio-tile {
-  display: inline-flex;
-  flex-wrap: wrap;
-  width: fit-content;
-  user-select: none;
-  // Create stacking context
-  position: relative;
-  z-index: 0;
-
-  > label {
-    cursor: pointer;
-
-    > input {
-      width: 0;
-      height: 0;
-      appearance: none;
-      opacity: 0;
-      position: absolute;
-    }
-
-    // Radio tile styling
-    > .iui-radio-tile {
-      width: $iui-xl * 5;
-      height: 100%;
-      box-sizing: border-box;
-      padding: $iui-s;
-      position: relative;
-      z-index: 1;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: border-color $iui-speed-fast ease-out;
-      }
-
-      @include themed {
-        border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-        background-color: t(iui-color-background-1);
-      }
-
-      > .iui-icon {
-        width: $iui-icons-xl;
-        height: $iui-icons-xl;
-        display: block;
-        margin: 0 auto;
-        margin-top: round($iui-baseline * 0.5);
-        margin-bottom: $iui-baseline;
-        @media (prefers-reduced-motion: no-preference) {
-          transition: fill $iui-speed-fast ease-out;
-        }
-        @include themed {
-          fill: t(iui-icons-color);
-        }
-      }
-
-      > .iui-checkmark {
-        display: none;
-        width: $iui-icons-default;
-        height: $iui-icons-default;
-        position: absolute;
-        right: $iui-s;
-
-        @include themed {
-          fill: t(iui-icons-color-primary);
-        }
-      }
-
-      > .iui-label {
-        font-size: $iui-font-size;
-        font-weight: $iui-font-weight-semibold;
-        line-height: $iui-line-height;
-        text-align: center;
-
-        @include themed {
-          color: t(iui-text-color);
-        }
-      }
-
-      > .iui-description {
-        font-size: $iui-font-size-small;
-        line-height: round($iui-baseline * 1.375);
-        text-align: center;
-
-        @include themed {
-          color: t(iui-text-color-muted);
-        }
-      }
-    }
-
-    // Rounded corners on first tile
-    &:first-child > .iui-radio-tile {
-      border-radius: $iui-border-radius 0 0 $iui-border-radius;
-    }
-
-    // Rounded corners on last tile
-    &:last-child > .iui-radio-tile {
-      border-radius: 0 $iui-border-radius $iui-border-radius 0;
-    }
-
-    // All tiles shift 1px left so we don't have 2px thick dividers
-    &:not(:first-child) > .iui-radio-tile {
-      margin-left: -1px;
-    }
-
-    // Adds focus to enabled radio tiles
-    input:enabled {
-      &:focus ~ .iui-radio-tile {
-        @include themed {
-          outline: 2px solid t(iui-color-foreground-primary);
-          outline-offset: -4px;
-        }
-      }
-
-      &:focus:not(:focus-visible) ~ .iui-radio-tile {
-        outline: none;
-      }
-    }
-
-    // Adds hover to everything that is not checked or  disabled
-    &:hover > input:enabled:not(:checked) ~ .iui-radio-tile {
-      z-index: 2;
-      @include themed {
-        border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-      }
-      @media (prefers-reduced-motion: no-preference) {
-        transition: border-color $iui-speed-fast ease-out;
-      }
-
-      > .iui-icon {
-        @include themed {
-          fill: t(iui-icons-color-actionable);
-        }
-        @media (prefers-reduced-motion: no-preference) {
-          transition: fill $iui-speed-fast ease-out;
-        }
-      }
-    }
-
-    // Styles checked radio tile
-    input:checked ~ .iui-radio-tile {
-      padding: $iui-s - 1;
-      z-index: 3;
-
-      @include themed {
-        border: 2px solid t(iui-color-foreground-primary);
-      }
-
-      > .iui-icon {
-        @include themed {
-          fill: t(iui-icons-color-primary);
-        }
-      }
-
-      > .iui-checkmark {
-        display: inline-block;
-      }
-    }
-
-    // Styles disabled radio tile
-    input:disabled ~ .iui-radio-tile {
-      cursor: not-allowed;
-      z-index: 0;
-
-      @include themed {
-        border-color: t(iui-color-background-disabled);
-        background-color: t(iui-color-background-disabled);
-      }
-
-      > .iui-checkmark {
-        @include themed {
-          fill: t(iui-icons-color-actionable-disabled);
-        }
-      }
-
-      > .iui-icon {
-        @include themed {
-          fill: t(iui-icons-color-actionable-disabled);
-        }
-        filter: $iui-icons-color-multicolor-disabled;
-      }
-
-      > .iui-label {
-        @include themed {
-          color: t(iui-text-color-muted);
-        }
-      }
-    }
-
-    // Styles disabled checked radio tile
-    input:disabled:checked ~ .iui-radio-tile {
-      z-index: 3;
-
-      @include themed {
-        border: 2px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-      }
-    }
-  }
-}

package/scss/modal/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-modal {
-  @include iui-modal;
-
-  &-full-page {
-    @include iui-modal-full-page;
-  }
-
-  &-animation {
-    @include iui-modal-animation;
-  }
-}

package/scss/modal/modal.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';
-@import '../icon/index';
-
-@mixin iui-modal {
-  @include iui-reset;
-  z-index: 999;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  @include themed {
-    background-color: rgba(0, 0, 0, t(iui-opacity-4));
-  }
-
-  // #region Small Modal Animations for CSS
-  visibility: hidden;
-  opacity: 0;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: visibility $iui-speed-instant linear $iui-speed-fast, opacity $iui-speed-fast ease-out;
-  }
-
-  &.iui-modal-visible {
-    visibility: visible;
-    opacity: 1;
-    // remove delay for entry animation so it's instantly visible
-    transition-delay: $iui-speed-instant;
-  }
-  // #endregion Small Modal Animations for CSS
-
-  > .iui-modal-dialog {
-    position: absolute;
-    left: 50%;
-    top: 33%;
-    transform: translate(-50%, -33%);
-    z-index: 1000;
-    max-width: 50%;
-    min-width: 380px;
-    max-height: 100vh;
-    border-radius: $iui-border-radius;
-    box-shadow: $iui-elevation-24;
-    padding: $iui-baseline $iui-m;
-    box-sizing: border-box;
-
-    @include themed {
-      background-color: t(iui-color-background-1);
-    }
-
-    @media screen and (max-width: 400px) {
-      max-width: 95%;
-      width: 95%;
-      min-width: 95%;
-    }
-
-    .iui-title-bar {
-      display: flex;
-      align-items: center;
-      margin-bottom: $iui-baseline;
-      justify-content: space-between;
-
-      > .iui-title {
-        font-size: $iui-font-size-subheading;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        line-height: 1.5;
-      }
-    }
-
-    .iui-button-bar {
-      margin-top: $iui-baseline;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-
-      > .iui-button:not(:last-child) {
-        margin-right: $iui-s;
-      }
-    }
-
-    .iui-modal-content {
-      flex-grow: 2;
-      margin: 0 -#{$iui-m};
-      padding: 0 $iui-m;
-      overflow-y: auto;
-      overflow-y: overlay;
-    }
-  }
-}
-
-@mixin iui-modal-full-page {
-  $iui-full-page-modal-slide-in-speed: 0.3s;
-  $iui-full-page-modal-slide-out-speed: 0.25s;
-
-  > .iui-modal-dialog {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    width: 100vw;
-    left: 0;
-    top: 0;
-    transform: none;
-    max-width: initial;
-    min-width: initial;
-    border-radius: 0;
-    will-change: transform;
-  }
-
-  // #region Full Page Modal Animations for CSS
-  @media (prefers-reduced-motion: no-preference) {
-    transition: visibility $iui-speed-instant linear $iui-speed-slow, opacity $iui-speed ease-out $iui-speed-fast;
-  }
-
-  > .iui-modal-dialog {
-    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-full-page-modal-slide-out-speed ease-in;
-    }
-  }
-
-  &.iui-modal-visible > .iui-modal-dialog {
-    transform: translateY(0);
-    @media (prefers-reduced-motion: no-preference) {
-      transition: transform $iui-full-page-modal-slide-in-speed ease-out;
-    }
-  }
-  // #endregion Full Page Modal Animations for CSS
-}
-
-@mixin iui-modal-animation {
-  // Full Page Modal Animations for React
-  &-enter .iui-modal-full-page .iui-modal-dialog {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-
-  &-enter-active .iui-modal-full-page .iui-modal-dialog {
-    transform: translateY(0);
-    opacity: 1;
-  }
-
-  // Small Modal Animations for React
-  &-enter .iui-modal {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  &-enter-active .iui-modal {
-    visibility: visible;
-    opacity: 1;
-  }
-}