DEV: Separate styles into partials

common/common.scss

@@ -1,108 +1,7 @@
-.table-builder-modal-modal {
-  .modal-inner-container {
-    --modal-max-width: 90vw;
-  }
-}
-
-.table-header-fields {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 2rem;
-
-  .table-builder-input {
-    font-weight: bold;
-  }
-
-  .header-column {
-    border: 1px solid var(--primary-low-mid);
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .column-action-buttons {
-    display: flex;
-    width: 100%;
-    gap: 0.5rem;
-    margin-top: auto;
-    border-top: 1px solid var(--primary-low-mid);
-    padding-top: 1rem;
-
-    .btn {
-      flex: 1;
-    }
-
-    &.column-aligned {
-      &-right .btn-align-right {
-        background: var(--primary-high);
-        .d-icon {
-          color: var(--primary-very-low);
-        }
-      }
-      &-left .btn-align-left {
-        background: var(--primary-high);
-        .d-icon {
-          color: var(--primary-very-low);
-        }
-      }
-      &-center .btn-align-center {
-        background: var(--primary-high);
-        .d-icon {
-          color: var(--primary-very-low);
-        }
-      }
-    }
-  }
-
-  .body-inputs {
-    display: flex;
-    flex-direction: column;
-
-    .table-builder-input {
-      font-weight: normal;
-    }
-  }
-
-  .body-row {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    margin-bottom: 1rem;
-    gap: 0.5rem;
-
-    input {
-      margin-bottom: 0;
-    }
-  }
-}
-
-// EDIT BUTTON RELATED (TODO move to partials)
-.open-popup-link {
-  display: inline;
-  margin-inline: 0.25em;
-}
-
-.btn-edit-table {
-  background: var(--tertiary);
-  color: var(--secondary);
-
-  .d-icon {
-    color: var(--secondary);
-  }
-
-  .discourse-no-touch & {
-    &:hover {
-      background-color: var(--tertiary-hover);
-      color: var(--secondary);
-
-      .d-icon {
-        color: var(--secondary);
-      }
-    }
-  }
-}
-
 @import "vendor/jspreadsheet";
 @import "vendor/jspreadsheet-datatables";
 @import "vendor/jspreadsheet-theme";
 @import "vendor/jsuites";
+
+@import "table-builder";
+@import "table-editor";

scss/table-builder.scss

@@ -0,0 +1,77 @@
+.table-builder-modal-modal {
+  .modal-inner-container {
+    --modal-max-width: 90vw;
+  }
+}
+
+.table-header-fields {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+
+  .table-builder-input {
+    font-weight: bold;
+  }
+
+  .header-column {
+    border: 1px solid var(--primary-low-mid);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .column-action-buttons {
+    display: flex;
+    width: 100%;
+    gap: 0.5rem;
+    margin-top: auto;
+    border-top: 1px solid var(--primary-low-mid);
+    padding-top: 1rem;
+
+    .btn {
+      flex: 1;
+    }
+
+    &.column-aligned {
+      &-right .btn-align-right {
+        background: var(--primary-high);
+        .d-icon {
+          color: var(--primary-very-low);
+        }
+      }
+      &-left .btn-align-left {
+        background: var(--primary-high);
+        .d-icon {
+          color: var(--primary-very-low);
+        }
+      }
+      &-center .btn-align-center {
+        background: var(--primary-high);
+        .d-icon {
+          color: var(--primary-very-low);
+        }
+      }
+    }
+  }
+
+  .body-inputs {
+    display: flex;
+    flex-direction: column;
+
+    .table-builder-input {
+      font-weight: normal;
+    }
+  }
+
+  .body-row {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 1rem;
+    gap: 0.5rem;
+
+    input {
+      margin-bottom: 0;
+    }
+  }
+}

scss/table-editor.scss

@@ -0,0 +1,24 @@
+.open-popup-link {
+  display: inline;
+  margin-inline: 0.25em;
+}
+
+.btn-edit-table {
+  background: var(--tertiary);
+  color: var(--secondary);
+
+  .d-icon {
+    color: var(--secondary);
+  }
+
+  .discourse-no-touch & {
+    &:hover {
+      background-color: var(--tertiary-hover);
+      color: var(--secondary);
+
+      .d-icon {
+        color: var(--secondary);
+      }
+    }
+  }
+}