_badge.scss 982 B

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