Merge pull request #356 from BeAPI/feature/hover-no-touch

Refactor hover no touch

Author: francoistibo

src/scss/02-tools/_m-hover-prevent-touch.scss

@@ -1,10 +1,16 @@
 @use "sass:list";
 
-/// Add active, focus and hover pseudo selectors to element
-///
-/// @param {string||list} $additionalSelectors
-///   List of additional selectors
-@mixin hover($additionalSelectors: null) {
+/**
+ * Add active, focus and hover pseudo selectors to element
+ * @param {string||list} $additionalSelectors
+ * List of additional selectors
+ *
+ * @param {boolean} $onlyNoTouch
+ * The hover style will only work when the user is using a tool device like a mouse or a trackpad.
+ * https://defensivecss.dev/tip/hover-media/
+ * https://developer.mozilla.org/fr/docs/Web/CSS/@media/hover
+ */
+@mixin hover($onlyNoTouch: null, $additionalSelectors: null) {
     $selectors: "&:hover", "&:active", "&:focus";
 
     @if ($additionalSelectors) {
@@ -16,7 +22,15 @@
         }
     }
 
-    #{$selectors} {
-        @content;
+    @if $onlyNoTouch {
+        @media (hover: hover) {
+            #{$selectors} {
+                @content;
+            }
+        }
+    } @else {
+        #{$selectors} {
+            @content;
+        }
     }
 }

src/scss/02-tools/_m-hover.scss

@@ -24,7 +24,6 @@
 @import "./m-editor-only";
 @import "./m-heading";
 @import "./m-hover";
-@import "./m-hover-prevent-touch";
 @import "./m-line-clamp";
 @import "./m-placeholder-media";
 @import "./m-radio-custom";