background-image: url(@url);
}
-.vertical-gradient ( @startColor: gray, @endColor: white, @startPos: 0, @endPos: 100% ) {
+.vertical-gradient(@startColor: gray, @endColor: white, @startPos: 0, @endPos: 100%) {
background-color: @endColor;
background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Firefox 3.6+
background-image: -webkit-gradient( linear, left top, left bottom, color-stop( @startPos, @startColor ), color-stop( @endPos, @endColor ) ); // Safari 4+, Chrome 2+
background-image: linear-gradient( @startColor @startPos, @endColor @endPos ); // Standard
}
-/* Note gzip compression means that it is okay to embed twice */
-/* http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique */
-.background-image-svg(@svg, @fallback) {
+/*
+ * 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 use gzip compression, which means that it is okay to embed twice.
+ *
+ * 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) when (embeddable(@svg)) {
+ background-image: url(@fallback);
+ /* We don't need the !ie hack because this old IE uses the fallback already */
+ background-image: -webkit-linear-gradient(transparent, transparent), embed(@svg);
+ background-image: linear-gradient(transparent, transparent), embed(@svg);
+}
+
+.background-image-svg(@svg, @fallback) when not (embeddable(@svg)) {
background-image: url(@fallback);
- /* SVG support using a transparent gradient to guarantee cross-browser
- * compatibility (browsers able to understand gradient syntax support also SVG) */
- /* @embed */ background-image: -webkit-linear-gradient(transparent, transparent), url(@svg);
- /* @embed */ background-image: linear-gradient(transparent, transparent), url(@svg);
+ background-image: -webkit-linear-gradient(transparent, transparent), url(@svg);
+ background-image: linear-gradient(transparent, transparent), url(@svg);
}
/* Caution: Does not support localisable images */
list-style-image: url(@url);
}
-.transition(@string) {
- -webkit-transition: @string;
- transition: @string;
+.transition(@value) {
+ -webkit-transition: @value;
+ -moz-transition: @value;
+ -o-transition: @value;
+ transition: @value;
+}
+
+.box-sizing(@value) {
+ -webkit-box-sizing: @value;
+ -moz-box-sizing: @value;
+ box-sizing: @value;
+}
+
+.box-shadow(@value) {
+ -webkit-box-shadow: @value; // Android 2.3+, iOS 4.0.2-4.2, Safari 3-4
+ box-shadow: @value; // Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+
}