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

fix(searchbar): allow setting of toolbar color and searchbar color (#17474)

Browse Source 
* fix(searchbar): allow setting of toolbar color and searchbar color

* fix test label typo
This commit is contained in:
Liam DeBeasi
2019-02-12 13:25:29 -05:00
committed by GitHub
parent f9cc2c5947
commit ba4e117e55
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/searchbar/searchbar.ios.scss
View File

@ -156,11 +156,11 @@
// Searchbar in Toolbar Color // Searchbar in Toolbar Color
// ----------------------------------------- // -----------------------------------------
:host-context(ion-toolbar.ion-color) { :host-context(ion-toolbar.ion-color):not(.ion-color) {
color: inherit; color: inherit;
} }
:host-context(ion-toolbar.ion-color) .searchbar-cancel-button { :host-context(ion-toolbar.ion-color):not(.ion-color) .searchbar-cancel-button {
color: currentColor; color: currentColor;
} }
@ -170,12 +170,12 @@
opacity: $searchbar-ios-input-icon-opacity; opacity: $searchbar-ios-input-icon-opacity;
} }
:host-context(ion-toolbar.ion-color) .searchbar-input { :host-context(ion-toolbar.ion-color):not(.ion-color) .searchbar-input {
background: rgba(var(--ion-color-contrast-rgb), $searchbar-ios-input-background-color-alpha); background: rgba(var(--ion-color-contrast-rgb), $searchbar-ios-input-background-color-alpha);
color: currentColor; color: currentColor;
} }
:host-context(ion-toolbar.ion-color) .searchbar-clear-button { :host-context(ion-toolbar.ion-color):not(.ion-color) .searchbar-clear-button {
color: currentColor; color: currentColor;
opacity: $searchbar-ios-input-icon-opacity; opacity: $searchbar-ios-input-icon-opacity;

5
core/src/components/searchbar/test/toolbar/index.html
View File

@ -79,6 +79,11 @@
<ion-searchbar show-cancel-button placeholder="Filter Schedules"></ion-searchbar> <ion-searchbar show-cancel-button placeholder="Filter Schedules"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 padding-start padding-top> Search - Dark Toolbar, Primary Search </h5>
<ion-toolbar color="dark">
<ion-searchbar show-cancel-button color="primary" placeholder="Filter Schedules"></ion-searchbar>
</ion-toolbar>
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col size="6"><f class="red"></f></ion-col> <ion-col size="6"><f class="red"></f></ion-col>