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:
@@ -29,8 +29,8 @@ export default class MenuOptionListItem extends Vue {
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
.enabled {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
@include hover-or-touch {
|
||||
font-weight:bold;
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user