box.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;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 
	-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;      /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: @val;      /* OLD - Firefox 19- */
              width: 20%;       /* For old syntax, otherwise collapses. */
       -webkit-flex: @val;      /* Chrome */
           -ms-flex: @val;      /* IE 10 */
               flex: @val;      /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
 
.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;		
}