diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss index 993231d6ec..b8cf15dd18 100644 --- a/ionic/components/action-sheet/modes/ios.scss +++ b/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; } diff --git a/ionic/components/button/button-clear.scss b/ionic/components/button/button-clear.scss index 8141d1a316..efc01c46eb 100644 --- a/ionic/components/button/button-clear.scss +++ b/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); + } } } diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index bea4eed408..ee120420a8 100644 --- a/ionic/components/button/button.scss +++ b/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; } diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index b6f5d038e5..1756a039cc 100644 --- a/ionic/components/button/button.ts +++ b/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'); } } diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss index a8b79bf7da..ce46477165 100644 --- a/ionic/components/button/modes/md.scss +++ b/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 // -------------------------------------------------- diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss index 4611006465..0e12a2bdc0 100644 --- a/ionic/components/tabs/tabs.scss +++ b/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 { diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss index 5a3257f1d3..d541a096d1 100644 --- a/ionic/components/toolbar/modes/ios.scss +++ b/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; } diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index e499d42cf8..c79b79ce6a 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/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); }