feat: updated error styling for input component

PhillipsAuctionHouse · Feb 9, 2024 · a430611 · a430611
1 parent bb762ad
commit a430611
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git 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
@@ -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;