Skip to content

Instantly share code, notes, and snippets.

@simbo
Created May 24, 2013 12:31
Show Gist options
  • Save simbo/5643181 to your computer and use it in GitHub Desktop.
Save simbo/5643181 to your computer and use it in GitHub Desktop.
improved less gradient functions :)
/* =============================================================================
Gradients
========================================================================== */
.gradient( @gradient_type, @gradient_direction_w3c, @gradient... ) {
@gradient_direction_browser:
~`(function(dir_w3c){
switch(dir_w3c) {
case 'to bottom': return 'top';
case 'to right': return 'left';
case 'to right bottom': return 'left top';
case 'to right top': return 'left bottom';
case 'farthest-side at center center': return 'center center, farthest-side';
case 'to bottom': default: return 'top';
};
})("@{gradient_direction_w3c}".substr(1,"@{gradient_direction_w3c}".length-2).split(', ').join(' '))`;
background-image: ~`"-webkit-@{gradient_type}-gradient( @{gradient_direction_browser}, @{gradient} )"`;
background-image: ~`"-moz-@{gradient_type}-gradient( @{gradient_direction_browser}, @{gradient} )"`;
background-image: ~`"-ms-@{gradient_type}-gradient( @{gradient_direction_browser}, @{gradient} )"`;
background-image: ~`"-o-@{gradient_type}-gradient( @{gradient_direction_browser}, @{gradient} )"`;
background-image: ~`"@{gradient_type}-gradient( "+"@{gradient_direction_w3c}".substr(1,"@{gradient_direction_w3c}".length-2).split(', ').join(' ')+", @{gradient} )"`;
}
.gradient-vertical( @gradient, @more... ) {
@gradient: ~`"@{arguments}".substr(1,"@{arguments}".length-2)`;
.gradient( linear, to bottom, @gradient );
}
.gradient-vertical-repeating( @gradient, @more... ) {
@gradient: ~`"@{arguments}".substr(1,"@{arguments}".length-2)`;
.gradient( repeating-linear, to bottom, @gradient );
}
.gradient-horizontal( @gradient, @more... ) {
@gradient: ~`"@{arguments}".substr(1,"@{arguments}".length-2)`;
.gradient( linear, to right, @gradient );
}
.gradient-horizontal-repeating( @gradient, @more... ) {
@gradient: ~`"@{arguments}".substr(1,"@{arguments}".length-2)`;
.gradient( repeating-linear, to right, @gradient );
}
.gradient-diagonal-down( @gradient, @more... ) {
@gradient: ~`"@{arguments}".substr(1,"@{arguments}".length-2)`;
.gradient( linear, to right bottom, @gradient );
}
.gradient-diagonal-up( @gradient, @more... ) {
@gradient: ~`"@{arguments}".substr(1,"@{arguments}".length-2)`;
.gradient( linear, to right top, @gradient );
}
.gradient-radial( @gradient, @more... ) {
@gradient: ~`"@{arguments}".substr(1,"@{arguments}".length-2)`;
.gradient( radial, farthest-side at center center, @gradient );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment