talos

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
  @include font-size($badge-font-size);
10
  font-weight: $badge-font-weight;
11
  line-height: 1;
12
  text-align: center;
13
  white-space: nowrap;
14
  vertical-align: baseline;
15
  @include border-radius($badge-border-radius);
16
  @include transition($badge-transition);
17

18
  @at-root a#{&} {
19
    @include hover-focus() {
20
      text-decoration: none;
21
    }
22
  }
23

24
  // Empty badges collapse automatically
25
  &:empty {
26
    display: none;
27
  }
28
}
29

30
// Quick fix for badges in buttons
31
.btn .badge {
32
  position: relative;
33
  top: -1px;
34
}
35

36
// Pill badges
37
//
38
// Make them extra rounded with a modifier to replace v3's badges.
39

40
.badge-pill {
41
  padding-right: $badge-pill-padding-x;
42
  padding-left: $badge-pill-padding-x;
43
  @include border-radius($badge-pill-border-radius);
44
}
45

46
// Colors
47
//
48
// Contextual variations (linked badges get darker on :hover).
49

50
@each $color, $value in $theme-colors {
51
  .badge-#{$color} {
52
    @include badge-variant($value);
53
  }
54
}
55