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 |
.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-red-badge (@text){ font-weight: bold; color: @bright-red; text-decoration: underline; vertical-align: super; &:before { font-variant: small-caps; font-size: 120%; content: @text; } } .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; } |