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

diff --git a/resources/mediawiki.less/mediawiki.mixins.animation.less b/resources/mediawiki.less/mediawiki.mixins.animation.less
new file mode 100644 (file)
index 0000000..ec3cddc
--- /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 82de5de..e28b333 100644 (file)
--- 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);
 }