1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
// Common Less mixin library for MediaWiki
//
// By default the folder containing this file is included in $wgResourceLoaderLESSImportPaths,
// which makes this file importable by all less files via `@import 'mediawiki.mixins';`.
//
// The mixins included below are considered a public interface for MediaWiki extensions.
// The signatures of parametrized mixins should be kept as stable as possible.
//
// See <http://lesscss.org/#-mixins> for more information about how to write mixins.
.background-image( @url ) {
background-image: e( '/* @embed */' ) url( @url );
}
// Deprecated in MW 1.27
.background-size( @width, @height ) {
// Vendor prefix is added to support Android 2
-webkit-background-size: @width @height;
background-size: @width @height;
}
.vertical-gradient( @startColor: gray, @endColor: white, @startPos: 0, @endPos: 100% ) {
background-color: @endColor;
background-image: -webkit-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Firefox 3.6+
background-image: linear-gradient( @startColor @startPos, @endColor @endPos ); // Standard
}
// SVG support using a transparent gradient to guarantee cross-browser
// compatibility (browsers able to understand gradient syntax support also SVG).
// http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique
//
// We do not embed the fallback image on the assumption that the gain for old browsers
// is not worth the harm done to modern ones.
.background-image-svg( @svg, @fallback ) {
background-image: url( @fallback );
background-image: linear-gradient( transparent, transparent ), e( '/* @embed */' ) url( @svg );
}
// Shorthand for background-image-svg. Use if your PNG and SVG have the same name
// and only if you cannot use ResourceLoaderImage module for some particular reason.
.background-image-svg-quick( @url ) {
.background-image-svg( ~'@{url}.svg', ~'@{url}.png' );
}
.list-style-image( @url ) {
list-style-image: e( '/* @embed */' ) url( @url );
}
.list-style-image-svg( @svg, @fallback ) {
list-style-image: e( '/* @embed */' ) url( @svg );
/* Fallback to PNG bullet for IE 8 and below using CSS hack */
list-style-image: e( '/* @embed */' ) url( @fallback ) e( '\9' );
}
.hyphens( @value: auto ) {
& when ( @value = auto ){
// Legacy `word-wrap`; IE 6-11, Edge 12+, Firefox 3.5+, Chrome 4+, Safari 3.1+,
// Opera 11.5+, iOS 3.2+, Android 2.1+
// `overflow-wrap` is W3 standard, but it doesn't seem as if browser vendors
// will abandon `word-wrap` (it has wider support), therefore no duplication.
word-wrap: break-word;
}
& when ( @value = none ) {
word-wrap: normal;
}
// CSS3 hyphenation
-webkit-hyphens: @value; // Safari 5.1+, iOS 4.3+
-moz-hyphens: @value; // Firefox 6-42
-ms-hyphens: @value; // IE 10-11, Edge 12+
hyphens: @value; // Firefox 43+, Chrome 55+, Android 62+, UC Browser 11.8+, Samsung 6.2+
}
.transform( @value ) {
-webkit-transform: @value; // Safari 3.1-8.0, iOS 3.2-8.4, Android 2.1-4.4.4
-moz-transform: @value; // Firefox 3.5-15
transform: @value; // Chrome 36+, Firefox 16+, IE 10+, Safari 9+, Opera 23+, iOS 9.2+, Android 5+
}
.transition( @value ) {
-webkit-transition: @value; // Safari 3.1-6.0, iOS 3.2-6.1, Android 2.1-4.3
-moz-transition: @value; // Firefox 4-15
transition: @value; // Chrome 26+, Firefox 16+, IE 10+, Safari 6.1+, Opera 12.1+, iOS 7+, Android 4.4+
}
// Provide a hardware accelerated transform transition
// We can't use `.transition()` because WebKit requires `-webkit-` prefix before `transform`
// Example usage: `.transition-transform( 1s, opacity 2s );`
// First parameter is additional options for `transform` transition commencing with
// duration property @see https://www.w3.org/TR/css3-transitions/#transition-duration-property
// and remaining parameters are additional transitions."
.transition-transform( ... ) {
-webkit-backface-visibility: hidden; // Older Webkit browsers: Promote element to a composite layer & involve the GPU
-webkit-transition: -webkit-transform @arguments; // Safari 3.1-8, iOS 3.2-8.4, Android 2.1-4.4.4
-moz-transition: -moz-transform @arguments; // Firefox 4-15 for `-moz-transition`
transition: transform @arguments; // Chrome 36+, Firefox 16+, IE 10+, Safari 9+, Opera 12.1+, iOS 9.2+, Android 36+
}
.box-sizing( @value ) {
-webkit-box-sizing: @value; // Safari 3.1-5.0, iOS 3.2-4.3, Android 2.1-3.0
-moz-box-sizing: @value; // Firefox 4-28,
box-sizing: @value; // Chrome 10+, Firefox 29+, IE 8+, Safari 5.1+, Opera 10+, iOS 5+, Android 4+
}
.box-shadow( @value ) {
-webkit-box-shadow: @value; // Safari 3.1-5.0, iOS 3.2-4.3, Android 2.1-3.0
box-shadow: @value; // Chrome 10+, Firefox 4+, IE 9+, Safari 5.1+, Opera 11+, iOS 5+, Android 4+
}
.column-count( @value ) {
-webkit-column-count: @value;
-moz-column-count: @value;
column-count: @value;
}
.column-width( @value ) {
-webkit-column-width: @value; // Chrome Any, Safari 3+, Opera 15+
-moz-column-width: @value; // Firefox 1.5+
column-width: @value; // IE 10+, Opera 11.1-12.1
}
.column-break-inside-avoid() {
-webkit-column-break-inside: avoid; // Chrome Any, Safari 3+, Opera 15+
page-break-inside: avoid; // Firefox 1.5+
break-inside: avoid-column; // IE 10+, Opera 11.1-12.1
}
.flex-display( @display: flex ) {
display: ~'-webkit-@{display}'; // iOS 6-, Safari 3.1-6
display: ~'-moz-@{display}'; // Firefox 21-
display: ~'-ms-@{display}box'; // IE 10
display: @display;
}
.flex-wrap( @wrap: wrap ) {
-webkit-flex-wrap: @wrap; // iOS 6-, Safari 3.1-6
-moz-flex-wrap: @wrap; // Firefox 21-
-ms-flex-wrap: @wrap; // IE 10
flex-wrap: @wrap;
}
.flex( @grow: 1, @shrink: 1, @width: auto, @order: 1 ) {
// For 2009/2012 spec alignment consistency with current default
-webkit-box-pack: justify; // iOS 6-, Safari 3.1-6
-moz-box-pack: justify; // Firefox 21-
-ms-flex-pack: justify; // IE 10 (2012 spec)
justify-content: space-between; // Current default
// 2009 spec only supports 'flexible' as opposed to grow (flexPositive)
// and shrink (flexNegative); default to grow value
-webkit-box-flex: @grow; // iOS 6-, Safari 3.1-6
-moz-box-flex: @grow; // Firefox 21-
width: @width; // Fallback for flex-basis
-ms-flex: @grow @shrink @width; // IE 10
flex: @grow @shrink @width;
-webkit-box-ordinal-group: @order; // iOS 6-, Safari 3.1-6
-moz-box-ordinal-group: @order; // Firefox 21-
-ms-flex-order: @order; // IE 10
order: @order;
}
/* stylelint-disable selector-no-vendor-prefix, at-rule-no-unknown */
.mixin-placeholder( @rules ) {
// WebKit, Blink, Edge
&::-webkit-input-placeholder {
@rules();
}
// Internet Explorer 10-11
&:-ms-input-placeholder {
@rules();
}
// Firefox 19-
&::-moz-placeholder {
@rules();
}
// Firefox 4-18
&:-moz-placeholder {
@rules();
}
// W3C Standard Selectors Level 4
&::placeholder {
@rules();
}
}
/* stylelint-enable selector-no-vendor-prefix, at-rule-no-unknown */
// Screen Reader Helper Mixin
.mixin-screen-reader-text() {
display: block;
position: absolute !important; /* stylelint-disable-line declaration-no-important */
clip: rect( 1px, 1px, 1px, 1px );
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
overflow: hidden;
}
|
