VRipple.sass 857 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. @use '../../styles/tools'
  2. @use './variables' as *
  3. @include tools.layer('components')
  4. .v-ripple
  5. &__container
  6. color: inherit
  7. border-radius: inherit
  8. position: absolute
  9. width: 100%
  10. height: 100%
  11. left: 0
  12. top: 0
  13. overflow: hidden
  14. z-index: 0
  15. pointer-events: none
  16. contain: strict
  17. &__animation
  18. color: inherit
  19. position: absolute
  20. top: 0
  21. left: 0
  22. border-radius: 50%
  23. background: currentColor
  24. opacity: 0
  25. pointer-events: none
  26. overflow: hidden
  27. will-change: transform, opacity
  28. &--enter
  29. transition: none
  30. opacity: 0
  31. &--in
  32. transition: $ripple-animation-transition-in
  33. opacity: $ripple-animation-visible-opacity
  34. &--out
  35. transition: $ripple-animation-transition-out
  36. opacity: 0