feat(Forms): Add inline with button error styles.

Pier1 · Nov 30, 2017 · aef6b4a · aef6b4a
1 parent 9ceb406
commit aef6b4a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/rocketbelt/components/forms/_forms-inline-with-button.pug b/rocketbelt/components/forms/_forms-inline-with-button.pug
@@ -8,7 +8,9 @@
   label(for='inline-w-button-and-label') Search
   button.button Go
 
-.form-group.inline.inline-with-button
-  input#inline-w-button-and-label-stacked
+.form-group.inline.inline-with-button.inline-with-button-stacked
+  input#inline-w-button-and-label-stacked.invalid(invalid)
   label(for='inline-w-button-and-label-stacked') Search
   button.button Go
+  .messages
+    small.validation-message Please enter a valid search term.
diff --git a/rocketbelt/components/forms/_forms.scss b/rocketbelt/components/forms/_forms.scss
@@ -13,7 +13,7 @@ fieldset {
     align-self: flex-start;
 
     &::after {
-      color: color(gray, plus1);
+      color: color(gray);
     }
   }
 }
@@ -23,8 +23,8 @@ fieldset {
     display: flex;
     flex-wrap: wrap;
 
-    .validation-message::after {
-      color: color(gray, plus1);
+    .validation-message + .helper-text::before {
+      color: color(gray);
       content: unicode(nbsp) + unicode('horizontal-bar') + unicode(nbsp);
     }
   }
@@ -106,18 +106,32 @@ fieldset {
       border-bottom-left-radius: 2px;
 
       &:focus {
+        outline: 0;
         border: 2px solid color(primary);
         border-right: 0;
         border-radius: 0;
 
         & ~ button,
         & ~ .button {
+          outline: 0;
           border: 2px solid color(primary);
           border-left: 0;
           border-radius: 0;
           transition: none;
         }
       }
+
+      &[invalid] {
+        outline: 0;
+        border: 2px solid color(error);
+        border-right: 0;
+
+        & ~ button,
+        & ~ .button {
+          border: 2px solid color(error);
+          border-left: 0;
+        }
+      }
     }
 
     button,
@@ -164,6 +178,11 @@ fieldset {
       .button {
         flex: 0 1 auto;
       }
+
+      .messages {
+        padding-left: 0;
+        width: 100%;
+      }
     }
   }
 }
@@ -251,6 +270,7 @@ textarea {
       padding: 0;
       border-width: 1px;
       border-color: transparent;
+      border-left-width: 0;
       background: transparent;
       color: color(gray);
       font-size: 1rem;
@@ -339,7 +359,7 @@ textarea {
   }
 
   .helper-text {
-    color: color(gray, plus1);
+    color: color(gray);
   }
 
   .helper-text,