com.phloxui/styles/mixins/ripple.less

PhloxUI Ng2+ Framework

// Mixins lib for rounded corner style
@import "../variables";

@keyframes phlox-ripple-animation {
    from {
      transform: scale(@DEFAULT_RIPPLE_EFFECT_FROM_TRANSFORM_SCALE);
      opacity: @DEFAULT_RIPPLE_EFFECT_FROM_OPACITY;
    }

    to {
      transform: scale(@DEFAULT_RIPPLE_EFFECT_TO_TRANSFORM_SCALE);
      opacity: @DEFAULT_RIPPLE_EFFECT_TO_OPACITY;
    }
}

.phlox-ripple-effect(@bg: @DEFAULT_RIPPLE_EFFECT_BG, @width: @DEFAULT_RIPPLE_EFFECT_WIDTH, @height: @DEFAULT_RIPPLE_EFFECT_HEIGHT) {
	position: absolute;
	border-radius: 50%;
	width: @width;
	height: @height;
	background: @bg;
}

.phlox-ripple-effect {
	.phlox-ripple-effect();
}

.phlox-ripple {
	overflow: hidden;
}