Skip to content

Commit bf88d9a

Browse files
lucasmazzalucasmazza
committed
Remove outdated/inexistent vendor prefixed properties.
Properties that are supported without any prefix in all major browsers: * `background-size` * `box-shadow` * `opacity` - (IE 8 requires the `filter: alpha` property) * `border-radius` * `box-sizing` * `transition` Properties that are stable in some browsers, but require specific prefixes for recent or current versions: * `animation` * `transform` * `linear-gradient`
1 parent 75a1280 commit bf88d9a

File tree

1 file changed

+12
-110
lines changed

1 file changed

+12
-110
lines changed

‎_mixins.scss‎

Lines changed: 12 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,9 @@
1-
/* Background-size
2-
========================================================================== */
3-
@mixin background-size($value) {
4-
-webkit-background-size: $value;
5-
-moz-background-size: $value;
6-
-o-background-size: $value;
7-
background-size: $value;
8-
}
9-
10-
/* Box shadow
11-
========================================================================== */
12-
@mixin box-shadow($parameters...) {
13-
-webkit-box-shadow: $parameters;
14-
-moz-box-shadow: $parameters;
15-
box-shadow: $parameters;
16-
}
17-
181
/* Opacity
192
========================================================================== */
203
@mixin opacity($value) {
214
$ie: $value * 100;
22-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ie)";
23-
filter: alpha(opacity=$ie);
24-
-khtml-opacity: $value;
25-
-moz-opacity: $value;
26-
opacity: $value;
5+
filter: alpha(opacity=$ie);
6+
opacity: $value;
277
}
288

299
/* Clearfix
@@ -38,7 +18,7 @@
3818
clear: both;
3919
}
4020
}
41-
21+
4222
/* Absolute center
4323
========================================================================== */
4424
@mixin absolute-center($top: 0, $right: 0, $bottom: 0, $left: 0) {
@@ -61,59 +41,25 @@
6141

6242
/* Border radius
6343
========================================================================== */
64-
@mixin border-radius($foo) {
65-
-webkit-border-radius: $foo;
66-
-moz-border-radius: $foo;
67-
border-radius: $foo;
68-
}
6944

7045
@mixin border-top-radius($foo) {
71-
-webkit-border-top-left-radius: $foo;
72-
-moz-border-top-left-radius: $foo;
73-
border-top-left-radius: $foo;
74-
75-
-webkit-border-top-right-radius: $foo;
76-
-moz-border-top-right-radius: $foo;
77-
border-top-right-radius: $foo;
46+
border-top-left-radius: $foo;
47+
border-top-right-radius: $foo;
7848
}
7949

8050
@mixin border-bottom-radius($foo) {
81-
-webkit-border-bottom-left-radius: $foo;
82-
-moz-border-bottom-left-radius: $foo;
83-
border-bottom-left-radius: $foo;
84-
85-
-webkit-border-bottom-right-radius: $foo;
86-
-moz-border-bottom-right-radius: $foo;
87-
border-bottom-right-radius: $foo;
51+
border-bottom-left-radius: $foo;
52+
border-bottom-right-radius: $foo;
8853
}
8954

9055
@mixin border-left-radius($foo) {
91-
-webkit-border-top-left-radius: $foo;
92-
-moz-border-top-left-radius: $foo;
93-
border-top-left-radius: $foo;
94-
95-
-webkit-border-bottom-left-radius: $foo;
96-
-moz-border-bottom-left-radius: $foo;
97-
border-bottom-left-radius: $foo;
56+
border-top-left-radius: $foo;
57+
border-bottom-left-radius: $foo;
9858
}
9959

10060
@mixin border-right-radius($foo) {
101-
-webkit-border-top-right-radius: $foo;
102-
-moz-border-top-right-radius: $foo;
103-
border-top-right-radius: $foo;
104-
105-
-webkit-border-bottom-right-radius: $foo;
106-
-moz-border-bottom-right-radius: $foo;
107-
border-bottom-right-radius: $foo;
108-
}
109-
110-
/* Box-sizing
111-
========================================================================== */
112-
@mixin box-sizing() {
113-
-webkit-box-sizing: border-box;
114-
-moz-box-sizing: border-box;
115-
-ms-box-sizing: border-box;
116-
box-sizing: border-box;
61+
border-top-right-radius: $foo;
62+
border-bottom-right-radius: $foo;
11763
}
11864

11965
/* Font-face
@@ -139,44 +85,26 @@
13985
========================================================================== */
14086
@mixin transition($parameters...) {
14187
-webkit-transition: $parameters;
142-
-moz-transition: $parameters;
143-
-o-transition: $parameters;
144-
-ms-transition: $parameters;
14588
transition: $parameters;
14689
}
14790

14891
/* Animation
14992
========================================================================== */
15093
@mixin animation($parameters...) {
15194
-webkit-animation: $parameters;
152-
-moz-animation: $parameters;
153-
-ms-animation: $parameters;
154-
-o-animation: $parameters;
15595
animation: $parameters;
15696
}
15797

15898
/* Keyframes
15999
========================================================================== */
160100
@mixin keyframes($name) {
161101
@-webkit-keyframes #{$name} {
162-
@content;
163-
}
164-
165-
@-moz-keyframes #{$name} {
166-
@content;
167-
}
168-
169-
@-ms-keyframes #{$name} {
170-
@content;
171-
}
172-
173-
@-o-keyframes #{$name} {
174102
@content;
175103
}
176104

