diff options
| author | Chris Rebert <[email protected]> | 2015-01-20 15:35:28 -0800 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2015-01-22 11:39:57 -0800 |
| commit | fd13e33aa4a662875cf367d8e0f012613cdc8447 (patch) | |
| tree | d4606e5dbf0aca88b77606ab6e269b3bdd2353ad | |
| parent | eaaaa005207a7918fdc442939b6756c9ac53eec1 (diff) | |
| download | bootstrap-fd13e33aa4a662875cf367d8e0f012613cdc8447.tar.xz bootstrap-fd13e33aa4a662875cf367d8e0f012613cdc8447.zip | |
add $use-hover-media-query to control @media (hover:hover) usage
| -rw-r--r-- | scss/_variables.scss | 2 | ||||
| -rw-r--r-- | scss/mixins/_hover.scss | 57 |
2 files changed, 46 insertions, 13 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index 60fb87015..2a1f8e25b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -50,6 +50,8 @@ $enable-transitions: true !default; $spacer: 1rem !default; $border-width: .075rem !default; +$use-hover-media-query: false !default; + //== Typography // //## Font, line-height, and color for body text, headings, and more. diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss index 4c415e9b4..fb5b52016 100644 --- a/scss/mixins/_hover.scss +++ b/scss/mixins/_hover.scss @@ -1,28 +1,59 @@ @mixin hover { - // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover - // Currently shimmed by https://github.com/cvrebert/mq4-hover-hover-shim - @media (hover: hover) { + @if $use-hover-media-query { + // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover + // Currently shimmed by https://github.com/cvrebert/mq4-hover-hover-shim + @media (hover: hover) { + &:hover { @content } + } + } + @else { &:hover { @content } } } @mixin hover-focus { - &:focus { @content } - @include hover { @content } + @if $use-hover-media-query { + &:focus { @content } + @include hover { @content } + } + @else { + &:focus, + &:hover { + @content + } + } } @mixin plain-hover-focus { - &, - &:focus { - @content + @if $use-hover-media-query { + &, + &:focus { + @content + } + @include hover { @content } + } + @else { + &, + &:focus, + &:hover { + @content + } } - @include hover { @content } } @mixin hover-focus-active { - &:focus, - &:active { - @content + @if $use-hover-media-query { + &:focus, + &:active { + @content + } + @include hover { @content } + } + @else { + &:focus, + &:active, + &:hover { + @content + } } - @include hover { @content } } |