split modal's content into another component, add lazy loading

1 files changed, 1 insertions, 70 deletions

diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index b82590a7..ece96364 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -2,11 +2,8 @@
 .settings-modal {
   overflow: hidden;
 
-  .settings_tab-switcher {
-    height: 100%;
-  }
   &.peek {
-    .settings-modal-panel {
+    .modal-panel {
       /* Explanation:
        * Modal is positioned vertically centered.
        * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
@@ -18,70 +15,4 @@
       transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
     }
   }
-
-  .settings-modal-panel {
-    transition: transform;
-    transition-timing-function: ease-in-out;
-    transition-duration: 300ms;
-    width: 1000px;
-    max-width: 90vw;
-    height: 90vh;
-    @media all and (max-width: 800px) {
-      max-width: 100vw;
-      height: 100vh;
-    }
-  }
-  .panel-body {
-    height: 100%;
-    overflow-y: hidden;
-
-    .btn {
-      min-height: 28px;
-      min-width: 10em;
-      padding: 0 2em;
-    }
-  }
-
-  .full-height {
-    height: 100%;
-  }
-
-  .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
-    margin: 1em 1em 1.4em;
-    padding-bottom: 1.4em;
-
-    > div {
-      margin-bottom: .5em;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    &:last-child {
-      border-bottom: none;
-      padding-bottom: 0;
-      margin-bottom: 1em;
-    }
-
-    select {
-      min-width: 10em;
-    }
-
-    textarea {
-      width: 100%;
-      max-width: 100%;
-      height: 100px;
-    }
-
-    .unavailable,
-    .unavailable i {
-      color: var(--cRed, $fallback--cRed);
-      color: $fallback--cRed;
-    }
-
-    .number-input {
-      max-width: 6em;
-    }
-  }
 }