loading button should not be transparent

This commit is contained in:
afc163 2016-04-15 16:21:08 +08:00
parent 403bf41e82
commit cc2f93a4e1
2 changed files with 23 additions and 4 deletions

View File

@ -24,15 +24,15 @@ const App = React.createClass({
render() { render() {
return ( return (
<div> <div>
<Button type="primary" size="large" loading>
加载中
</Button>
<Button type="primary" loading> <Button type="primary" loading>
加载中 加载中
</Button> </Button>
<Button type="primary" size="small" loading> <Button type="primary" size="small" loading>
加载中 加载中
</Button> </Button>
<Button loading>
加载中
</Button>
<br /> <br />
<Button type="primary" loading={this.state.loading} onClick={this.enterLoading}> <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
点击变加载 点击变加载

View File

@ -46,6 +46,22 @@
.btn-circle(@btn-prefix-cls); .btn-circle(@btn-prefix-cls);
} }
&:before {
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
background: #fff;
opacity: 0.35;
content: '';
border-radius: inherit;
z-index: 1;
transition: opacity .2s;
pointer-events: none;
display: none;
}
&:after { &:after {
font-family: anticon; font-family: anticon;
content: "\e6a1"; content: "\e6a1";
@ -58,11 +74,14 @@
&&-loading { &&-loading {
padding-left: 29px; padding-left: 29px;
pointer-events: none; pointer-events: none;
opacity: 0.75; position: relative;
.anticon { .anticon {
margin-left: -14px; margin-left: -14px;
.transition(all .3s @ease-in-out); .transition(all .3s @ease-in-out);
} }
&:before {
display: block;
}
} }
&-sm&-loading { &-sm&-loading {