Add toggle switch

components/toggle.vue

@@ -0,0 +1,98 @@
+<template>
+  <div @click="toggle()">
+    <label class="toggle" :class="{on: on}" ref="toggle">
+      <span class="handle"></span>
+    </label>
+    <label class="caption"><slot /></label>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  $useBorder: true;
+  $borderColor: var(--fg-color);
+  $activeColor: var(--ac-color);
+  $inactiveColor: var(--fg-color);
+
+  $inactiveHandleColor: $inactiveColor;
+  $activeHandleColor: var(--fg-color);
+
+  $width: 50px;
+  $height: 20px;
+  $handleSpacing: 4px;
+
+  $transition: all 0.2s ease-in-out;
+
+  div {
+    display: inline-block;
+  }
+
+  label.caption {
+    margin-left: 5px;
+    vertical-align: middle;
+  }
+
+  label.toggle {
+    position: relative;
+    display: inline-block;
+    width: $width;
+    height: $height;
+    border: if($useBorder, 2px solid $borderColor, none);
+    background-color: if($useBorder, transparent, $inactiveColor);
+    vertical-align: middle;
+
+    border-radius: 100px;
+    transition: $transition;
+    box-sizing: initial;
+    padding: 0;
+    margin: 10px 5px;
+
+    .handle {
+      position: absolute;
+      display: inline-block;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      margin: $handleSpacing;
+      background-color: $inactiveHandleColor;
+
+      width: #{ $height - ($handleSpacing * 2) };
+      height: #{ $height - ($handleSpacing * 2) };
+      border-radius: 100px;
+
+      pointer-events: none;
+      transition: $transition;
+
+      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    }
+
+    &.on {
+      background-color: $activeColor;
+      border-color: $activeColor;
+
+      .handle {
+        background-color: $activeHandleColor;
+        left: #{$width - $height};
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+
+      props: {
+          'on': {
+              type: Boolean,
+              default: false
+          }
+      },
+
+      methods: {
+          toggle () {
+              this.$refs.toggle.classList.toggle("on");
+              this.$emit('change', this.$refs.toggle.classList.contains("on"));
+          }
+      }
+
+  }
+</script>

pages/settings.vue

@@ -24,13 +24,14 @@
       <ul>
         <li>
           <h3 class="title">Frames</h3>
-          <input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
-          <label for="disableFrameColors">Enable multi-color</label>
+          <pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
+              Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }}
+          </pw-toggle>
         </li>
       </ul>
     </pw-section>
 
-      <pw-section class="blue" label="Proxy">
+      <!--<pw-section class="blue" label="Proxy">
           <ul>
               <li>
                   <p>
@@ -52,12 +53,13 @@
                   <input id="key" type="password" v-model="url">
               </li>
           </ul>
-      </pw-section>
+      </pw-section>-->
   </div>
 </template>
 <script>
   import section from "../components/section";
   import swatch from "../components/settings/swatch";
+  import toggle from "../components/toggle";
 
   export default {
     data() {
@@ -123,6 +125,7 @@
     },
     components: {
       'pw-section': section,
+      'pw-toggle': toggle,
       'swatch': swatch
     },
     methods: {