2017-01-04 11:46:36 +08:00

116 lines
2.2 KiB
Plaintext

.zui-steps--steps.zui-steps--5 .zui-steps__step {
width: 25%;
}
.zui-steps--steps.zui-steps--4 .zui-steps__step {
width: 33%;
}
.zui-steps--steps.zui-steps--3 .zui-steps__step {
width: 50%;
}
.zui-steps--steps .zui-steps__step {
position: relative;
float: left;
padding-bottom: 20px;
color: #b1b1b1;
}
.zui-steps--steps .zui-steps__title {
display: inline-block;
transform: translateX(-50%);
margin-left: 2px;
font-size: 10px;
}
.zui-steps--steps .zui-steps__icons {
position: absolute;
top: 28px;
left: -8px;
padding: 0 8px;
background-color: #fff;
z-index: 10;
}
.zui-steps--steps .zui-steps__circle {
display: block;
position: relative;
width: 5px;
height: 5px;
background-color: #e5e5e5;
border-radius: 50%;
}
.zui-steps--steps .zui-steps__line {
position: absolute;
left: 0px;
top: 30px;
width: 100%;
height: 1px;
background-color: #e5e5e5;
}
/* 已完成的steps */
.zui-steps--steps .zui-steps__step--done {
color: #333;
}
.zui-steps--steps .zui-steps__step--done .zui-steps__line {
background-color: #06bf04;
}
.zui-steps--steps .zui-steps__step--done .zui-steps__circle {
width: 5px;
height: 5px;
background-color: #09bb07;
}
/* 正在进行中的steps */
.zui-steps--steps .zui-steps__step--cur .zui-steps__icons {
top: 24px;
}
.zui-steps--steps .zui-steps__step--cur .zui-steps__circle {
width: 13px;
height: 13px;
background-image: url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
background-size: 13px 13px;
}
.zui-steps--steps .zui-steps__step--cur .zui-steps__title {
margin-left: 6px;
}
.zui-steps--steps .zui-steps__step--cur .zui-steps__line {
background-color: #e5e5e5;
}
/* 各种不同位置的 */
.zui-steps--steps .zui-steps__step--first-child .zui-steps__title {
margin-left: 0;
transform: none;
}
.zui-steps--steps .zui-steps__step--last-child {
position: absolute;
right: 0;
top: 0;
bottom: 0;
text-align: right;
}
.zui-steps--steps .zui-steps__step--last-child .zui-steps__title {
transform: none;
}
.zui-steps--steps .zui-steps__step--last-child .zui-steps__icons {
left: auto;
right: -6px;
}
.zui-steps--steps .zui-steps__step--last-child .zui-steps__line {
display: none;
}