diff --git a/src/components/Input/_input.scss b/src/components/Input/_input.scss index 9cf8d502..fb809c30 100644 --- a/src/components/Input/_input.scss +++ b/src/components/Input/_input.scss @@ -105,12 +105,16 @@ $lg: #{$px}-input--lg; &--invalid { color: $error-red; - .#{$px}-input__label, .#{$px}-input__input, .#{$px}-input__input::placeholder, .#{$px}-input__validation { color: inherit; } + + .#{$px}-input__input{ + border: 1px solid $error-red; + box-shadow: inset 0px 0px 3px 3px $error-pink; + } } // warn diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss index aaf2de35..2f34ad44 100644 --- a/src/scss/_vars.scss +++ b/src/scss/_vars.scss @@ -18,6 +18,7 @@ $off-white: #f4f2f1; // Notification color palette $error-red: #ff0000; +$error-pink: rgba(255, 229, 229, 0.90); $warn-yellow: #d6d141; $post-sale-magenta: #ff0085; $clock-widget-blue: #4a90e2;