mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

vertical re-stpes 1.2.1

Browse Source
This commit is contained in:
zhujun24 2015-08-31 20:24:47 +08:00
parent d720a908a0
commit 9a7814396e
3 changed files with 64 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/steps/index.jsx
View File

@ -4,26 +4,18 @@ import Steps from 'rc-steps';
const AntSteps = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-steps',
iconPrefix: 'ant',
size: 'default',
maxDescriptionWidth: 100
};
},
render() {
let stepsCls = '';
if (this.props.direction === 'vertical') {
if (this.props.size === 'small') {
stepsCls = 'ant-steps-vertical-small ant-steps';
} else {
stepsCls = 'ant-steps-vertical ant-steps';
}
} else {
stepsCls = 'ant-steps';
}
return (<Steps size={this.props.size}
direction={this.props.direction}
iconPrefix={this.props.iconPrefix}
maxDescriptionWidth={this.props.maxDescriptionWidth}
prefixCls={stepsCls}>
prefixCls={this.props.prefixCls}>
{this.props.children}
</Steps>);
}

2
package.json
View File

@ -52,7 +52,7 @@
"rc-radio": "~2.0.0",
"rc-select": "~4.8.1",
"rc-slider": "~1.4.0",
"rc-steps": "~1.1.4",
"rc-steps": "~1.2.1",
"rc-switch": "~1.2.0",
"rc-table": "~3.1.0",
"rc-tabs": "~5.3.2",

97
style/components/steps.less
View File

@ -231,16 +231,17 @@
}
}
.@{steps-prefix-cls} {
.@{steps-prefix-cls}-item.@{steps-vertical-prefix-cls} {
.@{steps-prefix-cls}-vertical {
.@{steps-prefix-cls}-item {
display: block;
}
.@{steps-vertical-prefix-cls}.@{steps-prefix-cls}-tail {
.@{steps-prefix-cls}-tail {
position: absolute;
left: 13px;
top: 0;
height: 100%;
width: 1px;
top: 0;
padding: 30px 0 4px 0;
> i {
height: 100%;
@ -248,23 +249,38 @@
}
}
.@{steps-vertical-prefix-cls}.@{steps-prefix-cls}-main {
min-height: 47px;
}
.@{steps-vertical-prefix-cls}.@{steps-prefix-cls}-head-inner {
.@{steps-prefix-cls}-head {
float: left;
&-inner {
margin-right: 16px;
}
}
.@{steps-prefix-cls}-item.@{steps-vertical-small-prefix-cls} {
.@{steps-prefix-cls}-main {
max-width: 100%;
min-height: 47px;
overflow: hidden;
display: block;
.@{steps-prefix-cls}-title {
line-height: 26px;
}
.@{steps-prefix-cls}-description {
padding-bottom: 12px;
}
}
}
.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-item {
display: block;
}
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-tail {
.@{steps-prefix-cls}-tail {
position: absolute;
left: 6px;
top: 0;
height: 100%;
width: 2px;
top: 0;
padding: 0;
> i {
height: 100%;
@ -272,8 +288,8 @@
}
}
.@{steps-prefix-cls}-item.@{steps-prefix-cls}-status-wait {
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-tail {
.@{steps-prefix-cls}-status-wait {
.@{steps-prefix-cls}-tail {
> i {
background-color: #fff;
border-left: 2px dotted @wait-tail-color;
@ -281,8 +297,8 @@
}
}
.@{steps-prefix-cls}-item.@{steps-prefix-cls}-status-process {
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-tail {
.@{steps-prefix-cls}-status-process {
.@{steps-prefix-cls}-tail {
> i {
background-color: #fff;
border-left: 2px dotted @process-tail-color;
@ -290,8 +306,8 @@
}
}
.@{steps-prefix-cls}-item.@{steps-prefix-cls}-status-finish {
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-tail {
.@{steps-prefix-cls}-status-finish {
.@{steps-prefix-cls}-tail {
> i {
background-color: #fff;
border-left: 2px solid @finish-tail-color;
@ -299,53 +315,40 @@
}
}
.@{steps-vertical-prefix-cls}.@{steps-prefix-cls}-main {
.@{steps-prefix-cls}-main {
max-width: 100%;
min-height: 47px;
display: inline;
zoom: 1;
overflow: hidden;
display: block;
.@{steps-prefix-cls}-title {
line-height: 14px;
}
.@{steps-prefix-cls}-description {
margin-left: 42px;
padding-bottom: 12px;
}
}
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-main {
min-height: 47px;
display: inline;
zoom: 1;
.@{steps-prefix-cls}-description {
margin-left: 22px;
}
}
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
margin-right: 8px;
background-color: #2db7f5;
}
.@{steps-prefix-cls}-status-wait, .@{steps-prefix-cls}-status-process {
overflow: hidden;
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
.@{steps-prefix-cls}-head-inner {
text-indent: 10000px;
display: inline-block;
background-color: #fff;
}
}
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
.@{steps-prefix-cls}-head-inner {
width: 14px;
height: 14px;
margin-right: 8px;
background-color: #2db7f5;
border-width: 2px;
}
.@{steps-prefix-cls}-status-finish {
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
.@{steps-prefix-cls}-head-inner {
background-color: @finish-tail-color;
}
}
.@{steps-prefix-cls}-status-finish {
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-head-inner {
.@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-icon:before {
.@{steps-prefix-cls}-icon:before {
color: #fff;
font-weight: 700;
position: absolute;
@ -354,8 +357,4 @@
}
}
}
.@{steps-vertical-prefix-cls}.@{steps-prefix-cls}-description, .@{steps-vertical-small-prefix-cls}.@{steps-prefix-cls}-description {
padding-bottom: 12px;
}
}