.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;
}
Базовые классы для LESS
ПафНутиЙ 28.03.2013 css3, less, сниппет CSS Сниппеты 4173
Если Вам не знакомо слово LESS - этот сниппет вам ничего полезного не даст)