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

1 files changed, 73 insertions, 0 deletions

diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
new file mode 100644
index 00000000..92e167a2
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_content.scss
@@ -0,0 +1,73 @@
+@import 'src/_variables.scss';
+
+.settings-modal-panel {
+  overflow: hidden;
+  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;
+  }
+
+  .settings_tab-switcher {
+    height: 100%;
+  }
+  .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;
+    }
+  }
+}