From 3838a6b71e9961d8587e2b2569e74d504a31ca1c Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 2 Jun 2015 17:27:00 -0500
Subject: [PATCH] Search bar animations

---
 .../components/search-bar/extensions/ios.scss  | 18 +++++++++++++++---
 ionic/components/search-bar/search-bar.scss    |  9 +++++++--
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/ionic/components/search-bar/extensions/ios.scss b/ionic/components/search-bar/extensions/ios.scss
index 968700c2eb..912eee0ada 100644
--- a/ionic/components/search-bar/extensions/ios.scss
+++ b/ionic/components/search-bar/extensions/ios.scss
@@ -16,10 +16,15 @@ $search-bar-ios-background-size:      13px 13px !default;
   @include hairline(bottom, $search-bar-ios-border-color);
 
   .search-bar-icon {
-    width: 13px;
+    width: 100%;
     height: 13px;
+
+    transform: translateX(calc(50% - 60px));
+    -webkit-transform: translateX(-webkit-calc(50% - 60px));
+
     @include svg-background-image($search-bar-ios-background-svg);
     background-size: $search-bar-ios-background-size;
+    background-repeat: no-repeat;
     position: absolute;
     left: 10px;
     top: 8px;
@@ -38,13 +43,20 @@ $search-bar-ios-background-size:      13px 13px !default;
     background-repeat: no-repeat;
     background-position: 8px center;
 
-    transition: all .2s ease;
 
-    @include calc(padding-left, "50% - 35px");
+    @include calc(padding-left, "50% - 28px");
 
   }
 
+  .search-bar-input, .search-bar-icon {
+    transition: all .2s ease;
+  }
+
   .search-bar-input-container.focused {
+    .search-bar-icon {
+      transform: translateX(0);
+      -webkit-transform: translateX(0);
+    }
     .search-bar-input {
       padding-left: 28px;
     }
diff --git a/ionic/components/search-bar/search-bar.scss b/ionic/components/search-bar/search-bar.scss
index 0c6f85cecf..90ab2129a5 100644
--- a/ionic/components/search-bar/search-bar.scss
+++ b/ionic/components/search-bar/search-bar.scss
@@ -11,7 +11,11 @@ $search-bar-min-height:         44px !default;
   align-items: center;
   width: 100%;
   min-height: $search-bar-min-height;
-  line-height: 3rem;
+}
+
+.search-bar-icon {
+  // Don't let them tap on the icon
+  pointer-events: none;
 }
 
 .search-bar-input-container {
@@ -21,12 +25,13 @@ $search-bar-min-height:         44px !default;
   width: 100%;
 }
 
-.search-bar-input {
+input[type="search"].search-bar-input {
   display: block;
   width: 100%;
   height: 100%;
   border: none;
   font-family: inherit;
+  line-height: 3rem;
   @include appearance(none);
 }