142 lines
8.7 KiB
Text
142 lines
8.7 KiB
Text
.placeholder (@color) {
|
|
input::-webkit-input-placeholder { color: @color; padding: 7px 10px 3px 10px;}
|
|
input:-moz-placeholder { color: @color;padding: 7px 10px 3px 10px; }
|
|
input::-moz-placeholder { color: @color;padding: 7px 10px 3px 10px; }
|
|
input:-ms-input-placeholder { color: @color;padding: 7px 10px 3px 10px; }
|
|
}
|
|
.border-radius (@radius) {
|
|
border-radius: @radius;
|
|
-moz-border-radius: @radius;
|
|
-webkit-border-radius: @radius;
|
|
background-clip: padding-box;
|
|
-moz-background-clip: padding;
|
|
-webkit-background-clip: padding-box;
|
|
}
|
|
.background-linear-gradient (@color1, @color2) {
|
|
background: linear-gradient(top, @color1, @color2);
|
|
background: -moz-linear-gradient(@color1, @color2); //FF3.6-
|
|
background: -webkit-linear-gradient(top, @color1, @color2); //S5.1, Chrome 10-
|
|
background: -o-linear-gradient(top, @color1, @color2); //O 11.1
|
|
background: -ms-linear-gradient(@color1, @color2); //IE10
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2'); //IE6-7
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2')"; //IE8-9
|
|
}
|
|
.background-linear-gradient (@color1, @color2, @color3) {
|
|
background: linear-gradient(top, @color1, @color2, @color3);
|
|
background: -moz-linear-gradient(@color1, @color2, @color3); //FF3.6-
|
|
background: -webkit-linear-gradient(top, @color1, @color2, @color3); //S5.1, Chrome 10-
|
|
background: -o-linear-gradient(top, @color1, @color2, @color3); //O 11.1
|
|
background: -ms-linear-gradient(@color1, @color2, @color3); //IE10
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color3'); //IE6-7
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color3')"; //IE8-9
|
|
}
|
|
.background-gradient (@degrees, @color1, @color2, @color3, @color4, @color5, @color6, @color7) {
|
|
background-image: linear-gradient(@degrees, @color1, @color2, @color3, @color4, @color5, @color6, @color7);
|
|
background-image: -moz-linear-gradient(@degrees, @color1, @color2, @color3, @color4, @color5, @color6, @color7);
|
|
background-image: -webkit-linear-gradient(@degrees, @color1, @color2, @color3, @color4, @color5, @color6, @color7);
|
|
background-image: -o-linear-gradient(@degrees, @color1, @color2, @color3, @color4, @color5, @color6, @color7);
|
|
background-image: -ms-linear-gradient(@degrees, @color1, @color2, @color3, @color4, @color5, @color6, @color7);
|
|
}
|
|
.box-shadow (none) {
|
|
box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
}
|
|
.box-shadow (@shadow) {
|
|
box-shadow: @shadow;
|
|
-moz-box-shadow: @shadow;
|
|
-webkit-box-shadow: @shadow;
|
|
}
|
|
.box-shadow (@shadow1, @shadow2) {
|
|
box-shadow: @shadow1, @shadow2;
|
|
-moz-box-shadow: @shadow1, @shadow2;
|
|
-webkit-box-shadow: @shadow1, @shadow2;
|
|
}
|
|
.box-shadow (@shadow1, @shadow2, @shadow3) {
|
|
box-shadow: @shadow1, @shadow2, @shadow3;
|
|
-moz-box-shadow: @shadow1, @shadow2, @shadow3;
|
|
-webkit-box-shadow: @shadow1, @shadow2, @shadow3;
|
|
}
|
|
|
|
.transition (@property, @duration, @function, @delay) {
|
|
-webkit-transition: @property @duration @function @delay;
|
|
-moz-transition: @property @duration @function @delay;
|
|
-o-transition: @property @duration @function @delay;
|
|
-ms-transition: @property @duration @function @delay;
|
|
transition: @property @duration @function @delay;
|
|
}
|
|
.transition (@property1, @duration1, @function1, @delay1, @property2, @duration2, @function2, @delay2) {
|
|
-webkit-transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2;
|
|
-moz-transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2;
|
|
-o-transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2;
|
|
-ms-transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2;
|
|
transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2;
|
|
}
|
|
.transition (@property1, @duration1, @function1, @delay1, @property2, @duration2, @function2, @delay2, @property3, @duration3, @function3, @delay3) {
|
|
-webkit-transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2, @property3 @duration3 @function3 @delay3;
|
|
-moz-transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2, @property3 @duration3 @function3 @delay3;
|
|
-o-transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2, @property3 @duration3 @function3 @delay3;
|
|
-ms-transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2, @property3 @duration3 @function3 @delay3;
|
|
transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2, @property3 @duration3 @function3 @delay3;
|
|
}
|
|
.transition (@property1, @duration1, @function1, @delay1, @property2, @duration2, @function2, @delay2, @property3, @duration3, @function3, @delay3, @property4, @duration4, @function4, @delay4) {
|
|
-webkit-transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2, @property3 @duration3 @function3 @delay3, @property4 @duration4 @function4 @delay4;
|
|
-moz-transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2, @property3 @duration3 @function3 @delay3, @property4 @duration4 @function4 @delay4;
|
|
-o-transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2, @property3 @duration3 @function3 @delay3, @property4 @duration4 @function4 @delay4;
|
|
-ms-transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2, @property3 @duration3 @function3 @delay3, @property4 @duration4 @function4 @delay4;
|
|
transition: @property1 @duration1 @function1 @delay1, @property2 @duration2 @function2 @delay2, @property3 @duration3 @function3 @delay3, @property4 @duration4 @function4 @delay4;
|
|
}
|
|
|
|
.transition (inherit) {
|
|
-webkit-transition: inherit;
|
|
-moz-transition: inherit;
|
|
-o-transition: inherit;
|
|
-ms-transition: inherit;
|
|
transition: inherit;
|
|
}
|
|
.fasttrans { .transition(all, 0.4s, ease, 0s); }
|
|
.slowtrans { .transition(all, 2s, ease, 0s); }
|
|
|
|
|
|
.rotate (@deg) {
|
|
-webkit-transform: rotate(@deg);
|
|
-moz-transform: rotate(@deg);
|
|
-o-transform: rotate(@deg);
|
|
-ms-transform: rotate(@deg);
|
|
transform: rotate(@deg);
|
|
}
|
|
|
|
.scale(@amount) {
|
|
-webkit-transform: scale(@amount);
|
|
-moz-transform: scale(@amount);
|
|
-ms-transform: scale(@amount);
|
|
transform: scale(@amount);
|
|
}
|
|
.flipX {
|
|
-webkit-transform: scaleX(-1);
|
|
-moz-transform: scaleX(-1);
|
|
-ms-transform: scaleX(-1);
|
|
-o-transform: scaleX(-1);
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
//TEXTURES
|
|
|
|
.polka {
|
|
background:
|
|
radial-gradient(@lighttransblack 15%, transparent 16%) 0 0,
|
|
radial-gradient(@lighttransblack 15%, transparent 16%) 8px 8px,
|
|
radial-gradient(rgba(255,255,255,.01) 15%, transparent 20%) 0 1px,
|
|
radial-gradient(rgba(255,255,255,.01) 15%, transparent 20%) 8px 9px;
|
|
background-size: 8px 8px;
|
|
}
|
|
.stripes {
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 10px,
|
|
@transwhite 10px,
|
|
@transwhite 20px
|
|
);
|
|
}
|
|
|