Improve touch like hover on devices without mouse

This commit improves mobile support. `:hover` CSS selector is not mobile
friendly because there is typically no mouse support on mobile. This
commit make hover behavior to become active during touch on mobile.

`:hover` selector is emulated on mobile devices. But this emulated
behavior is not desired. When emulated, the CSS style gets attached when
starting touching but does not get removed after stopping touching. This
sticky behavior is undesired.

This commit solve this issue by using Saas mixing that uses `:active`
selector instead of `:hover` when `:hover` is not really supported but
emulated.
This commit is contained in:
undergroundwires
2022-03-12 10:59:28 +01:00
parent b210aaddf2
commit 99e24b4134
12 changed files with 40 additions and 18 deletions

View File

@@ -140,7 +140,7 @@ $margin-inner: 4px;
cursor: pointer;
font-size: 1.25em;
margin-left: 0.25rem;
&:hover {
@include hover-or-touch {
color: $color-primary-dark;
}
}