123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- @import './var.less';
- :root {
- --van-progress-height: @progress-height;
- --van-progress-color: @progress-color;
- --van-progress-inactive-color: @progress-inactive-color;
- --van-progress-background-color: @progress-background-color;
- --van-progress-pivot-padding: @progress-pivot-padding;
- --van-progress-pivot-text-color: @progress-pivot-text-color;
- --van-progress-pivot-font-size: @progress-pivot-font-size;
- --van-progress-pivot-line-height: @progress-pivot-line-height;
- --van-progress-pivot-background-color: @progress-pivot-background-color;
- }
- .van-progress {
- position: relative;
- height: var(--van-progress-height);
- background: var(--van-progress-background-color);
- border-radius: var(--van-progress-height);
- &__portion {
- position: absolute;
- left: 0;
- width: 100%;
- height: 100%;
- background: var(--van-progress-color);
- border-radius: inherit;
- transform-origin: 0;
- transition: all var(--van-animation-duration-base)
- var(--van-animation-timing-function-enter);
- &--inactive {
- background: var(--van-progress-inactive-color);
- }
- }
- &__pivot {
- position: absolute;
- top: 50%;
- box-sizing: border-box;
- min-width: 3.6em;
- padding: var(--van-progress-pivot-padding);
- color: var(--van-progress-pivot-text-color);
- font-size: var(--van-progress-pivot-font-size);
- line-height: var(--van-progress-pivot-line-height);
- text-align: center;
- word-break: keep-all;
- background: var(--van-progress-pivot-background-color);
- border-radius: 1em;
- transition: all var(--van-animation-duration-base)
- var(--van-animation-timing-function-enter);
- &--inactive {
- background: var(--van-progress-inactive-color);
- }
- }
- }
|