ripples.css (969B)
1 .withripple { 2 position: relative; 3 } 4 .ripple-wrapper { 5 position: absolute; 6 top: 0; 7 left: 0; 8 z-index: 1; 9 width: 100%; 10 height: 100%; 11 overflow: hidden; 12 border-radius: inherit; 13 pointer-events: none; 14 } 15 .ripple { 16 position: absolute; 17 width: 20px; 18 height: 20px; 19 margin-left: -10px; 20 margin-top: -10px; 21 border-radius: 100%; 22 background-color: rgba(0, 0, 0, 0.05); 23 -webkit-transform: scale(1); 24 -ms-transform: scale(1); 25 transform: scale(1); 26 -webkit-transform-origin: 50%; 27 -ms-transform-origin: 50%; 28 transform-origin: 50%; 29 opacity: 0; 30 pointer-events: none; 31 } 32 .ripple.ripple-on { 33 transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; 34 transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; 35 opacity: 0.1; 36 } 37 .ripple.ripple-out { 38 transition: opacity 0.1s linear 0s !important; 39 opacity: 0; 40 } 41 /*# sourceMappingURL=ripples.css.map */