feat(form): Added styles for an invalid input (#121)

* fix(build): Fixed circle ci build * feat(form): Added style for invalid inputs
fabric-design · Jul 25, 2018 · 5bca6fa · 5bca6fa
1 parent 4e8b368
commit 5bca6fa
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/atoms/_forms.scss b/atoms/_forms.scss
@@ -4,8 +4,10 @@ $input-placeholder-color: $bombay !default;
 $input-background-color: $white !default;
 $input-border-color: $mischka !default;
 $input-shadow-color: transparent !default;
+$input-shadow-size: 0 0 0 !default;
 $input-focused-border-color: $primary-color !default;
 $input-focused-shadow-color: $input-focused-border-color !default;
+$input-focused-shadow-size: 0 2px 0 -1px !default; // 2 + -1 works better for small screens
 $input-disabled-background-color: $catkin !default;
 
 @mixin input-box($text-color, $bg-color, $border-color, $shadow-color, $focus-border-color, $focus-shadow-color, $disabled-color) {
@@ -14,15 +16,15 @@ $input-disabled-background-color: $catkin !default;
   color: $text-color;
   background-color: $bg-color;
   line-height: $space-xl;
-  box-shadow: 0 0 0 $shadow-color;
+  box-shadow: $input-shadow-size $shadow-color;
   padding-left: $space-xs;
   outline: none;
   width: 100%;
   transition: border-color 0.15s linear, box-shadow 0.15s linear;
 
   &:focus {
     border-color: $focus-border-color;
-    box-shadow: 0 2px 0 -1px $focus-shadow-color; // 2 + -1 works better for small screens
+    box-shadow: $input-focused-shadow-size $focus-shadow-color; // 2 + -1 works better for small screens
   }
 
   &:disabled {
@@ -37,6 +39,11 @@ $input-disabled-background-color: $catkin !default;
   &::placeholder {
     color: $input-placeholder-color;
   }
+
+  &.is-invalid {
+    box-shadow: $input-focused-shadow-size $error-color;
+    border-color: $error-color;
+  }
 }
 
 @mixin default-input {
@@ -120,11 +127,16 @@ $input-disabled-background-color: $catkin !default;
       right: 0;
       top: 50%;
       margin-top: -8px;
+      pointer-events: none;
 
       &.icon24 {
         margin-top: -12px;
       }
     }
+
+    input.is-invalid + .icon {
+      color: $error-color;
+    }
   }
 
   textarea {

diff --git a/utils/variables/_basics.scss b/utils/variables/_basics.scss
@@ -3,6 +3,10 @@ $base-spacing: $space-m !default; // 16px
 $primary-color: $heaven !default;
 $secondary-color: $earl-gray !default;
 
+$error-color: $flamingo !default;
+$warning-color: $biddy !default;
+$success-color: $forest-green !default;
+
 $base-font-family: 'objektiv-mk1', 'acumin-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
 $base-font-size: 1rem !default; // 16px
 $base-line-height: 1.5rem !default; // 24px