From 8ea6ac154f7e80295005ad71ec9f62c946887cb3 Mon Sep 17 00:00:00 2001
From: xavijam <xavijam@gmail.com>
Date: Mon, 18 Apr 2016 16:04:38 +0200
Subject: [PATCH] Adding fields error state

---
 src/scss/cdb-components/forms/inputs.scss   |  9 ++++++---
 src/scss/cdb-components/forms/selects.scss  | 10 +++++++---
 src/scss/cdb-components/forms/textarea.scss | 12 +++++++-----
 src/scss/cdb-utilities/helpers.scss         |  9 ++++++++-
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/scss/cdb-components/forms/inputs.scss b/src/scss/cdb-components/forms/inputs.scss
index 6559fe0..950aa91 100644
--- a/src/scss/cdb-components/forms/inputs.scss
+++ b/src/scss/cdb-components/forms/inputs.scss
@@ -13,6 +13,7 @@
 
 @import '../../cdb-variables/sizes';
 @import '../../cdb-variables/colors';
+@import '../../cdb-utilities/helpers';
 
 .CDB-InputText {
   width: 100%;
@@ -34,8 +35,10 @@
     background: $cThirdBackground;
   }
   &.has-error {
-    border: 1px solid rgba($cError, 0.48);
-    background: rgba($cError, 0.04);
-    color: $cError;
+    @include default-form-error-style();
   }
 }
+
+.CDB-FieldError .CDB-InputText {
+  @include default-form-error-style();
+}
diff --git a/src/scss/cdb-components/forms/selects.scss b/src/scss/cdb-components/forms/selects.scss
index 7e6775a..0c6cfe0 100644
--- a/src/scss/cdb-components/forms/selects.scss
+++ b/src/scss/cdb-components/forms/selects.scss
@@ -31,6 +31,7 @@
 
 @import '../../cdb-variables/sizes';
 @import '../../cdb-variables/colors';
+@import '../../cdb-utilities/helpers';
 
 .CDB-Select {
   position: relative;
@@ -64,8 +65,11 @@
     background: $cThirdBackground;
   }
   &.has-error {
-    border: 1px solid rgba($cError, 0.48);
-    background: rgba($cError, 0.04);
-    color: $cError;
+    @include default-form-error-style();
   }
 }
+
+.CDB-FieldError .CDB-Select,
+.CDB-FieldError .CDB-SelectFake {
+  @include default-form-error-style();
+}
diff --git a/src/scss/cdb-components/forms/textarea.scss b/src/scss/cdb-components/forms/textarea.scss
index e69e455..968c2a4 100644
--- a/src/scss/cdb-components/forms/textarea.scss
+++ b/src/scss/cdb-components/forms/textarea.scss
@@ -13,6 +13,7 @@
 
 @import '../../cdb-variables/sizes';
 @import '../../cdb-variables/colors';
+@import '../../cdb-utilities/helpers';
 
 .CDB-Textarea {
   width: 100%;
@@ -34,9 +35,10 @@
     border-color: $cSecondaryLine;
     background: $cThirdBackground;
   }
-}
-.CDB-Textarea.has-error {
-  border: 1px solid rgba($cError, 0.48);
-  background: rgba($cError, 0.04);
-  color: $cError;
+  &:has-error {
+    @include default-form-error-style();
   }
+}
+.CDB-FieldError .CDB-Textarea {
+  @include default-form-error-style();
+}
diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss
index aab62bc..dbcb924 100644
--- a/src/scss/cdb-utilities/helpers.scss
+++ b/src/scss/cdb-utilities/helpers.scss
@@ -49,7 +49,7 @@
 }
 
 // Colors
-// Main Text Color is default color 
+// Main Text Color is default color
 // ----------------------------------------------
 
 .u-actionTextColor {
@@ -93,3 +93,10 @@
     display: block !important;
   }
 }
+
+/* helper mixins */
+@mixin default-form-error-style() {
+  border: 1px solid rgba($cError, 0.48);
+  background: rgba($cError, 0.04);
+  color: $cError;
+}