test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

support ant-design prefix class and prefixCls property

Browse Source
This commit is contained in:
羽航 2015-06-26 10:43:01 +08:00
parent 9d62e0dc62
commit 1bad0062f9
3 changed files with 54 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/steps/index.jsx
View File

@ -1,3 +1,21 @@
'use strict'; 'use strict';
module.exports = require('rc-steps'); var React = require('react');
var Steps = require('rc-steps');
var AntSteps = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant',
size: 'default'
};
},
render() {
return (<Steps size={this.props.size} prefixCls={this.props.prefixCls}>
{this.props.children}
</Steps>);
}
});
AntSteps.Step = Steps.Step;
module.exports = AntSteps;

2
package.json
View File

@ -22,7 +22,7 @@
"rc-select": "~4.0.0", "rc-select": "~4.0.0",
"rc-tabs": "~5.1.0", "rc-tabs": "~5.1.0",
"rc-tooltip": "~2.1.1", "rc-tooltip": "~2.1.1",
"rc-steps": "~1.0.2" "rc-steps": "~1.0.3"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "~5.4.7", "babel-core": "~5.4.7",

65
style/components/steps.less
View File

@ -1,3 +1,6 @@
@import "../mixins/index";
@stepsPrefixClass: ~"@{css-prefix}steps";
@active-color: #3fc7fa; @active-color: #3fc7fa;
@wait-color: #e9e9e9; @wait-color: #e9e9e9;
@ -7,52 +10,52 @@
transition: @transition; transition: @transition;
} }
.rc-steps { .@{stepsPrefixClass} {
font-size: 0; font-size: 0;
width: 100%; width: 100%;
line-height: 1.5; line-height: 1.5;
.rc-steps-item { .@{stepsPrefixClass}-item {
position: relative; position: relative;
display: inline-block; display: inline-block;
&.rc-steps-status-wait { &.@{stepsPrefixClass}-status-wait {
.rc-steps-head { .@{stepsPrefixClass}-head {
border-color: @wait-color; border-color: @wait-color;
background-color: #fff; background-color: #fff;
> .rc-steps-icon { > .@{stepsPrefixClass}-icon {
color: @wait-color; color: @wait-color;
} }
} }
} }
&.rc-steps-status-process { &.@{stepsPrefixClass}-status-process {
.rc-steps-head { .@{stepsPrefixClass}-head {
border-color: @active-color; border-color: @active-color;
background-color: @active-color; background-color: @active-color;
> .rc-steps-icon { > .@{stepsPrefixClass}-icon {
color: #fff; color: #fff;
} }
} }
} }
&.rc-steps-status-finish { &.@{stepsPrefixClass}-status-finish {
.rc-steps-head { .@{stepsPrefixClass}-head {
border-color: @active-color; border-color: @active-color;
background-color: #fff; background-color: #fff;
> .rc-steps-icon { > .@{stepsPrefixClass}-icon {
color: @active-color; color: @active-color;
} }
} }
} }
&.rc-steps-custom { &.@{stepsPrefixClass}-custom {
.rc-steps-head { .@{stepsPrefixClass}-head {
background: none; background: none;
border: 0; border: 0;
} }
&.rc-steps-status-process { &.@{stepsPrefixClass}-status-process {
.rc-steps-title { .@{stepsPrefixClass}-title {
color: @active-color; color: @active-color;
} }
} }
@ -60,12 +63,12 @@
} }
.rc-steps-head, .rc-steps-main, .rc-steps-tail { .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-main, .@{stepsPrefixClass}-tail {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.rc-steps-head { .@{stepsPrefixClass}-head {
border:2px solid @wait-color; border:2px solid @wait-color;
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -77,7 +80,7 @@
.transition(background-color 0.1s ease); .transition(background-color 0.1s ease);
.transition(border-color 0.1s ease); .transition(border-color 0.1s ease);
> .rc-steps-icon { > .@{stepsPrefixClass}-icon {
line-height: 1; line-height: 1;
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
@ -85,21 +88,21 @@
position: relative; position: relative;
} }
} }
.rc-steps-main { .@{stepsPrefixClass}-main {
max-width: 75px; max-width: 75px;
margin-top: 3px; margin-top: 3px;
} }
.rc-steps-title { .@{stepsPrefixClass}-title {
font-size: 14px; font-size: 14px;
margin-bottom: 4px; margin-bottom: 4px;
color: #666; color: #666;
font-weight: bold; font-weight: bold;
} }
.rc-steps-description { .@{stepsPrefixClass}-description {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
} }
.rc-steps-tail { .@{stepsPrefixClass}-tail {
width: 0; width: 0;
position: relative; position: relative;
top: 12px; top: 12px;
@ -113,8 +116,8 @@
} }
} }
&.rc-steps-small { &.@{stepsPrefixClass}-small {
.rc-steps-head { .@{stepsPrefixClass}-head {
border:1px solid @wait-color; border:1px solid @wait-color;
width: 18px; width: 18px;
height: 18px; height: 18px;
@ -125,21 +128,21 @@
margin-right: 10px; margin-right: 10px;
} }
.rc-steps-main { .@{stepsPrefixClass}-main {
max-width: 75px; max-width: 75px;
margin-top: 0; margin-top: 0;
} }
.rc-steps-title { .@{stepsPrefixClass}-title {
font-size: 12px; font-size: 12px;
margin-bottom: 4px; margin-bottom: 4px;
color: #666; color: #666;
font-weight: bold; font-weight: bold;
} }
.rc-steps-description { .@{stepsPrefixClass}-description {
font-size: 10px; font-size: 10px;
color: #999; color: #999;
} }
.rc-steps-tail { .@{stepsPrefixClass}-tail {
top: 8px; top: 8px;
padding:0 8px; padding:0 8px;
> i { > i {
@ -150,13 +153,13 @@
} }
} }
&.rc-steps-init, &.rc-steps-init.rc-steps-small { &.@{stepsPrefixClass}-init, &.@{stepsPrefixClass}-init.@{stepsPrefixClass}-small {
.rc-steps-tail { .@{stepsPrefixClass}-tail {
padding: 0; padding: 0;
} }
} }
&.rc-steps-small .rc-steps-item.rc-steps-custom .rc-steps-head, .rc-steps-item.rc-steps-custom .rc-steps-head { &.@{stepsPrefixClass}-small .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head {
width: inherit; width: inherit;
height: inherit; height: inherit;
line-height: inherit; line-height: inherit;