Cleaned some form styling

Removed uppercasing of labels to make a little friendlier.
Extracted out toggleswitch JS into own component.
Improved basic code input for html-head-input area.

resources/assets/js/components/index.js

@@ -16,6 +16,7 @@ let componentMapping = {
     'editor-toolbox': require('./editor-toolbox'),
     'image-picker': require('./image-picker'),
     'collapsible': require('./collapsible'),
+    'toggle-switch': require('./toggle-switch'),
 };
 
 window.components = {};

resources/assets/js/components/toggle-switch.js

@@ -0,0 +1,19 @@
+
+class ToggleSwitch {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.input = elem.querySelector('input');
+
+        this.elem.onclick = this.onClick.bind(this);
+    }
+
+    onClick(event) {
+        let checked = this.input.value !== 'true';
+        this.input.value = checked ? 'true' : 'false';
+        checked ? this.elem.classList.add('active') : this.elem.classList.remove('active');
+    }
+
+}
+
+module.exports = ToggleSwitch;

resources/assets/sass/_forms.scss

@@ -98,7 +98,6 @@ label {
   font-size: 0.94em;
   font-weight: 400;
   color: #999;
-  text-transform: uppercase;
   padding-bottom: 2px;
   margin-bottom: 0.2em;
   &.inline {
@@ -192,6 +191,13 @@ input:checked + .toggle-switch {
   }
 }
 
+.simple-code-input {
+  background-color: #F8F8F8;
+  font-family: monospace;
+  font-size: 12px;
+  min-height: 100px;
+}
+
 .form-group {
   .text-pos, .text-neg {
     padding: $-xs 0;