Mercurial > wikked

comparison static/bootstrap/less/labels-badges.less @ 61:130eccd396d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Now using Boostrap with LESS.
author Ludovic Chabant <ludovic@chabant.com>
date Wed, 06 Feb 2013 08:22:31 -0800
parents
children a5a3d454eac9
comparison
equal deleted inserted replaced
60:8250c977bc50 61:130eccd396d8
1 //
2 // Labels and badges
3 // --------------------------------------------------
4
5
6 // Base classes
7 .label,
8 .badge {
9 display: inline-block;
10 padding: 2px 4px;
11 font-size: @baseFontSize * .846;
12 font-weight: bold;
13 line-height: 14px; // ensure proper line-height if floated
14 color: @white;
15 vertical-align: baseline;
16 white-space: nowrap;
17 text-shadow: 0 -1px 0 rgba(0,0,0,.25);
18 background-color: @grayLight;
19 }
20 // Set unique padding and border-radii
21 .label {
22 .border-radius(3px);
23 }
24 .badge {
25 padding-left: 9px;
26 padding-right: 9px;
27 .border-radius(9px);
28 }
29
30 // Empty labels/badges collapse
31 .label,
32 .badge {
33 &:empty {
34 display: none;
35 }
36 }
37
38 // Hover state, but only for links
39 a {
40 &.label:hover,
41 &.badge:hover {
42 color: @white;
43 text-decoration: none;
44 cursor: pointer;
45 }
46 }
47
48 // Colors
49 // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
50 .label,
51 .badge {
52 // Important (red)
53 &-important { background-color: @errorText; }
54 &-important[href] { background-color: darken(@errorText, 10%); }
55 // Warnings (orange)
56 &-warning { background-color: @orange; }
57 &-warning[href] { background-color: darken(@orange, 10%); }
58 // Success (green)
59 &-success { background-color: @successText; }
60 &-success[href] { background-color: darken(@successText, 10%); }
61 // Info (turquoise)
62 &-info { background-color: @infoText; }
63 &-info[href] { background-color: darken(@infoText, 10%); }
64 // Inverse (black)
65 &-inverse { background-color: @grayDark; }
66 &-inverse[href] { background-color: darken(@grayDark, 10%); }
67 }
68
69 // Quick fix for labels/badges in buttons
70 .btn {
71 .label,
72 .badge {
73 position: relative;
74 top: -1px;
75 }
76 }
77 .btn-mini {
78 .label,
79 .badge {
80 top: 0;
81 }
82 }