quasar-framework
Version:
Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
63 lines (55 loc) • 1.17 kB
text/stylus
.q-ripple
&-container
top 0
left 0
width 100%
height 100%
position absolute
color inherit
border-radius inherit
overflow hidden
z-index 0
pointer-events none
&-animation
top 0
left 0 /* rtl:ignore */
opacity 0
color inherit
position absolute
border-radius 50%
background currentColor
transition .3s transform cubic-bezier(.2, .4, .4, .9), .3s opacity cubic-bezier(.2, .4, .4, .1)
pointer-events none
overflow hidden
will-change transform, opacity
&-enter
transition none
&-visible
opacity .15
.q-radial-ripple
overflow hidden
border-radius 50%
pointer-events none
position absolute
top -50%
left -50%
width 200%
height 200%
&:after
content ''
display block
position absolute
top 0
left 0
right 0
bottom 0
background-image radial-gradient(circle, currentColor 10%, transparent 10.01%)
background-repeat no-repeat
background-position 50%
transform scale(10, 10)
opacity 0
transition transform .5s, opacity 1s
&.active:after
transform scale(0, 0)
opacity .4
transition 0s