2016-06-04 23:06:59 +03:00
|
|
|
@import "../colors";
|
|
|
|
@import "../globals";
|
|
|
|
@import "../mixins";
|
2015-10-20 22:15:21 +03:00
|
|
|
@import "./config";
|
2015-10-02 18:39:26 +03:00
|
|
|
|
|
|
|
%ripple {
|
|
|
|
position: absolute;
|
2015-11-21 14:23:24 +03:00
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
2015-10-29 11:52:55 +03:00
|
|
|
z-index: $z-index-high;
|
2015-10-05 10:12:16 +03:00
|
|
|
pointer-events: none;
|
2015-10-02 18:39:26 +03:00
|
|
|
background-color: currentColor;
|
|
|
|
border-radius: 50%;
|
2015-11-20 15:10:11 +03:00
|
|
|
transform-origin: 50% 50%;
|
2015-10-02 18:39:26 +03:00
|
|
|
}
|
|
|
|
|
2016-05-16 15:50:26 +03:00
|
|
|
.rippleWrapper {
|
2015-10-02 18:39:26 +03:00
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
2015-10-29 11:52:55 +03:00
|
|
|
z-index: $z-index-normal;
|
2015-10-05 10:12:16 +03:00
|
|
|
pointer-events: none;
|
2015-10-02 18:39:26 +03:00
|
|
|
}
|
|
|
|
|
2016-05-16 15:17:26 +03:00
|
|
|
.ripple {
|
2015-10-02 18:39:26 +03:00
|
|
|
@extend %ripple;
|
2015-10-05 10:12:16 +03:00
|
|
|
transition-duration: $ripple-duration;
|
2016-05-16 15:50:26 +03:00
|
|
|
&.rippleRestarting {
|
2015-11-20 15:10:11 +03:00
|
|
|
opacity: $ripple-final-opacity;
|
2015-11-21 14:23:24 +03:00
|
|
|
transition-property: none;
|
2015-11-20 15:10:11 +03:00
|
|
|
}
|
2016-05-16 15:50:26 +03:00
|
|
|
&.rippleActive {
|
2015-11-20 15:10:11 +03:00
|
|
|
opacity: $ripple-final-opacity;
|
2015-11-21 14:23:24 +03:00
|
|
|
transition-property: transform;
|
2015-11-20 15:10:11 +03:00
|
|
|
}
|
2016-05-16 15:50:26 +03:00
|
|
|
&:not(.rippleActive):not(.rippleRestarting) {
|
2015-10-02 18:39:26 +03:00
|
|
|
opacity: 0;
|
2015-11-21 14:23:24 +03:00
|
|
|
transition-property: opacity, transform;
|
2015-10-02 18:39:26 +03:00
|
|
|
}
|
|
|
|
}
|