/libraries/bootstrap/less/labels-badges.less

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