quasar-framework/src/css/core/ripples.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.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