From 8fc53d879fdc1bbd78ded3172769aa381853bf78 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Fri, 16 Mar 2018 20:54:35 +0100
Subject: [PATCH] split inputs-logic and form-logic in frontend

---
 src/Foundation.hs                  |   1 +
 src/Handler/Utils/Form.hs          |   2 +-
 templates/standalone/inputs.hamlet |   1 +
 templates/standalone/inputs.julius | 188 ++++++++++++++++++
 templates/standalone/inputs.lucius | 304 +++++++++++++++++++++++++++++
 templates/widgets/form.julius      | 172 +---------------
 templates/widgets/form.lucius      | 304 -----------------------------
 7 files changed, 496 insertions(+), 476 deletions(-)
 create mode 100644 templates/standalone/inputs.hamlet
 create mode 100644 templates/standalone/inputs.julius
 create mode 100644 templates/standalone/inputs.lucius

diff --git a/src/Foundation.hs b/src/Foundation.hs
index ed02dcd74..b6741cf0d 100644
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@@ -344,6 +344,7 @@ defaultMenuLayout menu widget = do
         $(widgetFile "default-layout")
         $(widgetFile "standalone/showHide")
         $(widgetFile "standalone/sortable")
+        $(widgetFile "standalone/inputs")
     withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
 
 -- How to run database actions.
diff --git a/src/Handler/Utils/Form.hs b/src/Handler/Utils/Form.hs
index 93b32bb45..e3f25d52e 100644
--- a/src/Handler/Utils/Form.hs
+++ b/src/Handler/Utils/Form.hs
@@ -124,7 +124,7 @@ buttonField btn = Field {fieldParse, fieldView, fieldEnctype}
 
     fieldView fid name attrs _val _ =
       [whamlet|
-        <input .#{bcc2txt $ cssClass btn} type=submit name=#{name} value=^{label btn} *{attrs} ##{fid}>
+        <input .#{bcc2txt $ cssClass btn} type=submit name=#{name} value=^{toPathPiece btn} data-label=^{label btn} *{attrs} ##{fid}>
       |]
 
     fieldParse []    _ = return $ Right Nothing
