more responsive forms and design update for forms. custom checkboxes

templates/standalone/inputs.julius

@@ -161,12 +161,37 @@
     setup();
   }
 
+  window.utils.initializeCheckboxRadio = function(input, type) {
+
+    if (!input.parentElement.classList.contains(type)) {
+      var parentEl = input.parentElement;
+      var wrapper = document.createElement('div');
+      var label = document.createElement('label');
+      wrapper.classList.add(type);
+      label.setAttribute('for', input.id);
+      wrapper.appendChild(input);
+      wrapper.appendChild(label);
+
+      parentEl.appendChild(wrapper);
+    }
+  }
+
 })();
 
 document.addEventListener('DOMContentLoaded', function() {
 
+  // initialize checkboxes
+  Array.from(document.querySelectorAll('input[type="checkbox"]')).forEach(function(inp) {
+    window.utils.initializeCheckboxRadio(inp, 'checkbox');
+  });
+
+  // initialize radios
+  Array.from(document.querySelectorAll('input[type="radio"]')).forEach(function(inp) {
+    window.utils.initializeCheckboxRadio(inp, 'radio');
+  });
+
   // initialize file-upload-fields
-  Array.from(document.querySelectorAll('input[type="file"]')).map(function(inp) {
+  Array.from(document.querySelectorAll('input[type="file"]')).forEach(function(inp) {
     var formGroup = inp.parentNode;
     while (!formGroup.classList.contains('form-group') && formGroup !== document.body) {
       formGroup = formGroup.parentNode;
@@ -175,7 +200,7 @@ document.addEventListener('DOMContentLoaded', function() {
   });
 
   // initialize file-checkbox-fields
-  Array.from(document.querySelectorAll('.js-file-checkbox')).map(function(inp) {
+  Array.from(document.querySelectorAll('.js-file-checkbox')).forEach(function(inp) {
     window.utils.reactiveFileCheckbox(inp);
   });
 });

templates/standalone/inputs.lucius

@@ -8,33 +8,27 @@ form {
   position: relative;
   display: flex;
   display: grid;
-  grid-template-columns: 25% max-content;
+  grid-template-columns: 1fr 3fr;
-  grid-auto-columns: 25%;
   grid-gap: 5px;
   justify-content: flex-start;
-  align-items: center;
+  align-items: baseline;
-  margin: 17px 0;
-  padding-left: 10px;
   border-left: 2px solid transparent;
+
+  + .form-group {
+    margin-top: 17px;
+  }
 }
 
 .form-group__label {
-  width: 25%;
-  white-space: nowrap;
   font-weight: 600;
 }
 
 @media (max-width: 768px) {
   .form-group {
     grid-template-columns: 1fr;
-    grid-template-rows: 30px;
     align-items: baseline;
     margin-top: 17px;
     flex-direction: column;
-
-    > * {
-      width: 100%;
-    }
   }
 }
 
@@ -43,28 +37,30 @@ input[type="text"],
 input[type="password"],
 input[type="url"],
 input[type="number"],
-input[type="email"] {
+input[type="email"],
+input[type*="date"],
+input[type*="time"] {
   /* from bulma.css */
-  background-color: #fff;
-  border-color: #dbdbdb;
   color: #363636;
-  box-shadow: inset 0 2px 3px 1px rgba(50,50,50,.1);
+  border-color: #dbdbdb;
-  min-width: 400px;
+  background-color: #f3f3f3;
+  box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
+
+  width: 100%;
+  max-width: 600px;
   -webkit-appearance: none;
   align-items: center;
   border: 1px solid transparent;
   border-radius: 4px;
-  display: inline-flex;
   font-size: 1rem;
-  height: 2.25em;
-  justify-content: flex-start;
   line-height: 1.5;
-  padding-bottom: calc(.375em - 1px);
+  padding: 4px 13px;
-  padding-left: calc(.625em - 1px);
+}
-  padding-right: calc(.625em - 1px);
+
-  padding-top: calc(.375em - 1px);
+input[type*="date"],
-  position: relative;
+input[type*="time"] {
-  vertical-align: top;
+  width: 50%;
+  min-width: 240px;
 }
 
 .form-group--required {
@@ -111,25 +107,19 @@ input[type="email"]:focus {
 
 /* TEXTAREAS */
 textarea {
+  width: 100%;
+  height: 170px;
+  max-width: 600px;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #363636;
+  background-color: #f3f3f3;
+  padding: 4px 13px;
   -webkit-appearance: none;
   appearance: none;
-  border: 1px solid transparent;
+  border: 1px solid #dbdbdb;
   border-radius: 2px;
-  display: inline-flex;
+  box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
-  font-size: 1rem;
-  height: 170px;
-  width: 400px;
-  line-height: 1.5;
-  padding-bottom: calc(.375em - 1px);
-  padding-left: calc(.625em - 1px);
-  padding-right: calc(.625em - 1px);
-  padding-top: calc(.375em - 1px);
-  position: relative;
-  vertical-align: top;
-  background-color: #fff;
-  border-color: #dbdbdb;
-  color: #363636;
-  box-shadow: inset 0 1px 2px rgba(10,10,10,.1);
 }
 
 textarea:focus {
@@ -224,31 +214,15 @@ input[type="checkbox"]:checked::after {
     text-decoration: underline;
   }
 
-  &:hover label {
-    background-color: var(--color-lighter);
-  }
-
-  &:hover label::before {
-    transform: scale(0.8, 0.4);
-  }
-
   :checked + label::before {
     transform: scale(1, 1) rotate(45deg);
   }
 
-  :checked + label:hover::after,
-  :checked + label:hover::before {
-    transform: scale(1, 1) rotate(0deg);
-  }
-
-  &:hover label::after {
-    transform: scale(0.8, 0.4);
-  }
-
   :checked + label::after {
     transform: scale(1, 1) rotate(-45deg);
   }
 }
+
 .radio label::before {
   transform: scale(0.01, 0.01) rotate(45deg);
 }
@@ -268,18 +242,6 @@ input[type="checkbox"]:checked::after {
   z-index: -1;
 }
 
-/* REACTIVE LABELS */
-.reactive-label {
-  cursor: text;
-  color: var(--color-fontsec);
-  transform: translate(0, 0);
-  transition: all .1s;
-}
-.reactive-label--small {
-  cursor: default;
-  color: var(--color-font);
-}
-
 /* CUSTOM FILE INPUT */
 input[type="file"].js-file-input {
   color: white;

templates/widgets/form.hamlet

@@ -5,7 +5,7 @@ $case formLayout
     $forall view <- views
       <div .form-group :fvRequired view:.form-group--required :not $ fvRequired view:.form-group--optional :isJust $ fvErrors view:.form-group--has-error>
         $if not (Blaze.null $ fvLabel view)
-          <label .form-group__label .reactive-label for=#{fvId view}>#{fvLabel view}
+          <label .form-group__label for=#{fvId view}>#{fvLabel view}
         $# TODO: inputs should have proper placeholders
         $# TODO: can we wrap checkboxes in a <div.checkbox> and radio buttons in a <div.radio>?
         <div .form-group__input>