From e4958279d34c64c129e8e25f8d10f7d73f95fe8c Mon Sep 17 00:00:00 2001
From: Keith <keith@keithfimreite.com>
Date: Wed, 2 Sep 2020 10:41:22 -0700
Subject: [PATCH] PR #642. Fixes #619 Validation styles for outlined Text
 fields

---
 .../src/matTextField/matTextField.scss        | 48 ++++++++++++++++---
 1 file changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/MatBlazor.Web/src/matTextField/matTextField.scss b/src/MatBlazor.Web/src/matTextField/matTextField.scss
index db695694..48474e7a 100644
--- a/src/MatBlazor.Web/src/matTextField/matTextField.scss
+++ b/src/MatBlazor.Web/src/matTextField/matTextField.scss
@@ -40,26 +40,60 @@ label.mdc-text-field--fullwidth:not(.mdc-text-field--textarea) > span.mdc-floati
 
 /* For EditForm validation messages */
 .validation-message {
-  color: red;
+  color: red !important;
 }
+.mdc-text-field--outlined {
+  .mat-text-field-input.mdc-text-field__input {
+    &.invalid, &.valid.modified {
+      border-bottom: none !important;
+    }
+  }
 
-/* For TextField */
+  .mdc-select__selected-text {
+    &.invalid, &.valid.modified {
+      border-bottom: none !important;
+    }
+  }
+}
 
+.mdc-select__selected-text.invalid {
+  border-bottom: none !important;
+}
+
+.invalid + .mdc-notched-outline > {
+  .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+    border-color: red !important;
+  }
+}
+
+.valid.modified + .mdc-notched-outline > {
+  .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+    border-color: green !important;
+  }
+}
 
+.invalid + i + .mdc-notched-outline > {
+  .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+    border-color: red !important;
+  }
+}
+
+.valid.modified + i + .mdc-notched-outline > {
+  .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+    border-color: green !important;
+  }
+}
+
+/* For TextField */
 .mat-text-field, .mat-select {
   &.valid.modified {
-
     .mdc-line-ripple::before
     {
       border-bottom: 1px solid #10b510 !important;
-
     }
-
-
   }
 
   &.invalid {
-
     .mdc-line-ripple::before {
       border-bottom: 1px solid red !important;
     }