Gradient mixins

Gradient mixins make it easier to write simple gradients in CSS

Linear Gradients

Gradient styles are based on the following naming pattern:
1#gradient.gradient-type(@direction, @from-color, @to-color)
gradient-types currently supported:
  • linear
  • radial
@direction is optional, by default it is set as 'to bottom'. linear gradient supports the following directions:
  • top (to top)
  • left (to left)
  • right (to right)
@from-color is set to @color[primary]
@to-color is set to @color[secondary]
Default Linear Gradient (Top)
Default Blue to Right Gradient
1#gradient.linear(right, @forest-green, @mint-green);
Default Orange to Left Gradient
1#gradient.linear(left, @forest-green, @mint-green);

Radial Gradients

1#gradient.radial(@from-color, @to-color);
For radial gradients use the following mixin:
To customize the gradient colors pass them in as parameters
1#gradient.radial(@apricot, @vermilion);