badge.scss 920 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. .badge {
  2. display: inline-flex;
  3. align-items: stretch;
  4. max-width: 100%;
  5. line-height: var(--line-height-01);
  6. padding: 0 var(--bs-badge-padding-x);
  7. }
  8. .badge-prepend {
  9. margin-left: calc($spacing-01 / -2);
  10. margin-right: $spacing-01;
  11. display: flex;
  12. align-items: center;
  13. }
  14. .badge-close {
  15. @include reset-button;
  16. display: flex;
  17. align-items: center;
  18. justify-content: center;
  19. flex-shrink: 0;
  20. padding: 0 $spacing-02;
  21. margin: 0 (-$spacing-02) 0 $spacing-02;
  22. border-top-right-radius: inherit;
  23. border-bottom-right-radius: inherit;
  24. color: inherit;
  25. user-select: none;
  26. .badge-close-icon {
  27. font-size: $font-size-base;
  28. }
  29. &:hover {
  30. background-color: var(--neutral-40);
  31. }
  32. }
  33. .badge-content {
  34. @include text-truncate;
  35. padding: var(--bs-badge-padding-y) 0;
  36. }
  37. .badge-tag {
  38. @include body-sm;
  39. color: $dark;
  40. &:hover {
  41. background-color: var(--neutral-30) !important;
  42. }
  43. }