|
0
|
1 // Base class
|
|
|
2 //
|
|
|
3 // Requires one of the contextual, color modifier classes for `color` and
|
|
|
4 // `background-color`.
|
|
|
5
|
|
|
6 .badge {
|
|
|
7 display: inline-block;
|
|
|
8 padding: $badge-padding-y $badge-padding-x;
|
|
|
9 font-size: $badge-font-size;
|
|
|
10 font-weight: $badge-font-weight;
|
|
|
11 line-height: 1;
|
|
|
12 color: $badge-color;
|
|
|
13 text-align: center;
|
|
|
14 white-space: nowrap;
|
|
|
15 vertical-align: baseline;
|
|
|
16 @include border-radius();
|
|
|
17
|
|
|
18 // Empty badges collapse automatically
|
|
|
19 &:empty {
|
|
|
20 display: none;
|
|
|
21 }
|
|
|
22 }
|
|
|
23
|
|
|
24 // Quick fix for badges in buttons
|
|
|
25 .btn .badge {
|
|
|
26 position: relative;
|
|
|
27 top: -1px;
|
|
|
28 }
|
|
|
29
|
|
|
30 // Pill badges
|
|
|
31 //
|
|
|
32 // Make them extra rounded with a modifier to replace v3's badges.
|
|
|
33
|
|
|
34 .badge-pill {
|
|
|
35 padding-right: $badge-pill-padding-x;
|
|
|
36 padding-left: $badge-pill-padding-x;
|
|
|
37 @include border-radius($badge-pill-border-radius);
|
|
|
38 }
|
|
|
39
|
|
|
40 // Colors
|
|
|
41 //
|
|
|
42 // Contextual variations (linked badges get darker on :hover).
|
|
|
43
|
|
|
44 @each $color, $value in $theme-colors {
|
|
|
45 .badge-#{$color} {
|
|
|
46 @include badge-variant($value);
|
|
|
47 }
|
|
|
48 }
|
