mediawiki-extensions-Popups/resources/ext.popups.animation.less

.mwe-popups-translate(@x, @y) {
	-webkit-transform: translate(@x, @y);
	-moz-transform: translate(@x, @y);
	-ms-transform: translate(@x, @y);
	-o-transform: translate(@x, @y);
	transform: translate(@x, @y);
}

.mwe-popups-animation(...) {
	-webkit-animation: @arguments;
	-moz-animation: @arguments;
	-o-animation: @arguments;
	animation: @arguments;

	/* Leave the element in its final animation state */
	-webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
	-moz-animation-fill-mode: forwards; /* FF 5+ */
	-o-animation-fill-mode: forwards; /* not implemented yet */
	-ms-animation-fill-mode: forwards; /* IE 10+ */
	animation-fill-mode: forwards; /* when the spec is finished */
}

@-webkit-keyframes mwe-popups-fade-in {
	.mwe-popups-fade-in-frames;
}

@-moz-keyframes mwe-popups-fade-in {
	.mwe-popups-fade-in-frames;
}

@-o-keyframes mwe-popups-fade-in {
	.mwe-popups-fade-in-frames;
}

@keyframes mwe-popups-fade-in {
	.mwe-popups-fade-in-frames;
}

@-webkit-keyframes mwe-popups-fade-out {
	.mwe-popups-fade-out-frames;
}

@-moz-keyframes mwe-popups-fade-out {
	.mwe-popups-fade-out-frames;
}

@-o-keyframes mwe-popups-fade-out {
	.mwe-popups-fade-out-frames;
}

@keyframes mwe-popups-fade-out {
	.mwe-popups-fade-out-frames;
}

.mwe-popups-fade-in-frames() {
	0% {
		opacity: 0;
		.mwe-popups-translate(0, 20px);
	}

	100% {
		opacity: 1;
		.mwe-popups-translate(0, 0);
	}
}

.mwe-popups-fade-out-frames() {
	0% {
		opacity: 1;
		.mwe-popups-translate(0, 0);
	}

	100% {
		opacity: 0;
		.mwe-popups-translate(0, 20px);
	}
}

.mwe-popups-fade-in {
	.mwe-popups-animation(mwe-popups-fade-in, 0.3s);
}

.mwe-popups-fade-out {
	.mwe-popups-animation(mwe-popups-fade-out, 0.15s);
}