refactor(searchbar): UI fixes for searchbar, added clear input to the default cancel action

references #247

ionic/components/searchbar/modes/ios.scss

@@ -38,7 +38,7 @@ ion-searchbar {
   background-size: $searchbar-ios-input-search-icon-size;
   background-repeat: no-repeat;
   position: absolute;
-  left: 10px;
+  left: 9px;
   top: 9px;
 
   @include calc(margin-left, "50% - 60px");
@@ -92,8 +92,7 @@ ion-searchbar.left-align {
     margin-left: 0;
   }
   .searchbar-input {
-    padding-left: 28px;
-    background-position: 8px;
+    padding-left: 30px;
   }
 }
 
@@ -117,7 +116,7 @@ ion-searchbar.left-align {
     }
   }
 
-  .left-align .searchbar-cancel {
+  .focused .searchbar-cancel {
     right: 0px;
   }
 
@@ -133,10 +132,10 @@ ion-searchbar.left-align {
 @each $color, $value in $colors {
 
   ion-searchbar[#{$color}] {
-    //background-color: $value;
 
     .searchbar-cancel {
       color: $value;
     }
+    
   }
 }

ionic/components/searchbar/modes/md.scss

@@ -25,10 +25,6 @@ ion-searchbar {
   background: $searchbar-md-background-color;
 }
 
-.toolbar ion-searchbar {
-  padding: 3px;
-}
-
 .searchbar-search-icon,
 .searchbar-cancel-icon {
   width: $searchbar-md-input-search-icon-size + 1;
@@ -53,18 +49,6 @@ ion-searchbar {
   left: 10px;
 }
 
-.focused {
-
-  .searchbar-search-icon {
-    display: none;
-  }
-
-  .searchbar-cancel-icon {
-    display: inline-flex;
-  }
-
-}
-
 .searchbar-input {
   padding: 6px 55px;
 
@@ -99,3 +83,28 @@ ion-searchbar {
 .searchbar-cancel {
   display: none;
 }
+
+.focused {
+
+  .searchbar-search-icon {
+    display: none;
+  }
+
+  .searchbar-cancel-icon {
+    display: inline-flex;
+  }
+
+}
+
+.toolbar {
+
+  ion-searchbar {
+    padding: 3px;
+  }
+
+  .searchbar-cancel-icon {
+    left: 14px;
+  }
+
+
+}

ionic/components/searchbar/searchbar.ts

@@ -22,9 +22,9 @@ import {Icon} from '../icon/icon';
     'cancelText': 'Cancel',
     'placeholder': 'Search',
     'cancelAction': function(event, query) {
-      console.log('Default Cancel');
       this.element = this.elementRef.nativeElement.querySelector('input');
       this.element.blur();
+      this.clearInput();
     }
   },
   host: {