test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 03:29:39 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

Fix tooltip & popover arrow position

Browse Source
This commit is contained in:
afc163 2016-02-24 13:57:33 +08:00
parent 4ed16b3d5c
commit 06591077d3
2 changed files with 36 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
style/components/popover.less
View File

@ -147,8 +147,6 @@
&-placement-top > &-arrow,
&-placement-topLeft > &-arrow,
&-placement-topRight > &-arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-outer-color;
bottom: @popover-distance - @popover-arrow-outer-width + 1;
@ -160,19 +158,20 @@
border-top-color: @popover-arrow-color;
}
}
&-placement-top > &-arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
}
&-placement-topLeft > &-arrow {
left: 15%;
left: 16px;
}
&-placement-topRight > &-arrow {
left: 85%;
right: 16px;
}
&-placement-right > &-arrow,
&-placement-rightTop > &-arrow,
&-placement-rightBottom > &-arrow {
top: 50%;
left: @popover-distance - @popover-arrow-outer-width + 1;
margin-top: -@popover-arrow-outer-width;
border-left-width: 0;
border-right-color: @popover-arrow-outer-color;
&:after {
@ -183,18 +182,20 @@
border-right-color: @popover-arrow-color;
}
}
&-placement-right > &-arrow {
top: 50%;
margin-top: -@popover-arrow-outer-width;
}
&-placement-rightTop > &-arrow {
top: 15%;
top: 12px;
}
&-placement-rightBottom > &-arrow {
top: 85%;
bottom: 12px;
}
&-placement-bottom > &-arrow,
&-placement-bottomLeft > &-arrow,
&-placement-bottomRight > &-arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-outer-color;
top: @popover-distance - @popover-arrow-outer-width + 1;
@ -206,19 +207,21 @@
border-bottom-color: @popover-arrow-color;
}
}
&-placement-bottom > &-arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
}
&-placement-bottomLeft > &-arrow {
left: 15%;
left: 16px;
}
&-placement-bottomRight > &-arrow {
left: 85%;
right: 16px;
}
&-placement-left > &-arrow,
&-placement-leftTop > &-arrow,
&-placement-leftBottom > &-arrow {
top: 50%;
right: @popover-distance - @popover-arrow-outer-width + 1;
margin-top: -@popover-arrow-outer-width;
border-right-width: 0;
border-left-color: @popover-arrow-outer-color;
&:after {
@ -229,11 +232,14 @@
bottom: -@popover-arrow-width;
}
}
&-placement-left > &-arrow {
top: 50%;
margin-top: -@popover-arrow-outer-width;
}
&-placement-leftTop > &-arrow {
top: 15%;
top: 12px;
}
&-placement-leftBottom > &-arrow {
top: 85%;
bottom: 12px;
}
}

26
style/components/tooltip.less
View File

@ -87,85 +87,83 @@
&-placement-topLeft &-arrow,
&-placement-topRight &-arrow {
bottom: @tooltip-distance - @tooltip-arrow-width;
margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&-placement-top &-arrow {
left: 50%;
margin-left: -@tooltip-arrow-width;
}
&-placement-topLeft &-arrow {
left: 15%;
left: 16px;
}
&-placement-topRight &-arrow {
right: 15%;
right: 16px;
}
&-placement-right &-arrow,
&-placement-rightTop &-arrow,
&-placement-rightBottom &-arrow {
left: @tooltip-distance - @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-arrow-color;
}
&-placement-right &-arrow {
top: 50%;
margin-top: -@tooltip-arrow-width;
}
&-placement-rightTop &-arrow {
top: 15%;
margin-top: 0;
top: 8px;
}
&-placement-rightBottom &-arrow {
bottom: 15%;
bottom: 8px;
}
&-placement-left &-arrow,
&-placement-leftTop &-arrow,
&-placement-leftBottom &-arrow {
right: @tooltip-distance - @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-arrow-color;
}
&-placement-left &-arrow {
top: 50%;
margin-top: -@tooltip-arrow-width;
}
&-placement-leftTop &-arrow {
top: 15%;
margin-top: 0;
top: 8px;
}
&-placement-leftBottom &-arrow {
bottom: 15%;
bottom: 8px;
}
&-placement-bottom &-arrow,
&-placement-bottomLeft &-arrow,
&-placement-bottomRight &-arrow {
top: @tooltip-distance - @tooltip-arrow-width;
margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
&-placement-bottom &-arrow {
left: 50%;
margin-left: -@tooltip-arrow-width;
}
&-placement-bottomLeft &-arrow {
left: 15%;
left: 16px;
}
&-placement-bottomRight &-arrow {
right: 15%;
right: 16px;
}
}