mixins.less
/**
 * @description
 * Generates keyframe animations
 *
 * @author drublic
 *
 * @link caniuse
 * @link spec
 *
 * @param values
 * @returns
 *   -webkit-border-radius: <values>;
 *           border-radius: <values>;
 *
 * @example
 *   .selector {
 *     ._animation(jump 1s ease-out);
 *   }
 */
._animation (@values) {
  -webkit-animation: @values;
          animation: @values;
}

/**
* @description
* Generates `appearance` for a given element
*
* @author romamatusevich
*
* @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
* @link css-tricks http://css-tricks.com/almanac/properties/a/appearance/
* @link spec http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance
*
* @param value
* @returns
* -webkit-appearance: <value>;
* -moz-appearance: <value>;
* appearance: <value>;
*
* @example
*   .selector {
*       ._appearance(button);
*   }
*/
._appearance (@value) {
	-webkit-appearance: @value;
	   -moz-appearance: @value;
	        appearance: @value;
}

/**
 * @description
 * Generates cross-browser-compatible `border-radius` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/border-radius
 * @link spec http://www.w3.org/TR/css3-background/#corners
 *
 * @param values
 * @returns
 *   -webkit-border-radius: <values>;
 *           border-radius: <values>;
 *
 * @example
 *   .selector {
 *     ._border-radius(20px 10px);
 *   }
 */
._border-radius (@values) {
	-webkit-border-radius: @values; // iOS Safari 3.2, Android 2.1
	        border-radius: @values;
}

/**
 * @description
 * Generates cross-browser-compatible `box-shadow` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-boxshadow
 * @link spec http://www.w3.org/TR/css3-background/#the-box-shadow
 *
 * @param values
 * @returns
 *   -webkit-box-shadow: <values>;
 *           box-shadow: <values>;
 *
 * @example
 *   .selector {
 *     ._box-shadow(5px 5px 10px 5px #aaa);
 *   }
 */
._box-shadow (@values) {
	-webkit-box-shadow: @values; // iOS Safari 3.2 - 4.3, Android 2.1+
	        box-shadow: @values;
}

/**
 * @description
 * Generates cross-browser-compatible `box-sizing` output for a given element.
 *
 * @author drublic
 *
 * @link caniuse
 * @link spec
 *
 * @param type
 * @returns
 *   -webkit-box-sizing: <type>;
 *      -moz-box-sizing: <type>;
 *           box-sizing: <type>;
 *
 * @example
 *   .selector {
 *     ._box-sizing;
 *   }
 */
._box-sizing (@type: border-box) {
	-webkit-box-sizing: @type; // Safari <= 5.0, Chrome <= 9.0, iOS Safari 3.2 - 4.3 and Android 2.1 - 3.0
	   -moz-box-sizing: @type; // FF 2.0+
	        box-sizing: @type; // IE 8, Opera 9.5+
}

/**
 * @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;
}

/**
* @description
* Implement `opacity` for a given element
*
* @author romamatusevich
*
* @link spec http://www.w3.org/TR/css3-color/#transparency
* @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
*
* @param value
* @returns
* opacity: value;
* filter: alpha(opacity = value * 100);
*
* @example
*   .selector {
*       ._opacity(0.5);
*   }
*/
._opacity (@value) {
    opacity: @value;
    filter: ~`"alpha(opacity = " + "@{value}" * 100 + ")"`;
}
/**
 * @description
 * Generates `placeholder` content for a given element
 *
 * @author romamatusevich
 *
 * @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder
 * @link css-tricks http://css-tricks.com/snippets/css/style-placeholder-text/
 *
 * @returns
 *    &::-webkit-input-placeholder {
 *        color: <color>;
 *    }
 *    &::-moz-placeholder {
 *        color: <color>;
 *    }
 *    &:-ms-input-placeholder {
 *        color: <color>;
 *    }
 *
 * @example
 *   .selector {
 *     ._placeholder(#ccc);
 *   }
 */
._placeholder(@color) {
    &::-webkit-input-placeholder {
        color: @color; // Chrome, Safari, Opera
    }
    &::-moz-placeholder {
        color: @color; // Firefox 19+
    }
    &:-ms-input-placeholder {
        color: @color; // IE 10+
    }
}

/**
 * @description
 * This mixin will enable using the CSS3 value `rem`, which lets you define
 * property-sizes based on the root-element's font-size.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/rem
 * @link spec http://www.w3.org/TR/css3-values/#relative0
 *
 * @param property
 * @param value
 * @param default-font-size {int} optional
 * @returns
 *   <property>: (<value> * <default-font-size>)px;
 *   <property>: <value>;
 *
 * @example
 *   .selector {
 *     ._rem(font-size, 1.3);
 *   }
 *
 * Note: Depending on the font-size of the root-element `rem` calculates a
 * property of a current element. The fallback solution excepts a
 * `default-font-size`-argument which is 16px by default.
 */
._rem(@property, @value, @main-font-size: 16px) {

	@px-fallback: @value * @main-font-size;
	-: ~`(function () { return ';@{property}: @{px-fallback}'; }())`;
	-: ~`(function () { return ';@{property}: @{value}rem'; }())`;
}

/**
 * @description
 * Sass-mixin for CSS property `tab-size`, generates cross-browser-compatible
 * `tab-size` output.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css3-tabsize
 * @link spec http://dev.w3.org/csswg/css-text/#tab-size1
 *
 * @param value int optional
 * @default 4
 * @returns
 *   -moz-tab-size: <value>;
 *     -o-tab-size: <value>;
 *        tab-size: <value>;
 *
 * @example
 *   .selector {
 *     ._tab-size(4);
 *    }
 */
._tab-size (@value: 4) {
	-moz-tab-size: @value;
	  -o-tab-size: @value;
	     tab-size: @value;
}

/**
 * @description
 * Generates cross-browser-compatible `transform` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/transforms2d http://caniuse.com/transforms3d
 * @link spec
 *
 * @param values
 * @returns
 *   -webkit-transform: <values>;
 *      -moz-transform: <values>;
 *        -o-transform: <values>;
 *       -ms-transform: <values>;
 *           transform: <values>;
 *
 * @example
 *   .selector {
 *     ._transform(rotate(1deg));
 *   }
 */
._transform (@values) {
	-webkit-transform: @values; // Chrome, Safari, iOS Safari, Android Stock
	     -o-transform: @values; // Opera 12
	    -ms-transform: @values; // IE9
	        transform: @values;
}

/**
 * @description
 * Generates cross-browser-compatible `transition` output for a given element.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-transitions
 * @link spec
 *
 * @param values
 * @returns
 *   -webkit-transition: <values>;
 *      -moz-transition: <values>;
 *        -o-transition: <values>;
 *           transition: <values>;
 *
 * @example
 *   .selector {
 *     ._transition(background 0.3s ease-in);
 *   }
 */
._transition (@values) {
	-webkit-transition: @values;
	     -o-transition: @values;
	        transition: @values;
}

/**
 * @description
 * Disables selection of content of a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/user-select-none
 *
 * @param value none|auto optional
 * @default none
 * @returns
 *   -webkit-user-select: <value>;
 *      -moz-user-select: <value>;
 *       -ms-user-select: <value>;
 *           user-select: <value>;
 *
 * @example
 *   .selector {
 *     .x-user-select;
 *   }
 */
._user-select (@value: none) {
	-webkit-user-select: @value;
	   -moz-user-select: @value;
	    -ms-user-select: @value;
	        user-select: @value;
}
