javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Brandy Carney
2016-06-14 16:01:33 -04:00
parent 9927cf958d
commit b5f93f95c0
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/searchbar/searchbar.ios.scss
View File

@ -129,6 +129,7 @@ ion-searchbar {
cursor: pointer; cursor: pointer;
pointer-events: none; pointer-events: none;
display: none; display: none;
opacity: 0;
} }
.searchbar-show-cancel .searchbar-ios-cancel { .searchbar-show-cancel .searchbar-ios-cancel {
@ -155,6 +156,7 @@ ion-searchbar {
.searchbar-has-focus { .searchbar-has-focus {
.searchbar-ios-cancel { .searchbar-ios-cancel {
pointer-events: auto; pointer-events: auto;
opacity: 1;
} }
} }

4
src/components/searchbar/test/toolbar/main.html
View File

@ -10,7 +10,7 @@
<h5 padding-left padding-top> Search - Primary Toolbar </h5> <h5 padding-left padding-top> Search - Primary Toolbar </h5>
<ion-toolbar primary> <ion-toolbar primary>
<ion-searchbar dark [(ngModel)]="primaryToolbarSearch" class="e2ePrimaryToolbarSearchbar"></ion-searchbar> <ion-searchbar dark [(ngModel)]="primaryToolbarSearch" showCancelButton class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 padding-left padding-top> Search - Dark Toolbar </h5> <h5 padding-left padding-top> Search - Dark Toolbar </h5>
@ -20,7 +20,7 @@
<h5 padding-left padding-top> Search - Light Toolbar </h5> <h5 padding-left padding-top> Search - Light Toolbar </h5>
<ion-toolbar light> <ion-toolbar light>
<ion-searchbar [(ngModel)]="lightToolbarSearch" class="e2eLightToolbarSearchbar"></ion-searchbar> <ion-searchbar [(ngModel)]="lightToolbarSearch" showCancelButton class="e2eLightToolbarSearchbar"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
</ion-content> </ion-content>