From b4a2402d4f8b79949b4e19eb9c78dc922c84945d Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 23 Nov 2015 18:40:43 -0500
Subject: [PATCH] refactor(searchbar): updating animations for cancel button

removed margin right and added transform instead. closes #584
---
 ionic/components/searchbar/modes/ios.scss | 26 +++++++++++++++--------
 ionic/components/searchbar/searchbar.ts   | 15 -------------
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/ionic/components/searchbar/modes/ios.scss b/ionic/components/searchbar/modes/ios.scss
index 7733849161..ff2a013db6 100644
--- a/ionic/components/searchbar/modes/ios.scss
+++ b/ionic/components/searchbar/modes/ios.scss
@@ -3,7 +3,8 @@
 // iOS Search Bar
 // --------------------------------------------------
 
-$searchbar-ios-padding:                  0 8px !default;
+$searchbar-ios-padding-top-bottom:       0 !default;
+$searchbar-ios-padding-left-right:       8px !default;
 $searchbar-ios-background-color:         rgba(0, 0, 0, 0.2) !default;
 $searchbar-ios-border-color:             rgba(0, 0, 0, 0.05) !default;
 $searchbar-ios-min-height:               44px !default;
@@ -25,7 +26,7 @@ $searchbar-ios-input-close-icon-size:    18px !default;
 
 
 ion-searchbar {
-  padding: $searchbar-ios-padding;
+  padding: $searchbar-ios-padding-top-bottom $searchbar-ios-padding-left-right;
   background: $searchbar-ios-background-color;
   border-bottom: 1px solid $searchbar-ios-border-color;
   min-height: $searchbar-ios-min-height;
@@ -82,10 +83,12 @@ ion-searchbar {
   transition: $searchbar-ios-cancel-transition;
   min-height: 30px;
 
-  padding-left: 8px;
-  padding-right: 0;
   margin-left: 0;
-  margin-right: -100%;
+  padding: 0;
+
+  visibility: hidden;
+  transform: translateX(calc(100% + #{$searchbar-ios-padding-left-right}));
+  flex: 0 0 0%;
 }
 
 ion-searchbar.left-align {
@@ -95,6 +98,12 @@ ion-searchbar.left-align {
   .searchbar-input {
     padding-left: 30px;
   }
+  .searchbar-cancel {
+    transform: translateX(0);
+    flex: 0 0 auto;
+    padding-left: 8px;
+    visibility: visible;
+  }
 }
 
 &.hairlines ion-searchbar {
@@ -112,13 +121,12 @@ ion-searchbar.left-align {
     }
 
     .searchbar-cancel {
-      padding-left: 8px;
-      right: -10px;
+      padding: 0;
     }
   }
 
-  .focused .searchbar-cancel {
-    right: 0px;
+  .left-align .searchbar-cancel {
+    padding-left: 8px;
   }
 
 }
diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts
index 41b68332db..f1c824e231 100644
--- a/ionic/components/searchbar/searchbar.ts
+++ b/ionic/components/searchbar/searchbar.ts
@@ -69,13 +69,6 @@ export class SearchBar extends Ion {
    * @private
    */
   afterViewInit() {
-    this.cancelButton = this.elementRef.nativeElement.querySelector('.searchbar-cancel');
-
-    if (this.cancelButton) {
-      this.cancelWidth = this.cancelButton.offsetWidth;
-      this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px";
-    }
-
     // If the user passes in a value to the model we should left align
     this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
     this.query = this.ngControl.value || '';
@@ -118,10 +111,6 @@ export class SearchBar extends Ion {
   inputFocused() {
     this.isFocused = true;
     this.shouldLeftAlign = true;
-
-    if (this.cancelButton) {
-      this.cancelButton.style.marginRight = "0px";
-    }
   }
 
   /**
@@ -130,10 +119,6 @@ export class SearchBar extends Ion {
   inputBlurred() {
     this.isFocused = false;
     this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
-
-    if (this.cancelButton) {
-      this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px";
-    }
   }
 
   clearInput(event) {