Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
185 lines (163 sloc) 4.8 KB
/* misc mixins */
.clip{
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
-o-background-clip: padding;
background-clip: padding-box;
}
.round(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
.box-sizing(@sizing: border-box){
-webkit-box-sizing: @sizing;
-moz-box-sizing: @sizing;
box-sizing: @sizing;
}
.scale(@scale: 1.5, @x: 0, @y: 0){
-webkit-transform: scale(@scale);
-webkit-transform-origin: @x @y;
-moz-transform: scale(@scale);
-moz-transform-origin: @x @y;
-o-transform: scale(@scale);
-o-transform-origin: @x @y;
-ms-transform: scale(@scale);
-ms-transform-origin: @x @y;
transform: scale(@scale);
transform-origin: @x @y;
}
.shadow(@depth: 0 2px 4px rgba(0,0,0,.3)){
-webkit-box-shadow: @depth;
-moz-box-shadow: @depth;
-o-box-shadow: @depth;
box-shadow: @depth;
}
.transform(@deg: rotate(9deg)){
-webkit-transform: @deg;
-moz-transform: @deg;
-ms-transform: @deg;
-o-transform: @deg;
transform: @deg;
}
.perspective(@val){
-webkit-perspective: @val;
-moz-perspective: @val;
-opera-perspective: @val;
-ms-perspective: @val;
perspective: @val;
}
.bgsize(@size: 100% 100%){
-webkit-background-size: @size;
-moz-background-size: @size;
-o-background-size: @size;
background-size: @size;
}
.gradient(@start: #eee, @end: #777) {
background: @start;
background-image: -moz-linear-gradient(top, @start, @end);
background-image: -ms-linear-gradient(top, @start, @end);
background-image: -o-linear-gradient(top, @start, @end);
background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
background-image: -webkit-linear-gradient(top, @start, @end);
background-image: linear-gradient(top, @start, @end);
}
.gradient-circle(@h: center, @v: center, @shape: circle, @size: contain, @start: #ddd, @finish: #333, @stop: 100%) {
background-color: @start;
background-image: -moz-radial-gradient(@h @v, @shape @size, @start, @end @stop);
background-image: -webkit-radial-gradient(@h @v, @shape @size, @start, @end @stop);
background-image: -o-radial-gradient(@h @v, @shape @size, @start, @end @stop);
background-image: -ms-radial-gradient(@h @v, @shape @size, @start, @end @stop);
background-image: radial-gradient(@h @v, @shape @size, @start, @end @stop);
}
.button-maker(@color1: #fff, @color2: #333){
background: @color1;
border-top: 1px solid lighten(@color1, 10);
background: -moz-linear-gradient(top, @color1 0%, @color1 50%, @color2 51%, @color2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color1), color-stop(50%,@color1), color-stop(51%,@color2), color-stop(100%,@color2));
background: -webkit-linear-gradient(top, @color1 0%,@color1 50%,@color2 51%,@color2 100%);
background: -o-linear-gradient(top, @color1 0%,@color1 50%,@color2 51%,@color2 100%);
background: -ms-linear-gradient(top, @color1 0%,@color1 50%,@color2 51%,@color2 100%);
background: linear-gradient(to bottom, @color1 0%,@color1 50%,@color2 51%,@color2 100%);
}
.transition(@var){
-webkit-transition: @var;
-moz-transition: @var;
-ms-transition: @var;
-o-transition: @var;
transition: @var;
}
.columns(@count: 2, @width: 200px, @gap: 20px){
-moz-column-count: @count;
-moz-column-gap: @gap;
-webkit-column-count: @count;
-webkit-column-gap: @gap;
column-count: @count;
column-gap: @gap;
}
.animate(@var){
-webkit-animation: @var;
-moz-animation: @var;
-o-animation: @var;
animation: @var;
}
/* handy shortcuts */
.true(@height: 20px){
height: @height;
line-height: @height;
}
.indent(@indent: -9999em){
text-indent: @indent;
}
.size(@width: 20px, @height:20px){
width: @width;
height: @height;
}
.bg(@img: none){
background: url("../img/@{img}") top center no-repeat;
}
.bg(@img: none, @method: top center no-repeat){
background: url("../img/@{img}") @method;
}
.clear{
&:after{
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
.magic-box{
&:before{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
content:"";
}
}
.magic-box(@img: none){
&:before{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
content:"";
background: url("../img/@{img}") center no-repeat;
}
}
.magic-box(@img: none, @method: center no-repeat){
&:before{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
content:"";
background: url("../img/@{img}") @method;
}
}