From 31faf2f7c95ec13b4c6d251421a79f5d0b15a022 Mon Sep 17 00:00:00 2001 From: webdevan Date: Fri, 18 Nov 2016 23:57:38 +0200 Subject: [PATCH] Make invalid inputs opaque And changed placeholder text color to contrast better --- scss/forms/_error.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) 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; + } } } -- 2.47.2