Gradient mixins

Gradient mixins make it easier to write simple gradients in CSS

Linear Gradients

Gradient styles are based on the following naming pattern:

#gradient.gradient-type(@direction, @from-color, @to-color)

gradient-types currently supported:

@direction is optional, by default it is set as 'to bottom'. linear gradient supports the following directions:

@from-color is set to @color[primary]
@to-color is set to @color[secondary]

#gradient.linear();

Default Linear Gradient (Top)

#gradient.linear(top);

Default Blue to Right Gradient

#gradient.linear(right, @forest-green, @mint-green);

Default Orange to Left Gradient

#gradient.linear(left, @forest-green, @mint-green);

#gradient.radial(@from-color, @to-color);

For radial gradients use the following mixin:

#gradient.radial();

To customize the gradient colors pass them in as parameters

#gradient.radial(@apricot, @vermilion);