// linear-gradient //============================================================ // @see http://dev.w3.org/csswg/css3-images/#linear-gradients // // @param dir : top, left, 90deg // @param start-color : #000, rgba(255,255,255,0.5) // @param end-color : #000, rgba(255,255,255,0.5) // // NOTE: The direction for the IE gradient is automagically // worked out for you based either on the direction or the // angle that you pass in. Obviously it will only be a // horizontal or vertical gradient, but it's still awesome. // // ALSO: Support for rgba is covered in IE too. Values are // converted to aRGB. // // @example .linear-gradient(50deg, #eee, #aaa); (IE auto included) // // @example .linear-gradient-multi(~'top, #eee 0%, #aaa 50%, #eee 100%'); // .linear-gradient-ie(top, #eee, #aaa); .linear-gradient( @dir: top, @start-color: #eee, @end-color: #aaa ) { background: -webkit-linear-gradient(@dir, @start-color 0%, @end-color 100%); background: linear-gradient(@dir, @start-color 0%, @end-color 100%); .linear-gradient-ie( @dir, @start-color, @end-color); } .linear-gradient-multi( ... ) { background-image: -webkit-linear-gradient(@arguments); background-image: linear-gradient(@arguments); } .linear-gradient-ie( @dir, @start-color, @end-color) when (@dir = top), not ( isstring(@dir) ) and ( @dir >= 225 ) and ( @dir < 315 ), not ( isstring(@dir) ) and ( @dir >= -135 ) and ( @dir < -45 ) { .linear-gradient-ie-filter(@start-color, @end-color, 0); } .linear-gradient-ie( @dir, @start-color, @end-color) when (@dir = right), not ( isstring(@dir) ) and ( @dir >= 135 ) and ( @dir < 225 ), not ( isstring(@dir) ) and ( @dir >= -225 ) and ( @dir < -135 ) { .linear-gradient-ie-filter(@end-color, @start-color, 1); } .linear-gradient-ie( @dir, @start-color, @end-color) when (@dir = bottom), not ( isstring(@dir) ) and ( @dir >= 45 ) and ( @dir < 135 ), not ( isstring(@dir) ) and ( @dir >= -315 ) and ( @dir < -225 ) { .linear-gradient-ie-filter(@end-color, @start-color, 0); } .linear-gradient-ie( @dir, @start-color, @end-color) when (@dir = left), not ( isstring(@dir) ) and ( @dir >= 315 ) and ( @dir < 360 ), not ( isstring(@dir) ) and ( @dir >= -45 ) and ( @dir < 45 ), not ( isstring(@dir) ) and ( @dir < -315 ) and ( @dir >= -360 ) { .linear-gradient-ie-filter(@start-color, @end-color, 1); } .linear-gradient-ie-filter( @start: #eee, @end: #aaa, @type: 1 ) { @c-start: argb( @start ); @c-end: argb( @end ); filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{c-start}', endColorstr='@{c-end}', GradientType=@{type})"; -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{c-start}',endColorstr='@{c-end}',GradientType=@{type})"; }