separate shadow preview into its own component, needed for themes3 editor

1 files changed, 0 insertions, 99 deletions

diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
index 19009a3d..cdaefa88 100644
--- a/src/components/shadow_control/shadow_control.scss
+++ b/src/components/shadow_control/shadow_control.scss
@@ -82,107 +82,8 @@
     order: 2;
     flex: 3 3 15em;
     min-width: 10em;
-    display: grid;
     margin-left: 0.125em;
     align-self: start;
-    grid-template-columns: 3em 1fr 3em;
-    grid-template-rows: 2em 1fr 2em;
-    grid-template-areas:
-      ".       header  y-num  "
-      ".       preview y-slide"
-      "x-num   x-slide .      "
-      "options options options";
-    grid-gap: 0.5em;
-
-    .header {
-      grid-area: header;
-      justify-self: center;
-      align-self: baseline;
-      line-height: 2;
-    }
-
-    .input-light-grid {
-      grid-area: options;
-      justify-self: center;
-    }
-
-    .input-number {
-      min-width: 2em;
-    }
-
-    .x-shift-number {
-      grid-area: x-num;
-    }
-
-    .x-shift-slider {
-      grid-area: x-slide;
-      height: auto;
-      align-self: start;
-      min-width: 10em;
-    }
-
-    .y-shift-number {
-      grid-area: y-num;
-    }
-
-    .y-shift-slider {
-      grid-area: y-slide;
-      writing-mode: vertical-lr;
-      justify-self: left;
-      min-height: 10em;
-    }
-
-    .x-shift-slider,
-    .y-shift-slider {
-      padding: 0;
-    }
-
-    .preview-window {
-      --__grid-color1: rgb(102 102 102);
-      --__grid-color2: rgb(153 153 153);
-      --__grid-color1-disabled: rgba(102 102 102 / 20%);
-      --__grid-color2-disabled: rgba(153 153 153 / 20%);
-
-      &.-light-grid {
-        --__grid-color1: rgb(205 205 205);
-        --__grid-color2: rgb(255 255 255);
-        --__grid-color1-disabled: rgba(205 205 205 / 20%);
-        --__grid-color2-disabled: rgba(255 255 255 / 20%);
-      }
-
-      grid-area: preview;
-      aspect-ratio: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 10em;
-      min-height: 10em;
-      background-color: var(--__grid-color2);
-      background-image:
-        linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
-        linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
-        linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
-      background-size: 20px 20px;
-      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
-      border-radius: var(--roundness);
-
-      &.disabled {
-        background-color: var(--__grid-color2-disabled);
-        background-image:
-          linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
-          linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
-          linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
-          linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
-      }
-
-      .preview-block {
-        width: 33%;
-        height: 33%;
-        border-radius: var(--roundness);
-        background: var(--background);
-      }
-    }
   }
 }