partials/linear-gradient.less
/**
 * @description
 * Generates a linear gradient for a given element with a fallback color.
 *
 * @author drublic
 *
 * @link caniuse
 * @link spec
 *
 * @dependency helper-gradient-angle
 * @param direction {top|left}
 * @param fallback {color}
 * @param from {color}
 * @param to {color}
 * @default 'to bottom', #ccc, #ccc, #aaa
 *
 * @returns
 *   background-color: <fallback>;
 *   background-image: -webkit-linear-gradient(<direction - converted>, <from>, <to>);
 *   background-image:    -moz-linear-gradient(<direction - converted>, <from>, <to>);
 *   background-image:     -ms-linear-gradient(<direction - converted>, <from>, <to>);
 *   background-image:      -o-linear-gradient(<direction - converted>, <from>, <to>);
 *   background-image:         linear-gradient(<direction>, <from>, <to>);
 *
 * @example
 *   .selector {
 *     ._linear-gradient(top, #ccc, #ddd, #bbb);
 *   }
 */
._linear-gradient(@direction: top, @fallback: #ccc, @from: #ccc, @to: #aaa) {

	// New Syntax has to be evaluated to old one
	.direction () when (@direction = top) {
		background-image: linear-gradient(to bottom, @from, @to);
	}
	.direction () when (@direction = left) {
		background-image: linear-gradient(to right, @from, @to);
	}


	// Provide a fallback-color
	background-color: @fallback;

	// Cross-browser linear-gradients
	background-image: -webkit-linear-gradient(@direction, @from, @to);
	background-image:    -moz-linear-gradient(@direction, @from, @to);
	background-image:     -ms-linear-gradient(@direction, @from, @to);
	background-image:      -o-linear-gradient(@direction, @from, @to);
	.direction;
}
