minor fix
[fnpeditor.git] / libs / 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 // Empty labels/badges collapse
31 .label,
32 .badge {
33   &:empty {
34     display: none;
35   }
36 }
37
38 // Hover/focus state, but only for links
39 a {
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 }