You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

38 lines
1.1 KiB

8 months ago
  1. // Base class
  2. //
  3. // Requires one of the contextual, color modifier classes for `color` and
  4. // `background-color`.
  5. .badge {
  6. // scss-docs-start badge-css-vars
  7. --#{$prefix}badge-padding-x: #{$badge-padding-x};
  8. --#{$prefix}badge-padding-y: #{$badge-padding-y};
  9. @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  10. --#{$prefix}badge-font-weight: #{$badge-font-weight};
  11. --#{$prefix}badge-color: #{$badge-color};
  12. --#{$prefix}badge-border-radius: #{$badge-border-radius};
  13. // scss-docs-end badge-css-vars
  14. display: inline-block;
  15. padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
  16. @include font-size(var(--#{$prefix}badge-font-size));
  17. font-weight: var(--#{$prefix}badge-font-weight);
  18. line-height: 1;
  19. color: var(--#{$prefix}badge-color);
  20. text-align: center;
  21. white-space: nowrap;
  22. vertical-align: baseline;
  23. @include border-radius(var(--#{$prefix}badge-border-radius));
  24. @include gradient-bg();
  25. // Empty badges collapse automatically
  26. &:empty {
  27. display: none;
  28. }
  29. }
  30. // Quick fix for badges in buttons
  31. .btn .badge {
  32. position: relative;
  33. top: -1px;
  34. }