helpers.less

@img_path: '/img';
@sprite: "@{img_path}/solidsprite.png";
@sprite_grid: 30px;


// Replaces element's content with a given section of sprite
//
// @pos 	- Icon's position on sprite
// @w 		- Icon's width
// @h 		- Icon's height
// @display - CSS `display` value, defaults to `block`
//
// Compatibility untested
.sprite (@pos, @w, @h, @display: block) {
	background: url("@{sprite}") 0 -(@pos * @sprite_grid)  no-repeat transparent;
	display: @display;
	height: @h * 1px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	width: @w * 1px;
}

// Forces layout for parent of floated elements
//
// Compatibility untested
.clearfix {
	display: block;
	zoom: 1;

	&:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}
}

// https://developer.mozilla.org/en-US/docs/CSS/backface-visibility
//
// @type - `visible` or `hidden`
//
// Compatibility untested
.backface-visibility (@type) {
	-moz-backface-visibility: @type;
	-webkit-backface-visibility: @type;
	backface-visibility: @type;
}

// https://developer.mozilla.org/en-US/docs/CSS/linear-gradient
//
// @gradient - values for image to be created
//
// Compatibility untested
.linear-gradient (@gradient: top~"," #fff~"," #000) {
	background: -webkit-linear-gradient(@arguments);
	background: -moz-linear-gradient(@arguments);
	background: -ms-linear-gradient(@arguments);
	background: -o-linear-gradient(@arguments);
	background: linear-gradient(@arguments);
}

// Creates a linear gradient for IE6-8
//
// @start 		- Starting color
// @end			- Ending color
// @gradient	- 0 = vertical gradient, 1 = horizontal gradient
//
// Compatibility IE6-8
.ms-linear-gradient (@start, @end, @gradient: 0) {
	filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{start}', endColorstr='@{end}',GradientType='@{gradient}' )";
}

// https://developer.mozilla.org/en-US/docs/CSS/radial-gradient
//
// @gradient - values for image to be created
//
// Compatibility untested
.radial-gradient (@gradient: center~"," ellipse~"," #fff~"," #000) {
	background: -webkit-radial-gradient(@arguments);
	background: -moz-radial-gradient(@arguments);
	background: -ms-radial-gradient(@arguments);
	background: -o-radial-gradient(@arguments);
	background: radial-gradient(@arguments);
}

// https://developer.mozilla.org/en-US/docs/CSS/border-radius
//
// @radius - Radii
//
// Compatibility untested
.border-radius (@radius: 0) {
	-moz-border-radius: @arguments;
	-webkit-border-radius: @arguments;
	border-radius: @arguments;
}

// https://developer.mozilla.org/en-US/docs/CSS/box-sizing
//
// @val - content-box, padding-box, or border-box
//
// Compatibility untested
.box-sizing (@val) {
	-moz-box-sizing: @val;
	-webkit-box-sizing: @val;
	box-sizing: @val;
}

// https://developer.mozilla.org/en-US/docs/CSS/box-shadow
//
// @properties - box shadow properties
//
// Compatibility untested
.box-shadow (@properties) {
	-moz-box-shadow: @properties;
	-webkit-box-shadow: @properties;
	box-shadow: @properties;
}

// Resets box shadow to its default state, that is, as if it was never applied
//
// Compatibility untested
.box-shadow-remove {
	-moz-box-shadow: 0 0 0 0 transparent;
	-webkit-box-shadow: 0 0 0 0 transparent;
	box-shadow: 0 0 0 0 transparent;
}

// Styles element as though it was empty
//
// Compatibility untested
.empty-block {
	display: block;
	content: '';
	height: 0;
	width: 0;
}

// Replaces element with section of @img. Background url is determined by set @img_path + @img.
// For example. @img_path: "/img" and @img: "sprite.png", results in "/img/sprite.png"
//
// @w 		- section width
// @h 		- section height
// @img 	- filename to use as background image
// @x		- horizontal background-position
// @y 		- vertical background-position
//
// Compatibility untested
.img-block (@w, @h, @img, @x: 0, @y: 0) {
	background: url('@{img_path}/@{img}') @x @y no-repeat transparent;
	display: block;
	height: @h;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	width: @w;
}

// https://developer.mozilla.org/en-US/docs/CSS/opacity
//
// @alpha - alpha channel opacity
//
// Compatibility untested
.opacity (@alpha) {
	-moz-opacity: @alpha;
	filter: alpha(opacity=@alpha);
	opacity: @alpha;
}

// https://developer.mozilla.org/en-US/docs/CSS/perspective
//
// @val - number representing length away from the user's z=0 plane.
//
// Compatibility untested
.perspective (@val) {
	-moz-perspective: @val;
	-webkit-perspective: @val;
	perspective: @val;
}

// Clips element's text at one single line
//
// @type - value for text-overflow, defaults to 'ellipsis'
//
// Compatibility untested
.text-overflow (@type: ellipsis) {
	display: block;
	overflow: hidden;
	text-overflow: @type;
	white-space: nowrap;
}

// https://developer.mozilla.org/en-US/docs/CSS/transition
//
// @property 	- name of properties to which transition will be applied
// @dur			- transition's duration in seconds
// @timing		- timing function to be used for transition
//
// Compatibility untested
.transition (@property, @dur, @timing) {
	-webkit-transition-property: @property;
	-webkit-transition-duration: @dur;
	-webkit-transition-timing-function: @timing;
	-moz-transition-property: @property;
	-moz-transition-duration: @dur;
	-moz-transition-timing-function: @timing;
	-o-transition-property: @property;
	-o-transition-duration: @dur;
	-o-transition-timing-function: @timing;
	transition-property: @property;
	transition-duration: @dur;
	transition-timing-function: @timing;
}

// https://developer.mozilla.org/en-US/docs/CSS/transform
//
// @func - CSS transform function
//
// Compatibility untested
.transform (@func) {
	-moz-transform: @func;
	-webkit-transform: @func;
	transform: @func;
}

// https://developer.mozilla.org/en-US/docs/CSS/transform-origin
//
// @origin - origin offset
//
// Compatibility untested
.transform-origin (@origin) {
	-moz-transform-origin: @origin;
	-webkit-transform-origin: @origin;
	transform-origin: @origin;
}

// https://developer.mozilla.org/en-US/docs/CSS/transform-style
//
// @style - `flat` or `preserve-3d`
//
// Compatibility unstested
.transform-style (@style) {
	-moz-transform-style: @style;
	-webkit-transform-style: @style;
	transform-style: @style;
}