fix(searchbar): add opacity so the searchbar doesn't show when it's m…

…oved over
ionic-team · Jun 14, 2016 · b5f93f9 · b5f93f9
1 parent 9927cf9
commit b5f93f9
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss
@@ -129,6 +129,7 @@ ion-searchbar {
   cursor: pointer;
   pointer-events: none;
   display: none;
+  opacity: 0;
 }
 
 .searchbar-show-cancel .searchbar-ios-cancel {
@@ -155,6 +156,7 @@ ion-searchbar {
 .searchbar-has-focus {
   .searchbar-ios-cancel {
     pointer-events: auto;
+    opacity: 1;
   }
 }
 

diff --git a/src/components/searchbar/test/toolbar/main.html b/src/components/searchbar/test/toolbar/main.html
@@ -10,7 +10,7 @@ <h5 padding-left padding-top> Search - Default Toolbar </h5>
 
   <h5 padding-left padding-top> Search - Primary Toolbar </h5>
   <ion-toolbar primary>
-    <ion-searchbar dark [(ngModel)]="primaryToolbarSearch" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar dark [(ngModel)]="primaryToolbarSearch" showCancelButton class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
   <h5 padding-left padding-top> Search - Dark Toolbar </h5>
@@ -20,7 +20,7 @@ <h5 padding-left padding-top> Search - Dark Toolbar </h5>
 
   <h5 padding-left padding-top> Search - Light Toolbar </h5>
   <ion-toolbar light>
-    <ion-searchbar [(ngModel)]="lightToolbarSearch" class="e2eLightToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="lightToolbarSearch" showCancelButton class="e2eLightToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
 </ion-content>