badge.scss 836 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. .vxe-badge {
  2. position: relative;
  3. display: inline-block;
  4. vertical-align: middle;
  5. &.is--dot {
  6. &::before {
  7. content: "";
  8. position: absolute;
  9. top: -0.25em;
  10. right: -0.25em;
  11. text-align: center;
  12. width: 0.5em;
  13. height: 0.5em;
  14. border-radius: 50%;
  15. background-color: #ff4d4f;
  16. z-index: 1;
  17. }
  18. }
  19. }
  20. .vxe-badge--count {
  21. position: absolute;
  22. top: -0.8em;
  23. right: -0.8em;
  24. text-align: center;
  25. min-width: 1.5em;
  26. height: 1.5em;
  27. padding: 0 0.4em;
  28. border-radius: 0.8em;
  29. font-size: 0.8em;
  30. background-color: #ff4d4f;
  31. color: #fff;
  32. z-index: 1;
  33. }
  34. .vxe-badge {
  35. &.size--medium {
  36. font-size: var(--vxe-ui-font-size-medium);
  37. }
  38. &.size--small {
  39. font-size: var(--vxe-ui-font-size-small);
  40. }
  41. &.size--mini {
  42. font-size: var(--vxe-ui-font-size-mini);
  43. }
  44. }