60 lines
1.2 KiB
SCSS
60 lines
1.2 KiB
SCSS
@import "../variables";
|
|
@import "../mixins";
|
|
|
|
$ripple-duration: 1.2s;
|
|
$ripple-final-opacity: .3;
|
|
$ripple-size: 15 * $unit;
|
|
|
|
%ripple {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
background-color: currentColor;
|
|
border-radius: 50%;
|
|
transform: translate3d(-50%, -50%, 0);
|
|
transform-style: preserve-3d;
|
|
backface-visibility: hidden;
|
|
will-change: width, height, opacity;
|
|
}
|
|
|
|
.wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.normal {
|
|
@extend %ripple;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: $ripple-final-opacity;
|
|
transition-timing-function: $animation-curve-linear-out-slow-in;
|
|
transition-duration: $ripple-duration;
|
|
transition-property: height, width;
|
|
|
|
&:not(.active) {
|
|
opacity: 0;
|
|
transition-property: height, width, opacity;
|
|
|
|
&.restarting {
|
|
transition-property: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.loading {
|
|
@extend %ripple;
|
|
@include ripple-loading(ripple, $ripple-size, $ripple-size);
|
|
top: 50%;
|
|
left: 50%;
|
|
width: $ripple-size;
|
|
height: $ripple-size;
|
|
opacity: $ripple-final-opacity;
|
|
animation-name: ripple;
|
|
animation-duration: $ripple-duration;
|
|
animation-timing-function: $animation-curve-linear-out-slow-in;
|
|
animation-iteration-count: infinite;
|
|
}
|