mixins

mixins.less

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

.box-shadow(@style) {
	-webkit-box-shadow: @style;
	-moz-box-shadow: @style;
	box-shadow: @style;
}

.box-shadow(@x, @y, @offset, @color) {
	-webkit-box-shadow: @x @y @offset @color;
	-moz-box-shadow: @x @y @offset @color;
	box-shadow: @x @y @offset @color;
}
.box-shadow(@hshadow, @vshadow, @blur, @spread, @color, @inset) {
	-webkit-box-shadow: @hshadow @vshadow @blur @spread @color @inset;
	-moz-box-shadow: @hshadow @vshadow @blur @spread @color @inset;
	box-shadow: @hshadow @vshadow @blur @spread @color @inset;
}

.border-radius(@radius) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}

.border-top-left-radius(@radius) {
	-webkit-border-top-left-radius: @radius;
	-moz-border-radius-topleft: @radius;
	border-top-left-radius: @radius;
}

.border-bottom-left-radius(@radius) {
	-webkit-border-bottom-left-radius: @radius;
	-moz-border-radius-bottomleft: @radius;
	border-bottom-left-radius: @radius;
}

.border-top-right-radius (@radius) {
	-webkit-border-top-right-radius: @radius;
	-moz-border-radius-topright: @radius;
	border-top-right-radius: @radius;
}

.border-bottom-right-radius(@radius) {
	-webkit-border-bottom-right-radius: @radius;
	-moz-border-radius-bottomright: @radius;
	border-bottom-right-radius: @radius;
}

.opacity(@value) {
	-khtml-opacity: @value;
	-moz-opacity: @value;
	-ms-filter: %('alpha(opacity=%s)', @value*100);
	filter: e(%("alpha(opacity=%s)", @value*100));
	opacity: @value;
}

.translateY(@value) {
	-webkit-transform: translateY(@value);
	-moz-transform: translateY(@value);
	-ms-transform: translateY(@value);
	transform: translateY(@value);
}

.translateX(@value) {
	-webkit-transform: translateX(@value);
	-moz-transform: translateX(@value);
	-ms-transform: translateX(@value);
	transform: translateX(@value);
}

.transition-all(@time) {
	-webkit-transition: all @time ease;
	-moz-transition: all @time ease;
	transition: all @time ease;
}

.transition-all-timing(@time, @timing) {
	-webkit-transition: all @time @timing;
	-moz-transition: all @time @timing;
	transition: all @time @timing;
}

.transition(@type, @time) {
	-webkit-transition: @type @time ease;
	-moz-transition: @type @time ease;
	transition: @type @time ease;
}

.transition-duration(@time) {
	-webkit-transition-duration: @time;
	-moz-transition-duration: @time;
	transition-duration: @time;
}

.transition-property(@property, @transform) {
	-webkit-transition-property: @property, @transform;
	-moz-transition-property: @property, @transform;
	transition-property: @property, @transform;
}

.unselectable() {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.rotate(@degrees) {
	-webkit-transform:rotate(@degrees);
	-moz-transform:rotate(@degrees);
	-ms-transform:rotate(@degrees);
	transform:rotate(@degrees);
}

.box-sizing(@property){
	-moz-box-sizing: @property;
	-webkit-box-sizing: @property;
	box-sizing: @property;
}

.font-size(@px) {
	@sizeValue: unit(@px);
	@remValue: (@sizeValue / 16);
	font-size: unit(@px,px);
	font-size: unit(@remValue,rem);
}

.line-height(@px) {
	@sizeValue: unit(@px);
	@remValue: (@sizeValue / 16);
	line-height: unit(@px,px);
	line-height: unit(@remValue,rem);
}

.svg-background-image(@vector) {
	background-image: url("@{vector}.png");
	background-image: none, url("@{vector}.svg");
	background-repeat: no-repeat;
}

// binary images with retina "@2x" naming convention
.background-image(@path) {
	@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx)";
	@at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;
	background-image: url(@path);
	@media @highdpi {
		background-image: url("@{at2x_path}");
	}
}

.translateZ() {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
}

.animation-fill-mode(@mode) {
	-webkit-animation-fill-mode: @mode;
	animation-fill-mode: @mode;
}

.animation-timing-function(@timing) {
	-webkit-animation-timing-function: @timing;
	animation-timing-function: @timing;
}

.animation-name(@name) {
	-webkit-animation-name: @name;
	animation-name: @name;
}

.animation-iteration-count(@count) {
	-webkit-animation-iteration-count: @count;
	animation-iteration-count: @count;
}

.animation-duration(@time) {
	-webkit-animation-duration: @time;
	animation-duration: @time;
}

.transform(@transform) {
	-webkit-transform: @transform;
	-ms-transform: @transform;
	transform: @transform;
}

.two-transforms(@first, @second) {
	-webkit-transform: @first @second;
	-ms-transform: @first @second;
	transform: @first @second;
}