diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss
index b02be3e51a..7111d2dcb0 100644
--- a/src/components/searchbar/searchbar.ios.scss
+++ b/src/components/searchbar/searchbar.ios.scss
@@ -11,7 +11,7 @@ $searchbar-ios-border-color: rgba(0, 0, 0, .05) !default;
$searchbar-ios-min-height: 44px !default;
$searchbar-ios-input-search-icon-color: rgba(0, 0, 0, .5) !default;
-$searchbar-ios-input-search-icon-svg: "" !default;
+$searchbar-ios-input-search-icon-svg: "" !default;
$searchbar-ios-input-search-icon-size: 13px !default;
$searchbar-ios-input-height: 3rem !default;
@@ -23,7 +23,7 @@ $searchbar-ios-input-transition: all 400ms cubic-bezier(.25, .45, .05,
$searchbar-ios-cancel-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default;
$searchbar-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default;
-$searchbar-ios-input-clear-icon-svg: "" !default;
+$searchbar-ios-input-clear-icon-svg: "" !default;
$searchbar-ios-input-clear-icon-size: 18px !default;
$searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
@@ -42,11 +42,20 @@ ion-searchbar {
}
+// Searchbar Mixin for Icons
+// -----------------------------------------
+
+@mixin ios-searchbar-icon($svg-icon, $fg-color) {
+ $svg: str-replace($svg-icon, 'fg-color', $fg-color);
+ @include svg-background-image($svg);
+}
+
+
// Searchbar Search Icon
// -----------------------------------------
.searchbar-search-icon {
- @include svg-background-image($searchbar-ios-input-search-icon-svg);
+ @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $searchbar-ios-input-search-icon-color);
@include calc(margin-left, "50% - 60px");
position: absolute;
@@ -90,7 +99,7 @@ ion-searchbar {
// -----------------------------------------
.searchbar-clear-icon {
- @include svg-background-image($searchbar-ios-input-clear-icon-svg);
+ @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $searchbar-ios-input-clear-icon-color);
position: absolute;
top: 0;
@@ -190,11 +199,16 @@ ion-searchbar {
border-bottom-width: $hairlines-width;
}
+&.hairlines ion-toolbar ion-searchbar {
+ border-bottom-width: 0;
+}
+
// Generate Default Search Bar Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+ $fg-color: rgba($color-contrast, .5);
ion-searchbar[#{$color-name}] {
.searchbar-ios-cancel {
@@ -207,8 +221,22 @@ ion-searchbar {
}
.toolbar[#{$color-name}] ion-searchbar {
- .searchbar-ios-cancel {
+ .searchbar-search-icon {
+ @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $fg-color);
+ }
+
+ .searchbar-input {
+ @include placeholder($fg-color);
color: $color-contrast;
+ background: rgba($color-contrast, .08);
+ }
+
+ .searchbar-clear-icon {
+ @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $fg-color);
+ }
+
+ .searchbar-ios-cancel {
+ color: color-contrast($colors-ios, $color-base, ios);
}
}
diff --git a/src/components/searchbar/test/toolbar/e2e.ts b/src/components/searchbar/test/toolbar/e2e.ts
index 7d8a311063..5e071a5234 100644
--- a/src/components/searchbar/test/toolbar/e2e.ts
+++ b/src/components/searchbar/test/toolbar/e2e.ts
@@ -8,7 +8,7 @@ it('primary should focus', function() {
});
it('danger should focus', function() {
- element(by.css('.e2eDangerToolbarSearchbar input')).sendKeys("CC");
+ element(by.css('.e2eDarkToolbarSearchbar input')).sendKeys("CC");
});
it('light should focus', function() {
diff --git a/src/components/searchbar/test/toolbar/index.ts b/src/components/searchbar/test/toolbar/index.ts
index 5218fb75b9..938b351f25 100644
--- a/src/components/searchbar/test/toolbar/index.ts
+++ b/src/components/searchbar/test/toolbar/index.ts
@@ -8,7 +8,7 @@ import {ionicBootstrap} from '../../../../../src';
class E2EApp {
defaultToolbarSearch: string = '';
primaryToolbarSearch: string = '';
- dangerToolbarSearch: string = '';
+ darkToolbarSearch: string = '';
lightToolbarSearch: string = '';
}
diff --git a/src/components/searchbar/test/toolbar/main.html b/src/components/searchbar/test/toolbar/main.html
index d3641465c5..d036151f66 100644
--- a/src/components/searchbar/test/toolbar/main.html
+++ b/src/components/searchbar/test/toolbar/main.html
@@ -13,9 +13,9 @@