refactor(hover): use :hover:not(.disable-hover)

Less CSS specificity issues. Disabling hover on mobile prevents button
flickers.

ionic/components/action-sheet/modes/ios.scss

@@ -35,7 +35,7 @@ ion-action-sheet {
   }
 }
 
-.enable-hover .action-sheet-container button:hover {
+.action-sheet-container button:hover:not(.disable-hover) {
   color: $action-sheet-options-text-color;
 }
 

ionic/components/button/button-clear.scss

@@ -12,12 +12,10 @@ button[clear],
     opacity: 0.4;
   }
 
-}
-
-.enable-hover button[clear]:hover,
-.enable-hover [button][clear]:hover {
-  opacity: 0.6;
-  color: darken-or-lighten($button-color);
+  &:hover:not(.disable-hover) {
+    opacity: 0.6;
+    color: darken-or-lighten($button-color);
+  }
 }
 
 
@@ -34,11 +32,10 @@ button[clear],
     border-color: transparent;
     background: transparent;
     color: $fg-color;
-  }
 
-  .enable-hover button[clear][#{$color-name}]:hover,
-  .enable-hover [button][clear][#{$color-name}]:hover {
-    color: darken-or-lighten($fg-color);
+    &:hover:not(.disable-hover) {
+      color: darken-or-lighten($fg-color);
+    }
   }
 
 }

ionic/components/button/button.scss

@@ -14,7 +14,7 @@ $button-round-border-radius:      64px !default;
 $button-color:                    color(primary) !default;
 $button-color-activated:          darken-or-lighten($button-color) !default;
 $button-text-color:               inverse($button-color) !default;
-$button-hover-opacity:            0.88 !default;
+$button-hover-opacity:            0.8 !default;
 
 
 // Default Button
@@ -63,6 +63,11 @@ button,
   background: $button-color;
   color: $button-text-color;
 
+  &:hover:not(.disable-hover) {
+    opacity: $button-hover-opacity;
+    text-decoration: none;
+  }
+
   &.activated {
     opacity: 1;
     background-color: $button-color-activated;
@@ -112,13 +117,6 @@ button,
 
 }
 
-.enable-hover button:hover,
-.enable-hover [button]:hover {
-  opacity: $button-hover-opacity;
-  color: $button-text-color;
-  text-decoration: none;
-}
-
 a[button] {
   text-decoration: none;
 }

ionic/components/button/button.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Renderer} from 'angular2/angular2';
+import {Directive, ElementRef} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 
@@ -13,17 +13,21 @@ export class Button {
 
   constructor(
     config: IonicConfig,
-    elementRef: ElementRef,
-    renderer: Renderer
+    elementRef: ElementRef
   ) {
-    this.iconLeft = this.iconRight = this.iconOnly = false;
+    let element = elementRef.nativeElement;
 
     if (config.setting('hoverCSS') === false) {
-      renderer.setElementClass(elementRef, 'disable-hover', true);
+      element.classList.add('disable-hover');
+    }
+
+    if (element.hasAttribute('ion-item')) {
+      // no need to put on these icon classes for an ion-item
+      return;
     }
 
     // figure out if and where the icon lives in the button
-    let childNodes = elementRef.nativeElement.childNodes;
+    let childNodes = element.childNodes;
     let childNode;
     let nodes = [];
     for (let i = 0, l = childNodes.length; i < l; i++) {
@@ -49,13 +53,13 @@ export class Button {
 
     if (nodes.length > 1) {
       if (nodes[0] === ICON && nodes[1] === TEXT) {
-        renderer.setElementClass(elementRef, 'icon-left', true);
+        element.classList.add('icon-left');
 
       } else if (nodes[0] === TEXT && nodes[1] === ICON) {
-        renderer.setElementClass(elementRef, 'icon-right', true);
+        element.classList.add('icon-right');
       }
     } else if (nodes.length === 1 && nodes[0] === ICON) {
-      renderer.setElementClass(elementRef, 'icon-only', true);
+      element.classList.add('icon-only');
     }
 
   }

ionic/components/button/modes/md.scss

@@ -33,6 +33,10 @@ button,
               background-color $button-md-transition-duration $button-md-animation-curve,
               color $button-md-transition-duration $button-md-animation-curve;
 
+  :hover:not(.disable-hover) {
+    background-color: $button-md-clear-hover-background-color;
+  }
+
   &.activated {
     box-shadow: $button-md-box-shadow-active;
   }
@@ -85,11 +89,6 @@ button,
 
 }
 
-&.enable-hover button[clear]:hover,
-&.enable-hover [button][clear]:hover {
-  background-color: $button-md-clear-hover-background-color;
-}
-
 
 // Material Design Button Color Mixin
 // --------------------------------------------------

ionic/components/tabs/tabs.scss

@@ -78,10 +78,10 @@ ion-tab {
   border: 0;
   border-radius: 0;
   background: none;
-}
 
-.enable-hover .tab-button:hover {
-  color: $tab-button-text-inactive;
+  :hover:not(.disable-hover) {
+    color: $tab-button-text-inactive;
+  }
 }
 
 [tab-bar-icons="bottom"] .tab-button {

ionic/components/toolbar/modes/ios.scss

@@ -58,6 +58,7 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
   .back-button-icon {
     display: inherit;
+    margin: 0;
     min-width: 20px;
     font-size: 3.2rem;
   }

ionic/components/toolbar/toolbar.scss

@@ -51,8 +51,8 @@ $toolbar-order: (
   pointer-events: none;
 }
 
-.enable-hover .toolbar button:hover,
-.enable-hover .toolbar [button]:hover,
+.toolbar button:hover:not(.disable-hover),
+.toolbar [button]:hover:not(.disable-hover),
 .toolbar button.activated,
 .toolbar [button].activated {
   color: $toolbar-active-color;
@@ -140,6 +140,8 @@ ion-nav-items div {
     .toolbar-title,
     button,
     [button],
+    button:hover:not(.disable-hover),
+    [button]:hover:not(.disable-hover),
     a {
       color: inverse($color-value);
     }