@wilkr/alpine-ripple/dist/alpine-ripple.css

Ripple effect (materialize) for Alpine.js.

:root{--ripple-color:#fff;--ripple-radius:9999px;--ripple-duration:600ms;--ripple-timing-function:linear;--ripple-focus-duration:2500ms;--ripple-focus-timing-function:ease-in-out;--ripple-focus-delay:200ms;}.ripple{position:absolute;top:0;left:0;bottom:0;right:0;overflow:hidden;pointer-events:none;border-radius:inherit;}.ripple span{position:absolute;border-radius:var(--ripple-radius);opacity:0.5;background:var(--ripple-color);transform:scale(0);animation:ripple var(--ripple-duration) var(--ripple-timing-function);}.ripple-focus{overflow:hidden;pointer-events:none;position:absolute;z-index:0;border-radius:inherit;inset:0;}.ripple-focus-child{position:absolute;opacity:0.3;border-radius:50%;background:var(--ripple-focus-color,var(--ripple-color));transform:scale(1);animation:ripple-pulsate var(--ripple-focus-duration) var(--ripple-focus-timing-function) infinite var(--ripple-focus-delay);}.ripple-focus-child > span{position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:50%;}@keyframes ripple{to{transform:scale(4);opacity:0;}}@keyframes ripple-pulsate{0%{transform:scale(1);}50%{transform:scale(.92);}100%{transform:scale(1);}}