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 {
$color-shadow: rgba(#000, 0.075);
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
display: block;
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);
// Enable only on devices with hover
@media (hover: hover) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
display: block;
pointer-events: none;
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 {
display: block;