From 369e02bb7ec3ecafd0a56bc61f37971c50c6336a Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Wed, 12 Aug 2015 16:21:53 -0500
Subject: [PATCH] inset text inputs

---
 ionic/components/form/input.scss              | 26 ----------
 ionic/components/item/modes/ios.scss          |  5 --
 ionic/components/item/modes/material.scss     |  5 --
 ionic/components/text-input/modes/ios.scss    | 18 +++++++
 .../components/text-input/modes/material.scss | 18 +++++++
 .../text-input/test/inset-inputs/main.html    | 51 +++++++++++++++----
 ionic/components/text-input/text-input.scss   | 18 ++++++-
 ionic/ionic.ios.scss                          |  1 +
 ionic/ionic.material.scss                     |  1 +
 9 files changed, 94 insertions(+), 49 deletions(-)
 delete mode 100644 ionic/components/form/input.scss
 create mode 100644 ionic/components/text-input/modes/ios.scss
 create mode 100644 ionic/components/text-input/modes/material.scss

diff --git a/ionic/components/form/input.scss b/ionic/components/form/input.scss
deleted file mode 100644
index 2d5474b795..0000000000
--- a/ionic/components/form/input.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-
-// Text Input
-// --------------------------------------------------
-
-
-ion-input {
-  display: block;
-}
-
-
-.item.input {
-  align-items: flex-start;
-}
-
-.item.input .text-input {
-  flex: 1;
-
-}
-
-.text-input {
-  pointer-events: none;
-}
-
-.item.input textarea {
-  padding-top: 9px;
-}
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index 5ee14cb7ed..3fa3db0271 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -65,11 +65,6 @@ $item-ios-forward-icon-color:     $item-ios-border-color !default;
     margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom $item-ios-padding-left;
   }
 
-  .text-input {
-    margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
-    padding: 0;
-  }
-
   .item-note {
     color: $item-ios-note-color;
   }
diff --git a/ionic/components/item/modes/material.scss b/ionic/components/item/modes/material.scss
index 0d4f8b3232..0b3ec3ed45 100644
--- a/ionic/components/item/modes/material.scss
+++ b/ionic/components/item/modes/material.scss
@@ -54,11 +54,6 @@ $item-md-forward-icon-color:     $item-md-border-color !default;
     margin: $item-md-padding-media-top $item-md-padding-right $item-md-padding-media-bottom $item-md-padding-left;
   }
 
-  .text-input {
-    margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
-    padding: 0;
-  }
-
   .item-note {
     color: $item-md-note-color;
   }
diff --git a/ionic/components/text-input/modes/ios.scss b/ionic/components/text-input/modes/ios.scss
new file mode 100644
index 0000000000..5d0fedd21f
--- /dev/null
+++ b/ionic/components/text-input/modes/ios.scss
@@ -0,0 +1,18 @@
+
+// iOS Text Input
+// --------------------------------------------------
+
+
+.list[mode=ios] {
+
+  .text-input {
+    margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
+    padding: 0;
+  }
+
+  .item-input[inset] .text-input {
+    margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) $item-ios-padding-left;
+    padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
+  }
+
+}
diff --git a/ionic/components/text-input/modes/material.scss b/ionic/components/text-input/modes/material.scss
new file mode 100644
index 0000000000..b205242ced
--- /dev/null
+++ b/ionic/components/text-input/modes/material.scss
@@ -0,0 +1,18 @@
+
+// Material Design Text Input
+// --------------------------------------------------
+
+
+.list[mode=md] {
+
+  .text-input {
+    margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
+    padding: 0;
+  }
+
+  .item-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);
+  }
+
+}
diff --git a/ionic/components/text-input/test/inset-inputs/main.html b/ionic/components/text-input/test/inset-inputs/main.html
index 9953f93a3c..45850097f3 100644
--- a/ionic/components/text-input/test/inset-inputs/main.html
+++ b/ionic/components/text-input/test/inset-inputs/main.html
@@ -4,16 +4,44 @@
 
 <ion-content>
 
