index.less 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. @import './var.less';
  2. :root {
  3. --van-circle-size: @circle-size;
  4. --van-circle-color: @circle-color;
  5. --van-circle-layer-color: @circle-layer-color;
  6. --van-circle-text-color: @circle-text-color;
  7. --van-circle-text-font-weight: @circle-text-font-weight;
  8. --van-circle-text-font-size: @circle-text-font-size;
  9. --van-circle-text-line-height: @circle-text-line-height;
  10. }
  11. .van-circle {
  12. position: relative;
  13. display: inline-block;
  14. width: var(--van-circle-size);
  15. height: var(--van-circle-size);
  16. text-align: center;
  17. svg {
  18. position: absolute;
  19. top: 0;
  20. left: 0;
  21. width: 100%;
  22. height: 100%;
  23. }
  24. &__layer {
  25. stroke: var(--van-circle-layer-color);
  26. }
  27. &__hover {
  28. fill: none;
  29. stroke: var(--van-circle-color);
  30. stroke-linecap: round;
  31. }
  32. &__text {
  33. position: absolute;
  34. top: 50%;
  35. left: 0;
  36. box-sizing: border-box;
  37. width: 100%;
  38. padding: 0 var(--van-padding-base);
  39. color: var(--van-circle-text-color);
  40. font-weight: var(--van-circle-text-font-weight);
  41. font-size: var(--van-circle-text-font-size);
  42. line-height: var(--van-circle-text-line-height);
  43. transform: translateY(-50%);
  44. }
  45. }