From 357074502b05ee3f7b140632accf12a92437f863 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 2 Dec 2015 19:28:35 -0500
Subject: [PATCH] fix(text-input): added highlight colors for valid/invalid
 forms, updated sass variable names

references #678
---
 ionic/components/list/modes/md.scss       |  2 +-
 ionic/components/text-input/modes/md.scss | 30 +++++++++++++++--------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss
index 2157d16d5b..174ad3b1b1 100644
--- a/ionic/components/list/modes/md.scss
+++ b/ionic/components/list/modes/md.scss
@@ -56,7 +56,7 @@ ion-list {
     }
   }
 
-  > ion-input.has-focus:last-child:after {
+  > ion-input:last-child:after {
     left: 0;
   }
 
diff --git a/ionic/components/text-input/modes/md.scss b/ionic/components/text-input/modes/md.scss
index 62d9c4c5b8..1fb0b7f8aa 100644
--- a/ionic/components/text-input/modes/md.scss
+++ b/ionic/components/text-input/modes/md.scss
@@ -3,8 +3,11 @@
 // Material Design Text Input
 // --------------------------------------------------
 
-$text-input-highlight-color:      map-get($colors, primary) !default;
-$input-label-md-color:            #999 !default;
+$text-input-highlight-color:            color(primary) !default;
+$text-input-label-md-color:             #999 !default;
+
+$text-input-hightlight-color-valid:     color(secondary) !default;
+$text-input-hightlight-color-invalid:   color(danger) !default;
 
 
 [text-input] {
@@ -12,11 +15,6 @@ $input-label-md-color:            #999 !default;
   padding: 0;
 }
 
-ion-input.item:before,
-ion-input.item:after {
-  left: 0;
-}
-
 ion-input[inset] [text-input] {
   margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left;
   padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
@@ -24,18 +22,30 @@ ion-input[inset] [text-input] {
 
 ion-label {
   margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
-  color: $input-label-md-color;
+  color: $text-input-label-md-color;
 }
 
-ion-input.has-focus:after {
+ion-input:after {
   position: absolute;
   bottom: 0;
   right: 0;
   left: $item-md-padding-left;
-  border-bottom: 2px solid $text-input-highlight-color;
+  border-bottom: 2px solid transparent;
   content: '';
 }
 
+ion-input.has-focus:after {
+  border-bottom: 2px solid $text-input-highlight-color;
+}
+
+ion-input.ng-valid.has-value:after {
+  border-bottom: 2px solid $text-input-hightlight-color-valid;
+}
+
+ion-input.ng-invalid.ng-touched:after {
+  border-bottom: 2px solid $text-input-hightlight-color-invalid;
+}
+
 [stacked-label] ion-label {
   font-size: 1.2rem;
   margin-bottom: 0;