From bbdbe823cdc4b510e892a9c4ab1573403dc7bc8e Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 7 Oct 2015 14:38:37 -0400
Subject: [PATCH] refactor(search-bar): working on animations

---
 ionic/components/search-bar/modes/ios.scss       | 16 +++++++++++-----
 ionic/components/search-bar/search-bar.scss      |  6 ------
 .../components/search-bar/test/floating/index.ts |  1 +
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss
index 92d1b2e7a8..2e702ce67a 100644
--- a/ionic/components/search-bar/modes/ios.scss
+++ b/ionic/components/search-bar/modes/ios.scss
@@ -15,8 +15,8 @@ $search-bar-ios-input-height:             28px !default;
 $search-bar-ios-input-placeholder-color:  #9D9D9D !default;
 $search-bar-ios-input-text-color:         #000 !default;
 $search-bar-ios-input-background-color:   #FFFFFF !default;
-$search-bar-ios-input-transition:         all 0.3s cubic-bezier(.25, .45, .05, 1) !default;
-
+$search-bar-ios-input-transition:         all 0.3s linear !default;
+//cubic-bezier(.25, .45, .05, 1)
 $search-bar-ios-input-close-icon-color:   #8F8E94 !default;
 $search-bar-ios-input-close-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $search-bar-ios-input-close-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
 $search-bar-ios-input-close-icon-size:    17px !default;
@@ -88,14 +88,20 @@ $search-bar-ios-input-close-icon-size:    17px !default;
 
 .search-bar-cancel {
   @extend button[clear];
-  padding-left: 8px;
-  padding-right: 0;
+  // transition: all 2s cubic-bezier(.25, .45, .05, 1);
   transition: $search-bar-ios-input-transition;
+  transition-duration: 3s !important;
+  margin-right: calc(-100%);
+  // transform: translate3d(100px,0,0);
+  // max-width: 0;
+  min-height: 0;
 }
 
 .search-bar-cancel.left-align {
+  max-width: initial;
   margin-right: 0;
-  visibility: visible;
+  padding-left: 8px;
+  padding-right: 0;
 }
 
 &.hairlines .search-bar {
diff --git a/ionic/components/search-bar/search-bar.scss b/ionic/components/search-bar/search-bar.scss
index d03d43bcb3..2d719af7e0 100644
--- a/ionic/components/search-bar/search-bar.scss
+++ b/ionic/components/search-bar/search-bar.scss
@@ -31,9 +31,3 @@ input[type="search"].search-bar-input {
   line-height: 3rem;
   @include appearance(none);
 }
-
-.search-bar-cancel {
-  visibility: hidden;
-  margin-right: -200px;
-  min-height: 0;
-}
diff --git a/ionic/components/search-bar/test/floating/index.ts b/ionic/components/search-bar/test/floating/index.ts
index f04c84767f..b0b0225da9 100644
--- a/ionic/components/search-bar/test/floating/index.ts
+++ b/ionic/components/search-bar/test/floating/index.ts
@@ -20,5 +20,6 @@ class IonicApp {
   }
   myCancelAction = function() {
     console.log('myCancelAction');
+    alert("My custom action!");
   }
 }