Commit f265fed3 authored by Chris Rebert's avatar Chris Rebert

account for mq4-hover-shim's renaming & org move

parent 7294506e
...@@ -19,7 +19,7 @@ module.exports = function (grunt) { ...@@ -19,7 +19,7 @@ module.exports = function (grunt) {
var path = require('path'); var path = require('path');
var glob = require('glob'); var glob = require('glob');
var npmShrinkwrap = require('npm-shrinkwrap'); var npmShrinkwrap = require('npm-shrinkwrap');
var mq4HoverShim = require('mq4-hover-hover-shim'); var mq4HoverShim = require('mq4-hover-shim');
var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js'); var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js');
var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' }); var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' });
......
...@@ -169,7 +169,7 @@ Page zooming inevitably presents rendering artifacts in some components, both in ...@@ -169,7 +169,7 @@ Page zooming inevitably presents rendering artifacts in some components, both in
### Sticky `:hover`/`:focus` on mobile ### Sticky `:hover`/`:focus` on mobile
Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make `:hover` "sticky". In other words, `:hover` styles start applying after tapping an element and only stop applying after the user taps some other element. On mobile-first sites, this behavior is normally undesirable. Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make `:hover` "sticky". In other words, `:hover` styles start applying after tapping an element and only stop applying after the user taps some other element. On mobile-first sites, this behavior is normally undesirable.
Bootstrap includes a workaround for this, although it is disabled by default. By setting `$use-hover-media-query` to `true` when compiling from Sass, Bootstrap will use [mq4-hover-hover-shim](https://github.com/cvrebert/mq4-hover-hover-shim) to disable `:hover` styles in browsers that emulate hovering, thus preventing sticky `:hover` styles. There are some caveats to this workaround; see the shim's documentation for details. Bootstrap includes a workaround for this, although it is disabled by default. By setting `$use-hover-media-query` to `true` when compiling from Sass, Bootstrap will use [mq4-hover-shim](https://github.com/twbs/mq4-hover-shim) to disable `:hover` styles in browsers that emulate hovering, thus preventing sticky `:hover` styles. There are some caveats to this workaround; see the shim's documentation for details.
### Printing ### Printing
......
@mixin hover { @mixin hover {
@if $use-hover-media-query { @if $use-hover-media-query {
// See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
// Currently shimmed by https://github.com/cvrebert/mq4-hover-hover-shim // Currently shimmed by https://github.com/twbs/mq4-hover-shim
@media (hover: hover) { @media (hover: hover) {
&:hover { @content } &:hover { @content }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment