raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-27 01:43:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

specify :hover rule only for devices that can handle it

Browse Source 
Since mobile device cannot handle :hover rule (hover is non sense for touch devices), specify css for only devices that effectivly handle it.

see https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
and https://caniuse.com/mdn-css_at-rules_media_hover for compatibility (quite good)
This commit is contained in:
Jean-Baptiste Bellet
2021-02-01 10:53:34 +01:00
parent 87bce505ec
commit fcd304182b
1 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/assets/stylesheets/darkswarm/tabset.scss
View File

@@ -32,22 +32,24 @@
border-bottom: 4px solid transparent;
&:hover, &:focus, &:active {
transition: all 0.4s ease-in-out;
border-bottom: 4px solid $clr-brick-bright;
cursor: pointer;
@include breakpoint(phablet) {
transition: none;
color: white;
background-color: $clr-brick-bright;
}
a {
color: $clr-brick-bright;
@media (hover: hover) {
&:hover {
transition: all 0.4s ease-in-out;
border-bottom: 4px solid $clr-brick-bright;
cursor: pointer;
@include breakpoint(phablet) {
color: #ffffff;
transition: none;
color: white;
background-color: $clr-brick-bright;
}
a {
color: $clr-brick-bright;
@include breakpoint(phablet) {
color: #ffffff;
}
}
}
}