fix(tabs): make MD tab highlight the contrast color of tabs color

ionic-team · Dec 6, 2016 · bb3a57f · bb3a57f
1 parent dc0659f
commit bb3a57f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss
@@ -221,7 +221,7 @@ $tabs-md-tab-icon-size:                       2.4rem !default;
     color: $color-contrast;
   }
 
-  .tabs-md-#{$color-name} .tab-highlight {
+  .tabs-md-#{$color-name}[tabsHighlight=true] .tab-highlight {
     background: $color-contrast;
   }
 

diff --git a/src/components/tabs/test/basic/app-module.ts b/src/components/tabs/test/basic/app-module.ts
@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, App, AlertController, ModalController, ViewController, Tab, Tabs } from '../../../..';
+import { Config, IonicApp, IonicModule, App, AlertController, ModalController, ViewController, Tab, Tabs } from '../../../..';
 
 //
 // Modal
@@ -233,7 +233,7 @@ export class Tab3 {
       </ion-content>
     </ion-menu>
 
-    <ion-tabs #content (ionChange)="onChange($event)">
+    <ion-tabs #content (ionChange)="onChange($event)" [color]="myColor">
       <ion-tab tabTitle="Plain List" tabIcon="star" [root]="root1" (ionSelect)="onSelect($event)"></ion-tab>
       <ion-tab tabTitle="Schedule" tabIcon="globe" [root]="root2"></ion-tab>
       <ion-tab tabTitle="Stopwatch" tabIcon="logo-facebook" [root]="root3"></ion-tab>
@@ -246,6 +246,11 @@ export class TabsPage {
   root1 = Tab1;
   root2 = Tab2;
   root3 = Tab3;
+  myColor: string;
+
+  constructor(config: Config) {
+    this.myColor = (config.get('mode') !== 'ios') ? 'primary' : null;
+  }
 
   onChange(ev: Tab) {
     console.log('Changed tab', ev);