_badge.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. /**
  2. * Badges
  3. * --------------------------------------------------
  4. */
  5. .badge {
  6. @include badge-style($badge-default-bg, $badge-default-text);
  7. z-index: $z-index-badge;
  8. display: inline-block;
  9. padding: 3px 8px;
  10. min-width: 10px;
  11. border-radius: $badge-border-radius;
  12. vertical-align: baseline;
  13. text-align: center;
  14. white-space: nowrap;
  15. font-weight: $badge-font-weight;
  16. font-size: $badge-font-size;
  17. line-height: $badge-line-height;
  18. &:empty {
  19. display: none;
  20. }
  21. }
  22. //Be sure to override specificity of rule that 'badge color matches tab color by default'
  23. .tabs .tab-item .badge,
  24. .badge {
  25. &.badge-light {
  26. @include badge-style($badge-light-bg, $badge-light-text);
  27. }
  28. &.badge-stable {
  29. @include badge-style($badge-stable-bg, $badge-stable-text);
  30. }
  31. &.badge-positive {
  32. @include badge-style($badge-positive-bg, $badge-positive-text);
  33. }
  34. &.badge-calm {
  35. @include badge-style($badge-calm-bg, $badge-calm-text);
  36. }
  37. &.badge-assertive {
  38. @include badge-style($badge-assertive-bg, $badge-assertive-text);
  39. }
  40. &.badge-balanced {
  41. @include badge-style($badge-balanced-bg, $badge-balanced-text);
  42. }
  43. &.badge-energized {
  44. @include badge-style($badge-energized-bg, $badge-energized-text);
  45. }
  46. &.badge-royal {
  47. @include badge-style($badge-royal-bg, $badge-royal-text);
  48. }
  49. &.badge-dark {
  50. @include badge-style($badge-dark-bg, $badge-dark-text);
  51. }
  52. }
  53. // Quick fix for labels/badges in buttons
  54. .button .badge {
  55. position: relative;
  56. top: -1px;
  57. }