mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix: arrow style (#35401)

Browse Source 
* fix: arrow style

* fix: raise arrow z-index

* fix: fix defualt arrow color

* fix: mix shadow

* chore: code clean

* chore: code clean

* fix: use fadeout instead

* test: fix style lint
This commit is contained in:
MadCcc 2022-05-07 12:04:46 +08:00 committed by GitHub
parent 9b56ad86fb
commit 7873bf7f1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.stylelintrc.json
View File

@ -13,6 +13,7 @@
{
"ignoreFunctions": [
"fade",
"fadeout",
"tint",
"darken",
"ceil",

12
components/style/mixins/rounded-arrow.less
View File

@ -17,6 +17,10 @@
@e-y: @f-y + @outer-radius-without-unit * (1 / sqrt(2));
@f-x: 2 * @width-without-unit + @corner-height;
@f-y: @width-without-unit - @corner-height;
@g-x: @f-x - 1;
@g-y: @f-y;
@h-x: @a-x;
@h-y: @a-y - 1;
border-radius: 0 0 @arrow-border-radius;
pointer-events: none;
@ -27,11 +31,13 @@
left: -@width;
width: @width * 3;
height: @width * 3;
background: linear-gradient(to left, @bg-color 50%, @bg-color 50%) no-repeat ceil(-@width + 1px)
ceil(-@width + 1px); // Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825
background: @bg-color;
// Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825
background-repeat: no-repeat;
background-position: ceil(-@width + 1px) ceil(-@width + 1px);
content: '';
clip-path: path(
'M @{a-x} @{a-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{b-x} @{b-y} L @{c-x} @{c-y} A @{inner-radius-without-unit} @{inner-radius-without-unit} 0 0 0 @{d-x} @{d-y} L @{e-x} @{e-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{f-x} @{f-y} Z'
'M @{a-x} @{a-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{b-x} @{b-y} L @{c-x} @{c-y} A @{inner-radius-without-unit} @{inner-radius-without-unit} 0 0 0 @{d-x} @{d-y} L @{e-x} @{e-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{f-x} @{f-y} L @{g-x} @{g-y} L @{h-x} @{h-y} Z'
);
}
}

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

@ -23,6 +23,10 @@
max-width: @tooltip-max-width;
visibility: visible;
&-content {
position: relative;
}
&-hidden {
display: none;
}
@ -68,6 +72,7 @@
// Arrows
&-arrow {
position: absolute;
z-index: 2;
display: block;
width: @tooltip-arrow-rotate-width;
height: @tooltip-arrow-rotate-width;
@ -76,7 +81,12 @@
pointer-events: none;
&-content {
--antd-arrow-background-color: @tooltip-bg;
// Use linear gradient to mix box shadow of tooltip inner
--antd-arrow-background-color: linear-gradient(
to right bottom,
fadeout(@tooltip-bg, 10%),
@tooltip-bg
);
position: absolute;
top: 0;
@ -97,7 +107,8 @@
&-placement-top &-arrow,
&-placement-topLeft &-arrow,
&-placement-topRight &-arrow {
bottom: @tooltip-distance - @tooltip-arrow-rotate-width + 0.24px;
bottom: 0;
transform: translateY(100%);
&-content {
box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
@ -107,7 +118,7 @@
&-placement-top &-arrow {
left: 50%;
transform: translateX(-50%);
transform: translateY(100%) translateX(-50%);
}
&-placement-topLeft &-arrow {
@ -121,7 +132,8 @@
&-placement-right &-arrow,
&-placement-rightTop &-arrow,
&-placement-rightBottom &-arrow {
left: @tooltip-distance - @tooltip-arrow-rotate-width + 0.1px;
left: 0;
transform: translateX(-100%);
&-content {
box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
@ -131,7 +143,7 @@
&-placement-right &-arrow {
top: 50%;
transform: translateY(-50%);
transform: translateX(-100%) translateY(-50%);
}
&-placement-rightTop &-arrow {
@ -145,7 +157,8 @@
&-placement-left &-arrow,
&-placement-leftTop &-arrow,
&-placement-leftBottom &-arrow {
right: @tooltip-distance - @tooltip-arrow-rotate-width + 0.08px;
right: 0;
transform: translateX(100%);
&-content {
box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
@ -155,7 +168,7 @@
&-placement-left &-arrow {
top: 50%;
transform: translateY(-50%);
transform: translateX(100%) translateY(-50%);
}
&-placement-leftTop &-arrow {
@ -169,7 +182,8 @@
&-placement-bottom &-arrow,
&-placement-bottomLeft &-arrow,
&-placement-bottomRight &-arrow {
top: @tooltip-distance - @tooltip-arrow-rotate-width + 0.1px;
top: 0;
transform: translateY(-100%);
&-content {
box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
@ -179,7 +193,7 @@
&-placement-bottom &-arrow {
left: 50%;
transform: translateX(-50%);
transform: translateY(-100%) translateX(-50%);
}
&-placement-bottomLeft &-arrow {