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/focus state, but only for links
39a {
40  &.label:hover,
41  &.label:focus,
42  &.badge:hover,
43  &.badge:focus {
44    color: @white;
45    text-decoration: none;
46    cursor: pointer;
47  }
48}
49
50// Colors
51// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
52.label,
53.badge {
54  // Important (red)
55  &-important         { background-color: @errorText; }
56  &-important[href]   { background-color: darken(@errorText, 10%); }
57  // Warnings (orange)
58  &-warning           { background-color: @orange; }
59  &-warning[href]     { background-color: darken(@orange, 10%); }
60  // Success (green)
61  &-success           { background-color: @successText; }
62  &-success[href]     { background-color: darken(@successText, 10%); }
63  // Info (turquoise)
64  &-info              { background-color: @infoText; }
65  &-info[href]        { background-color: darken(@infoText, 10%); }
66  // Inverse (black)
67  &-inverse           { background-color: @grayDark; }
68  &-inverse[href]     { background-color: darken(@grayDark, 10%); }
69}
70
71// Quick fix for labels/badges in buttons
72.btn {
73  .label,
74  .badge {
75    position: relative;
76    top: -1px;
77  }
78}
79.btn-mini {
80  .label,
81  .badge {
82    top: 0;
83  }
84}
85