diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts index 9d9f7cc520..a846da8631 100644 --- a/ionic/components/app/app.ts +++ b/ionic/components/app/app.ts @@ -340,6 +340,12 @@ function applyBodyCss(bodyEle, config, platform) { // ios bodyEle.classList.add(config.setting('mode')); + // touch devices should not use :hover CSS pseudo + // enable :hover CSS when the "hoverCSS" setting is not false + if (config.setting('hoverCSS') !== false) { + bodyEle.classList.add('enable-hover'); + } + /** * Hairline Shim * Add the "hairline" CSS class name to the body tag diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss index daf88a219a..367d940282 100644 --- a/ionic/components/app/typography.scss +++ b/ionic/components/app/typography.scss @@ -34,7 +34,7 @@ a { color: $link-color; background-color: transparent; } -a:hover, +.enable-hover a:hover, a.hover { color: $link-hover-color; } diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index 2f51c9e52d..0726178381 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -63,13 +63,6 @@ button, background: $button-color; color: $button-text-color; - &:hover, - &.hover { - opacity: $button-hover-opacity; - color: $button-text-color; - text-decoration: none; - } - &.activated { opacity: 1; background-color: $button-color-activated; @@ -119,6 +112,16 @@ button, } +.enable-hover button:hover, +.enable-hover [button]:hover, +button.hover +[button].hover { + opacity: $button-hover-opacity; + color: $button-text-color; + text-decoration: none; + background: red !important; +} + a[button] { text-decoration: none; } diff --git a/ionic/components/button/modes/material.scss b/ionic/components/button/modes/material.scss index 16b254d25b..df4a7ea8fb 100644 --- a/ionic/components/button/modes/material.scss +++ b/ionic/components/button/modes/material.scss @@ -42,11 +42,6 @@ button, &[clear] { box-shadow: none; - &:hover, - &.hover { - background-color: $button-md-clear-hover-bg-color; - } - &.activated { background-color: $button-md-clear-active-bg-color; } @@ -87,6 +82,13 @@ button, } +&.enable-hover button[clear]:hover, +&.enable-hover [button][clear]:hover, +button[clear].hover, +[button][clear].hover { + background-color: $button-md-clear-hover-bg-color; +} + // Material Design Button Color Mixin // -------------------------------------------------- diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss index 6b3ac0a7bf..7969a6d71d 100644 --- a/ionic/components/tabs/tabs.scss +++ b/ionic/components/tabs/tabs.scss @@ -78,11 +78,11 @@ ion-tab { border: 0; border-radius: 0; background: none; +} - &:hover, - &.hover { - color: $tab-button-text-inactive; - } +.enable-hover .tab-button:hover, +.tab-button.hover { + color: $tab-button-text-inactive; } [tab-bar-icons="bottom"] .tab-button { diff --git a/ionic/platform/registry.ts b/ionic/platform/registry.ts index aa1a7c4aa4..9df4180097 100644 --- a/ionic/platform/registry.ts +++ b/ionic/platform/registry.ts @@ -50,6 +50,7 @@ IonicPlatform.register({ mode: 'md', keyboardHeight: 290, keyboardScrollAssist: true, + hoverCSS: false, }, isMatch(p) { return p.isPlatform('android', 'android|silk'); @@ -77,6 +78,7 @@ IonicPlatform.register({ return /iphone|ipad|ipod/i.test(p.navigatorPlatform()); }, keyboardHeight: 290, + hoverCSS: false, }, isMatch(p) { return p.isPlatform('ios', 'iphone|ipad|ipod'); diff --git a/ionic/transitions/ios-transition.ts b/ionic/transitions/ios-transition.ts index 5a9977ceb4..b4c5bed468 100644 --- a/ionic/transitions/ios-transition.ts +++ b/ionic/transitions/ios-transition.ts @@ -2,13 +2,12 @@ import {Transition} from './transition'; import {Animation} from '../animations/animation'; -const DURATION = 600; +const DURATION = 550; const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; const OPACITY = 'opacity'; const TRANSLATEX = 'translateX'; -const OFF_RIGHT = '100%'; const OFF_LEFT = '-33%'; const CENTER = '0%' const OFF_OPACITY = 0.8; @@ -59,11 +58,11 @@ class IOSTransition extends Transition { .after.removeClass('transparent-navbar'); this.leavingView - .to(TRANSLATEX, OFF_RIGHT) + .to(TRANSLATEX, '100%') .to(OPACITY, 1); this.leavingTitle - .to(TRANSLATEX, OFF_RIGHT) + .to(TRANSLATEX, '100%') .to(OPACITY, 0); if (this.leaving.enableBack() && this.viewWidth() > 200) { @@ -75,7 +74,7 @@ class IOSTransition extends Transition { } else { // forward direction this.enteringView - .from(TRANSLATEX, OFF_RIGHT) + .from(TRANSLATEX, '99.5%') .from(OPACITY, 1); this.enteringNavbar @@ -83,7 +82,7 @@ class IOSTransition extends Transition { .after.removeClass('transparent-navbar'); this.enteringTitle - .from(TRANSLATEX, OFF_RIGHT); + .from(TRANSLATEX, '99.5%'); this.leavingView .to(TRANSLATEX, OFF_LEFT)