add functional setting switch

client/src/modules/ui/vue/components/bd/CssEditor.vue

@@ -5,14 +5,28 @@
 
     /*Imports*/
     import { SettingsWrapper } from './';
-    const components = { SettingsWrapper };
+    import { SettingSwitch } from '../generic';
+    const components = { SettingsWrapper, SettingSwitch };
 
     function openInternalEditor() {
         CssEditor.show();
     }
 
+    function settingClicked() {
+        this.dummySetting.checked = !this.dummySetting.checked;
+    }
+
     export default {
         components,
-        methods: { openInternalEditor }
+        methods: { openInternalEditor, settingClicked },
+        data() {
+            return {
+                dummySetting: {
+                    title: "Live Update",
+                    hint: "Automatically update client css when saved.",
+                    checked: true
+                }
+            }
+        }
     }
 </script>

client/src/modules/ui/vue/components/bd/templates/CssEditor.html

@@ -1,9 +1,5 @@
 <SettingsWrapper headertext="CSS Editor">
     <div class="bd-css-editor">
-        <div class="bd-form-item">
-            <h5>Settings</h5>
-        </div>
-        <div class="bd-form-divider"></div>
         <div class="bd-form-item">
             <h5>Custom Editor</h5>
             <div class="bd-form-warning">
@@ -18,6 +14,7 @@
             </div>
         </div>
         <div class="bd-form-divider"></div>
+        <SettingSwitch :setting="dummySetting" :onClick="settingClicked"/>
         <div class="bd-form-item">
             <h5>System Editor</h5>
             <div class="bd-form-button">

client/src/modules/ui/vue/components/generic/SettingSwitch.vue

@@ -0,0 +1,6 @@
+<template src="./templates/SettingSwitch.html"></template>
+<script>
+    export default {
+        props: ['setting', 'onClick']
+    }
+</script>

client/src/modules/ui/vue/components/generic/index.js

@@ -1 +1,2 @@
 export { default as ScrollerWrap } from './ScrollerWrap.vue';
+export { default as SettingSwitch } from './SettingSwitch.vue';

client/src/modules/ui/vue/components/generic/templates/SettingSwitch.html

@@ -0,0 +1,10 @@
+<div class="bd-setting-switch">
+  <div class="bd-title">
+      <h3>{{setting.title}}</h3>
+      <label class="bd-switch-wrapper" @click="onClick">
+          <input type="checkbox" class="bd-switch-checkbox"/>
+          <div class="bd-switch" :class="{'bd-checked': setting.checked}"/>
+      </label>
+  </div>
+  <div class="bd-hint">{{setting.hint}}</div>
+</div>

client/src/styles/partials/generic.scss

@@ -119,3 +119,98 @@
         background: lighten(#3e82e5, 5%);
     }
 }
+
+.bd-setting-switch {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    -webkit-box-pack: start;
+    justify-content: flex-start;
+    -webkit-box-align: stretch;
+    align-items: stretch;
+}
+
+.bd-setting-switch .bd-title {
+    display: flex;
+    justify-content: flex-start;
+    -webkit-box-align: stretch;
+    align-items: stretch;
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+}
+
+.bd-setting-switch .bd-switch-wrapper {
+    flex: 0 0 auto;
+    user-select: none;
+    position: relative;
+    width: 44px;
+    height: 24px;
+    display: block;
+}
+
+.bd-setting-switch .bd-switch-wrapper input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.bd-setting-switch .bd-switch-wrapper .bd-switch {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: #72767d;
+    border-radius: 14px;
+    transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out;
+}
+
+.bd-setting-switch .bd-title h3 {
+    font-weight: 500;
+    color: #f6f6f7;
+    flex: 1;
+    line-height: 24px;
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+.bd-setting-switch .bd-hint {
+    flex: 1 1 auto;
+    color: #72767d;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 15px;
+    line-height: 30px;
+    border-bottom: 0px solid hsla(218,5%,47%,.1);
+}
+
+.bd-setting-switch .bd-switch-wrapper .bd-switch:before {
+    content: "";
+    display: block;
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    bottom: 3px;
+    background: #f6f6f7;
+    border-radius: 10px;
+    transition: all .15s ease;
+    box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
+}
+
+.bd-setting-switch .bd-switch-wrapper .bd-switch.bd-checked {
+    background: $colbdblue;
+}
+
+.bd-setting-switch .bd-switch-wrapper .bd-switch.bd-checked:before {
+    transform: translateX(20px);
+}