Merge pull request #29 from mediamonks/feature/add-additional-mediaqu…

…ery-hover Add additional mediaquery hover mixin
mediamonks · Nov 8, 2023 · fd7ca97 · fd7ca97
2 parents 84255f4 + 9738efe
commit fd7ca97
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git 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
@@ -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;
+    }
+  }
 }