mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-27 23:12:16 +08:00
Code Issues Actions 24 Packages Projects Releases Wiki Activity

Fix popover and popconfirm arrow style

Browse Source
This commit is contained in:
afc163 2016-03-17 15:10:49 +08:00
parent ab04ce30f7
commit 6c913d7ebe
3 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/popconfirm/index.jsx
View File

@ -67,7 +67,7 @@ export default React.createClass({
const { title, okText, cancelText, placement, overlayStyle, trigger, ...restProps } = this.props; const { title, okText, cancelText, placement, overlayStyle, trigger, ...restProps } = this.props;
const overlay = ( const overlay = (
<div> <div>
<div className={`${prefixCls}-content`}> <div className={`${prefixCls}-inner-content`}>
<div className={`${prefixCls}-message`}> <div className={`${prefixCls}-message`}>
<Icon type="exclamation-circle" /> <Icon type="exclamation-circle" />
<div className={`${prefixCls}-message-title`}>{title}</div> <div className={`${prefixCls}-message-title`}>{title}</div>

2
components/popover/index.jsx
View File

@ -52,7 +52,7 @@ const Popover = React.createClass({
return ( return (
<div> <div>
{this.props.title && <div className={`${prefixCls}-title`}>{this.props.title}</div>} {this.props.title && <div className={`${prefixCls}-title`}>{this.props.title}</div>}
<div className={`${prefixCls}-content`}> <div className={`${prefixCls}-inner-content`}>
{this.props.overlay} {this.props.overlay}
</div> </div>
</div> </div>

50
style/components/popover.less
View File

@ -93,7 +93,7 @@
color: #666; color: #666;
} }
&-content { &-inner-content {
padding: 8px 16px; padding: 8px 16px;
color: @text-color; color: @text-color;
} }
@ -143,9 +143,9 @@
content: ""; content: "";
} }
&-placement-top > &-arrow, &-placement-top &-arrow,
&-placement-topLeft > &-arrow, &-placement-topLeft &-arrow,
&-placement-topRight > &-arrow { &-placement-topRight &-arrow {
border-bottom-width: 0; border-bottom-width: 0;
border-top-color: @popover-arrow-outer-color; border-top-color: @popover-arrow-outer-color;
bottom: 0; bottom: 0;
@ -157,20 +157,20 @@
border-top-color: @popover-arrow-color; border-top-color: @popover-arrow-color;
} }
} }
&-placement-top > &-arrow { &-placement-top &-arrow {
left: 50%; left: 50%;
margin-left: -@popover-arrow-outer-width; margin-left: -@popover-arrow-outer-width;
} }
&-placement-topLeft > &-arrow { &-placement-topLeft &-arrow {
left: 16px; left: 16px;
} }
&-placement-topRight > &-arrow { &-placement-topRight &-arrow {
right: 16px; right: 16px;
} }
&-placement-right > &-arrow, &-placement-right &-arrow,
&-placement-rightTop > &-arrow, &-placement-rightTop &-arrow,
&-placement-rightBottom > &-arrow { &-placement-rightBottom &-arrow {
left: 0; left: 0;
border-left-width: 0; border-left-width: 0;
border-right-color: @popover-arrow-outer-color; border-right-color: @popover-arrow-outer-color;
@ -182,20 +182,20 @@
border-right-color: @popover-arrow-color; border-right-color: @popover-arrow-color;
} }
} }
&-placement-right > &-arrow { &-placement-right &-arrow {
top: 50%; top: 50%;
margin-top: -@popover-arrow-outer-width; margin-top: -@popover-arrow-outer-width;
} }
&-placement-rightTop > &-arrow { &-placement-rightTop &-arrow {
top: 12px; top: 12px;
} }
&-placement-rightBottom > &-arrow { &-placement-rightBottom &-arrow {
bottom: 12px; bottom: 12px;
} }
&-placement-bottom > &-arrow, &-placement-bottom &-arrow,
&-placement-bottomLeft > &-arrow, &-placement-bottomLeft &-arrow,
&-placement-bottomRight > &-arrow { &-placement-bottomRight &-arrow {
border-top-width: 0; border-top-width: 0;
border-bottom-color: @popover-arrow-outer-color; border-bottom-color: @popover-arrow-outer-color;
top: 0; top: 0;
@ -207,20 +207,20 @@
border-bottom-color: @popover-arrow-color; border-bottom-color: @popover-arrow-color;
} }
} }
&-placement-bottom > &-arrow { &-placement-bottom &-arrow {
left: 50%; left: 50%;
margin-left: -@popover-arrow-outer-width; margin-left: -@popover-arrow-outer-width;
} }
&-placement-bottomLeft > &-arrow { &-placement-bottomLeft &-arrow {
left: 16px; left: 16px;
} }
&-placement-bottomRight > &-arrow { &-placement-bottomRight &-arrow {
right: 16px; right: 16px;
} }
&-placement-left > &-arrow, &-placement-left &-arrow,
&-placement-leftTop > &-arrow, &-placement-leftTop &-arrow,
&-placement-leftBottom > &-arrow { &-placement-leftBottom &-arrow {
right: 0; right: 0;
border-right-width: 0; border-right-width: 0;
border-left-color: @popover-arrow-outer-color; border-left-color: @popover-arrow-outer-color;
@ -232,14 +232,14 @@
bottom: -@popover-arrow-width; bottom: -@popover-arrow-width;
} }
} }
&-placement-left > &-arrow { &-placement-left &-arrow {
top: 50%; top: 50%;
margin-top: -@popover-arrow-outer-width; margin-top: -@popover-arrow-outer-width;
} }
&-placement-leftTop > &-arrow { &-placement-leftTop &-arrow {
top: 12px; top: 12px;
} }
&-placement-leftBottom > &-arrow { &-placement-leftBottom &-arrow {
bottom: 12px; bottom: 12px;
} }
} }