Validation styles for outlined text field

[kristof12345]

Validation styles for outlined text fields now should look like this:

Fix for #619.

(For css minification I used: https://cssminifier.com/)

[enkodellc]

@kristof12345 Thanks for the PR but it appears you have edited a generated file: matblazor.css. To edit the css you should be editing the .scss file for the individual components and not the generated file. Take a look at this wiki and hopefully it can give you some insight: https://github.com/SamProf/MatBlazor/wiki/How-to-Edit-the-css---scss-styles-for-MatBlazor. If you posted your css updates I could help you further.

[SamProf]

@kristof12345 can you add CSS code (without minification) that you added to this css file?

[kristof12345]

@kristof12345 can you add CSS code (without minification) that you added to this css file?

I added these styles (also attached as a zipped css):

.validation-message {
    color: red !important;
}

.mdc-text-field--outlined .mat-text-field-input.mdc-text-field__input.invalid, .mdc-text-field--outlined .mat-text-field-input.mdc-text-field__input.valid.modified, .mdc-text-field--outlined .mdc-select__selected-text.invalid, .mdc-text-field--outlined .mdc-select__selected-text.valid.modified, .mdc-select__selected-text.invalid {
    border-bottom: none !important;
}

.invalid + .mdc-notched-outline > .mdc-notched-outline__leading, .invalid + .mdc-notched-outline > .mdc-notched-outline__notch, .invalid + .mdc-notched-outline > .mdc-notched-outline__trailing {
    border-color: red !important;
}

.valid.modified + .mdc-notched-outline > .mdc-notched-outline__leading, .valid.modified + .mdc-notched-outline > .mdc-notched-outline__notch, .valid.modified + .mdc-notched-outline > .mdc-notched-outline__trailing {
    border-color: green !important;
}

.invalid + i + .mdc-notched-outline > .mdc-notched-outline__leading, .invalid + i + .mdc-notched-outline > .mdc-notched-outline__notch, .invalid + i + .mdc-notched-outline > .mdc-notched-outline__trailing {
    border-color: red !important;
}

.valid.modified + i + .mdc-notched-outline > .mdc-notched-outline__leading, .valid.modified + i + .mdc-notched-outline > .mdc-notched-outline__notch, .valid.modified + i + .mdc-notched-outline > .mdc-notched-outline__trailing {
    border-color: green !important;
}

validation styles.css.zip

[enkodellc]

@kristof12345 thanks this needs to be added to the matTextField.scss not the compiled .css that is autogenerated. Since it looks like your repository was deleted I will merge these changes and close the PR and issue. Thanks for your contribution.