mixins.less
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
.mix-box (@bg-color, @fg-color, @border-color) {
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin: 10px auto;
padding:7px 7px 0 7px;
box-shadow:0 1px 3px rgba(0,0,0,0.1);
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
color:@fg-color;
background-color:@bg-color;
border:1px solid @border-color;
}
.mix-inline-box (@bg-color, @fg-color, @border-color) {
color: @fg-color;
background-color: @bg-color;
padding:0 3px 0;
display: inline-block;
width: auto;
margin: 1px;
border:1px solid @border-color;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
.mix-badge (@text, @color){
&:before {
font-weight: bold;
color: @color;
font-variant: small-caps;
font-size: 120%;
margin-right: 3px;
content: @text;
}
}
.mix-red-badge (@text){
.mix-badge(@text, @bright-red);
}
.mix-green-badge (@text){
.mix-badge(@text, @bright-green);
}
.mix-symbol (@symbol, @color, @size:100%){
&:before {
font-style: normal;
font-size: @size;
color: @color;
content: @symbol;
}
}
.mix-circle (@color, @size:100%){
.mix-symbol("\25CF", @color, @size);
}
.mix-hyphens (@val) {
-webkit-hyphens: @val;
-moz-hyphens: @val;
-ms-hyphens: @val;
-o-hyphens: @val;
hyphens: @val;
}
|