fix(tabs): hover states

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>

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;
 }

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;
 }
 

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;
 }

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() {