index.less 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. @import './var.less';
  2. :root {
  3. --van-progress-height: @progress-height;
  4. --van-progress-color: @progress-color;
  5. --van-progress-inactive-color: @progress-inactive-color;
  6. --van-progress-background-color: @progress-background-color;
  7. --van-progress-pivot-padding: @progress-pivot-padding;
  8. --van-progress-pivot-text-color: @progress-pivot-text-color;
  9. --van-progress-pivot-font-size: @progress-pivot-font-size;
  10. --van-progress-pivot-line-height: @progress-pivot-line-height;
  11. --van-progress-pivot-background-color: @progress-pivot-background-color;
  12. }
  13. .van-progress {
  14. position: relative;
  15. height: var(--van-progress-height);
  16. background: var(--van-progress-background-color);
  17. border-radius: var(--van-progress-height);
  18. &__portion {
  19. position: absolute;
  20. left: 0;
  21. width: 100%;
  22. height: 100%;
  23. background: var(--van-progress-color);
  24. border-radius: inherit;
  25. transform-origin: 0;
  26. transition: all var(--van-animation-duration-base)
  27. var(--van-animation-timing-function-enter);
  28. &--inactive {
  29. background: var(--van-progress-inactive-color);
  30. }
  31. }
  32. &__pivot {
  33. position: absolute;
  34. top: 50%;
  35. box-sizing: border-box;
  36. min-width: 3.6em;
  37. padding: var(--van-progress-pivot-padding);
  38. color: var(--van-progress-pivot-text-color);
  39. font-size: var(--van-progress-pivot-font-size);
  40. line-height: var(--van-progress-pivot-line-height);
  41. text-align: center;
  42. word-break: keep-all;
  43. background: var(--van-progress-pivot-background-color);
  44. border-radius: 1em;
  45. transition: all var(--van-animation-duration-base)
  46. var(--van-animation-timing-function-enter);
  47. &--inactive {
  48. background: var(--van-progress-inactive-color);
  49. }
  50. }
  51. }