javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +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

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

@ -156,11 +156,11 @@
// Searchbar in Toolbar Color
// -----------------------------------------
:host-context(ion-toolbar.ion-color) {
:host-context(ion-toolbar.ion-color):not(.ion-color) {
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;
}
@ -170,13 +170,13 @@
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);
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;
opacity: $searchbar-ios-input-icon-opacity;
}
}

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

@ -78,6 +78,11 @@
<ion-toolbar color="dark">
<ion-searchbar show-cancel-button placeholder="Filter Schedules"></ion-searchbar>
</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-row>
@ -138,4 +143,4 @@
</style>
</body>
</html>
</html>