defensive css : hover mobile

BeAPI · May 11, 2023 · 73daeaa · 73daeaa
1 parent 365fbf0
commit 73daeaa
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/scss/02-tools/_m-hover-prevent-touch.scss b/src/scss/02-tools/_m-hover-prevent-touch.scss
@@ -0,0 +1,11 @@
+/**
+ * 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/
+ */
+@mixin hover-prevent-touch() {
+    @media (hover: hover) {
+        &:hover {
+            @content;
+        }
+    }
+}
diff --git a/src/scss/02-tools/tools.scss b/src/scss/02-tools/tools.scss
@@ -24,6 +24,7 @@
 @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";