VRipple.css 800 B

12345678910111213141516171819202122232425262728293031323334353637
  1. .v-ripple__container {
  2. color: inherit;
  3. border-radius: inherit;
  4. position: absolute;
  5. width: 100%;
  6. height: 100%;
  7. left: 0;
  8. top: 0;
  9. overflow: hidden;
  10. z-index: 0;
  11. pointer-events: none;
  12. contain: strict;
  13. }
  14. .v-ripple__animation {
  15. color: inherit;
  16. position: absolute;
  17. top: 0;
  18. left: 0;
  19. border-radius: 50%;
  20. background: currentColor;
  21. opacity: 0;
  22. pointer-events: none;
  23. overflow: hidden;
  24. will-change: transform, opacity;
  25. }
  26. .v-ripple__animation--enter {
  27. transition: none;
  28. opacity: 0;
  29. }
  30. .v-ripple__animation--in {
  31. transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), opacity 0.1s cubic-bezier(0, 0, 0.2, 1);
  32. opacity: calc(0.25 * var(--v-theme-overlay-multiplier));
  33. }
  34. .v-ripple__animation--out {
  35. transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
  36. opacity: 0;
  37. }