mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 21:19:37 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

Fix steps icon size and some detail, close #3817

Browse Source
This commit is contained in:
afc163 2016-12-04 15:50:54 +08:00
parent f5775fec73
commit 264f02d98f
3 changed files with 25 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/steps/demo/icon.md
View File

@ -19,9 +19,9 @@ const Step = Steps.Step;
ReactDOM.render(
<Steps>
<Step status="finish" title="Login" icon="user" />
<Step status="finish" title="Verification" icon="solution" />
<Step status="process" title="Pay" icon="credit-card" />
<Step status="finish" title="Login" icon={<Icon type="user" />} />
<Step status="finish" title="Verification" icon={<Icon type="solution" />} />
<Step status="process" title="Pay" icon={<Icon type="credit-card" />} />
<Step status="wait" title="Done" icon={<Icon type="smile-o" />} />
</Steps>
, mountNode);

2
components/steps/demo/step-next.md
View File

@ -90,6 +90,6 @@ ReactDOM.render(<App />, mountNode);
}
.steps-action {
margin-top: 40px;
margin-top: 24px;
}
````

45
components/steps/style/index.less
View File

@ -19,6 +19,9 @@
@error-description-color: @error-color;
@error-tail-color: @error-color;
@steps-icon-size: 26px;
@steps-small-icon-size: 18px;
.@{steps-prefix-cls} {
font-size: 0;
width: 100%;
@ -75,7 +78,7 @@
.@{steps-prefix-cls}-tail > i:after {
width: 100%;
background: @finish-tail-color;
transition: all 0.4s ease;
transition: all 0.6s;
opacity: 1;
}
.@{steps-prefix-cls}-title {
@ -119,10 +122,9 @@
width: auto;
height: auto;
> .@{steps-prefix-cls}-icon {
font-size: 20px;
top: 2px;
width: 20px;
height: 20px;
font-size: @steps-icon-size;
width: @steps-icon-size;
height: @steps-icon-size;
}
}
&.@{steps-prefix-cls}-status-process {
@ -146,11 +148,11 @@
.@{steps-prefix-cls}-head-inner {
display: block;
border: 1px solid @wait-icon-color;
width: 26px;
height: 26px;
width: @steps-icon-size;
height: @steps-icon-size;
line-height: 23px;
text-align: center;
border-radius: 26px;
border-radius: @steps-icon-size;
font-size: @font-size-lg;
margin-right: 8px;
transition: background-color 0.3s ease, border-color 0.3s ease;
@ -222,11 +224,11 @@
&.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-head-inner {
border: 1px solid @wait-icon-color;
width: 18px;
height: 18px;
width: @steps-small-icon-size;
height: @steps-small-icon-size;
line-height: 15px;
text-align: center;
border-radius: 18px;
border-radius: @steps-small-icon-size;
font-size: @font-size-base;
margin-right: 10px;
> .@{steps-prefix-cls}-icon.@{iconfont-css-prefix} {
@ -256,16 +258,11 @@
width: 100%;
}
}
}
&.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner,
.@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner {
width: inherit;
height: inherit;
line-height: inherit;
border-radius: 0;
border: 0;
background: none;
.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner > .@{steps-prefix-cls}-icon {
font-size: @steps-small-icon-size;
width: @steps-small-icon-size;
height: @steps-small-icon-size;
}
}
}
@ -309,7 +306,7 @@
overflow: hidden;
display: block;
.@{steps-prefix-cls}-title {
line-height: 26px;
line-height: @steps-icon-size;
}
.@{steps-prefix-cls}-description {
padding-bottom: 12px;
@ -329,7 +326,7 @@
}
.@{steps-prefix-cls}-title {
line-height: 18px;
line-height: @steps-small-icon-size;
}
}
@ -338,7 +335,7 @@
visibility: hidden;
}
.@{steps-prefix-cls}-description {
max-width: 100px;
max-width: 120px;
}
.@{steps-prefix-cls}-item:not(:first-child) .@{steps-prefix-cls}-head {
padding-left: 10px;