@seamly/web-ui 19.1.2 → 20.0.0-beta.2

package/src/stylesheets/5-components/_modal_mode.scss

@@ -1,108 +0,0 @@
-.#{$n}-modal-overlay {
-  @include boxSizing;
-
-  display: none;
-  position: fixed;
-  z-index: 99;
-  top: 0;
-  left: 0;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-
-  &::after {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transition: opacity $transition;
-    opacity: 0;
-    background-color: rgba($app-bg, 0.8);
-  }
-
-  &.#{$n}-transition--visible {
-    display: flex;
-  }
-
-  &.#{$n}-transition--in {
-    &::after {
-      opacity: 1;
-    }
-  }
-
-  .#{$n}-app--layout-modal,
-  .#{$n}-app--layout-modal.#{$n}-app--collapsed {
-    width: 100%;
-    max-width: 96vw;
-    height: 100%;
-    max-height: calc(#{$viewport-height} - #{$flex-spacer * 2});
-
-    // iOS Safari needs a bit more space
-    @supports (-webkit-overflow-scrolling: touch) {
-      max-height: calc(#{$viewport-height * 0.9} - #{$flex-spacer * 2});
-    }
-
-    @include media('>phablet-l') {
-      width: $app-started-width;
-      max-height: calc(#{$viewport-height} - #{$flex-spacer * 2});
-      // iOS Safari needs a bit more space
-      @supports (-webkit-overflow-scrolling: touch) {
-        max-height: calc(#{$viewport-height * 0.9} - #{$flex-spacer * 2});
-      }
-    }
-
-    @include media('>desktop') {
-      right: $spacer;
-      bottom: $spacer;
-      max-height: calc(#{$viewport-height} - #{$spacer * 2});
-      // iOS Safari needs a bit more space
-      @supports (-webkit-overflow-scrolling: touch) {
-        max-height: calc(#{$viewport-height * 0.9} - #{$spacer * 2});
-      }
-    }
-  }
-
-  .#{$n}-app--layout-modal {
-    transform: translateX(150%);
-    transition: transform $transition;
-  }
-
-  &.#{$n}-transition--in .#{$n}-app--layout-modal {
-    transform: translateX(0);
-  }
-
-  .#{$n}-app--layout-modal.#{$n}-app--collapsed {
-    background-color: $app-bg;
-  }
-
-  .#{$n}-app--layout-modal.#{$n}-app--collapsed .#{$n}-toggle-button {
-    display: none;
-  }
-
-  .#{$n}-app--layout-modal.#{$n}-app--collapsed .#{$n}-app__header,
-  .#{$n}-app--layout-modal.#{$n}-app--collapsed .#{$n}-app__body,
-  .#{$n}-app--layout-modal.#{$n}-app--collapsed .#{$n}-app__entry,
-  .#{$n}-app--layout-modal.#{$n}-app--collapsed .#{$n}-header-controls {
-    display: flex;
-  }
-
-  .#{$n}-app--layout-modal.#{$n}-app--collapsed .#{$n}-agent-info__body {
-    display: block;
-  }
-
-  .#{$n}-app--layout-modal.#{$n}-app--collapsed .#{$n}-app__header {
-    border-bottom: $thin-border solid $grey-b;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    background-color: initial;
-    color: set-text-color($app-bg);
-  }
-
-  .#{$n}-header-controls .#{$n}-icon {
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
-  }
-}