From b1a7fce05d81ff0b01222b95cccbb5c776579b38 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 23 Oct 2021 19:26:34 +0100
Subject: [PATCH] :art: Move interactive-editor styles into own stylesheet

---
 .../InteractiveEditor/EditPageInfo.vue        |   1 +
 src/styles/schema-editor.scss                 | 100 ++++++++++++++++++
 src/styles/style-helpers.scss                 |  47 --------
 3 files changed, 101 insertions(+), 47 deletions(-)
 create mode 100644 src/styles/schema-editor.scss

diff --git a/src/components/InteractiveEditor/EditPageInfo.vue b/src/components/InteractiveEditor/EditPageInfo.vue
index 8ece0149..215f8bb8 100644
--- a/src/components/InteractiveEditor/EditPageInfo.vue
+++ b/src/components/InteractiveEditor/EditPageInfo.vue
@@ -75,6 +75,7 @@ export default {
 <style lang="scss">
 @import '@/styles/style-helpers.scss';
 @import '@/styles/media-queries.scss';
+@import '@/styles/schema-editor.scss';
 
 .edit-page-info-inner {
   padding: 1rem;
diff --git a/src/styles/schema-editor.scss b/src/styles/schema-editor.scss
new file mode 100644
index 00000000..d252a5c5
--- /dev/null
+++ b/src/styles/schema-editor.scss
@@ -0,0 +1,100 @@
+/* Form elements in the auto-schema form */
+.schema-form {
+  fieldset {
+    border: none;
+    display: flex;
+    flex-direction: column;
+    > div {
+      border-bottom: 1px dashed var(--interactive-editor-color);
+      margin: 0.5rem 0;
+      label {
+        font-size: 1rem;
+        text-decoration: underline;
+      }
+    }
+    div[data-fs-wrapper] {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+      padding: 0.5rem 0;
+      @include tablet-down {
+        flex-direction: column-reverse;
+      }
+      span {
+        font-style: italic;
+        margin-right: 0.5rem;
+        max-width: 20rem;
+      }
+      input {
+        min-width: 15rem;
+        padding: 0.5rem 0.75rem;
+        margin: 0.5rem auto;
+        font-size: 1rem;
+        box-sizing: border-box;
+        color: var(--interactive-editor-color);
+        background: var(--interactive-editor-background);
+        border: 1px solid var(--interactive-editor-color);
+        border-radius: var(--curve-factor);
+        &[type=text]:focus, &[type=number]:focus {
+          box-shadow: 1px 1px 6px var(--interactive-editor-color);
+          outline: none;
+        }
+      }
+      input[type=checkbox] {
+        width: 1.2rem;
+        height: 1.2rem;
+        cursor: pointer;
+      }
+      input[type=radio] {
+        width: 1rem;
+        height: 1rem;
+        cursor: pointer;
+      }
+      div[data-fs-input=object], div[data-fs-input=array] {
+        width: 100%;
+        padding-left: 0.5rem;
+        border-left: 1px dashed var(--interactive-editor-color);
+      }
+      div[data-fs-kind="radio"] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        label {
+          text-decoration: none;
+          text-transform: capitalize;
+        }
+      }
+      select {
+        width: 10rem;
+        height: 2rem;
+        padding: 0.2rem;
+        font-size: 1rem;
+        color: var(--interactive-editor-color);
+        background: var(--interactive-editor-background);
+        border: 1px solid var(--interactive-editor-color);
+        border-radius: var(--curve-factor);
+        &:focus {
+          box-shadow: 1px 1px 6px var(--interactive-editor-color);
+        }
+      }
+      div[data-fs-input=array] button {
+        font-size: 1rem;
+        margin: 0.25rem;
+        border-radius: var(--curve-factor);
+        color: var(--interactive-editor-color);
+        background: var(--interactive-editor-background);
+        border: 1px solid var(--interactive-editor-color);
+        &:hover {
+          color: var(--interactive-editor-background);
+          background: var(--interactive-editor-color);
+        }
+        &:focus {
+          box-shadow: 1px 1px 6px var(--interactive-editor-color);
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/style-helpers.scss b/src/styles/style-helpers.scss
index 6e90e711..6b73c9bc 100644
--- a/src/styles/style-helpers.scss
+++ b/src/styles/style-helpers.scss
@@ -59,53 +59,6 @@
   }
 }
 
-/* Form elements in the auto-schema form */
-.schema-form {
-  fieldset {
-    border: none;
-    display: flex;
-    flex-direction: column;
-    > div {
-      border-bottom: 1px dashed var(--primary);
-      margin: 0.5rem 0;
-      label {
-        font-size: 1rem;
-        text-decoration: underline;
-      }
-    }
-    div[data-fs-wrapper] {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: flex-start;
-      flex-direction: row-reverse;
-      justify-content: space-between;
-      padding: 0.5rem 0;
-      @include tablet-down {
-        flex-direction: column-reverse;
-      }
-      span {
-        font-style: italic;
-        margin-right: 0.5rem;
-      }
-      input {
-        min-width: 15rem;
-        padding: 0.5rem 0.75rem;
-        margin: 0.5rem auto;
-        font-size: 1rem;
-        box-sizing: border-box;
-        color: var(--primary);
-        background: var(--background);;
-        border: 1px solid var(--primary);
-        border-radius: var(--curve-factor);
-        &:focus {
-          box-shadow: 1px 1px 6px var(--config-settings-color);
-          outline: none;
-        }
-      }
-    }
-  }
-}
-
 /* Single-style helpers */
 .bold { font-weight: bold; }
 .light { font-weight: lighter; }