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 ButtonGroup style bug when have disabled button, close #9296

Browse Source
This commit is contained in:
afc163 2018-02-08 15:51:53 +08:00
parent 6577616be2
commit 70f3afeda0
3 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/button/demo/button-group.md
View File

@ -18,14 +18,14 @@ Buttons can be grouped by placing multiple `Button` components into a `Button.Gr
The `size` can be set to `large`, `small` or left unset resulting in a default size.
````jsx
import { Button, Icon } from 'antd';
import { Button, Icon, Tooltip } from 'antd';
const ButtonGroup = Button.Group;
ReactDOM.render(
<div>
<h4>Basic</h4>
<ButtonGroup>
<Button>Cancel</Button>
<Tooltip title="xxx"><Button disabled>Cancel</Button></Tooltip>
<Button>OK</Button>
</ButtonGroup>
<ButtonGroup>

3
components/button/index.en-US.md
View File

@ -36,7 +36,8 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
margin-right: 8px;
margin-bottom: 12px;
}
[id^=components-button-demo-] .ant-btn-group > .ant-btn {
[id^=components-button-demo-] .ant-btn-group > .ant-btn,
[id^=components-button-demo-] .ant-btn-group > span > .ant-btn {
margin-right: 0;
}
</style>

18
components/button/style/mixin.less
View File

@ -241,6 +241,8 @@
.@{btnClassName} + .@{btnClassName},
.@{btnClassName} + &,
span + .@{btnClassName},
.@{btnClassName} + span,
& + .@{btnClassName},
& + & {
margin-left: -1px;
@ -250,15 +252,19 @@
border-radius: 0;
}
> .@{btnClassName}:first-child {
> .@{btnClassName}:first-child,
> span:first-child > .@{btnClassName} {
margin-left: 0;
&:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}
> .@{btnClassName}:last-child:not(:first-child) {
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}