src/style/step.less
.@{prefix-cls}-steps {
font-size: 0px;
overflow: hidden;
line-height: 0px;
margin: 18px 0px;
display: flex;
* {
box-sizing: content-box;
}
&-wrap {
padding: 0;
flex:1;
}
&-wrap > div {
width: 100%;
line-height: @stepHeight;
vertical-align: top;
font-size: 12px;
position: relative;
}
&-wrap > div > label {
margin: @stepLabelMargin;
cursor: default;
}
&-triangle-right {
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: @stepHeight/2;
position: absolute;
right: -@stepHeight+1;
z-index: 1;
}
&-triangle-right-bg {
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: @stepHeight/2;
position: absolute;
z-index: 1;
border-width: @stepHeight/2;
right: -(@stepHeight+2);
border-color: transparent transparent transparent @whiteColor;
}
&-round {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 8px;
text-align: center;
line-height: 16px;
}
&-round + span:before {
content: '\00a0';
}
&-finished {
background-color: @primaryColorhover;
color: @whiteColor;
}
&-finished &-triangle-right {
border-color: transparent transparent transparent @primaryColorhover;
}
&-finished &-round {
background-color: fff;
color: @primaryColorhover;
}
&-finished &-round > i {
color: @primaryColorhover;
font-size: 12px;
}
&-current {
background-color: @primaryColor;
color: @whiteColor;
}
&-current &-triangle-right {
border-color: transparent transparent transparent @primaryColor;
}
&-current &-round {
background-color: @whiteColor;
color: @primaryColor;
}
&-todo {
background-color: @lightColor;
color: @weightGrayColor;
}
&-todo &-triangle-right {
border-color: transparent transparent transparent @lightColor;
}
&-todo &-round {
background-color: @whiteColor;
}
> :last-child &-triangle-right,
> :last-child &-triangle-right-bg {
display: none;
}
}
.@{prefix-cls}-steps-round-con{
list-style-type: none;
margin: 18px 0px;
padding: 0px;
display: flex;
> li .@{prefix-cls}-steps-round {
color: @whiteColor;
background-color: @lightGrayColor;
}
> .@{prefix-cls}-steps-finished:before {
background-color: @primaryColorhover;
}
> .@{prefix-cls}-steps-finished .@{prefix-cls}-steps-round {
background-color: @primaryColorhover;
border: 4px @primaryColorhover solid;
}
> .@{prefix-cls}-steps-finished label {
color: @primaryColorhover;
}
> .@{prefix-cls}-steps-current:before {
background-color: @primaryColor;
}
> .@{prefix-cls}-steps-current .@{prefix-cls}-steps-round {
background-color: @primaryColor;
border: 4px @primaryColor solid;
color:@whiteColor;
}
> .@{prefix-cls}-steps-current label {
color: @primaryColor;
}
> li {
padding: 0px;
position: relative;
flex:1;
background-color:transparent;
}
&:before,
&:after {
content: " ";
display: table;
clear: both;
}
> li:before {
content: '';
width: 100%;
height: @stepRoundLineHeight;
margin: @stepRoundLineMargin;
display: block;
float: left;
background-color: @lightColor;
}
> li:first-child:before {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
> li:last-child:before {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
> li .@{prefix-cls}-steps-wrap {
position: absolute;
left: 50%;
margin-left: -25px;
width: 50px;
text-align: center;
background: @whiteColor;
top: 0px;
}
> li .@{prefix-cls}-steps-round {
width: @stepRoundSize;
height: @stepRoundSize;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
font-size: 12px;
color: @whiteColor;
line-height: 22px;
text-align: center;
border: 4px @lightGrayColor solid;
background-color: @whiteColor;
color: @weightGrayColor;
}
> li .@{prefix-cls}-steps-round > i {
color: @primaryColorhover;
font-size: 12px;
}
> li label {
width: 100%;
text-align: center;
color: @weightGrayColor;
margin: 10px 0px 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
> .@{prefix-cls}-steps-finished:before,
.@{prefix-cls}-steps-current:before {
background-color: @primaryColorhover;
}
> .@{prefix-cls}-steps-finished .@{prefix-cls}-steps-round {
border: 4px @primaryColorhover solid;
background-color: @primaryColorhover;
color: @whiteColor;
}
> .@{prefix-cls}-steps-finished label,
.@{prefix-cls}-steps-current label {
color: @primaryColorhover;
}
}