[MediaWiki-commits] [Gerrit] mediawiki.less: Use less mixin to reduce code repetition in ... - change (mediawiki/core)

[Prtksxna (Code Review)]

Prtksxna has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/115377

Change subject: mediawiki.less: Use less mixin to reduce code repetition in 
animation
......................................................................

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
---
M resources/mediawiki.less/mediawiki.mixins.less
M resources/mediawiki.less/mediawiki.mixins.rotation.less
2 files changed, 32 insertions(+), 18 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core 
refs/changes/77/115377/1

diff --git a/resources/mediawiki.less/mediawiki.mixins.less 
b/resources/mediawiki.less/mediawiki.mixins.less
index 80b68cc..86a7750 100644
--- a/resources/mediawiki.less/mediawiki.mixins.less
+++ b/resources/mediawiki.less/mediawiki.mixins.less
@@ -51,3 +51,17 @@
        -webkit-transition: @string;
        transition: @string;
 }
+
+/* Being used by the rotation animation */
+.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);
+}
diff --git a/resources/mediawiki.less/mediawiki.mixins.rotation.less 
b/resources/mediawiki.less/mediawiki.mixins.rotation.less
index 82de5de..70f278b 100644
--- a/resources/mediawiki.less/mediawiki.mixins.rotation.less
+++ b/resources/mediawiki.less/mediawiki.mixins.rotation.less
@@ -1,31 +1,31 @@
 // 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 {
+.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);
 }

-- 
To view, visit https://gerrit.wikimedia.org/r/115377
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I167dc5e5a2f43f64c5029864e76d42fcc82af622
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <psax...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits