Move common styles into the common stylesheet

Vyxal · Sep 25, 2024 · bf24568 · bf24568
1 parent ec8aa23
commit bf24568
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 78 deletions.
diff --git a/src/common/styles/style.scss b/src/common/styles/style.scss
@@ -6,6 +6,11 @@
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/utilities";
 
+$custom-colors: (
+  "ourple": #712cf9
+);
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
 // Layout & components
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
@@ -45,7 +50,7 @@
 // Utilities
 @import "~bootstrap/scss/utilities/api";
 
-.cm-editor {
+.rounded-cm-wrapper .cm-editor {
     @extend .border;
     @extend .rounded;
 }
@@ -55,4 +60,20 @@
         position: absolute;
         transform: translateY(-50%);
     }
+}
+
+.main {
+    display: flex;
+    flex-direction: row;
+    @include media-breakpoint-down(md) {
+        flex-direction: column;
+        > div {
+            height: 50%;
+        }
+    }
+    @include media-breakpoint-up(md) {
+        > div {
+            width: 50%;
+        }
+    }
 }
diff --git a/src/index/index.hbs b/src/index/index.hbs
@@ -19,7 +19,7 @@
         <div class="container col-xxl-8 px-4 py-5">
             <div class="row align-items-center g-5 py-5 flex-lg-row-reverse">
                 <div class="col-10 col-sm-8 col-lg-6">
-                    <div id="cm-parent"></div>
+                    <div id="cm-parent" class="rounded-cm-wrapper"></div>
                     <script type="module" src="scripts/fizzbuzz.ts"></script>
                 </div>
                 <div class="col-lg-6">

diff --git a/src/latest/scripts/ui/Theseus.tsx b/src/latest/scripts/ui/Theseus.tsx
@@ -168,7 +168,7 @@ export function Theseus({ permalink }: TheseusProps) {
                 }
             }} inputs={inputs} setShowFlagsDialog={setShowFlagsDialog} setShowSettingsDialog={setShowSettingsDialog} setShowShareDialog={setShowShareDialog} setShowInputDialog={setShowInputDialog} setShowElementOffcanvas={setShowElementOffcanvas}
         />
-        <main>
+        <main className="w-100 h-100 main">
             <div>
                 <Suspense
                     fallback={

diff --git a/src/latest/style.scss b/src/latest/style.scss
@@ -1,38 +1,5 @@
-// $accordion-padding-y: 0;
-// $accordion-padding-x: 0;
-// $primary: rgb(59, 130, 246);
+@import "../common/styles/style.scss";
 
-// Configuration
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/variables-dark";
-
-$custom-colors: (
-  "ourple": #712cf9
-);
-$theme-colors: map-merge($theme-colors, $custom-colors);
-
-@import "~bootstrap/scss/maps";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/utilities";
-
-main {
-    display: flex;
-    flex-direction: row;
-    @include media-breakpoint-down(md) {
-        flex-direction: column;
-        > div {
-            height: 50%;
-        }
-    }
-    @include media-breakpoint-up(md) {
-        > div {
-            width: 50%;
-        }
-    }
-    width: 100%;
-    height: 100%;
-}
 
 code.code-pill {
     border-radius: $border-radius-sm;
@@ -113,45 +80,6 @@ code.code-pill {
     }
 }
 
-// Layout & components
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/containers";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/accordion";
-// @import "~bootstrap/scss/breadcrumb";
-// @import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/badge";
-// @import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/close";
-@import "~bootstrap/scss/toasts";
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/tooltip";
-// @import "~bootstrap/scss/popover";
-// @import "~bootstrap/scss/carousel";
-@import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/offcanvas";
-@import "~bootstrap/scss/placeholders";
-
 .input-group {
-    width: initial;
-}
-
-// Helpers
-@import "~bootstrap/scss/helpers";
-
-// Utilities
-@import "~bootstrap/scss/utilities/api";
+    width: initial !important;
+}