index.less 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. @import (reference) './variable.less';
  2. @badgePrefix: ant-badge;
  3. .@{badgePrefix} {
  4. display: inline-block;
  5. position: relative;
  6. &-content {
  7. position: absolute;
  8. display: flex;
  9. height: 28 * @rpx;
  10. align-self: center;
  11. align-items: center;
  12. font-size: 18 * @rpx;
  13. padding: 4 * @rpx 8 * @rpx;
  14. box-sizing: border-box;
  15. word-break: keep-all;
  16. justify-content: center;
  17. top: 0;
  18. left: 100%;
  19. transform: translate(-50%, -50%);
  20. &-stroke {
  21. border: 2 * @rpx solid @COLOR_WHITE;
  22. }
  23. &-text {
  24. padding-left: 4 * @rpx;
  25. &:empty {
  26. display: none;
  27. }
  28. .ant-badge-icon-container:empty ~ & {
  29. padding-left: 0;
  30. }
  31. }
  32. .ant-icon {
  33. font-size: 18 * @rpx;
  34. color: @COLOR_WHITE;
  35. }
  36. &-not-dot {
  37. min-width: 28 * @rpx;
  38. height: 28 * @rpx;
  39. border-radius: 28 * @rpx;
  40. display: flex;
  41. background-color: @badge-background-color;
  42. }
  43. }
  44. &-dot {
  45. width: 20 * @rpx;
  46. height: 20 * @rpx;
  47. border-radius: 50%;
  48. background-color: @badge-background-color;
  49. &-stroke {
  50. border: 2 * @rpx solid @COLOR_WHITE;
  51. }
  52. }
  53. &-number,
  54. &-text,
  55. &-bubble {
  56. color: @COLOR_WHITE;
  57. }
  58. }