2015-06-22 13:13:08 +03:00
|
|
|
@import "../constants.styl"
|
2015-06-12 19:26:51 +03:00
|
|
|
|
|
|
|
[data-component-ripple]
|
|
|
|
position : absolute
|
|
|
|
background-color : alpha(WHITE, 0.65)
|
|
|
|
transform translateX(-50%) translateY(-50%)
|
|
|
|
border-radius : 50%
|
2015-06-21 15:13:06 +03:00
|
|
|
width : SIZE = (4 * UNIT)
|
|
|
|
height : SIZE
|
2015-06-28 07:18:47 +03:00
|
|
|
pointer-events : none
|
2015-06-21 15:13:06 +03:00
|
|
|
opacity : 0
|
2015-06-12 19:26:51 +03:00
|
|
|
// -- Classes
|
2015-06-16 14:57:22 +03:00
|
|
|
&.active, &.loading
|
2015-06-12 19:26:51 +03:00
|
|
|
animation-name ripple
|
|
|
|
animation-timing-function ANIMATION_EASE
|
|
|
|
animation-duration (2 * ANIMATION_DURATION)
|
2015-06-16 14:57:22 +03:00
|
|
|
&.active
|
|
|
|
animation-iteration-count 1
|
|
|
|
&.loading
|
|
|
|
left : 50%
|
|
|
|
top : 50%
|
|
|
|
animation-iteration-count infinite
|
2015-06-12 19:26:51 +03:00
|
|
|
|
|
|
|
@keyframes ripple
|
|
|
|
0%
|
|
|
|
width : 0
|
|
|
|
height : 0
|
|
|
|
opacity : 1
|
|
|
|
100%
|
|
|
|
opacity : 0
|