SASS: Simple :hover animation mixin

mixin-ring-hover.scss

/**
 * Simple ring hover animation
 */
@mixin menus-hover-halo() {
	position: relative;

	&:after {
		content: "";
		pointer-events: none;
		position: absolute;
		width: 96%;
		height: 96%;
		border-radius: 100%;

		border: 1px solid $medium-blue;
		top: 0;
		left: 0;
		padding: 0;
		z-index: 0;

		opacity: 0;
		-webkit-transform: scale(1.5);
		-moz-transform: scale(1.5);
		-ms-transform: scale(1.5);
		transform: scale(1.5);

		-webkit-transition: -webkit-transform 0.3s, opacity 0.4s;
		-moz-transition: -moz-transform 0.3s, opacity 0.4s;
		transition: transform 0.3s, opacity 0.4s;
	}

	&:hover:after {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}