Posted By

koorb on 02/04/11

Tagged

css CSS3 styles less

Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

LeeRJohnson
Roen
spaceploitator
yuumee
mfrederking
secretgspot
lookingforsome

LESS Classes

/ Published in: CSS

Originally posted by Nettuts http://snipplr.com/view/47181/less-classes/ but had no tags so was useless for Textmate integration

Highlighted TextExpand

.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;		
}

Report this snippet Tweet

Comment:

You need to login to post a comment.

Posted By

Tagged

Versions (?)

Who likes this?

LESS Classes

Related snippets

Choose a language for easy browsing: