test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

improve steps line css style

Browse Source
This commit is contained in:
afc163 2015-11-08 15:42:33 +08:00
parent bb953b333f
commit 06dc2b9041
3 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/steps/demo/vertical-small.md
View File

@ -26,5 +26,5 @@ const steps = [{
);
});
ReactDOM.render(<Steps size='small' direction='vertical' current={1}>{steps}</Steps>, container);
ReactDOM.render(<Steps size="small" direction="vertical" current={1}>{steps}</Steps>, container);
````

2
components/steps/demo/vertical.md
View File

@ -29,5 +29,5 @@ const steps = [{
);
});
ReactDOM.render(<Steps direction='vertical' current={1}>{steps}</Steps>, container);
ReactDOM.render(<Steps direction="vertical" current={1}>{steps}</Steps>, container);
````

28
style/components/steps.less
View File

@ -69,8 +69,11 @@
color: @finish-icon-color;
}
}
.@{steps-prefix-cls}-tail > i {
background-color: @finish-tail-color;
.@{steps-prefix-cls}-tail > i:after {
width: 100%;
background: @finish-tail-color;
transition: all 0.4s ease;
opacity: 1;
}
.@{steps-prefix-cls}-title {
color: @finish-title-color;
@ -169,7 +172,16 @@
height: 1px;
border-radius: 1px;
width: 100%;
transition: background 0.3s ease;
position: relative;
&:after {
position: absolute;
content: '';
top: 0;
width: 0;
background: #e9e9e9;
height: 100%;
opacity: 0;
}
}
}
@ -237,6 +249,16 @@
> i {
height: 100%;
width: 1px;
&:after {
height: 0;
width: 100%;
}
}
}
.@{steps-prefix-cls}-status-finish {
.@{steps-prefix-cls}-tail > i:after {
height: 100%;
}
}