From 56309c0ea00e96dfe676f4aae28896cad026278a Mon Sep 17 00:00:00 2001 From: jiang Date: Fri, 2 Aug 2019 14:10:18 +0800 Subject: [PATCH] fix: tooltip arrows do not fuse in dark (#17740) * fix: tooltip arrows do not fuse in dark * re demo * fix lint * re tooltip-distance * tooltip: use absolute * Update index.less --- components/tooltip/style/index.less | 107 +++++++++++++++++----------- 1 file changed, 66 insertions(+), 41 deletions(-) diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less index e0736df47c..f77c3638c7 100644 --- a/components/tooltip/style/index.less +++ b/components/tooltip/style/index.less @@ -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; } }