diff --git a/utils/_variables.scss b/utils/_variables.scss index 8d8ff89..b63c341 100644 --- a/utils/_variables.scss +++ b/utils/_variables.scss @@ -56,3 +56,4 @@ $minimumFluidSizeViewportWidth: 480px !default; $maximumFluidSizeViewportWidth: 1440px !default; $useRem: true !default; $useClamp: true !default; +$extraHoverMediaQuerySelector: '(pointer:fine)' !default; diff --git a/utils/mixin/_hover.scss b/utils/mixin/_hover.scss index 8857efd..fa7e7e8 100644 --- a/utils/mixin/_hover.scss +++ b/utils/mixin/_hover.scss @@ -4,17 +4,26 @@ * Uses the hover mixin with an optional extra selector (like '$:focus-visible') * * @param $extraSelector:string (optional) = an extra selector that can have the same styles as a hover (for mobile/active state) + * @param $extraMediaQuery:string (optional) = an extra media query selector that can for example prevent issues on Samsung devices ( https://www.ctrl.blog/entry/css-media-hover-samsung.html ) */ -@mixin hover($extraSelector: null) { - @media (hover: hover) { - &:hover { - @content; - } - } +@mixin hoverAdjusted($extraSelector: null, $extraMediaQuery: $extraHoverMediaQuerySelector) { + @if $extraMediaQuery { + @media (hover: hover) and #{$extraMediaQuery} { + &:hover { + @content; + } + } + } @else { + @media (hover: hover) { + &:hover { + @content; + } + } + } - @if $extraSelector { - #{$extraSelector} { - @content; - } - } + @if $extraSelector { + #{$extraSelector} { + @content; + } + } }