@itwin/itwinui-css 0.57.0 → 0.59.1

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;
-  }
-}