From f953d07f6d6d0de0ac0a7d38dc52e8d9a1f0cbd3 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Mon, 31 Jul 2017 20:50:43 +0200
Subject: [PATCH] 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
---
 .../styles/mw.rcfilters.less                  | 46 +++++++++++++++----
 .../styles/mw.rcfilters.mixins.less           |  6 +++
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index 0d12b811f3..2f01855b8b 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%,
+	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 2ce2c7f884..3b90f06ffa 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%;
-- 
2.20.1