+
+  <ion-list inset>
+
+    <ion-input>
+      <icon name="ion-search"></icon>
+      <input value="Input inside an inset list" type="text">
+    </ion-input>
+
+    <ion-input>
+      <input value="Input inside an inset list" type="text">
+      <icon name="ion-ios-mic"></icon>
+    </ion-input>
+
+  </ion-list>
+
+
+  <ion-list inset>
+
+    <ion-input inset>
+      <icon name="ion-search"></icon>
+      <input value="Inset input inside an inset list" type="text">
+    </ion-input>
+
+    <ion-input inset>
+      <input value="Inset input inside an inset list" type="text">
+      <icon name="ion-ios-mic"></icon>
+    </ion-input>
+
+  </ion-list>
+
+
   <ion-list>
 
     <ion-input inset>
-      <icon name="ion-home"></icon>
-      <input value="Inset text input inside a list" type="text">
-    </ion-input>
-
-    <ion-input inset>
-      <input value="Inset text input inside a list" type="text">
-    </ion-input>
+      <icon name="ion-search"></icon>
+      <input value="Inset input inside a list" type="text">
+      <button outline>Search</button>
+    </ion-input inset>
 
   </ion-list>
 
@@ -21,15 +49,16 @@
   <ion-card>
 
     <ion-input>
-      <input value="Text input inside a card" type="text">
-      <icon name="ion-home"></icon>
+      <icon name="ion-search"></icon>
+      <input value="Input inside a card" type="text">
     </ion-input>
 
     <ion-input>
-      <input value="Text input inside a card" type="text">
-      <icon name="ion-star"></icon>
+      <input value="Input inside a card" type="text">
+      <icon name="ion-ios-mic"></icon>
     </ion-input>
 
   </ion-card>
 
+
 </ion-content>
diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss
index 2ca28777c9..f424973bb6 100644
--- a/ionic/components/text-input/text-input.scss
+++ b/ionic/components/text-input/text-input.scss
@@ -2,6 +2,12 @@
 // 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;
+
+$inset-item-input-bg-color:         darken(#fff, 20%) !default;
+$inset-item-input-input-bg-color:   $list-background-color !default;
+
 
 ion-input {
   display: block;
@@ -10,8 +16,8 @@ ion-input {
 .key-input ion-input {
 
   &.has-focus {
-    border-color: #51a7e8;
-    box-shadow: inset 0px 0px 8px 0px #51a7e8;
+    border-color: $ion-input-focus-border-color;
+    box-shadow: $ion-input-focus-box-shadow;
   }
 
   :focus {
@@ -38,3 +44,11 @@ ion-input.has-focus .text-input {
 .item.input textarea {
   padding-top: 9px;
 }
+
+.item-input[inset] {
+  background-color: $inset-item-input-bg-color;
+
+  .text-input {
+    background-color: $list-background-color;
+  }
+}
diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss
index 562a774672..5a4a869dd8 100644
--- a/ionic/ionic.ios.scss
+++ b/ionic/ionic.ios.scss
@@ -8,6 +8,7 @@
   "components/checkbox/modes/ios",
   "components/content/modes/ios",
   "components/list/modes/ios",
+  "components/text-input/modes/ios",
   "components/nav-bar/modes/ios",
   "components/popup/modes/ios",
   "components/radio/modes/ios",
diff --git a/ionic/ionic.material.scss b/ionic/ionic.material.scss
index feb419a398..92f7049f98 100644
--- a/ionic/ionic.material.scss
+++ b/ionic/ionic.material.scss
@@ -11,6 +11,7 @@
   "components/checkbox/modes/material",
   "components/item/modes/material",
   "components/list/modes/material",
+  "components/text-input/modes/material",
   "components/nav-bar/modes/material",
   "components/tabs/modes/material";