@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
1 lines • 1.14 kB
CSS
.vs-ripple{width:100px;height:100px;position:absolute;width:100%;pointer-events:none;overflow:hidden;height:100%;top:0;right:0;border-radius:inherit;z-index:-1}.vs-ripple--default{width:0;height:0;border-radius:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .5s ease;background:radial-gradient(circle,rgba(var(--vs-color),.05),rgba(var(--vs-color),.6))}.vs-ripple--solid{background:rgba(var(--vs-color),1);opacity:1}.vs-ripple--invert{--vs-color:var(--vs-light);width:0;height:0;border-radius:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .5s ease;background-image:radial-gradient(circle,rgba(var(--vs-color),.7),rgba(var(--vs-color),0))}.vs-ripple--cut-1{width:0;height:0;opacity:0;position:absolute;transform:translate(-100%,-50%) skew(20deg);transition:all .6s ease;background-image:linear-gradient(270deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 100%)}.vs-ripple--cut-2{width:0;height:0;opacity:0;position:absolute;transform:translate(0,-50%) skew(20deg);transition:all .6s ease;background-image:linear-gradient(90deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 100%)}