diff --git a/scss/_variables.scss b/scss/_variables.scss index 60fb87015e7fe2335212a2b3421a96da9f6aae04..2a1f8e25b7b8b63cd6050b8d0c7e544462addc5e 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 4c415e9b445a0929ca9cc32f72c209fe7141b3aa..fb5b520165d465243dc930dd738007aa3d62ec2b 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 } }