fade away resolved error messages on questions

app/assets/javascripts/form-animation.js

@@ -1,17 +1,29 @@
+var $textInput = $('[type="color"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], input:not([type]), textarea');
+
 // Text Input Label Animation
-
+$textInput.prev('label').addClass('loaded');
-var textInput = $('[type="color"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], input:not([type]), textarea');
+$textInput.each(function() {
-
-textInput.prev('label').addClass('loaded');
-$(textInput).each(function() {
   if( $(this).val() ) {
     $(this).prev('label').addClass('animate');
   }
 });
-$(textInput).on('focus', function() {
+$textInput.on('focus', function() {
   $(this).prev('label').addClass('animate');
 }).on('focusout', function() {
   if( !$(this).val() ) {
     $(this).prev('label').removeClass('animate');
   }
-});
+});
+
+// form error resolutions
+$('form').has('.error').each(function(){
+  var $form = $(this);
+
+  $form.on('keyup', $textInput, function(){
+    $form.find(".error").addClass('resolve-error');
+  });
+
+  $form.on('change', $("[type=radio], [type=checkbox]"), function(){
+    $form.find(".error").addClass('resolve-error');
+  });
+});

app/assets/stylesheets/application.scss

@@ -16,7 +16,10 @@
 @import 'base'; // bitters
 @import 'neat';
 
-@import 'core/**/*';
+@import 'core/fonts';
+@import 'core/variables';
+@import 'core/animations';
+
 @import 'atoms/**/*';
 @import 'molecules/**/*';
 // @import 'organisms/**/*';

app/assets/stylesheets/core/_animations.scss

@@ -0,0 +1,5 @@
+@keyframes success-fadeout {
+  0% { opacity: 1; max-height: 40px; }
+  85% { opacity: 0; max-height: 40px; padding: .5rem 0; margin-bottom: .5rem; }
+  100% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
+}

app/assets/stylesheets/molecules/_forms.scss

@@ -266,6 +266,13 @@ select {
   margin-top: 2rem;
 }
 
+.resolve-error {
+  animation-name: success-fadeout;
+  animation-duration: 1.5s;
+  animation-delay: 0;
+  animation-fill-mode: forwards;
+}
+
 html.no-js {
   .chars {
     display: none;

app/assets/stylesheets/templates/_summary.scss

@@ -43,12 +43,6 @@
   margin-top: 3rem;
 }
 
-@keyframes success-fadeout {
-  0% { opacity: 1; max-height: 40px; }
-  85% { opacity: 0; max-height: 40px; padding: .5rem 0; margin-bottom: .5rem; }
-  100% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
-}
-
 .success {
     box-sizing: border-box;
     text-align: center;