fix(searchbar): use the contrast color for the background in a toolbar

also updated the icons and text to use the contrast color. fixes #6379
ionic-team · Jun 9, 2016 · b4028c6 · b4028c6
1 parent 03986d4
commit b4028c6
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 10 deletions.
diff --git 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:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $searchbar-ios-input-search-icon-color + "' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='" + $searchbar-ios-input-search-icon-color + "' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
+$searchbar-ios-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='fg-color' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='fg-color' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></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:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
+$searchbar-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='fg-color' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></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
@@ -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
@@ -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
@@ -13,9 +13,9 @@ <h5 padding-left padding-top> Search - Primary Toolbar </h5>
     <ion-searchbar dark [(ngModel)]="primaryToolbarSearch" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
-  <h5 padding-left padding-top> Search - Danger Toolbar </h5>
-  <ion-toolbar danger>
-    <ion-searchbar dark [(ngModel)]="dangerToolbarSearch" class="e2eDangerToolbarSearchbar"></ion-searchbar>
+  <h5 padding-left padding-top> Search - Dark Toolbar </h5>
+  <ion-toolbar dark>
+    <ion-searchbar dark [(ngModel)]="darkToolbarSearch" class="e2eDarkToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
   <h5 padding-left padding-top> Search - Light Toolbar </h5>