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;
}
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
- *
- *
- *
- *
- *
- * ```
- *
- */
+/**
+ * @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
+ *
+ *
+ *
+ *
+ *
+ * ```
+ *
+ */
@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() {