3233d9b802
Disable selecting clickables as text. Selecting buttons leads to unintended selection. This is seen when touching on clickables using mobile devices. Prevent blue highlight when touching on clickables. This is seen on mobile webkit browsers. It looks ugly and the visual clue provided is not needed beacuse all clickables on mobile already have visual clues.
30 lines
1.3 KiB
SCSS
30 lines
1.3 KiB
SCSS
@mixin hover-or-touch($selector-suffix: '', $selector-prefix: '&') {
|
|
@media (hover: hover) {
|
|
/* We only do this if hover is truly supported; otherwise the emulator in mobile
|
|
keeps hovered style in-place even after touching, making it sticky. */
|
|
#{$selector-prefix}:hover #{$selector-suffix} {
|
|
@content;
|
|
}
|
|
}
|
|
@media (hover: none) {
|
|
/* We only do this if hover is not supported,otherwise the desktop behavior is not
|
|
as desired; it does not get activated on hover but only during click/touch. */
|
|
#{$selector-prefix}:active #{$selector-suffix} {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin clickable($cursor: 'pointer') {
|
|
cursor: #{$cursor};
|
|
user-select: none;
|
|
/*
|
|
It removes (blue) background during touch as seen in mobile webkit browsers (Chrome, Safari, Edge).
|
|
The default behavior is that any element (or containing element) that has cursor:pointer
|
|
explicitly set and is clicked will flash blue momentarily.
|
|
Removing it could have accessibility issue since that hides an interactive cue. But as we still provide
|
|
response to user actions through :active by `hover-or-touch` mixin.
|
|
*/
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|