fix(searchbar): color

fixes #14998
ionic-team · Aug 3, 2018 · 14d6270 · 14d6270
1 parent 8253b04
commit 14d6270
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 19 deletions.
diff --git a/core/src/components/searchbar/searchbar.ios.scss b/core/src/components/searchbar/searchbar.ios.scss
@@ -5,8 +5,10 @@
 // --------------------------------------------------
 
 :host {
-  --clear-button-color: #{$searchbar-ios-input-clear-icon-color};
-  --cancel-button-color: #{$searchbar-ios-cancel-button-color};
+  --color-button-clear: #{$searchbar-ios-input-clear-icon-color};
+  --color-button-cancel: #{$searchbar-ios-cancel-button-color};
+  --color-icon: #{$searchbar-ios-input-search-icon-color};
+  --background: #{$searchbar-ios-input-background-color};
 
   @include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start);
 
@@ -38,8 +40,6 @@
   width: $searchbar-ios-input-search-icon-size;
   height: 100%;
 
-  color: $searchbar-ios-input-search-icon-color;
-
   contain: strict;
 }
 
@@ -53,8 +53,6 @@
 
   height: 100%;
 
-  background-color: $searchbar-ios-input-background-color;
-
   font-size: 14px;
   font-weight: 400;
 

diff --git a/core/src/components/searchbar/searchbar.md.scss b/core/src/components/searchbar/searchbar.md.scss
@@ -5,8 +5,10 @@
 // --------------------------------------------------
 
 :host {
-  --clear-button-color: currentColor;
-  --cancel-button-color: #{$searchbar-md-cancel-button-color};
+  --color-button-clear: currentColor;
+  --color-button-cancel: #{$searchbar-md-cancel-button-color};
+  --color-icon: #{$searchbar-md-input-search-icon-color};
+  --background: #{$searchbar-md-input-background-color};
 
   @include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start);
 
@@ -26,8 +28,6 @@
 
   width: $searchbar-md-input-search-icon-size + 1;
   height: $searchbar-md-input-search-icon-size + 1;
-
-  color: $searchbar-md-input-search-icon-color;
 }
 
 
@@ -73,8 +73,6 @@
 
   height: $searchbar-md-input-height;
 
-  background-color: $searchbar-md-input-background-color;
-
   font-size: 16px;
   font-weight: 400;
 
@@ -107,8 +105,6 @@
 .searchbar-clear-icon {
   width: $searchbar-md-input-clear-icon-size;
   height: 100%;
-
-  color: $searchbar-md-input-clear-icon-color;
 }
 
 

diff --git a/core/src/components/searchbar/searchbar.scss b/core/src/components/searchbar/searchbar.scss
@@ -19,8 +19,19 @@
   box-sizing: border-box;
 }
 
-.searchbar-icon {
+:host(.ion-color) {
+  --background: #{current-color(base)};
+  --color-button-clear: inherit;
+  --color-button-cancel: inherit;
+  --color-icon: inherit;
+
+  color: #{current-color(contrast)};
+}
+
+.searchbar-search-icon {
   // Don't let them tap on the icon
+  color: var(--color-icon);
+
   pointer-events: none;
 }
 
@@ -46,6 +57,8 @@
 
   outline: none;
 
+  background: var(--background);
+
   font-family: inherit;
   appearance: none;
 
@@ -64,7 +77,7 @@
 }
 
 .searchbar-cancel-button {
-  color: var(--cancel-button-color);
+  color: var(--color-button-cancel);
 }
 
 .searchbar-clear-button {
@@ -77,7 +90,7 @@
 
   outline: none;
 
-  color: var(--clear-button-color);
+  color: var(--button-color-clear);
   appearance: none;
 }
 

diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
@@ -337,8 +337,6 @@ export class Searchbar {
 
     return [
       <div class="searchbar-input-container">
-        { this.mode === 'md' && cancelButton }
-        <ion-icon mode={this.mode} icon={searchIcon} lazy={false} class="searchbar-search-icon"></ion-icon>
         <input
           ref={el => this.nativeInput = el as HTMLInputElement}
           class="searchbar-input"
@@ -352,6 +350,10 @@ export class Searchbar {
           autoCorrect={this.autocorrect}
           spellCheck={this.spellcheck}/>
 
+        { this.mode === 'md' && cancelButton }
+
+        <ion-icon mode={this.mode} icon={searchIcon} lazy={false} class="searchbar-search-icon"></ion-icon>
+
         <button
           type="button"
           no-blur={true}