From 67cc32b1998ef8709cd573c7e24db6468d539a05 Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Mon, 28 Oct 2024 04:49:35 -0700 Subject: [PATCH 1/3] fix(popper-arrow): fix arrow's z-index, and remove popper-arrow class from popover,dropdown --- packages/theme/src/base/reset.less | 59 +++++++++--- packages/theme/src/dropdown-menu/index.less | 99 --------------------- packages/theme/src/popover/index.less | 99 --------------------- packages/theme/src/tooltip/index.less | 50 ++--------- packages/theme/src/tooltip/vars.less | 4 +- 5 files changed, 55 insertions(+), 256 deletions(-) diff --git a/packages/theme/src/base/reset.less b/packages/theme/src/base/reset.less index ffd6b6e4ae..1b2f490cdc 100644 --- a/packages/theme/src/base/reset.less +++ b/packages/theme/src/base/reset.less @@ -152,18 +152,6 @@ display: none; } - .popper__arrow { - &, - &:after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } - } - @media (min-width: 768px) { ::-webkit-scrollbar { width: var(--tv-size-scrollbar-width); @@ -188,3 +176,50 @@ } } } + +.tiny-popper, +.tiny-tooltip__popper { + .popper__arrow { + position: absolute; + display: block; + // 原来是用border来模拟三角形的，现在是通过div模拟，所以将border-width赋值给div的width. + width: 12px; + height: 20px; + background-color: #fff; // popover,dropdown 都是只有白色。 tooltip的颜色是自己覆盖的 + transform: rotateZ(45deg); + border-radius: 2px; + z-index: -1; + } + + &[x-placement^='top'] { + margin-bottom: 12px; + + .popper__arrow { + bottom: -7px; + } + } + + &[x-placement^='bottom'] { + margin-top: 12px; + + .popper__arrow { + top: -7px; + } + } + + &[x-placement^='right'] { + margin-left: 12px; + + .popper__arrow { + left: -3px; + } + } + + &[x-placement^='left'] { + margin-right: 12px; + + .popper__arrow { + right: -3px; + } + } +} diff --git a/packages/theme/src/dropdown-menu/index.less b/packages/theme/src/dropdown-menu/index.less index 4e7eb85d1f..48ee15bc95 100644 --- a/packages/theme/src/dropdown-menu/index.less +++ b/packages/theme/src/dropdown-menu/index.less @@ -45,103 +45,4 @@ margin-left: var(--tv-DropdownItem-label-margin-left); } } - - /* 箭头 */ - &.@{css-prefix}popper .popper__arrow, - &.@{css-prefix}popper .popper__arrow:after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } - - &.@{css-prefix}popper .popper__arrow { - border-width: 8px; - filter: drop-shadow(var(--tv-DropdownMenu-box-shadow)); - } - - &.@{css-prefix}popper .popper__arrow::after { - content: ' '; - border-width: 8px; - } - - &.@{css-prefix}popper[x-placement^='top'] { - &:has(.popper__arrow) { - margin-bottom: 12px; - } - } - - &.@{css-prefix}popper[x-placement^='top'] .popper__arrow { - bottom: -8px; - left: 50%; - margin-right: 3px; - - border-bottom-width: 0; - } - - &.@{css-prefix}popper[x-placement^='top'] .popper__arrow:after { - bottom: 1px; - margin-left: -6px; - border-top-color: #fff; - border-bottom-width: 0; - } - - &.@{css-prefix}popper[x-placement^='bottom'] { - &:has(.popper__arrow) { - margin-top: 12px; - } - } - - &.@{css-prefix}popper[x-placement^='bottom'] .popper__arrow { - top: -8px; - left: 50%; - margin-right: 3px; - border-top-width: 0; - } - - &.@{css-prefix}popper[x-placement^='bottom'] .popper__arrow:after { - top: 1px; - margin-left: -8px; - border-top-width: 0; - border-bottom-color: #fff; - } - - &.@{css-prefix}popper[x-placement^='right'] { - margin-left: 12px; - } - - &.@{css-prefix}popper[x-placement^='right'] .popper__arrow { - top: 50%; - left: -8px; - margin-bottom: 3px; - border-left-width: 0; - } - - &.@{css-prefix}popper[x-placement^='right'] .popper__arrow:after { - bottom: -8px; - left: 1px; - border-right-color: #fff; - border-left-width: 0; - } - - &.@{css-prefix}popper[x-placement^='left'] { - margin-right: 12px; - } - - &.@{css-prefix}popper[x-placement^='left'] .popper__arrow { - top: 50%; - right: -8px; - margin-bottom: 3px; - border-right-width: 0; - } - - &.@{css-prefix}popper[x-placement^='left'] .popper__arrow:after { - right: 1px; - bottom: -8px; - margin-left: -8px; - border-right-width: 0; - border-left-color: #fff; - } } diff --git a/packages/theme/src/popover/index.less b/packages/theme/src/popover/index.less index 6373932416..78c5d52e58 100644 --- a/packages/theme/src/popover/index.less +++ b/packages/theme/src/popover/index.less @@ -32,105 +32,6 @@ box-shadow: var(--tv-Popover-box-shadow); word-break: break-all; - .popper__arrow, - .popper__arrow:after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } - - .popper__arrow, - .@{popper-prefix-cls} .popper__arrow { - border-width: 6px; - -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); - filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); - } - - .popper__arrow:after { - content: ' '; - border-width: 6px; - } - - &[x-placement^='top'] { - margin-bottom: var(--tv-Popover-placement-margin-y); - - .popper__arrow { - bottom: -8px; - left: 50%; - border-top-color: transparent; - border-bottom-width: 0; - border-top-width: 8px; - - &:after { - bottom: 1px; - margin-left: -6px; - border-top-color: var(--tv-Popover-placement-arrow-after-border-color); - border-bottom-width: 0; - } - } - } - - &[x-placement^='bottom'] { - margin-top: var(--tv-Popover-placement-margin-y); - - .popper__arrow { - top: -8px; - left: 50%; - border-top-width: 0; - border-bottom-color: transparent; - border-bottom-width: 8px; - - &:after { - top: 1px; - margin-left: -6px; - border-top-width: 0; - border-bottom-color: var(--tv-Popover-placement-arrow-after-border-color); - } - } - } - - &[x-placement^='right'] { - margin-left: var(--tv-Popover-placement-margin-x); - - .popper__arrow { - top: 50%; - left: -8px; - border-right-color: transparent; - border-left-width: 0; - border-right-width: 8px; - - &:after { - bottom: -6px; - left: 1px; - border-right-color: var(--tv-Popover-placement-arrow-after-border-color); - border-left-width: 0; - } - } - } - - &[x-placement^='left'] { - margin-right: var(--tv-Popover-placement-margin-x); - - .popper__arrow { - top: 50%; - right: -8px; - border-right-width: 0; - border-left-color: transparent; - border-left-width: 8px; - - &:after { - right: 1px; - bottom: -6px; - margin-left: -6px; - border-right-width: 0; - border-left-color: var(--tv-Popover-placement-arrow-after-border-color); - } - } - } - .@{popover-prefix-cls}__plain { padding: 18px 20px; } diff --git a/packages/theme/src/tooltip/index.less b/packages/theme/src/tooltip/index.less index 8281483c39..6c8916c082 100644 --- a/packages/theme/src/tooltip/index.less +++ b/packages/theme/src/tooltip/index.less @@ -44,49 +44,6 @@ word-wrap: break-word; box-shadow: var(--tv-Tooltip-box-shadow); - .popper__arrow { - position: absolute; - display: block; - // 原来是用border来模拟三角形的，现在是通过div模拟，所以将border-width赋值给div的width. - width: 12px; - height: 20px; - background-color: var(--tv-Tooltip-popper-border-color); - transform: rotateZ(45deg); - border-radius: 2px; - } - - &[x-placement^='top'] { - margin-bottom: 12px; - - .popper__arrow { - bottom: -7px; - } - } - - &[x-placement^='bottom'] { - margin-top: 12px; - - .popper__arrow { - top: -7px; - } - } - - &[x-placement^='right'] { - margin-left: 12px; - - .popper__arrow { - left: -3px; - } - } - - &[x-placement^='left'] { - margin-right: 12px; - - .popper__arrow { - right: -3px; - } - } - &.is-normal { .tooltip-type( var(--tv-Tooltip-popper-normal-text-color), @@ -133,8 +90,11 @@ } &.is-dark { - background: var(--tv-Tooltip-popper-dark-bg-color); - color: var(--tv-Tooltip-popper-dark-text-color); + .tooltip-type( + var(--tv-Tooltip-popper-dark-text-color), + var(--tv-Tooltip-popper-dark-bg-color), + var(--tv-Tooltip-popper-dark-border-color) + ); } &.is-light { diff --git a/packages/theme/src/tooltip/vars.less b/packages/theme/src/tooltip/vars.less index 11579f9843..882ecc9e1c 100644 --- a/packages/theme/src/tooltip/vars.less +++ b/packages/theme/src/tooltip/vars.less @@ -59,9 +59,11 @@ --tv-Tooltip-popper-dark-bg-color: var(--tv-color-bg-primary); // dark主题弹框文本色 --tv-Tooltip-popper-dark-text-color: var(--tv-color-text-white); + // dark主题|禁用时弹框边框色 + --tv-Tooltip-popper-dark-border-color: var(--tv-color-border-hover); + // light主题弹框背景色 --tv-Tooltip-popper-light-bg-color: var(--tv-color-bg-secondary); - // light主题|禁用弹框文本色 --tv-Tooltip-popper-light-text-color: var(--tv-color-text); // light主题|禁用时弹框边框色 From 3bd3978f7a636219cb4d551170d133c46ac4a421 Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Mon, 28 Oct 2024 04:58:12 -0700 Subject: [PATCH 2/3] fix(popover): remove extra cssvars --- packages/theme/src/popover/vars.less | 6 ------ packages/theme/src/tooltip/vars.less | 2 -- 2 files changed, 8 deletions(-) diff --git a/packages/theme/src/popover/vars.less b/packages/theme/src/popover/vars.less index f9a50a84c5..e0dd2ceea8 100644 --- a/packages/theme/src/popover/vars.less +++ b/packages/theme/src/popover/vars.less @@ -27,12 +27,6 @@ --tv-Popover-title-font-size: var(--tv-font-size-lg); // 弹框标题字重 --tv-Popover-title-weight: var(--tv-font-weight-bold); - // 弹出框垂直外边距 - --tv-Popover-placement-margin-y: var(--tv-space-lg); - // 弹出框小箭头水平外边距 - --tv-Popover-placement-margin-x: var(--tv-space-lg); - // 弹框小箭头填充色 - --tv-Popover-placement-arrow-after-border-color: var(--tv-color-bg-secondary); // 弹框阴影 --tv-Popover-box-shadow: var(--tv-shadow-2-down); // 弹框垂直内边距 diff --git a/packages/theme/src/tooltip/vars.less b/packages/theme/src/tooltip/vars.less index 882ecc9e1c..409abdc48e 100644 --- a/packages/theme/src/tooltip/vars.less +++ b/packages/theme/src/tooltip/vars.less @@ -11,8 +11,6 @@ */ .inject-Tooltip-vars() { - // 弹框三角默认边框色 - --tv-Tooltip-popper-border-color: var(--tv-color-border-active); // 弹框字体行高 --tv-Tooltip-popper-font-line-height: var(--tv-line-height-number); // 悬浮弹出框圆角 From 3f99538c7775cc80dec487d415dfe8f237b04306 Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Mon, 28 Oct 2024 05:08:18 -0700 Subject: [PATCH 3/3] fix(user-contact): add margin:8px --- packages/theme/src/user-contact/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/src/user-contact/index.less b/packages/theme/src/user-contact/index.less index 643a20edc7..7753207359 100644 --- a/packages/theme/src/user-contact/index.less +++ b/packages/theme/src/user-contact/index.less @@ -102,7 +102,7 @@ & &__role { display: inline-block; color: var(--tv-UserContact-role-info-text-color); - margin-left: 0; + margin-left: 8px; vertical-align: middle; font-size: var(--tv-UserContact-role-info-font-size); line-height: 1.5;