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( ReactDOM.render(
<Steps> <Steps>
<Step status="finish" title="Login" icon="user" /> <Step status="finish" title="Login" icon={<Icon type="user" />} />
<Step status="finish" title="Verification" icon="solution" /> <Step status="finish" title="Verification" icon={<Icon type="solution" />} />
<Step status="process" title="Pay" icon="credit-card" /> <Step status="process" title="Pay" icon={<Icon type="credit-card" />} />
<Step status="wait" title="Done" icon={<Icon type="smile-o" />} /> <Step status="wait" title="Done" icon={<Icon type="smile-o" />} />
</Steps> </Steps>
, mountNode); , mountNode);

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

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