+@import 'mediawiki.mixins.animation';
+@import 'mw.rcfilters.mixins';
+
// Corrections for the standard special page
.client-js {
.rcoptions {
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 );
}
-
}
}
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 );
}
}
@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%;