index.less 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. @import './var.less';
  2. :root {
  3. --van-badge-size: @badge-size;
  4. --van-badge-color: @badge-color;
  5. --van-badge-padding: @badge-padding;
  6. --van-badge-font-size: @badge-font-size;
  7. --van-badge-font-weight: @badge-font-weight;
  8. --van-badge-border-width: @badge-border-width;
  9. --van-badge-background-color: @badge-background-color;
  10. --van-badge-dot-color: @badge-dot-color;
  11. --van-badge-dot-size: @badge-dot-size;
  12. --van-badge-font-family: @badge-font-family;
  13. }
  14. .van-badge {
  15. display: inline-block;
  16. box-sizing: border-box;
  17. min-width: var(--van-badge-size);
  18. padding: var(--van-badge-padding);
  19. color: var(--van-badge-color);
  20. font-weight: var(--van-badge-font-weight);
  21. font-size: var(--van-badge-font-size);
  22. font-family: var(--van-badge-font-family);
  23. line-height: 1.2;
  24. text-align: center;
  25. background: var(--van-badge-background-color);
  26. border: var(--van-badge-border-width) solid var(--van-background-color-light);
  27. border-radius: var(--van-border-radius-max);
  28. &--fixed {
  29. position: absolute;
  30. transform-origin: 100%;
  31. }
  32. &--top-left {
  33. top: 0;
  34. left: 0;
  35. transform: translate(-50%, -50%);
  36. }
  37. &--top-right {
  38. top: 0;
  39. right: 0;
  40. transform: translate(50%, -50%);
  41. }
  42. &--bottom-left {
  43. bottom: 0;
  44. left: 0;
  45. transform: translate(-50%, 50%);
  46. }
  47. &--bottom-right {
  48. bottom: 0;
  49. right: 0;
  50. transform: translate(50%, 50%);
  51. }
  52. &--dot {
  53. width: var(--van-badge-dot-size);
  54. min-width: 0;
  55. height: var(--van-badge-dot-size);
  56. background: var(--van-badge-dot-color);
  57. border-radius: 100%;
  58. border: none;
  59. padding: 0;
  60. }
  61. &__wrapper {
  62. position: relative;
  63. display: inline-block;
  64. }
  65. }