| 1 |
- :root,:host{--van-steps-background: var(--van-background-2)}.van-steps{overflow:hidden;background-color:var(--van-steps-background)}.van-steps--horizontal{padding:2.66667vw 2.66667vw 0}.van-steps--horizontal .van-steps__items{position:relative;display:flex;margin:0 0 2.66667vw;padding-bottom:5.86667vw}.van-steps--vertical{padding:0 0 0 var(--van-padding-xl)}:root,:host{--van-step-text-color: var(--van-text-color-2);--van-step-active-color: var(--van-primary-color);--van-step-process-text-color: var(--van-text-color);--van-step-font-size: var(--van-font-size-md);--van-step-line-color: var(--van-border-color);--van-step-finish-line-color: var(--van-primary-color);--van-step-finish-text-color: var(--van-text-color);--van-step-icon-size: 3.2vw;--van-step-circle-size: 1.33333vw;--van-step-circle-color: var(--van-gray-6);--van-step-horizontal-title-font-size: var(--van-font-size-sm)}.van-step{position:relative;flex:1;color:var(--van-step-text-color);font-size:var(--van-step-font-size)}.van-step__circle{display:block;width:var(--van-step-circle-size);height:var(--van-step-circle-size);background-color:var(--van-step-circle-color);border-radius:50%}.van-step__line{position:absolute;background-color:var(--van-step-line-color);transition:background-color var(--van-duration-base)}.van-step--horizontal{float:left}.van-step--horizontal:first-child .van-step__title{margin-left:0;transform:none}.van-step--horizontal:last-child:not(:first-child){position:absolute;right:1px;width:auto}.van-step--horizontal:last-child:not(:first-child) .van-step__title{margin-left:0;transform:none}.van-step--horizontal:last-child:not(:first-child) .van-step__circle-container{right:-2.4vw;left:auto}.van-step--horizontal .van-step__circle-container{position:absolute;top:8vw;left:calc(var(--van-padding-xs) * -1);z-index:1;padding:0 var(--van-padding-xs);background-color:var(--van-background-2);transform:translateY(-50%)}.van-step--horizontal .van-step__title{display:inline-block;margin-left:.8vw;font-size:var(--van-step-horizontal-title-font-size);transform:translate(-50%)}.van-step--horizontal .van-step__line{top:8vw;left:0;width:100%;height:1px}.van-step--horizontal .van-step__icon{display:block;font-size:var(--van-step-icon-size)}.van-step--horizontal .van-step--process{color:var(--van-step-process-text-color)}.van-step--vertical{display:block;float:none;padding:2.66667vw 2.66667vw 2.66667vw 0;line-height:var(--van-line-height-sm)}.van-step--vertical:not(:last-child):after{border-bottom-width:1px}.van-step--vertical .van-step__circle-container{position:absolute;top:5.06667vw;left:-4vw;z-index:1;font-size:var(--van-step-icon-size);line-height:1;transform:translate(-50%,-50%)}.van-step--vertical .van-step__line{top:4.26667vw;left:-4vw;width:1px;height:100%}.van-step:last-child .van-step__line{width:0}.van-step--finish{color:var(--van-step-finish-text-color)}.van-step--finish .van-step__circle,.van-step--finish .van-step__line{background-color:var(--van-step-finish-line-color)}.van-step__icon,.van-step__title{transition:color var(--van-duration-base)}.van-step__icon--active,.van-step__title--active,.van-step__icon--finish,.van-step__title--finish{color:var(--van-step-active-color)}
|
