MD: inputs should have success/error highlighting

[mhartington]

From @brandyscarney on December 1, 2015 16:59

Copied from original issue: driftyco/ionic2#678

[brandyscarney]

I've had people ask how to disable highlighting so I am going to add the comment here:

The success/error highlighting can be turned off via the following Sass variables:

$text-input-md-show-success-highlight:      false;
$text-input-md-show-error-highlight:        false;

and to change the colors use the following variables:

// Input highlight - normal
$text-input-md-highlight-color:             color($colors-md, primary);

// Input highlight - valid
$text-input-md-hightlight-color-valid:      color($colors-md, secondary);

// Input highlight - invalid
$text-input-md-hightlight-color-invalid:    color($colors-md, danger);

Please add any feedback on this issue, Thanks!

[Chuckv01]

The input highlighting does not fit in an ion-item with a left floated image. It overruns the width of the input and adds a border under the entire item, instead of just the input area.

[mnasyrov]

I want to suggest to add a new 'success' Sass variable to color array for a color of success/valid states. Because it is not handy to override sass variables for each platform (md, wp) to make a right color for input's valid state in case the secondary color is not green (e.g. pink or red).

[brandyscarney]

Thanks @Chuckv01, I fixed it in my latest commit so the highlight won't extend all the way to the left, unless it is the last in the list (which is the same behavior as the default border):

Also there are some breaking changes that will be in the beta 11 release (I fixed the typos where I was using hightlight 😳): 11a24b9

I'm still trying to find a way to make this easier to customize. I'm not sure about a success/valid/invalid color variable, @mnasyrov. Adding this to the color map would make it required, but it is something to consider so thanks for the suggestion. 😄

[jabas06]

The valid highlight should be shown only when the input has the touched state. Usually we display forms that contain initial data and the highlight should not be displayed at the begging.

Repro:
http://plnkr.co/edit/RaJiIDEZRXinNuQdGwZg?p=preview

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.