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

…17474) * fix(searchbar): allow setting of toolbar color and searchbar color * fix test label typo
ionic-team · Feb 12, 2019 · ba4e117 · ba4e117
1 parent f9cc2c5
commit ba4e117
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/core/src/components/searchbar/searchbar.ios.scss b/core/src/components/searchbar/searchbar.ios.scss
@@ -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;
-}
+}
diff --git a/core/src/components/searchbar/test/toolbar/index.html b/core/src/components/searchbar/test/toolbar/index.html
@@ -78,6 +78,11 @@ <h5 padding-start padding-top> Search - Dark Toolbar </h5>
         <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 @@ <h5 padding-start padding-top> Search - Dark Toolbar </h5>
   </style>
 </body>
 
-</html>
+</html>