Classes LESS

class-less.less

.border-radius( @radius: 3px ) {
  -webkit-border-radius: @radius;
	   -moz-border-radius: @radius;
	        border-radius: @radius;		
}
 
.outline-radius( @radius: 3px ) {
	-webkit-outline-radius: @radius;
	   -moz-outline-radius: @radius;
	        outline-radius: @radius;		
}
 
.box-shadow( 
	@x : 2px, 
	@y : 2px, 
	@blur : 5px, 
	@spread : 0, 
	@color : rgba(0,0,0,.6) 
) {
	-webkit-box-shadow: @x @y @blur @spread @color;
	   -moz-box-shadow: @x @y @blur @spread @color;	
			box-shadow: @x @y @blur @spread @color;	
}
 
.transition(
	@what : all,
	@length : 1s,
	@easing : ease-in-out
) {
	-webkit-transition: @what @length @easing;
	   -moz-transition: @what @length @easing;
	     -o-transition: @what @length @easing;
		  	transition: @what @length @easing;			
}
 
.transform(
	@params 
) {
	-webkit-transform: @params;
  	   -moz-transform: @params;
  	        transform: @params;
}
 
.box(
	@orient : horizontal,
	@pack : center,
	@align : center
) {
	display: -webkit-box;
	   display: -moz-box;	
	        display: box;
 
	-webkit-box-orient: @orient;
	   -moz-box-orient: @orient;
	   		box-orient: @orient;
 
	-webkit-box-pack: @pack;
	   -moz-box-pack: @pack;
	        box-pack: @pack;		
 
	-webkit-box-align: @align;
	   -moz-box-align: @align;
			box-align: @align;		
}
 
.flex( @val : 1 ) {
	-webkit-box-flex: @val;
	   -moz-box-flex: @val;
	        box-flex: @val;
}
 
.resize( @direction ) {
	-webkit-resize: @direction;
	   -moz-resize: @direction;
	        resize: @direction;
}
 
.linear-gradient( 
	@begin: black, 
	@end: white,
	@switch : 100%
) {
	background:  @begin;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(@begin), color-stop(@switch, @end));
	background: -moz-linear-gradient(top, @begin, @end @switch);
	background: -o-linear-gradient(top, @begin, @end @switch);
	background: linear-gradient(top, @begin, @end @switch);
}
 
.double-borders( 
	@colorOne : green,
	@colorTwo : red,
	@radius : 0
) {
	border: 1px solid @colorOne;
 
	-webkit-box-shadow: 0 0 0 1px @colorTwo;	
	   -moz-box-shadow: 0 0 0 1px @colorTwo;
	   		box-shadow: 0 0 0 1px @colorTwo;
 
	.border-radius( @radius );
}
 
.triple-borders( 
	@colorOne : green,
	@colorTwo : red,
	@colorThree : blue,
	@radius : 0
) {
	border: 1px solid @colorOne;
 
	.border-radius( @radius );
 
	-webkit-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;	
	   -moz-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
	   		box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
}
 
.columns(
	@count : 3,
	@gap : 10
) {
	-webkit-column-count: @count;
	   -moz-column-count: @count;
	        column-count: @count;
 
	-webkit-column-gap: @gap;
	   -moz-column-gap: @gap;
	        column-gap: @gap;
}
 
.box-sizing( @type : border-box ) {
	-webkit-box-sizing: @type;
	   -moz-box-sizing: @type;
	        box-sizing: @type;		
}