Update form inputs to new design

Add JS to float form labels above placeholder text

Author: josephco

src/forms/Inputs.js

@@ -0,0 +1,37 @@
+/**
+ * @overview A module that sets up form input behaviors and visual states
+ * @module Inputs.js
+*/
+
+export const Inputs = {
+
+  /**
+   * Query DOM for form fields and setup their behaviors
+   * @returns {void}
+  */
+  init() {
+    this.formFields = document.querySelectorAll(`.form-field`);
+    this.setupFloatLabels();
+  },
+
+  /**
+   * Add event listeners to all form fields to float input labels above the
+   * content when text is entered
+   * @returns {void}
+  */
+  setupFloatLabels() {
+    [...this.formFields].forEach((el) => {
+      const input = el.querySelector(`.form-input`);
+      const checkForInput = () => {
+        if (input.value) {
+          el.classList.add(`has-text`);
+        } else {
+          el.classList.remove(`has-text`);
+        }
+      };
+
+      input.addEventListener(`keyup`, checkForInput);
+      checkForInput();
+    });
+  },
+};

src/forms/_base.scss

@@ -91,6 +91,10 @@ input {
   line-height: 1;
 }
 
+::placeholder {
+  color: color(text);
+}
+
 // Get rid of number dropdown "spinners" for an overwhelming amount of browsers
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
@@ -120,12 +124,6 @@ input[type="number"] {
   appearance: textfield;
 }
 
-input[type="radio"] {
-  -webkit-appearance: radio;
-  border-radius: 50%;
-  border: 1px solid gray;
-}
-
 select {
   outline: 0;
   box-shadow: 0;
@@ -209,6 +207,7 @@ select {
 }
 
 .form-field {
+  position: relative;
   margin-bottom: 25px;
 }
 
@@ -228,11 +227,22 @@ select {
 
 
 .form-label {
-  @extend %headers;
-
-  @extend %h4;
-
-  display: block;
+  position: absolute;
+  top: ms(-4);
+  left: 1.1rem;
+  font-size: ms(-2);
+  line-height: 1;
+  color: color(text);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(ms(-9));
+  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
+
+  .has-text & {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
 
@@ -250,18 +260,19 @@ select {
 
 .form-input {
   @extend %body--sans-small;
-
+  appearance: none;
   width: 100%;
-  border: 1px solid color(border);
+  border: 1px solid color(dark-border);
   margin: 0;
-  padding: size(smaller) size(small);
-  color: color(dark-text);
+  padding: 0.85rem ms(0) 0.85rem;
+  color: color(text);
   border-radius: size(normal-corners);
   background: color(background);
   cursor: auto;
+  transition: padding 0.25s ease-out;
 
   &:focus {
-    border-color: color(gray--light3);
+    border-color: color(primary);
   }
 
   // these are for jquery validation plugin
@@ -270,6 +281,17 @@ select {
   &.error {
     border-color: color(accent);
   }
+
+  .has-text & {
+    padding: 1.2rem ms(0) 0.5rem;
+  }
+}
+
+.form-input--textarea {
+
+  #{$focus} {
+    outline: 0;
+  }
 }
 
 .form-input--select {