fix: arrow compatibility (#36266)

* fix: arrow campatibility

* chore: code clean

* chore: rm useless style

* chore: code clean

* fix: use inset

* chore: bundlesize optimization

* chore: rm useless style

* chore: rm useless style
This commit is contained in:
MadCcc 2022-06-30 11:11:01 +08:00 committed by GitHub
parent 33400eee8f
commit 42e030edd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 1 additions and 12 deletions

View File

@ -322,11 +322,6 @@
width: @arrow-size;
height: @arrow-size;
margin-left: @input-padding-horizontal-base * 1.5;
background: linear-gradient(
135deg,
transparent 40%,
@calendar-bg 40%
); // Use linear-gradient to prevent arrow from covering text
box-shadow: 2px 2px 6px -2px fade(@black, 10%); // use spread radius to hide shadow over popover
transition: left @animation-duration-slow ease-out;
.roundedArrow(@arrow-size, 5px, @calendar-bg);

View File

@ -70,11 +70,6 @@
display: block;
width: @popover-arrow-width;
height: @popover-arrow-width;
background: linear-gradient(
135deg,
transparent 40%,
@popover-bg 40%
); // Use linear-gradient to prevent arrow from covering text
.roundedArrow(@popover-arrow-width, 5px, @popover-bg);
}

View File

@ -139,7 +139,6 @@
width: @popover-arrow-width;
height: @popover-arrow-width;
margin: auto;
background-color: @popover-bg;
content: '';
pointer-events: auto;
.roundedArrow(@popover-arrow-width, 5px);

View File

@ -36,6 +36,7 @@
background-repeat: no-repeat;
background-position: ceil(-@width + 1px) ceil(-@width + 1px);
content: '';
clip-path: inset(33% 33%); // For browsers that do not support path()
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} L @{g-x} @{g-y} L @{h-x} @{h-y} Z'
);

View File

@ -97,7 +97,6 @@
width: @tooltip-arrow-width;
height: @tooltip-arrow-width;
margin: auto;
background-color: transparent;
content: '';
pointer-events: auto;
.roundedArrow(@tooltip-arrow-width, 5px);