From 8dd3241c0947cd80daa43a17dc08cfb5c911303c Mon Sep 17 00:00:00 2001
From: Prateek Saxena <prtksxna@gmail.com>
Date: Tue, 25 Feb 2014 19:31:43 +0530
Subject: [PATCH] mediawiki.less: Use less mixin to reduce code repetition in
 animation

Adds an `animation` and `transform-rotate` mixin to help with the animation.
Also creates a mixin for the keyframes and uses them for webkit, moz and
opera specific declerations.

Change-Id: I167dc5e5a2f43f64c5029864e76d42fcc82af622
---
 .../mediawiki.mixins.animation.less           | 12 ++++++
 .../mediawiki.mixins.rotation.less            | 38 ++++++++++---------
 2 files changed, 32 insertions(+), 18 deletions(-)
 create mode 100644 resources/mediawiki.less/mediawiki.mixins.animation.less

diff --git a/resources/mediawiki.less/mediawiki.mixins.animation.less b/resources/mediawiki.less/mediawiki.mixins.animation.less
new file mode 100644
index 0000000000..ec3cddc6b2
--- /dev/null
+++ b/resources/mediawiki.less/mediawiki.mixins.animation.less
@@ -0,0 +1,12 @@
+.animation (...) {
+	-webkit-animation: @arguments;
+	-moz-animation: @arguments;
+	-o-animation: @arguments;
+	animation: @arguments;
+}
+
+.transform-rotate (@deg) {
+	-webkit-transform: rotate(@deg);
+	-moz-transform: rotate(@deg);
+	transform: rotate(@deg);
+}
\ No newline at end of file
diff --git a/resources/mediawiki.less/mediawiki.mixins.rotation.less b/resources/mediawiki.less/mediawiki.mixins.rotation.less
index 82de5ded90..e28b333f97 100644
--- a/resources/mediawiki.less/mediawiki.mixins.rotation.less
+++ b/resources/mediawiki.less/mediawiki.mixins.rotation.less
@@ -1,31 +1,33 @@
 // This is a separate file because importing the mixin causes
 // the keyframes blocks to be included in the output, regardless
 // of whether .rotation is used.
-@-webkit-keyframes rotate {
+@import "mediawiki.mixins.animation";
+
+.rotate-frames () {
 	from {
-		-webkit-transform:rotate(0deg);
+		.transform-rotate(0deg);
 	}
 	to {
-		-webkit-transform:rotate(360deg);
+		.transform-rotate(360deg);
 	}
 }
 
+@-webkit-keyframes rotate {
+	.rotate-frames;
+}
+
+@-moz-keyframes rotate {
+	.rotate-frames;
+}
+
+@-o-keyframes rotate {
+	.rotate-frames;
+}
+
 @keyframes rotate {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
+	.rotate-frames;
 }
 
-.rotation(@time) {
-	-webkit-animation-name: rotate;
-	-webkit-animation-duration: @time;
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-timing-function: linear;
-	animation-name: rotate;
-	animation-duration: @time;
-	animation-iteration-count: infinite;
-	animation-timing-function: linear;
+.rotation( @time ) {
+	.animation(rotate, @time, infinite, linear);
 }
-- 
2.20.1