whoops

src/components/style_switcher/style_switcher.scss

@@ -0,0 +1,192 @@
+@import '../../_variables.scss';
+.style-switcher {
+  .preset-switcher {
+    margin-right: 1em;
+  }
+
+  .style-control {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: 5px;
+
+    .label {
+      flex: 1;
+    }
+
+    input, select {
+      min-width: 3em;
+      margin: 0;
+      flex: 0;
+
+      &[type=color] {
+        padding: 1px;
+        cursor: pointer;
+        height: 29px;
+        min-width: 2em;
+        border: none;
+        align-self: stretch;
+      }
+
+      &[type=number] {
+        min-width: 5em;
+      }
+
+      &[type=range] {
+        flex: 1;
+        min-width: 3em;
+      }
+
+      &[type=checkbox] + label {
+        margin: 6px 0;
+      }
+
+      &:not([type=number]):not([type=text]) {
+        align-self: center;
+      }
+
+      &.disabled *:not(.exlcude-disabled) {
+        opacity: .5
+      }
+    }
+  }
+
+  .import-warning {
+    color: $fallback--cRed;
+    color: var(--cRed, $fallback--cRed);
+  }
+
+  .apply-container,
+  .radius-container,
+  .color-container,
+  .presets-container {
+    display: flex;
+
+    p {
+      margin-left: 1em
+    }
+  }
+
+  .radius-container {
+    flex-direction: column;
+  }
+
+  .color-container{
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .presets-container,
+  .shadow-selector {
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+
+    .import-export {
+      display: flex;
+
+      .btn {
+        margin-left: .5em;
+      }
+    }
+    .override {
+      margin-left: .5em;
+    }
+  }
+
+  .preview-container {
+    border-top: 1px dashed;
+    border-bottom: 1px dashed;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    margin: 1em -1em 0;
+    padding: 1em;
+    background: var(--body-background-image);
+    background-size: cover;
+    background-position: 50% 50%;
+
+    .btn {
+      margin-top: 1em;
+      min-height: 30px;
+      width: 10em;
+    }
+  }
+
+  .apply-container {
+    justify-content: center;
+  }
+
+  .radius-item,
+  .color-item {
+    min-width: 20em;
+    margin: 5px 6px 0 0;
+    display:flex;
+    flex-direction: column;
+    flex: 1 1 0;
+
+    &.wide {
+      min-width: 60%
+    }
+    &:not(.wide):nth-child(2n+1) {
+      margin-right: 7px;
+
+    }
+
+    .color, .opacity {
+      display:flex;
+      align-items: baseline;
+    }
+
+    h4 {
+      margin-top: 1em;
+    }
+  }
+
+  .radius-item {
+    flex-basis: auto;
+  }
+
+  .theme-radius-rn,
+  .theme-color-cl {
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+    color: var(--faint, $fallback--faint);
+    align-self: stretch;
+  }
+
+  .theme-color-cl,
+  .theme-radius-in,
+  .theme-color-in {
+    margin-left: 4px;
+  }
+
+  .theme-radius-in {
+    min-width: 1em;
+  }
+
+  .theme-radius-in {
+    max-width: 7em;
+    flex: 1;
+  }
+
+  .theme-radius-lb{
+    max-width: 50em;
+  }
+
+  .theme-preview-content {
+    padding: 20px;
+  }
+
+  .dummy {
+    .avatar {
+      background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
+      color: black;
+      text-align: center;
+      height: 48px;
+      line-height: 48px;
+      width: 48px;
+      float: left;
+      margin-right: 1em;
+    }
+  }
+}