2 * Common LESS mixin library for MediaWiki
4 * By default the folder containing this file is included in $wgResourceLoaderLESSImportPaths,
5 * which makes this file importable by all less files via '@import "mediawiki.mixins";'.
7 * The mixins included below are considered a public interface for MediaWiki extensions.
8 * The signatures of parametrized mixins should be kept as stable as possible.
10 * See <http://lesscss.org/#-mixins> for more information about how to write mixins.
13 .background-image(@url) when (embeddable(@url)) {
14 background-image: embed(@url);
15 background-image: url(@url)!ie;
18 .background-image(@url) when not (embeddable(@url)) {
19 background-image: url(@url);
22 .vertical-gradient ( @startColor: gray, @endColor: white, @startPos: 0, @endPos: 100% ) {
23 background-color: @endColor;
24 background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Firefox 3.6+
25 background-image: -webkit-gradient( linear, left top, left bottom, color-stop( @startPos, @startColor ), color-stop( @endPos, @endColor ) ); // Safari 4+, Chrome 2+
26 background-image: -webkit-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Safari 5.1+, Chrome 10+
27 background-image: linear-gradient( @startColor @startPos, @endColor @endPos ); // Standard
30 /* Note gzip compression means that it is okay to embed twice */
31 .background-image-svg(@svg, @fallback) {
32 background-image: url(@fallback);
33 /* SVG support using a transparent gradient to guarantee cross-browser
34 * compatibility (browsers able to understand gradient syntax support also SVG) */
35 /* @embed */ background-image: -webkit-linear-gradient(transparent, transparent), url(@svg);
36 /* @embed */ background-image: linear-gradient(transparent, transparent), url(@svg);
39 /* Caution: Does not support localisable images */
40 .list-style-image(@url) when (embeddable(@url)) {
41 list-style-image: embed(@url);
42 list-style-image: url(@url)!ie;
45 .list-style-image(@url) when not (embeddable(@url)) {
46 list-style-image: url(@url);
49 .transition(@string) {
50 -webkit-transition: @string;
54 @-webkit-keyframes rotate {
56 -webkit-transform:rotate(0deg);
59 -webkit-transform:rotate(360deg);
65 transform: rotate(0deg);
68 transform: rotate(360deg);
73 -webkit-animation-name: rotate;
74 -webkit-animation-duration: @time;
75 -webkit-animation-iteration-count: infinite;
76 -webkit-animation-timing-function: linear;
77 animation-name: rotate;
78 animation-duration: @time;
79 animation-iteration-count: infinite;
80 animation-timing-function: linear;