From: webdevan <github@webdevan.co.za>
Date: Fri, 18 Nov 2016 21:57:38 +0000 (+0200)
Subject: Make invalid inputs opaque
X-Git-Tag: v6.3-rc1~2^2~2^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F9393%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Make invalid inputs opaque

And changed placeholder text color to contrast better
---

diff --git a/scss/forms/_error.scss b/scss/forms/_error.scss
index 84ba398ce..6a6c5397f 100644
--- a/scss/forms/_error.scss
+++ b/scss/forms/_error.scss
@@ -37,14 +37,17 @@ $input-error-font-weight: $global-weight-bold !default;
 /// Styles the background and border of an input field to have an error state.
 ///
 /// @param {Color} $background [$alert-color] - Color to use for the background and border.
-/// @param {Number} $background-alpha [0.1] - Transparency level of the background color.
+/// @param {Number} $background-lighten [10%] - Lightness level of the background color.
 @mixin form-input-error(
   $background: $input-background-invalid,
-  $background-alpha: 0.1
+  $background-lighten: 10%
 ) {
   &:not(:focus) {
     border-color: $background;
-    background-color: rgba($background, $background-alpha);
+    background-color: mix($background, $white, $background-lighten);
+    &::placeholder {
+      color: $background;
+    }    
   }
 }