diff --git a/templates/standalone/inputs.hamlet b/templates/standalone/inputs.hamlet
new file mode 100644
index 000000000..d5383e417
--- /dev/null
+++ b/templates/standalone/inputs.hamlet
@@ -0,0 +1 @@
+<!-- only here to be able to include inputs using `toWidget` -->
diff --git a/templates/standalone/inputs.julius b/templates/standalone/inputs.julius
new file mode 100644
index 000000000..8e392e6a0
--- /dev/null
+++ b/templates/standalone/inputs.julius
@@ -0,0 +1,188 @@
+(function() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  // makes <label> smaller if <input> is focussed
+  window.utils.reactiveInputLabel = function(input, label) {
+    // updates to dom
+    if (input.value.length > 0) {
+      label.classList.add('reactive-label--small');
+    }
+    // add event listeners
+    input.addEventListener('focus', function() {
+      label.classList.add('reactive-label--small');
+    });
+    label.addEventListener('click', function() {
+      label.classList.add('reactive-label--small');
+      input.focus();
+    });
+    input.addEventListener('blur', function() {
+      if (input.value.length < 1) {
+        label.classList.remove('reactive-label--small');
+      }
+    });
+  };
+
+  window.utils.reactiveFileUpload = function(input, parent) {
+    var currValidInputCount = 0;
+    var addMore = false;
+    var inputName = input.getAttribute('name');
+    // FileInput PseudoClass
+    function FileInput(container, input, label, remover) {
+      this.container = container;
+      this.input = input;
+      this.label = label;
+      this.remover = remover;
+      addListener(this);
+
+      this.addTo = function(parentElement) {
+        parentElement.appendChild(this.container);
+      }
+      this.remove = function() {
+        this.container.remove();
+      }
+      this.isValid = function() {
+        return this.container.classList.contains('file-input__container--valid');
+      }
+    }
+    function addNextInput() {
+      var inputs = parent.querySelectorAll('.file-input__container');
+      if (inputs[inputs.length - 1].classList.contains('file-input__container--valid')) {
+        makeInput(inputName).addTo(parent);
+      }
+    }
+    // updates submitbutton and form-group-stripe
+    function updateForm() {
+      var submitBtn = parent.parentElement.querySelector('[type=submit]');
+      parent.classList.remove('form-group--has-error');
+      if (currValidInputCount > 0) {
+        if (parent.classList.contains('form-group')) {
+          parent.classList.add('form-group--valid')
+        }
+        submitBtn.removeAttribute('disabled');
+        addNextInput();
+      } else {
+        if (parent.classList.contains('form-group')) {
+          parent.classList.remove('form-group--valid')
+        }
+        submitBtn.setAttribute('disabled', 'disabled');
+      }
+    }
+    // addseventlistener destInput
+    function addListener(fileInput) {
+      fileInput.input.addEventListener('change', function(event) {
+        if (fileInput.input.value.length > 0) {
+          // update label
+          var filePath = fileInput.input.value.replace(/\\/g, '/').split('/');
+          var fileName = filePath[filePath.length - 1];
+          fileInput.label.innerHTML = fileName;
+          // increase count if this field was empty previously
+          if (!fileInput.isValid()) {
+            currValidInputCount++;
+          }
+          fileInput.container.classList.add('file-input__container--valid')
+          // show next input
+        } else {
+          currValidInputCount--;
+          fileInput.remove();
+        }
+        updateForm();
+      });
+      fileInput.input.addEventListener('focus', function() {
+        fileInput.container.classList.add('pseudo-focus');
+      });
+      fileInput.input.addEventListener('blur', function() {
+        fileInput.container.classList.remove('pseudo-focus');
+      });
+      fileInput.label.addEventListener('click', function() {
+        fileInput.input.click();
+      });
+      fileInput.remover.addEventListener('click', function() {
+        if (fileInput.isValid()) {
+          currValidInputCount--;
+        }
+        fileInput.remove();
+        updateForm();
+      });
+    }
+    // create new wrapped input element with name name
+    function makeInput(name) {
+      var cont =      document.createElement('div');
+      var desc =      document.createElement('span');
+      var nextInput = document.createElement('input');
+      var remover =   document.createElement('div');
+      cont.classList.add('file-input__container');
+      desc.classList.add('file-input__label', 'btn');
+      remover.classList.add('file-input__remover');
+      nextInput.setAttribute('name', name);
+      nextInput.setAttribute('type', 'file');
+      cont.appendChild(nextInput);
+      cont.appendChild(desc);
+      cont.appendChild(remover);
+      return new FileInput(cont, nextInput, desc, remover);
+    }
+    // initial setup
+    function setup() {
+      var newInput = makeInput(inputName);
+      input.remove();
+      newInput.addTo(parent);
+      updateForm();
+    }
+    setup();
+  }
+
+  window.utils.reactiveFormGroup = function(formGroup, input) {
+    // updates to dom
+    if (input.value.length > 0) {
+      formGroup.classList.add('form-group--valid');
+    } else {
+      formGroup.classList.remove('form-group--valid');
+    }
+    input.addEventListener('input', function() {
+      formGroup.classList.remove('form-group--has-error');
+      if (input.value.length > 0) {
+        formGroup.classList.add('form-group--valid');
+      } else {
+        formGroup.classList.remove('form-group--valid');
+      }
+    });
+  };
+
+})();
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  // setup reactive labels
+  Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) {
+    var input = document.querySelector('#' + label.getAttribute('for'));
+    var parent = label.parentElement;
+    var type = input.getAttribute('type');
+    var isFileInput = /file/i.test(type);
+    var isListening = !RegExp(['date', 'checkbox', 'radio', 'hidden', 'file'].join('|')).test(type);
+    var isInFormGroup = parent.classList.contains('form-group') && parent.classList.contains('form-group--required');
+
+    if (isInFormGroup) {
+      window.utils.reactiveFormGroup(parent, input);
+    }
+    if (isFileInput) {
+      window.utils.reactiveFileUpload(input, parent);
+    }
+    if (isListening) {
+      window.utils.reactiveInputLabel(input, label);
+    } else {
+      label.classList.remove('reactive-label');
+    }
+  });
+
+  // add button-labels from dataset
+  Array.from(document.querySelectorAll('input[data-label]')).map(function(btn) {
+
+    btn.dataset.value = btn.getAttribute('value');
+    var parser = new DOMParser;
+    var dom = parser.parseFromString(btn.dataset.label, 'text/html');
+    var decodedString = dom.body.innerHTML;
+    console.log(dom.body.innerHTML);
+    btn.value = decodedString;
+  });
+});
diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius
new file mode 100644
index 000000000..93af29209
--- /dev/null
+++ b/templates/standalone/inputs.lucius
@@ -0,0 +1,304 @@
+/* GENERAL STYLES FOR FORMS */
+
+/* TEXT INPUTS */
+input[type="text"],
+input[type="password"],
+input[type="url"],
+input[type="number"],
+input[type="email"] {
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 7px 3px 7px;
+  outline: 0;
+  border: 0;
+  border-bottom: 2px solid var(--darkbase);
+  box-shadow: 0 2px 13px rgba(0, 0, 0, 0.05);
+  color: var(--fontbase);
+  transition: all .1s;
+  font-size: 16px;
+  min-width: 300px;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="url"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus {
+  border-bottom-color: var(--lightbase);
+  background-color: transparent;
+}
+
+/* BUTTON STYLE SEE default-layout.lucius */
+
+/* TEXTAREAS */
+textarea {
+  outline: 0;
+  border: 0;
+  padding: 7px 4px;
+  min-width: 300px;
+  min-height: 100px;
+  font-family: var(--fontfamilybase);
+  font-size: 16px;
+  color: var(--fontbase);
+  background-color: rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 13px rgba(0, 0, 0, 0.05);
+  border-bottom: 2px solid var(--darkbase);
+}
+
+textarea:focus {
+  background-color: transparent;
+  border-bottom-color: var(--lightbase);
+}
+/* FORM GROUPS */
+.form-group {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(150px, max-content));
+  grid-auto-columns: minmax(150px, max-content);
+  grid-gap: 5px;
+  align-items: center;
+  margin: 10px 0;
+  margin-left: -20px;
+  padding-left: 10px;
+  border-left: 8px solid transparent;
+}
+
+.form-group--required {
+  border-left: 8px solid var(--lighterbase);
+}
+
+.form-group--valid {
+  border-left: 8px solid var(--validbase);
+}
+
+.form-group--has-error {
+  border-left: 8px solid var(--errorbase) !important;
+}
+
+/* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */
+input[type="checkbox"] {
+  position: relative;
+  height: 20px;
+  width: 20px;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+input[type="checkbox"]::before {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: var(--lighterbase);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+}
+input[type="checkbox"]:checked::before {
+  background-color: var(--lightbase);
+}
+input[type="checkbox"]:checked::after {
+  content: '✓';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 20px;
+}
+
+/* CUSTOM CHECKBOXES AND RADIO BOXES */
+/* Completely replaces legacy checkbox and radiobox */
+.checkbox,
+.radio {
+  position: relative;
+  margin: 3px;
+
+  > [type="checkbox"],
+  > [type="radio"] {
+    display: none;
+  }
+
+  > label {
+    display: block;
+    padding: 7px 13px 7px 30px;
+    background-color: var(--darkbase);
+    border-radius: 4px;
+    color: white;
+    cursor: pointer;
+  }
+
+  > label::before,
+  > label::after {
+    content: '';
+    position: absolute;
+    top: 15px;
+    left: 4px;
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-color: white;
+    transition: all .2s;
+  }
+
+  > label::before {
+    width: 20px;
+    height: 2px;
+    transform: scale(0.8, 0.1);
+  }
+
+  > label::after {
+    width: 20px;
+    height: 2px;
+    transform: scale(0.8, 0.1);
+  }
+
+  > :checked + label {
+    background-color: var(--lightbase);
+    text-decoration: underline;
+  }
+
+  &:hover > label::before,
+  > :checked + label::before {
+    transform: scale(1, 1) rotate(45deg);
+  }
+
+  &:hover > label::after,
+  > :checked + label::after {
+    transform: scale(1, 1) rotate(-45deg);
+  }
+}
+.radio > label::before {
+  transform: scale(0.01, 0.01) rotate(45deg);
+}
+.radio > label::after {
+  transform: scale(0.01, 0.01) rotate(-45deg);
+}
+
+.radio::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  bottom: 2px;
+  border-radius: 4px;
+  border: 2px solid white;
+  z-index: -1;
+}
+
+/* REACTIVE LABELS */
+.reactive-label {
+  cursor: text;
+  color: var(--fontsec);
+  transform: translate(0, 0);
+  transition: all .1s;
+}
+.reactive-label--small {
+  cursor: default;
+  color: var(--fontbase);
+}
+@media (max-width: 999px) {
+  .form-group {
+    grid-template-rows: 30px;
+    grid-template-columns: 1fr;
+    align-items: baseline;
+    margin-top: 17px;
+  }
+  .reactive-label {
+    position: relative;
+    transform: translate(2px, 30px);
+  }
+  .reactive-label--small {
+    transform: translate(2px, 0px);
+    color: var(--fontsec);
+    /*font-size: 14px;*/
+  }
+}
+
+/* CUSTOM FILE INPUT */
+input[type="file"] {
+  color: white;
+  width: 0.1px;
+  height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+  outline: 0;
+  border: 0;
+}
+.file-input__container {
+  grid-column-start: 2;
+  display: flex;
+  justify-content: space-between;
+}
+.file-input__label,
+.file-input__remover {
+  display: block;
+  border-radius: 2px;
+  padding: 5px 13px;
+  color: var(--whitebase);
+  cursor: pointer;
+}
+.file-input__label {
+  text-align: left;
+  position: relative;
+  height: 30px;
+}
+.file-input__label.btn {
+  padding: 5px 13px;
+}
+.file-input__label::after,
+.file-input__label::before {
+  position: absolute;
+  content: '';
+  background-color: white;
+  width: 16px;
+  height: 2px;
+  top: 14px;
+  top: 50%;
+  left: 12px;
+  left: 50%;
+}
+
+.file-input__label::after {
+  transform: translate(-50%, -50%) rotate(90deg);
+}
+.file-input__label::before {
+  transform: translate(-50%, -50%);
+}
+.file-input__remover {
+  display: none;
+  width: 40px;
+  height: 30px;
+  text-align: center;
+  background-color: var(--warningbase);
+  position: relative;
+  margin-left: 10px;
+}
+.file-input__remover::before {
+  position: absolute;
+  content: '';
+  width: 16px;
+  height: 2px;
+  top: 14px;
+  left: 12px;
+  background-color: white;
+}
+.file-input__container--valid > .file-input__label {
+  background-color: var(--lightbase);
+}
+.file-input__container--valid > .file-input__label::before,
+.file-input__container--valid > .file-input__label::after {
+  content: none;
+}
+.file-input__container--valid > .file-input__remover {
+  display: block;
+}
+@media (max-width: 999px) {
+  .file-input__container {
+    grid-column-start: 1;
+  }
+}
diff --git a/templates/widgets/form.julius b/templates/widgets/form.julius
index 76569cff0..973e1217d 100644
--- a/templates/widgets/form.julius
+++ b/templates/widgets/form.julius
@@ -1,155 +1,7 @@
 (function() {
   'use strict';
 
-  if (!window.utils) {
-    window.utils = {};
-  }
-
-  // makes <label> smaller if <input> is focussed
-  window.utils.reactiveInputLabel = function(input, label) {
-    // updates to dom
-    if (input.value.length > 0) {
-      label.classList.add('reactive-label--small');
-    }
-    // add event listeners
-    input.addEventListener('focus', function() {
-      label.classList.add('reactive-label--small');
-    });
-    label.addEventListener('click', function() {
-      label.classList.add('reactive-label--small');
-      input.focus();
-    });
-    input.addEventListener('blur', function() {
-      if (input.value.length < 1) {
-        label.classList.remove('reactive-label--small');
-      }
-    });
-  };
-
-  window.utils.reactiveFormGroup = function(formGroup, input) {
-    // updates to dom
-    if (input.value.length > 0) {
-      formGroup.classList.add('form-group--valid');
-    } else {
-      formGroup.classList.remove('form-group--valid');
-    }
-    input.addEventListener('input', function() {
-      formGroup.classList.remove('form-group--has-error');
-      if (input.value.length > 0) {
-        formGroup.classList.add('form-group--valid');
-      } else {
-        formGroup.classList.remove('form-group--valid');
-      }
-    });
-  };
-
-  window.utils.reactiveFileUpload = function(input, parent) {
-    var currValidInputCount = 0;
-    var addMore = false;
-    var inputName = input.getAttribute('name');
-    // FileInput PseudoClass
-    function FileInput(container, input, label, remover) {
-      this.container = container;
-      this.input = input;
-      this.label = label;
-      this.remover = remover;
-      addListener(this);
-
-      this.addTo = function(parentElement) {
-        parentElement.appendChild(this.container);
-      }
-      this.remove = function() {
-        this.container.remove();
-      }
-      this.isValid = function() {
-        return this.container.classList.contains('file-input__container--valid');
-      }
-    }
-    function addNextInput() {
-      var inputs = parent.querySelectorAll('.file-input__container');
-      if (inputs[inputs.length - 1].classList.contains('file-input__container--valid')) {
-        makeInput(inputName).addTo(parent);
-      }
-    }
-    // updates submitbutton and form-group-stripe
-    function updateForm() {
-      var submitBtn = parent.parentElement.querySelector('[type=submit]');
-      parent.classList.remove('form-group--has-error');
-      if (currValidInputCount > 0) {
-        if (parent.classList.contains('form-group')) {
-          parent.classList.add('form-group--valid')
-        }
-        submitBtn.removeAttribute('disabled');
-        addNextInput();
-      } else {
-        if (parent.classList.contains('form-group')) {
-          parent.classList.remove('form-group--valid')
-        }
-        submitBtn.setAttribute('disabled', 'disabled');
-      }
-    }
-    // addseventlistener destInput
-    function addListener(fileInput) {
-      fileInput.input.addEventListener('change', function(event) {
-        if (fileInput.input.value.length > 0) {
-          // update label
-          var filePath = fileInput.input.value.replace(/\\/g, '/').split('/');
-          var fileName = filePath[filePath.length - 1];
-          fileInput.label.innerHTML = fileName;
-          // increase count if this field was empty previously
-          if (!fileInput.isValid()) {
-            currValidInputCount++;
-          }
-          fileInput.container.classList.add('file-input__container--valid')
-          // show next input
-        } else {
-          currValidInputCount--;
-          fileInput.remove();
-        }
-        updateForm();
-      });
-      fileInput.input.addEventListener('focus', function() {
-        fileInput.container.classList.add('pseudo-focus');
-      });
-      fileInput.input.addEventListener('blur', function() {
-        fileInput.container.classList.remove('pseudo-focus');
-      });
-      fileInput.label.addEventListener('click', function() {
-        fileInput.input.click();
-      });
-      fileInput.remover.addEventListener('click', function() {
-        if (fileInput.isValid()) {
-          currValidInputCount--;
-        }
-        fileInput.remove();
-        updateForm();
-      });
-    }
-    // create new wrapped input element with name name
-    function makeInput(name) {
-      var cont =      document.createElement('div');
-      var desc =      document.createElement('span');
-      var nextInput = document.createElement('input');
-      var remover =   document.createElement('div');
-      cont.classList.add('file-input__container');
-      desc.classList.add('file-input__label', 'btn');
-      remover.classList.add('file-input__remover');
-      nextInput.setAttribute('name', name);
-      nextInput.setAttribute('type', 'file');
-      cont.appendChild(nextInput);
-      cont.appendChild(desc);
-      cont.appendChild(remover);
-      return new FileInput(cont, nextInput, desc, remover);
-    }
-    // initial setup
-    function setup() {
-      var newInput = makeInput(inputName);
-      input.remove();
-      newInput.addTo(parent);
-      updateForm();
-    }
-    setup();
-  }
+  window.utils = window.utils || {};
 
   // registers input-listener for each element in <elements> (array) and
   // enables <button> if <fn> for these elements returns true
@@ -178,28 +30,6 @@
 
 document.addEventListener('DOMContentLoaded', function() {
 
-  // setup reactive labels
-  Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) {
-    var input = document.querySelector('#' + label.getAttribute('for'));
-    var parent = label.parentElement;
-    var type = input.getAttribute('type');
-    var isFileInput = /file/i.test(type);
-    var isListening = !RegExp(['date', 'checkbox', 'radio', 'hidden', 'file'].join('|')).test(type);
-    var isInFormGroup = parent.classList.contains('form-group') && parent.classList.contains('form-group--required');
-
-    if (isInFormGroup) {
-      window.utils.reactiveFormGroup(parent, input);
-    }
-    if (isFileInput) {
-      window.utils.reactiveFileUpload(input, parent);
-    }
-    if (isListening) {
-      window.utils.reactiveInputLabel(input, label);
-    } else {
-      label.classList.remove('reactive-label');
-    }
-  });
-
   // auto reactiveButton submit-buttons with required fields
   var forms = document.querySelectorAll('form');
   Array.from(forms).forEach(function(form) {
diff --git a/templates/widgets/form.lucius b/templates/widgets/form.lucius
index 93af29209..e69de29bb 100644
--- a/templates/widgets/form.lucius
+++ b/templates/widgets/form.lucius
@@ -1,304 +0,0 @@
-/* GENERAL STYLES FOR FORMS */
-
-/* TEXT INPUTS */
-input[type="text"],
-input[type="password"],
-input[type="url"],
-input[type="number"],
-input[type="email"] {
-  background-color: rgba(0, 0, 0, 0.05);
-  padding: 7px 3px 7px;
-  outline: 0;
-  border: 0;
-  border-bottom: 2px solid var(--darkbase);
-  box-shadow: 0 2px 13px rgba(0, 0, 0, 0.05);
-  color: var(--fontbase);
-  transition: all .1s;
-  font-size: 16px;
-  min-width: 300px;
-}
-
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="url"]:focus,
-input[type="number"]:focus,
-input[type="email"]:focus {
-  border-bottom-color: var(--lightbase);
-  background-color: transparent;
-}
-
-/* BUTTON STYLE SEE default-layout.lucius */
-
-/* TEXTAREAS */
-textarea {
-  outline: 0;
-  border: 0;
-  padding: 7px 4px;
-  min-width: 300px;
-  min-height: 100px;
-  font-family: var(--fontfamilybase);
-  font-size: 16px;
-  color: var(--fontbase);
-  background-color: rgba(0, 0, 0, 0.05);
-  box-shadow: 0 2px 13px rgba(0, 0, 0, 0.05);
-  border-bottom: 2px solid var(--darkbase);
-}
-
-textarea:focus {
-  background-color: transparent;
-  border-bottom-color: var(--lightbase);
-}
-/* FORM GROUPS */
-.form-group {
-  position: relative;
-  display: grid;
-  grid-template-columns: repeat(2, minmax(150px, max-content));
-  grid-auto-columns: minmax(150px, max-content);
-  grid-gap: 5px;
-  align-items: center;
-  margin: 10px 0;
-  margin-left: -20px;
-  padding-left: 10px;
-  border-left: 8px solid transparent;
-}
-
-.form-group--required {
-  border-left: 8px solid var(--lighterbase);
-}
-
-.form-group--valid {
-  border-left: 8px solid var(--validbase);
-}
-
-.form-group--has-error {
-  border-left: 8px solid var(--errorbase) !important;
-}
-
-/* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */
-input[type="checkbox"] {
-  position: relative;
-  height: 20px;
-  width: 20px;
-  -webkit-appearance: none;
-  cursor: pointer;
-}
-input[type="checkbox"]::before {
-  content: '';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background-color: var(--lighterbase);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 2px;
-}
-input[type="checkbox"]:checked::before {
-  background-color: var(--lightbase);
-}
-input[type="checkbox"]:checked::after {
-  content: '✓';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 20px;
-}
-
-/* CUSTOM CHECKBOXES AND RADIO BOXES */
-/* Completely replaces legacy checkbox and radiobox */
-.checkbox,
-.radio {
-  position: relative;
-  margin: 3px;
-
-  > [type="checkbox"],
-  > [type="radio"] {
-    display: none;
-  }
-
-  > label {
-    display: block;
-    padding: 7px 13px 7px 30px;
-    background-color: var(--darkbase);
-    border-radius: 4px;
-    color: white;
-    cursor: pointer;
-  }
-
-  > label::before,
-  > label::after {
-    content: '';
-    position: absolute;
-    top: 15px;
-    left: 4px;
-    display: block;
-    width: 20px;
-    height: 20px;
-    background-color: white;
-    transition: all .2s;
-  }
-
-  > label::before {
-    width: 20px;
-    height: 2px;
-    transform: scale(0.8, 0.1);
-  }
-
-  > label::after {
-    width: 20px;
-    height: 2px;
-    transform: scale(0.8, 0.1);
-  }
-
-  > :checked + label {
-    background-color: var(--lightbase);
-    text-decoration: underline;
-  }
-
-  &:hover > label::before,
-  > :checked + label::before {
-    transform: scale(1, 1) rotate(45deg);
-  }
-
-  &:hover > label::after,
-  > :checked + label::after {
-    transform: scale(1, 1) rotate(-45deg);
-  }
-}
-.radio > label::before {
-  transform: scale(0.01, 0.01) rotate(45deg);
-}
-.radio > label::after {
-  transform: scale(0.01, 0.01) rotate(-45deg);
-}
-
-.radio::before {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  right: 2px;
-  bottom: 2px;
-  border-radius: 4px;
-  border: 2px solid white;
-  z-index: -1;
-}
-
-/* REACTIVE LABELS */
-.reactive-label {
-  cursor: text;
-  color: var(--fontsec);
-  transform: translate(0, 0);
-  transition: all .1s;
-}
-.reactive-label--small {
-  cursor: default;
-  color: var(--fontbase);
-}
-@media (max-width: 999px) {
-  .form-group {
-    grid-template-rows: 30px;
-    grid-template-columns: 1fr;
-    align-items: baseline;
-    margin-top: 17px;
-  }
-  .reactive-label {
-    position: relative;
-    transform: translate(2px, 30px);
-  }
-  .reactive-label--small {
-    transform: translate(2px, 0px);
-    color: var(--fontsec);
-    /*font-size: 14px;*/
-  }
-}
-
-/* CUSTOM FILE INPUT */
-input[type="file"] {
-  color: white;
-  width: 0.1px;
-  height: 0.1px;
-	opacity: 0;
-	overflow: hidden;
-	position: absolute;
-	z-index: -1;
-  outline: 0;
-  border: 0;
-}
-.file-input__container {
-  grid-column-start: 2;
-  display: flex;
-  justify-content: space-between;
-}
-.file-input__label,
-.file-input__remover {
-  display: block;
-  border-radius: 2px;
-  padding: 5px 13px;
-  color: var(--whitebase);
-  cursor: pointer;
-}
-.file-input__label {
-  text-align: left;
-  position: relative;
-  height: 30px;
-}
-.file-input__label.btn {
-  padding: 5px 13px;
-}
-.file-input__label::after,
-.file-input__label::before {
-  position: absolute;
-  content: '';
-  background-color: white;
-  width: 16px;
-  height: 2px;
-  top: 14px;
-  top: 50%;
-  left: 12px;
-  left: 50%;
-}
-
-.file-input__label::after {
-  transform: translate(-50%, -50%) rotate(90deg);
-}
-.file-input__label::before {
-  transform: translate(-50%, -50%);
-}
-.file-input__remover {
-  display: none;
-  width: 40px;
-  height: 30px;
-  text-align: center;
-  background-color: var(--warningbase);
-  position: relative;
-  margin-left: 10px;
-}
-.file-input__remover::before {
-  position: absolute;
-  content: '';
-  width: 16px;
-  height: 2px;
-  top: 14px;
-  left: 12px;
-  background-color: white;
-}
-.file-input__container--valid > .file-input__label {
-  background-color: var(--lightbase);
-}
-.file-input__container--valid > .file-input__label::before,
-.file-input__container--valid > .file-input__label::after {
-  content: none;
-}
-.file-input__container--valid > .file-input__remover {
-  display: block;
-}
-@media (max-width: 999px) {
-  .file-input__container {
-    grid-column-start: 1;
-  }
-}