flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Disable Carousel arrow on devices with no hover

Browse Source
This commit is contained in:
Félix Péault
2022-09-26 21:27:40 +02:00
parent 4e4492e465
commit 48f4950bb0
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/style/organisms/_carousel.scss
View File

@@ -88,16 +88,20 @@
// Arrow // Arrow
&__arrow { &__arrow {
$color-shadow: rgba(#000, 0.075); $color-shadow: rgba(#000, 0.075);
position: absolute;
top: 0; // Enable only on devices with hover
left: 0; @media (hover: hover) {
opacity: 0; position: absolute;
pointer-events: none; top: 0;
display: block; left: 0;
transform: translate3d(var(--x), var(--y), 0); opacity: 0;
transition: transform 0.6s var(--ease-quart), opacity 0.6s var(--ease-quart); display: block;
transform-origin: 50% 50%; pointer-events: none;
filter: drop-shadow(0 2px 2px $color-shadow) drop-shadow(0 8px 8px $color-shadow) drop-shadow(0 16px 16px $color-shadow); transform: translate3d(var(--x), var(--y), 0);
transition: transform 0.6s var(--ease-quart), opacity 0.6s var(--ease-quart);
transform-origin: 50% 50%;
filter: drop-shadow(0 2px 2px $color-shadow) drop-shadow(0 8px 8px $color-shadow) drop-shadow(0 16px 16px $color-shadow);
}
svg { svg {
display: block; display: block;