mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

Tweak popover arrow style

Browse Source
This commit is contained in:
afc163 2017-10-19 16:00:24 +08:00
parent ca3835bf58
commit 7c8702ec61
2 changed files with 17 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
components/popover/style/index.less
View File

@ -110,31 +110,21 @@
} }
&-arrow { &-arrow {
border-width: @popover-arrow-outer-width; background: @popover-bg;
} width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
&-arrow:after { transform: rotate(45deg);
border-width: @popover-arrow-width;
content: "";
} }
&-placement-top > &-content > &-arrow, &-placement-top > &-content > &-arrow,
&-placement-topLeft > &-content > &-arrow, &-placement-topLeft > &-content > &-arrow,
&-placement-topRight > &-content > &-arrow { &-placement-topRight > &-content > &-arrow {
border-bottom-width: 0; bottom: @popover-distance - @popover-arrow-width + 1px;
border-top-color: @popover-arrow-outer-color; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.07);
bottom: @popover-distance - @popover-arrow-outer-width;
&:after {
content: " ";
bottom: 1px;
margin-left: -@popover-arrow-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-color;
}
} }
&-placement-top > &-content > &-arrow { &-placement-top > &-content > &-arrow {
left: 50%; left: 50%;
margin-left: -@popover-arrow-outer-width; margin-left: -@popover-arrow-width;
} }
&-placement-topLeft > &-content > &-arrow { &-placement-topLeft > &-content > &-arrow {
left: 16px; left: 16px;
@ -146,20 +136,12 @@
&-placement-right > &-content > &-arrow, &-placement-right > &-content > &-arrow,
&-placement-rightTop > &-content > &-arrow, &-placement-rightTop > &-content > &-arrow,
&-placement-rightBottom > &-content > &-arrow { &-placement-rightBottom > &-content > &-arrow {
left: @popover-distance - @popover-arrow-outer-width; left: @popover-distance - @popover-arrow-width + 1px;
border-left-width: 0; box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.08);
border-right-color: @popover-arrow-outer-color;
&:after {
content: " ";
left: 1px;
bottom: -@popover-arrow-width;
border-left-width: 0;
border-right-color: @popover-arrow-color;
}
} }
&-placement-right > &-content > &-arrow { &-placement-right > &-content > &-arrow {
top: 50%; top: 50%;
margin-top: -@popover-arrow-outer-width; margin-top: -@popover-arrow-width;
} }
&-placement-rightTop > &-content > &-arrow { &-placement-rightTop > &-content > &-arrow {
top: 12px; top: 12px;
@ -171,20 +153,12 @@
&-placement-bottom > &-content > &-arrow, &-placement-bottom > &-content > &-arrow,
&-placement-bottomLeft > &-content > &-arrow, &-placement-bottomLeft > &-content > &-arrow,
&-placement-bottomRight > &-content > &-arrow { &-placement-bottomRight > &-content > &-arrow {
border-top-width: 0; top: @popover-distance - @popover-arrow-width + 1px;
border-bottom-color: @popover-arrow-outer-color; box-shadow: -3px -3px 6px rgba(0, 0, 0, 0.08);
top: @popover-distance - @popover-arrow-outer-width;
&:after {
content: " ";
top: 1px;
margin-left: -@popover-arrow-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-color;
}
} }
&-placement-bottom > &-content > &-arrow { &-placement-bottom > &-content > &-arrow {
left: 50%; left: 50%;
margin-left: -@popover-arrow-outer-width; margin-left: -@popover-arrow-width;
} }
&-placement-bottomLeft > &-content > &-arrow { &-placement-bottomLeft > &-content > &-arrow {
left: 16px; left: 16px;
@ -196,20 +170,12 @@
&-placement-left > &-content > &-arrow, &-placement-left > &-content > &-arrow,
&-placement-leftTop > &-content > &-arrow, &-placement-leftTop > &-content > &-arrow,
&-placement-leftBottom > &-content > &-arrow { &-placement-leftBottom > &-content > &-arrow {
right: @popover-distance - @popover-arrow-outer-width; right: @popover-distance - @popover-arrow-width + 1px;
border-right-width: 0; box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.08);
border-left-color: @popover-arrow-outer-color;
&:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: @popover-arrow-color;
bottom: -@popover-arrow-width;
}
} }
&-placement-left > &-content > &-arrow { &-placement-left > &-content > &-arrow {
top: 50%; top: 50%;
margin-top: -@popover-arrow-outer-width; margin-top: -@popover-arrow-width;
} }
&-placement-leftTop > &-content > &-arrow { &-placement-leftTop > &-content > &-arrow {
top: 12px; top: 12px;

3
components/style/themes/default.less
View File

@ -283,9 +283,8 @@
//** Popover arrow color //** Popover arrow color
@popover-arrow-color: @popover-bg; @popover-arrow-color: @popover-bg;
//** Popover outer arrow width //** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1px);
//** Popover outer arrow color //** Popover outer arrow color
@popover-arrow-outer-color: fadeout(@border-color-base, 50%); @popover-arrow-outer-color: @popover-bg;
//** Popover distance with trigger //** Popover distance with trigger
@popover-distance: @popover-arrow-width + 4px; @popover-distance: @popover-arrow-width + 4px;