177105
@keyframes #{$name} {
178106
@content;
179-
}
107+
}
180108
}
181109

182110
/* Columns
@@ -204,8 +132,6 @@
204132
========================================================================== */
205133
@mixin transform($parameters) {
206134
-webkit-transform: $parameters;
207-
-moz-transform: $parameters;
208-
-o-transform: $parameters;
209135
-ms-transform: $parameters;
210136
transform: $parameters;
211137
}
@@ -214,8 +140,6 @@
214140
========================================================================== */
215141
@mixin translate($valueX, $valueY: 0) {
216142
-webkit-transform: translate($valueX, $valueY);
217-
-moz-transform: translate($valueX, $valueY);
218-
-o-transform: translate($valueX, $valueY);
219143
-ms-transform: translate($valueX, $valueY);
220144
transform: translate($valueX, $valueY);
221145
}
@@ -224,8 +148,6 @@
224148
========================================================================== */
225149
@mixin skew($valueX, $valueY) {
226150
-webkit-transform: skewX($valueX) skewY($valueY);
227-
-moz-transform: skewX($valueX) skewY($valueY);
228-
-o-transform: skewX($valueX) skewY($valueY);
229151
-ms-transform: skewX($valueX) skewY($valueY);
230152
transform: skewX($valueX) skewY($valueY);
231153
}
@@ -234,8 +156,6 @@
234156
========================================================================== */
235157
@mixin scale($value) {
236158
-webkit-transform: scale($value);
237-
-moz-transform: scale($value);
238-
-o-transform: scale($value);
239159
-ms-transform: scale($value);
240160
transform: scale($value);
241161
}
@@ -244,8 +164,6 @@
244164
========================================================================== */
245165
@mixin rotate($value) {
246166
-webkit-transform: rotate($value);
247-
-moz-transform: rotate($value);
248-
-o-transform: rotate($value);
249167
-ms-transform: rotate($value);
250168
transform: rotate($value);
251169
}
@@ -254,8 +172,6 @@
254172
========================================================================== */
255173
@mixin origin($valueX, $valueY) {
256174
-webkit-transform-origin: $valueX $valueY;
257-
-moz-transform-origin: $valueX $valueY;
258-
-o-transform-origin: $valueX $valueY;
259175
-ms-transform-origin: $valueX $valueY;
260176
transform-origin: $valueX $valueY;
261177
}
@@ -267,40 +183,26 @@
267183
========================================================================== */
268184
@mixin simple-vertical-gradient($startColor, $endColor) {
269185
background-color: $startColor;
270-
background: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
271186
background: -webkit-linear-gradient(top, $startColor, $endColor);
272-
background: -moz-linear-gradient(top, $startColor, $endColor);
273-
background: -ms-linear-gradient(top, $startColor, $endColor);
274-
background: -o-linear-gradient(top, $startColor, $endColor);
275187
background: linear-gradient(to bottom, $startColor, $endColor);
276188
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$startColor}', EndColorStr='#{$endColor}');
277189
}
278190

279191
@mixin vertical-gradient($bgColor, $colors...) {
280192
background: -webkit-linear-gradient(top, $colors) $bgColor;
281-
background: -moz-linear-gradient(top, $colors) $bgColor;
282-
background: -o-linear-gradient(top, $colors) $bgColor;
283-
background: -ms-linear-gradient(top, $colors) $bgColor;
284193
background: linear-gradient(to bottom, $colors) $bgColor;
285194
}
286195

287196
/* Horizontal Gradient
288197
========================================================================== */
289198
@mixin simple-horizontal-gradient($startColor, $endColor) {
290199
background-color: $startColor;
291-
background: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
292200
background: -webkit-linear-gradient(left, $startColor, $endColor);
293-
background: -moz-linear-gradient(left, $startColor, $endColor);
294-
background: -ms-linear-gradient(left, $startColor, $endColor);
295-
background: -o-linear-gradient(left, $startColor, $endColor);
296201
background: linear-gradient(to right, $startColor, $endColor);
297202
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#{$startColor}', EndColorStr='#{$endColor}');
298203
}
299204

300205
@mixin horizontal-gradient($bgColor, $colors...) {
301206
background: -webkit-linear-gradient(left, $colors) $bgColor;
302-
background: -moz-linear-gradient(left, $colors) $bgColor;
303-
background: -o-linear-gradient(left, $colors) $bgColor;
304-
background: -ms-linear-gradient(left, $colors) $bgColor;
305207
background: linear-gradient(to right, $colors) $bgColor;
306208
}

0 commit comments

Comments
 (0)