TelegramPWA/src/components/ui/RippleEffect.scss
2024-04-19 13:37:34 +04:00

36 lines
556 B
SCSS

@keyframes ripple-animation {
from {
transform: scale(0);
opacity: 1;
}
50% {
opacity: 1;
}
to {
opacity: 0;
transform: scale(2);
}
}
.ripple-container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
body.no-page-transitions & {
display: none;
}
.ripple-wave {
position: absolute;
display: block;
background-color: var(--ripple-color, rgba(0, 0, 0, 0.08));
border-radius: 50%;
transform: scale(0);
animation: ripple-animation 700ms;
pointer-events: none;
}
}