From 5ef7911cc1e589f44e6aea7a713bda492204e4da Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Mon, 23 Sep 2013 14:41:18 -0500
Subject: [PATCH] inputs with placeholder icons

---
 ionicons/scss/_ionic.scss                     | 45 ++++++-----
 ionicons/scss/_variables.scss                 |  1 +
 scss/ionic/_form.scss                         |  7 +-
 test/index.html                               |  2 +-
 ...nput-search.html => input-with-icons.html} | 76 ++++++-------------
 5 files changed, 56 insertions(+), 75 deletions(-)
 rename test/{input-search.html => input-with-icons.html} (51%)

diff --git a/ionicons/scss/_ionic.scss b/ionicons/scss/_ionic.scss
index 38ef6755c6..9a0a2f8223 100644
--- a/ionicons/scss/_ionic.scss
+++ b/ionicons/scss/_ionic.scss
@@ -5,33 +5,42 @@
 [class^="icon-"],
 [class*=" icon-"] {
   display: inline;
+  margin-top: 0;
   width: auto;
   height: auto;
-  line-height: normal;
-  vertical-align: baseline;
   background-image: none;
   background-position: 0% 0%;
   background-repeat: repeat;
-  margin-top: 0;
+  vertical-align: baseline;
+  line-height: normal;
 }
 
