From 7f05b5f3b8e3b22e882c2085e2492a6457d4365f Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Sep 2015 11:04:41 -0500
Subject: [PATCH] md inset inputs

---
 ionic/components/item/modes/material.scss     |  3 ++-
 ionic/components/list/modes/material.scss     |  8 +++---
 .../components/text-input/modes/material.scss | 15 +++++++++--
 .../text-input/test/inset-inputs/main.html    |  9 +++++--
 ionic/components/text-input/text-input.scss   | 25 +++++--------------
 5 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/ionic/components/item/modes/material.scss b/ionic/components/item/modes/material.scss
index a652673c72..9b3ddaa027 100644
--- a/ionic/components/item/modes/material.scss
+++ b/ionic/components/item/modes/material.scss
@@ -131,7 +131,8 @@ $item-md-forward-icon-color:     $item-md-border-color !default;
     margin: 4px;
   }
 
-  icon + ion-item-content {
+  icon + ion-item-content,
+  icon + .text-input {
     margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
   }
 
diff --git a/ionic/components/list/modes/material.scss b/ionic/components/list/modes/material.scss
index c79553f0a9..2dd5fc8162 100644
--- a/ionic/components/list/modes/material.scss
+++ b/ionic/components/list/modes/material.scss
@@ -56,13 +56,13 @@ $list-md-header-color:           #858585 !default;
     margin-bottom: 0;
     border-bottom-right-radius: $list-inset-md-border-radius;
     border-bottom-left-radius: $list-inset-md-border-radius;
-
-    &:after {
-      border-top: none;
-    }
   }
 }
 
+.list[mode=md][inset] .item:not(ion-input):last-child:after {
+  border-top: none;
+}
+
 .list[mode=md][inset] + .list[inset] {
   margin-top: 0;
 }
diff --git a/ionic/components/text-input/modes/material.scss b/ionic/components/text-input/modes/material.scss
index a49ee1cdea..bb1d08dc1d 100644
--- a/ionic/components/text-input/modes/material.scss
+++ b/ionic/components/text-input/modes/material.scss
@@ -14,6 +14,11 @@ ion-card[mode=md] {
     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);
@@ -25,11 +30,17 @@ ion-card[mode=md] {
   }
 
   ion-input.has-focus:after {
-    border-top: 2px solid $text-input-highlight-color;
+    border-top: 2px solid $text-input-highlight-color !important;
+    z-index: 1;
   }
 
   ion-input.has-focus + ion-input:before {
-    border-top-color: $text-input-highlight-color;
+    border-top-color: $text-input-highlight-color !important;
   }
 
 }
+
+.list[mode=md] ion-input.item {
+  padding-right: 0;
+  padding-left: 0;
+}
diff --git a/ionic/components/text-input/test/inset-inputs/main.html b/ionic/components/text-input/test/inset-inputs/main.html
index 93c42eb5c4..ff66d0ec7e 100644
--- a/ionic/components/text-input/test/inset-inputs/main.html
+++ b/ionic/components/text-input/test/inset-inputs/main.html
@@ -13,8 +13,13 @@
     </ion-input>
 
     <ion-input>
-      <input value="Input inside an inset list" type="text">
-      <icon mic item-right></icon>
+      <icon call item-left></icon>
+      <input type="text">
+    </ion-input>
+
+    <ion-input>
+      <icon mail item-left></icon>
+      <input placeholder="Placeholder text" type="text">
     </ion-input>
 
   </ion-list>
diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss
index ce9bc78420..1a5ba8337f 100644
--- a/ionic/components/text-input/text-input.scss
+++ b/ionic/components/text-input/text-input.scss
@@ -2,11 +2,10 @@
 // Text Input
 // --------------------------------------------------
 
-$ion-input-focus-border-color:      #51a7e8 !default;
-$ion-input-focus-box-shadow:        inset 0px 0px 8px 0px $ion-input-focus-border-color !default;
+$input-focus-border-color:      #51a7e8 !default;
+$input-focus-box-shadow:        inset 0px 0px 8px 0px $input-focus-border-color !default;
 
-$inset-item-input-bg-color:         darken(#fff, 20%) !default;
-$inset-item-input-input-bg-color:   $list-background-color !default;
+$text-input-background-color:   $list-background-color !default;
 
 
 ion-input {
@@ -16,8 +15,8 @@ ion-input {
 .key-input ion-input {
 
   &.has-focus {
-    border-color: $ion-input-focus-border-color;
-    box-shadow: $ion-input-focus-box-shadow;
+    border-color: $input-focus-border-color;
+    box-shadow: $input-focus-box-shadow;
   }
 
   :focus {
@@ -34,6 +33,7 @@ ion-input {
 }
 
 ion-input .text-input {
+  background-color: $text-input-background-color;
   pointer-events: none;
 }
 
@@ -44,16 +44,3 @@ ion-input.has-focus .text-input {
 .item.input textarea {
   padding-top: 9px;
 }
-
-ion-input[inset] {
-  background-color: $inset-item-input-bg-color;
-
-  .text-input {
-    background-color: $list-background-color;
-  }
-
-  &:before,
-  &:after {
-    border: 0 !important;
-  }
-}