@insaic/neon
Version:
A Mobile UI Components built on Vue
54 lines (52 loc) • 1.15 kB
CSS
.sq-step-item {
display: inline-block;
font-size: 12px;
width: 2em;
-webkit-box-flex: 0;
-webkit-flex: 0 0 2em;
-ms-flex: 0 0 2em;
flex: 0 0 2em;
}
.sq-step-item-icon .sq-icon {
font-size: 2em;
color: #4A90E2;
}
.sq-step-item-text {
font-size: 1em;
color: #878787;
white-space: nowrap;
}
.sq-step-item ~ .sq-step-item .sq-step-item-text {
width: 2em;
float: right;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sq-step-item ~ .sq-step-item {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: right;
}
.sq-step-item ~ .sq-step-item .sq-step-item-icon {
position: relative;
}
.sq-step-item ~ .sq-step-item .sq-step-item-icon::before {
content: '';
position: absolute;
top: 50%;
left: 6px;
right: 30px;
left: .6em;
right: 2.6em;
height: 1px;
background-color: #e6e6e6;
margin-top: -1px;
}