react-toolbox/components/ripple/style.scss

41 lines
719 B
SCSS

@import "../base";
@import "./config";
%ripple {
position: absolute;
top: 50%;
left: 50%;
z-index: $z-index-high;
pointer-events: none;
background-color: currentColor;
border-radius: 50%;
transform-origin: 50% 50%;
}
.wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $z-index-normal;
pointer-events: none;
}
.normal {
@extend %ripple;
transition-duration: $ripple-duration;
&.restarting {
opacity: $ripple-final-opacity;
transition-property: none;
}
&.active {
opacity: $ripple-final-opacity;
transition-property: transform;
}
&:not(.active):not(.restarting) {
opacity: 0;
transition-property: opacity, transform;
}
}