_badge.less 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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. #border-radius(@badge-border-radius);
  15. #transition(@badge-transition);
  16. // LESS PORT: Less has no `@at-root` equivalent, so omitting that here.
  17. a& {
  18. #hover-focus({
  19. text-decoration: none;
  20. });
  21. }
  22. // Empty badges collapse automatically
  23. &:empty {
  24. display: none;
  25. }
  26. }
  27. // Quick fix for badges in buttons
  28. .btn .badge {
  29. position: relative;
  30. top: -1px;
  31. }
  32. // Pill badges
  33. //
  34. // Make them extra rounded with a modifier to replace v3's badges.
  35. .badge-pill {
  36. padding-right: @badge-pill-padding-x;
  37. padding-left: @badge-pill-padding-x;
  38. #border-radius(@badge-pill-border-radius);
  39. }
  40. // Colors
  41. //
  42. // Contextual variations (linked badges get darker on :hover).
  43. //@each $color, $value in $theme-colors {
  44. // .badge-#{$color} {
  45. // @include badge-variant($value);
  46. // }
  47. //}
  48. each(@theme-colors, #(@value, @color) {
  49. .badge-@{color} {
  50. #badge-variant(@value);
  51. }
  52. });