jenkins-bot has submitted this change and it was merged.
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
---
A resources/mediawiki.less/mediawiki.mixins.animation.less
M resources/mediawiki.less/mediawiki.mixins.rotation.less
2 files changed, 32 insertions(+), 18 deletions(-)
Approvals:
Mattflaschen: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/mediawiki.less/mediawiki.mixins.animation.less
b/resources/mediawiki.less/mediawiki.mixins.animation.less
new file mode 100644
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
--- 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);
}
--
To view, visit https://gerrit.wikimedia.org/r/115377
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I167dc5e5a2f43f64c5029864e76d42fcc82af622
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[email protected]>
Gerrit-Reviewer: Mattflaschen <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: Spage <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
