31 lines
923 B
Stylus
31 lines
923 B
Stylus
@import "../constants.styl"
|
|
|
|
[data-component-ripple]
|
|
position : absolute
|
|
background-color : alpha(WHITE, 0.65)
|
|
transform translateX(-50%) translateY(-50%)
|
|
border-radius : 50%
|
|
width : SIZE = (4 * UNIT)
|
|
height : SIZE
|
|
pointer-events : none
|
|
opacity : 0
|
|
// -- Classes
|
|
&.active, &.loading
|
|
animation-name ripple
|
|
animation-timing-function ANIMATION_EASE
|
|
animation-duration (2 * ANIMATION_DURATION)
|
|
&.active
|
|
animation-iteration-count 1
|
|
&.loading
|
|
left : 50%
|
|
top : 50%
|
|
animation-iteration-count infinite
|
|
|
|
@keyframes ripple
|
|
0%
|
|
width : 0
|
|
height : 0
|
|
opacity : 1
|
|
100%
|
|
opacity : 0
|