jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/368826 )
Change subject: RCFilters: Add vendor prefixes to loading animation
......................................................................
RCFilters: Add vendor prefixes to loading animation
Adding vendor prefixes to subtle loading animation and brush-up
CSS for better readability.
Bug: T165286
Change-Id: I6ce82cb2736e2a35cdd4dc3f2e20d2fb07ba4b26
---
M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
2 files changed, 44 insertions(+), 10 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index 0d12b81..2f01855 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -1,3 +1,6 @@
+@import 'mediawiki.mixins.animation';
+@import 'mw.rcfilters.mixins';
+
// Corrections for the standard special page
.client-js {
.rcoptions {
@@ -80,19 +83,16 @@
height: 12px;
background-color: #c8ccd1;
border-radius: 100%;
- animation: rcfiltersBouncedelay 1.5s infinite
ease-in-out;
- animation-fill-mode: both;
- animation-delay: -0.16s;
+ .animation( rcfiltersBouncedelay 1.5s ease-in-out
-0.16s infinite both );
}
&:before {
- animation-delay: -0.33s;
+ .animation-delay( -0.33s );
}
&:after {
- animation-delay: 0s;
+ .animation-delay( 0s );
}
-
}
}
@@ -100,14 +100,42 @@
font-weight: bold;
}
-@keyframes rcfiltersBouncedelay {
+@-webkit-keyframes rcfiltersBouncedelay {
0%,
- 100%,
- 80% {
+ 80%,
+ 100% {
+ -webkit-transform: scale( 0.7 );
transform: scale( 0.7 );
}
40% {
- transform: scale( 1 );
background-color: #a2a9b1;
+ -webkit-transform: scale( 1 );
+ transform: scale( 1 );
+ }
+}
+
+@-moz-keyframes rcfiltersBouncedelay {
+ 0%,
+ 80%,
+ 100% {
+ -moz-transform: scale( 0.7 );
+ transform: scale( 0.7 );
+ }
+ 40% {
+ background-color: #a2a9b1;
+ -moz-transform: scale( 0.7 );
+ transform: scale( 1 );
+ }
+}
+
+@keyframes rcfiltersBouncedelay {
+ 0%,
+ 80%,
+ 100% {
+ transform: scale( 0.7 );
+ }
+ 40% {
+ background-color: #a2a9b1;
+ transform: scale( 1 );
}
}
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
index 2ce2c7f..3b90f06 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
@@ -1,6 +1,12 @@
@import 'mediawiki.mixins';
@import 'mw.rcfilters.variables';
+.animation-delay( ... ) {
+ -webkit-animation-delay: @arguments; // Chrome 4-42, Safari 4-8, Opera
15-29, Android 2.1-4.4.4
+ -moz-animation-delay: @arguments; // Firefox 5-15
+ animation-delay: @arguments; // Chrome 43+, Firefox 16+, IE 10+, Edge
12+, Safari 9+, Opera 12.10 & 30+, iOS 9+, Android 47+
+}
+
// This is a general mixin for a color circle
.mw-rcfilters-mixin-circle( @color: white, @diameter: 2em, @padding: 0.5em,
@border: false ) {
border-radius: 50%;
--
To view, visit https://gerrit.wikimedia.org/r/368826
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I6ce82cb2736e2a35cdd4dc3f2e20d2fb07ba4b26
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[email protected]>
Gerrit-Reviewer: Mooeypoo <[email protected]>
Gerrit-Reviewer: Niharika29 <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
