From fe7b070a6d7ffea0bb832781253b7188616616e3 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 24 Sep 2015 14:48:10 -0500
Subject: [PATCH] fix(tabs): hover states

---
 demos/yerk/main.html                 |  2 +-
 ionic/components/tabs/modes/ios.scss |  2 +-
 ionic/components/tabs/modes/md.scss  |  2 +-
 ionic/components/tabs/tabs.scss      | 12 +++----
 ionic/components/tabs/tabs.ts        | 53 ++++++++++++++++------------
 5 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/demos/yerk/main.html b/demos/yerk/main.html
index f917ad2c7e..69d1796205 100644
--- a/demos/yerk/main.html
+++ b/demos/yerk/main.html
@@ -24,7 +24,7 @@
   #tabs .tab-button {
     color: #C7C7C7;
   }
-  #tabs .tab-button[aria-selected="true"] {
+  #tabs .tab-button[aria-selected=true] {
     color: #51E3C2;
   }
 </style>
diff --git a/ionic/components/tabs/modes/ios.scss b/ionic/components/tabs/modes/ios.scss
index 4769e5d7ec..5ce9e32e80 100644
--- a/ionic/components/tabs/modes/ios.scss
+++ b/ionic/components/tabs/modes/ios.scss
@@ -12,7 +12,7 @@ $tab-bar-ios-height:                   49px !default;
   border-top: 1px solid $toolbar-ios-border-color;
 }
 
-.tabs[tab-bar-placement="top"] .tab-bar {
+.tabs[tab-bar-placement=top] .tab-bar {
   border-top: none;
   border-bottom: 1px solid $toolbar-ios-border-color;
 }
diff --git a/ionic/components/tabs/modes/md.scss b/ionic/components/tabs/modes/md.scss
index 10ab99d5cf..9921be2339 100644
--- a/ionic/components/tabs/modes/md.scss
+++ b/ionic/components/tabs/modes/md.scss
@@ -20,7 +20,7 @@ $tab-bar-md-item-height:              4.8rem !default;
   border-bottom: 2px solid transparent;
 }
 
-.tab-button[aria-selected="true"] {
+.tab-button[aria-selected=true] {
   border-bottom-color: $tab-button-text-active;
 }
 
diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
index 0e12a2bdc0..2aa32fc28b 100644
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -46,7 +46,7 @@ ion-tab {
   order: $flex-order-tab-bar-bottom;
 }
 
-[tab-bar-placement="top"] .tab-bar-container {
+[tab-bar-placement=top] .tab-bar-container {
   order: $flex-order-tab-bar-top;
 }
 
@@ -79,18 +79,18 @@ ion-tab {
   border-radius: 0;
   background: none;
 
-  :hover:not(.disable-hover) {
+  &:hover:not(.disable-hover) {
     color: $tab-button-text-inactive;
   }
 }
 
-[tab-bar-icons="bottom"] .tab-button {
+[tab-bar-icons=bottom] .tab-button {
   .tab-button-icon {
     order: 10;
   }
 }
 
-[tab-bar-icons="left"] .tab-button {
+[tab-bar-icons=left] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -99,7 +99,7 @@ ion-tab {
   }
 }
 
-[tab-bar-icons="right"] .tab-button {
+[tab-bar-icons=right] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -137,6 +137,6 @@ ion-tab {
   white-space: normal;
 }
 
-.tab-button[aria-selected="true"] {
+.tab-button[aria-selected=true] {
   color: $toolbar-active-color;
 }
diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts
index 06dacffd6c..4af82b1acd 100644
--- a/ionic/components/tabs/tabs.ts
+++ b/ionic/components/tabs/tabs.ts
@@ -3,31 +3,34 @@ import {Component, Directive, View, Injector, NgFor, ElementRef, Optional, Host,
 import {IonicApp} from '../app/app';
 import {NavController} from '../nav/nav-controller';
 import {ViewController} from '../nav/view-controller';
-import {Icon} from '../icon/icon';
 import {IonicComponent, IonicView} from '../../config/decorators';
+import {IonicConfig} from '../../config/config';
 
-  /**
-   * @name ionTabs
-   * @description
-   * Powers a multi-tabbed interface with a Tab Bar and a set of "pages" that can be tabbed through.
-   *
-   * Assign any tabs attribute to the element to define its look and feel.
-   *
-   * For iOS, tabs will appear at the bottom of the screen. For Android, tabs will be at the top of the screen, below the nav-bar. This follows each OS's design specification, but can be configured with the ionicConfig.
-   *
-   * See the ionTab component's documentation for more details on individual tabs.
-   *
-   * @usage
-   * ```html
-   * <ion-tabs>
-   *   <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="root1"></ion-tab>
-   *   <ion-tab tab-title="Star" tab-icon="ion-ios-star-outline" [root]="root2"></ion-tab>
-   *   <ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline" [root]="root3"></ion-tab>
-   * </ion-tabs>
-   * ```
-   *
-   */
 
+/**
+ * @name ionTabs
+ * @description
+ * Powers a multi-tabbed interface with a Tab Bar and a set of "pages"
+ * that can be tabbed through.
+ *
+ * Assign any tabs attribute to the element to define its look and feel.
+ *
+ * For iOS, tabs will appear at the bottom of the screen. For Android, tabs
+ * will be at the top of the screen, below the nav-bar. This follows each platform's
+ * design specification, but can be configured with IonicConfig.
+ *
+ * See the ionTab component's documentation for more details on individual tabs.
+ *
+ * @usage
+ * ```html
+ * <ion-tabs>
+ *   <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="root1"></ion-tab>
+ *   <ion-tab tab-title="Star" tab-icon="ion-ios-star-outline" [root]="root2"></ion-tab>
+ *   <ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline" [root]="root3"></ion-tab>
+ * </ion-tabs>
+ * ```
+ *
+ */
 @IonicComponent({
   selector: 'ion-tabs',
   defaultProperties: {
@@ -166,8 +169,12 @@ export class Tabs extends NavController {
   }
 })
 class TabButton {
-  constructor(@Host() tabs: Tabs) {
+  constructor(@Host() tabs: Tabs, config: IonicConfig, elementRef: ElementRef) {
     this.tabs = tabs;
+
+    if (config.setting('hoverCSS') === false) {
+      elementRef.nativeElement.classList.add('disable-hover');
+    }
   }
 
   onInit() {