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

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index 0d12b81..2f01855 100644 (file)
--- 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%,
+       80%,
+       100% {
+               -webkit-transform: scale( 0.7 );
+               transform: scale( 0.7 );
+       }
+       40% {
+               background-color: #a2a9b1;
+               -webkit-transform: scale( 1 );
+               transform: scale( 1 );
+       }
+}
+
+@-moz-keyframes rcfiltersBouncedelay {
        0%,
-       100%,
-       80% {
+       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 (file)
--- 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%;