LESS :: _lib - mix-in library

_lib.less

/**
 * LESS mix-in library
 * vendor prefixes verified with prefixr.com and caniuse.com [2012-09-28]
 * https://gist.github.com/3798764
 */

@img-base: "../img";
@icon-base: "../img/icons";

.b(@v) when (@v = 0) { font-weight: normal; }
.b(@v) when (@v = 1) { font-weight: bold; }

.i(@v) when (@v = 0) { font-style: normal; }
.i(@v) when (@v = 1) { font-style: italic; }

.u(@v) when (@v = 0) { text-decoration: none; }
.u(@v) when (@v = 1) { text-decoration: underline; }


.size(@a) { width: @a; height: @a; }
.size(@a, @b) { width: @a; height: @b; }

.shadow(@a, @b, @c){ -webkit-box-shadow: @a,@b,@c; box-shadow: @a,@b,@c; }
.shadow(@a, @b){ -webkit-box-shadow: @a,@b; box-shadow: @a,@b; }
.shadow(@a){ -webkit-box-shadow: @arguments; box-shadow: @arguments; }

.border-box(){
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.clip(@type: padding) { -moz-background-clip: @type; -webkit-background-clip: @type; -ms-background-clip: @type; background-clip: ~"@{type}-box"; }

.radius (@radius: 3px){
	border-radius: @radius;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	.clip(padding);
}


.rotate (@deg: 0){
	-webkit-transform: rotate(~"@{deg}deg") translateZ(1px);	/* translateZ added for smoothing and Fx border space bug */
	-moz-transform: rotate(~"@{deg}deg") translateZ(1px);
	-o-transform: rotate(~"@{deg}deg") translateZ(1px);
	-ms-transform: rotate(~"@{deg}deg") translateZ(1px);
	transform: rotate(~"@{deg}deg") translateZ(1px);
}

.skew (@deg: 0){
	-webkit-transform: skew(~"@{deg}deg") translateZ(1px);	/* translateZ added for smoothing and Fx border space bug */
	-moz-transform: skew(~"@{deg}deg") translateZ(1px);
	-o-transform: skew(~"@{deg}deg") translateZ(1px);
	-ms-transform: skew(~"@{deg}deg") translateZ(1px);
	transform: skew(~"@{deg}deg") translateZ(1px);
}

.gradient (@from, @mid, @to) {
	background: @mid;
	background: -webkit-linear-gradient(top, @from, @mid, @to);
	background: -moz-linear-gradient(top, @from, @mid, @to);
	background: -o-linear-gradient(top, @from, @mid, @to);
	background: -ms-linear-gradient(top, @from, @mid, @to);
	background: linear-gradient(top, @from, @mid, @to);
}

.gradient (@from, @to) {
	background: mix(@from, @to, 50%); /* for IE */
	background: -webkit-linear-gradient(top, @from, @to);
	background: -moz-linear-gradient(top, @from, @to);
	background: -o-linear-gradient(top, @from, @to);
	background: -ms-linear-gradient(top, @from, @to);
	background: linear-gradient(top, @from, @to);
}


.transition(){
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	-ms-transition: all .2s ease-out;
	transition: all .2s ease-out;
}

.transition(@a){
	-webkit-transition: @arguments;
	-moz-transition: @arguments;
	-o-transition: @arguments;
	-ms-transition: @arguments;
	transition: @arguments;
}

.non-selectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}


.bgimg(@img, @x: 0, @y: 0, @repeat: no-repeat){ background: url("@{img-base}/@{img}") @x @y @repeat; }
.bgicon(@img, @x: 0, @y: 0, @repeat: no-repeat){ background: url("@{icon-base}/@{img}") @x @y @repeat; }

.bgimgc(@col, @img, @x: 0, @y: 0, @repeat: no-repeat){ background: @col url("@{img-base}/@{img}") @x @y @repeat; }
.bgiconc(@col, @img, @x: 0, @y: 0, @repeat: no-repeat){ background: @col url("@{icon-base}/@{img}") @x @y @repeat; }