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 arrows do not fuse in dark (#17740)

Browse Source 
* fix: tooltip arrows do not fuse in dark

* re demo

* fix lint

* re tooltip-distance

* tooltip: use absolute

* Update index.less
This commit is contained in:
jiang 2019-08-02 14:10:18 +08:00 committed by zombieJ
parent 41761f6b85
commit 56309c0ea0
1 changed files with 66 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
components/tooltip/style/index.less
View File

@ -3,6 +3,14 @@
@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';
@tooltip-arrow-shadow-width: 3px;
@tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) +
@tooltip-arrow-shadow-width * 2;
@tooltip-arrow-offset-vertical: 5px; // 8 - 3px
@tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
// Base class
.@{tooltip-prefix-cls} {
.reset-component;
@ -22,16 +30,19 @@
&-placement-topRight {
padding-bottom: @tooltip-distance;
}
&-placement-right,
&-placement-rightTop,
&-placement-rightBottom {
padding-left: @tooltip-distance;
}
&-placement-bottom,
&-placement-bottomLeft,
&-placement-bottomRight {
padding-top: @tooltip-distance;
}
&-placement-left,
&-placement-leftTop,
&-placement-leftBottom {
@ -56,107 +67,121 @@
&-arrow {
position: absolute;
display: block;
width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2);
height: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2);
width: @tooltip-arrow-rotate-width;
height: @tooltip-arrow-rotate-width;
background: transparent;
border-style: solid;
border-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) / 2;
transform: rotate(45deg);
overflow: hidden;
pointer-events: none;
&::before {
width: @tooltip-arrow-width;
height: @tooltip-arrow-width;
content: '';
display: block;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: @tooltip-bg;
position: absolute;
pointer-events: auto;
}
}
&-placement-top &-arrow,
&-placement-topLeft &-arrow,
&-placement-topRight &-arrow {
bottom: @tooltip-distance - @tooltip-arrow-width + 2.2px;
border-top-color: transparent;
border-right-color: tint(fadein(@tooltip-bg, 100%), 25%); // make it not transparent
border-bottom-color: tint(fadein(@tooltip-bg, 100%), 25%); // make it not transparent
border-left-color: transparent;
box-shadow: 3px 3px 7px fade(@black, 7%);
bottom: @tooltip-distance - @tooltip-arrow-rotate-width;
&::before {
transform: translateY(-@tooltip-arrow-rotate-width / 2) rotate(45deg);
box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
}
}
&-placement-top &-arrow {
left: 50%;
transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%);
}
&-placement-topLeft &-arrow {
left: 16px;
left: @tooltip-arrow-offset-horizontal;
}
&-placement-topRight &-arrow {
right: 16px;
right: @tooltip-arrow-offset-horizontal;
}
&-placement-right &-arrow,
&-placement-rightTop &-arrow,
&-placement-rightBottom &-arrow {
left: @tooltip-distance - @tooltip-arrow-width + 2px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: tint(fadein(@tooltip-bg, 100%), 25%);
border-left-color: tint(fadein(@tooltip-bg, 100%), 25%);
box-shadow: -3px 3px 7px fade(@black, 7%);
left: @tooltip-distance - @tooltip-arrow-rotate-width;
&::before {
transform: translateX(@tooltip-arrow-rotate-width / 2) rotate(45deg);
box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
}
}
&-placement-right &-arrow {
top: 50%;
transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%);
}
&-placement-rightTop &-arrow {
top: 8px;
top: @tooltip-arrow-offset-vertical;
}
&-placement-rightBottom &-arrow {
bottom: 8px;
bottom: @tooltip-arrow-offset-vertical;
}
&-placement-left &-arrow,
&-placement-leftTop &-arrow,
&-placement-leftBottom &-arrow {
right: @tooltip-distance - @tooltip-arrow-width + 2px;
border-top-color: tint(fadein(@tooltip-bg, 100%), 25%);
border-right-color: tint(fadein(@tooltip-bg, 100%), 25%);
border-bottom-color: transparent;
border-left-color: transparent;
box-shadow: 3px -3px 7px fade(@black, 7%);
right: @tooltip-distance - @tooltip-arrow-rotate-width;
&::before {
transform: translateX(-@tooltip-arrow-rotate-width / 2) rotate(45deg);
box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
}
}
&-placement-left &-arrow {
top: 50%;
transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%);
}
&-placement-leftTop &-arrow {
top: 8px;
top: @tooltip-arrow-offset-vertical;
}
&-placement-leftBottom &-arrow {
bottom: 8px;
bottom: @tooltip-arrow-offset-vertical;
}
&-placement-bottom &-arrow,
&-placement-bottomLeft &-arrow,
&-placement-bottomRight &-arrow {
top: @tooltip-distance - @tooltip-arrow-width + 2px;
border-top-color: tint(fadein(@tooltip-bg, 100%), 25%);
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: tint(fadein(@tooltip-bg, 100%), 25%);
box-shadow: -2px -2px 5px fade(@black, 6%);
top: @tooltip-distance - @tooltip-arrow-rotate-width;
&::before {
transform: translateY(@tooltip-arrow-rotate-width / 2) rotate(45deg);
box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
}
}
&-placement-bottom &-arrow {
left: 50%;
transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%);
}
&-placement-bottomLeft &-arrow {
left: 16px;
left: @tooltip-arrow-offset-horizontal;
}
&-placement-bottomRight &-arrow {
right: 16px;
right: @tooltip-arrow-offset-horizontal;
}
}