-/* more sprites.less reset */
-.icon-white,
-.nav-pills > .active > a > [class^="icon-"],
-.nav-pills > .active > a > [class*=" icon-"],
-.nav-list > .active > a > [class^="icon-"],
-.nav-list > .active > a > [class*=" icon-"],
-.navbar-inverse .nav > .active > a > [class^="icon-"],
-.navbar-inverse .nav > .active > a > [class*=" icon-"],
-.dropdown-menu > li > a:hover > [class^="icon-"],
-.dropdown-menu > li > a:hover > [class*=" icon-"],
-.dropdown-menu > .active > a > [class^="icon-"],
-.dropdown-menu > .active > a > [class*=" icon-"],
-.dropdown-submenu:hover > a > [class^="icon-"],
-.dropdown-submenu:hover > a > [class*=" icon-"] {
-  background-image: none;
+.placeholder-icon {
+  input {
+    padding-left: 20px !important;
+  }
+
+  &:before {
+    position: absolute;
+    display: block;
+    color: $iconPlaceholder;
+    top: 16px;
+  }
 }
 
+.stacked-label .placeholder-icon {
+  input {
+    padding-left: 30px !important;
+  }
+
+  &:before {
+    position: absolute;
+    display: block;
+    color: $iconPlaceholder;
+    top: 57px;
+    left: 18px;
+  }
+}
 
 /* keeps Bootstrap styles with and without icons the same */
 .btn, .nav {
diff --git a/ionicons/scss/_variables.scss b/ionicons/scss/_variables.scss
index 630c41d7c8..17e89bcd24 100644
--- a/ionicons/scss/_variables.scss
+++ b/ionicons/scss/_variables.scss
@@ -5,6 +5,7 @@ $IoniconPath: "../ionicons/font" !default;
 $IoniconVersion: "0.0.1" !default;
 $borderColor: #eeeeee !default;
 $iconMuted: #eeeeee !default;
+$iconPlaceholder: #aaa !default;
 $iconLight: white !default;
 $iconDark: #333333 !default;
 $icons-li-width: (30em/14);
diff --git a/scss/ionic/_form.scss b/scss/ionic/_form.scss
index 9107c203c6..a86f4b329c 100644
--- a/scss/ionic/_form.scss
+++ b/scss/ionic/_form.scss
@@ -69,6 +69,7 @@ textarea {
 }
 
 .input-wrapper {
+  position: relative;
   display: block;
   overflow: hidden;
   padding: 6px 8px 5px;
@@ -101,6 +102,9 @@ textarea {
   border: $input-border-width solid $input-border-color;
   background-color: $input-bg; 
 }
+.input-group.stacked-label input {
+  height: $line-height-computed + $font-size-base + 12px;
+}
 .input-wrapper.row {
   margin-right: 0;
   margin-left: 0;
@@ -174,7 +178,6 @@ input[type="color"],
   // Focus state
   &:focus {
     outline: 0;
-    outline: thin dotted \9; /* IE6-9 */
   }
 }
 
@@ -184,7 +187,6 @@ input[type="color"],
 input[type="radio"],
 input[type="checkbox"] {
   margin: 4px 0 0;
-  margin-top: 1px \9; /* IE8-9 */
   line-height: normal;
 }
 
@@ -202,7 +204,6 @@ input[type="checkbox"] {
 // Set the height of select and file controls to match text inputs
 select,
 input[type="file"] {
-  height: $input-height-base; /* In IE7, the height of the select element cannot be changed by height, only font-size */
   line-height: $input-height-base;
 }
 
diff --git a/test/index.html b/test/index.html
index de5907c506..148841ffc5 100644
--- a/test/index.html
+++ b/test/index.html
@@ -27,7 +27,7 @@
         <p><a class="button button-block button-default" href="input-slider.html">Input: Slider</a></p>
         <p><a class="button button-block button-default" href="input-text.html">Input: Text (single-line)</a></p>
         <p><a class="button button-block button-default" href="input-textarea.html">Input: Text (multi-line)</a></p>
-        <p><a class="button button-block button-default" href="input-search.html">Input: Search</a></p>
+        <p><a class="button button-block button-default" href="input-with-icons.html">Inputs With Icons</a></p>
         <p><a class="button button-block button-default" href="input-toggle.html">Input: Toggle</a></p>
         <p><a class="button button-block button-default" href="lists.html">Lists</a></p>
         <p><a class="button button-block button-default" href="modals.html">Modals</a></p>
diff --git a/test/input-search.html b/test/input-with-icons.html
similarity index 51%
rename from test/input-search.html
rename to test/input-with-icons.html
index 84cac17338..d9d81701d4 100644
--- a/test/input-search.html
+++ b/test/input-with-icons.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Search Inputs</title>
+    <title>Inputs With Icons</title>
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
@@ -13,7 +13,7 @@
     <section class="view">
 
       <header class="bar bar-header bar-dark">
-        <h1 class="title">Search Inputs</h1>
+        <h1 class="title">Inputs With Icons</h1>
       </header>
 
       <header class="bar bar-footer bar-dark">
@@ -25,73 +25,39 @@
         <h3>Default Text Input, Not Inset, No Content Padding</h3>
         <div class="input-group">
           <label class="input-wrapper">
-            <input type="search" placeholder="Search">
+            <div class="icon-search placeholder-icon">
+              <input type="search" placeholder="Search">
+            </div>
           </label>
         </div>
 
         <h3>Default Text Input, Is Inset, No Content Padding</h3>
         <div class="input-group inset">
           <label class="input-wrapper">
-            <input type="search" class="icon search" placeholder="Search">
+            <div class="icon-star placeholder-icon">
+              <input type="text" placeholder="Favorites">
+            </div>
           </label>
         </div>
 
-        <div class="padded">
-
-          <h3>Default Text Input, Not Inset, With Content Padding</h3>
-          <div class="input-group">
-            <label class="input-wrapper">
-              <input type="search" placeholder="Search Books">
-            </label>
-          </div>
-
-          <div class="input-group">
-            <label class="input-wrapper">
-              <input type="search" placeholder="Search Movies">
-            </label>
-          </div>
-
-          <h3>Default Text Input, Is Inset, With Content Padding</h3>
-          <div class="input-group inset">
-            <label class="input-wrapper">
-              <input type="search" placeholder="Search Books">
-            </label>
-            <label class="input-wrapper">
-              <input type="search" placeholder="Search Movies">
-            </label>
-          </div>
-
-        </div>
-
-
 
         <h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
         <div class="input-group stacked-label">
-          <label class="input-wrapper">
-            <span class="input-label">First Name</span>
-            <input type="text" placeholder="Drifty">
-          </label>
-          <label class="input-wrapper">
-            <span class="input-label">Last Name</span>
-            <input type="text" placeholder="Co">
-          </label>
           <label class="input-wrapper">
             <span class="input-label">Email</span>
-            <input type="text" placeholder="your@email.com">
-          </label>
-        </div>
-        <div class="input-group stacked-label">
-          <label class="input-wrapper">
-            <span class="input-label">Filter By Name</span>
-            <input type="text" placeholder="">
+            <div class="icon-envelope placeholder-icon">
+              <input type="text" placeholder="your@email.com">
+            </div>
           </label>
         </div>
 
         <h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
         <div class="input-group stacked-label inset">
           <label class="input-wrapper">
-            <span class="input-label">Email</span>
-            <input type="text" placeholder="your@email.com">
+            <span class="input-label">Send Money</span>
+            <div class="icon-money placeholder-icon">
+              <input type="text" placeholder="Dollar Greens">
+            </div>
           </label>
         </div>
 
@@ -100,16 +66,20 @@
           <h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
           <div class="input-group stacked-label">
             <label class="input-wrapper">
-              <span class="input-label">Email</span>
-              <input type="text" placeholder="your@email.com">
+              <span class="input-label">SaaS</span>
+              <div class="icon-cloud placeholder-icon">
+                <input type="text" placeholder="Codiqa">
+              </div>
             </label>
           </div>
 
           <h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
           <div class="input-group stacked-label inset">
             <label class="input-wrapper">
-              <span class="input-label">Email</span>
-              <input type="text" placeholder="your@email.com">
+              <span class="input-label">Favorite Music</span>
+              <div class="icon-headphones placeholder-icon">
+                <input type="text" placeholder="Bee Gees">
+              </div>
             </label>
           </div>