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

fix(searchbar): color

Browse Source 
fixes #14998
This commit is contained in:
Manu Mtz.-Almeida
2018-08-03 02:00:52 +02:00
parent 8253b04604
commit 14d6270692
4 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,10 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
--clear-button-color: #{$searchbar-ios-input-clear-icon-color}; --color-button-clear: #{$searchbar-ios-input-clear-icon-color};
--cancel-button-color: #{$searchbar-ios-cancel-button-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); @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; width: $searchbar-ios-input-search-icon-size;
height: 100%; height: 100%;
color: $searchbar-ios-input-search-icon-color;
contain: strict; contain: strict;
} }
@ -53,8 +53,6 @@
height: 100%; height: 100%;
background-color: $searchbar-ios-input-background-color;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;

12
core/src/components/searchbar/searchbar.md.scss
View File

@ -5,8 +5,10 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
--clear-button-color: currentColor; --color-button-clear: currentColor;
--cancel-button-color: #{$searchbar-md-cancel-button-color}; --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); @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; width: $searchbar-md-input-search-icon-size + 1;
height: $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; height: $searchbar-md-input-height;
background-color: $searchbar-md-input-background-color;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
@ -107,8 +105,6 @@
.searchbar-clear-icon { .searchbar-clear-icon {
width: $searchbar-md-input-clear-icon-size; width: $searchbar-md-input-clear-icon-size;
height: 100%; height: 100%;
color: $searchbar-md-input-clear-icon-color;
} }

19
core/src/components/searchbar/searchbar.scss
View File

@ -19,8 +19,19 @@
box-sizing: border-box; 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 // Don't let them tap on the icon
color: var(--color-icon);
pointer-events: none; pointer-events: none;
} }
@ -46,6 +57,8 @@
outline: none; outline: none;
background: var(--background);
font-family: inherit; font-family: inherit;
appearance: none; appearance: none;
@ -64,7 +77,7 @@
} }
.searchbar-cancel-button { .searchbar-cancel-button {
color: var(--cancel-button-color); color: var(--color-button-cancel);
} }
.searchbar-clear-button { .searchbar-clear-button {
@ -77,7 +90,7 @@
outline: none; outline: none;
color: var(--clear-button-color); color: var(--button-color-clear);
appearance: none; appearance: none;
} }

6
core/src/components/searchbar/searchbar.tsx
View File

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