| // Base class |
| // |
| // Requires one of the contextual, color modifier classes for `color` and |
| // `background-color`. |
| |
| .badge { |
| display: inline-block; |
| padding: $badge-padding-y $badge-padding-x; |
| font-size: $badge-font-size; |
| font-weight: $badge-font-weight; |
| line-height: 1; |
| text-align: center; |
| white-space: nowrap; |
| vertical-align: baseline; |
| @include border-radius($badge-border-radius); |
| |
| // Empty badges collapse automatically |
| &:empty { |
| display: none; |
| } |
| } |
| |
| // Quick fix for badges in buttons |
| .btn .badge { |
| position: relative; |
| top: -1px; |
| } |
| |
| // Pill badges |
| // |
| // Make them extra rounded with a modifier to replace v3's badges. |
| |
| .badge-pill { |
| padding-right: $badge-pill-padding-x; |
| padding-left: $badge-pill-padding-x; |
| @include border-radius($badge-pill-border-radius); |
| } |
| |
| // Colors |
| // |
| // Contextual variations (linked badges get darker on :hover). |
| |
| @each $color, $value in $theme-colors { |
| .badge-#{$color} { |
| @include badge-variant($value); |
| } |
| } |