add verticalGradient mixin

new mixins for vertical gradient
samuelmesq · Aug 30, 2012 · 46181fe · 46181fe
1 parent 2691a87
commit 46181fe
Showing 1 changed file with 67 additions and 8 deletions.
diff --git a/more.less b/more.less
@@ -13,8 +13,11 @@
 	}
 }
 
-/* properties from http://www.colorzilla.com/gradient-editor/
-============================*/
+/* ====================================
+= All properties of gradients mixins is from Colorzilla
+= http://www.colorzilla.com/gradient-editor/
+==================================== */
+
 .simpleGradient(@start: #f3f3f3, @stop: #666666, @svg: ' '){
 	background: @start; // Old browsers 
 	background-image: ~"url(data:image/svg+xml;base64,@{svg})"; // IE9 SVG, needs conditional override of 'filter' to 'none'
@@ -26,7 +29,48 @@
 	background: linear-gradient(top,  @start 0%,@stop 100%); // W3C
 	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{stop}')"; // IE6-8
 }
-.
+
+.verticalGradient(@start, @stop){
+	background: @start; // Old browsers 
+	background: -moz-linear-gradient(top,  @start 0%, @stop 100%); // FF3.6+
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(100%,@stop)); // Chrome,Safari4+
+	background: -webkit-linear-gradient(top,  @start 0%,@stop 100%); // Chrome10+,Safari5.1+
+	background: -o-linear-gradient(top,  @start 0%,@stop 100%); // Opera 11.10+
+	background: -ms-linear-gradient(top,  @start 0%,@stop 100%); // IE10+
+	background: linear-gradient(top,  @start 0%,@stop 100%); // W3C
+	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{stop}')"; // IE6-8	
+}
+.verticalGradient(@start, @stop, @end){
+	background: @start; // Old browsers 
+	background: -moz-linear-gradient(top,  @start 0%, @stop 50%, @end 100%); // FF3.6+
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(50%, @stop), color-stop(100%,@end)); // Chrome,Safari4+
+	background: -webkit-linear-gradient(top,  @start 0%,@stop 50%, @end 100%); // Chrome10+,Safari5.1+
+	background: -o-linear-gradient(top,  @start 0%,@stop 50%, @end 100%); // Opera 11.10+
+	background: -ms-linear-gradient(top,  @start 0%,@stop 50%, @end 100%); // IE10+
+	background: linear-gradient(top,  @start 0%,@stop 50%, @end 100%); // W3C
+	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}')"; // IE6-8
+}
+.verticalGradient(center, @start, @stop, @stop2, @end){
+	background: @start; // Old browsers 
+	background: -moz-linear-gradient(top,  @start 0%, @stop 50%, @stop2 0%, @end 100%); // FF3.6+
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(50%, @stop), color-stop(0%, @stop2), color-stop(100%,@end)); // Chrome,Safari4+
+	background: -webkit-linear-gradient(top,  @start 0%,@stop 50%, @stop2 0%, @end 100%); // Chrome10+,Safari5.1+
+	background: -o-linear-gradient(top,  @start 0%,@stop 50%, @stop2 0%, @end 100%); // Opera 11.10+
+	background: -ms-linear-gradient(top,  @start 0%,@stop 50%, @stop2 0%, @end 100%); // IE10+
+	background: linear-gradient(top,  @start 0%,@stop 50%, @stop2 0%, @end 100%); // W3C
+	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}')"; // IE6-8
+}
+.verticalGradient(normal, @start, @stop, @stop2, @end){
+	background: @start; // Old browsers 
+	background: -moz-linear-gradient(top,  @start 0%, @stop 35%, @stop2 65%, @end 100%); // FF3.6+
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(35%, @stop), color-stop(65%, @stop2), color-stop(100%,@end)); // Chrome,Safari4+
+	background: -webkit-linear-gradient(top,  @start 0%,@stop 35%, @stop2 65%, @end 100%); // Chrome10+,Safari5.1+
+	background: -o-linear-gradient(top,  @start 0%,@stop 35%, @stop2 65%, @end 100%); // Opera 11.10+
+	background: -ms-linear-gradient(top,  @start 0%,@stop 35%, @stop2 65%, @end 100%); // IE10+
+	background: linear-gradient(top,  @start 0%,@stop 35%, @stop2 65%, @end 100%); // W3C
+	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}')"; // IE6-8
+}
+
 .borderRadius(@radius: 2px){
 	-webkit-border-radius: @radius;
 	-moz-border-radius: @radius;
@@ -45,10 +89,25 @@
 	transition: @target @duration @ease;
 }
 
-.boxSizing(){
-	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
-	box-sizing: border-box;         /* Opera/IE 8+ */
+.transformTranslate(@x: 0, @y: 0){
+	-webkit-transform: translate( @x , @y );
+	-moz-transform: translate( @x , @y );
+	-o-transform: translate( @x , @y );
+	-ms-transform: translate( @x , @y );
+	transform: translate( @x , @y );
+}
+
+.scale(@ratio:1.1){
+	-webkit-transform:scale(@ratio);
+	-moz-transform:scale(@ratio);
+  	-ms-transform: scale (@ratio);
+	transform:scale(@ratio);
+}
+
+.boxSizing(@param: border-box){
+	-webkit-box-sizing: @param; /* Safari/Chrome, other WebKit */
+	-moz-box-sizing: @param;    /* Firefox, other Gecko */
+	box-sizing: @param;         /* Opera/IE 8+ */
 }
 
 .indent() {
@@ -58,6 +117,6 @@
 
 .opacity(@alpha: 0.5) {
 	opacity: @alpha;
-	@ie: (@alpha * 100);
+	@ie: percentage(@alpha);
 	filter:~"alpha(opacity=@{ie})";
 }