From fcb4ed0eca4d30a5120c92da3ec6bf7878b57688 Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Mon, 14 Oct 2024 14:08:59 +0800 Subject: [PATCH] refactor(theme): [popover] refactor popover theme vars --- packages/theme/src/popover/index.less | 84 +++++++++++++-------------- packages/theme/src/popover/vars.less | 46 +++++---------- 2 files changed, 57 insertions(+), 73 deletions(-) diff --git a/packages/theme/src/popover/index.less b/packages/theme/src/popover/index.less index 7fa0122953..6373932416 100644 --- a/packages/theme/src/popover/index.less +++ b/packages/theme/src/popover/index.less @@ -17,25 +17,23 @@ @popper-prefix-cls: ~'@{css-prefix}popper'; .@{popover-prefix-cls}.@{popper-prefix-cls} { - .component-css-vars-popover(); + .inject-Popover-vars(); position: absolute; - background: var(--ti-popover-bg-color); - color: var(--ti-popover-text-color); - border-radius: var(--ti-popover-border-radius); - border: 1px solid var(--ti-popover-border-color); - padding: var(--ti-popover-padding-vertical) var(--ti-popover-padding-horizontal); + background: var(--tv-Popover-bg-color); + color: var(--tv-Popover-text-color); + border-radius: var(--tv-Popover-border-radius); + border: 1px solid transparent; + padding: var(--tv-Popover-padding-y) var(--tv-Popover-padding-x); z-index: 2000; - line-height: var(--ti-popover-line-height); + line-height: var(--tv-Popover-line-height); text-align: justify; - font-size: var(--ti-popover-font-size); - font-family: var(--ti-popover-font-family); - font-weight: var(--ti-popover-font-weight); - box-shadow: var(--ti-popover-box-shadow); + font-size: var(--tv-Popover-font-size); + box-shadow: var(--tv-Popover-box-shadow); word-break: break-all; .popper__arrow, - .popper__arrow::after { + .popper__arrow:after { position: absolute; display: block; width: 0; @@ -46,89 +44,89 @@ .popper__arrow, .@{popper-prefix-cls} .popper__arrow { - border-width: var(--ti-popover-arrow-border-width); + 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 { + .popper__arrow:after { content: ' '; - border-width: var(--ti-popover-arrow-border-width); + border-width: 6px; } &[x-placement^='top'] { - margin-bottom: var(--ti-popover-placement-margin-vertical); + margin-bottom: var(--tv-Popover-placement-margin-y); .popper__arrow { - bottom: calc(var(--ti-popover-arrow-height) * -1); + bottom: -8px; left: 50%; - border-top-color: var(--ti-popover-arrow-border-color); + border-top-color: transparent; border-bottom-width: 0; - border-top-width: var(--ti-popover-arrow-height); + border-top-width: 8px; - &::after { + &:after { bottom: 1px; margin-left: -6px; - border-top-color: var(--ti-popover-placement-arrow-after-border-color); + border-top-color: var(--tv-Popover-placement-arrow-after-border-color); border-bottom-width: 0; } } } &[x-placement^='bottom'] { - margin-top: var(--ti-popover-placement-margin-vertical); + margin-top: var(--tv-Popover-placement-margin-y); .popper__arrow { - top: calc(var(--ti-popover-arrow-height) * -1); + top: -8px; left: 50%; border-top-width: 0; - border-bottom-color: var(--ti-popover-arrow-border-color); - border-bottom-width: var(--ti-popover-arrow-height); + border-bottom-color: transparent; + border-bottom-width: 8px; - &::after { + &:after { top: 1px; margin-left: -6px; border-top-width: 0; - border-bottom-color: var(--ti-popover-placement-arrow-after-border-color); + border-bottom-color: var(--tv-Popover-placement-arrow-after-border-color); } } } &[x-placement^='right'] { - margin-left: var(--ti-popover-placement-margin-horizontal); + margin-left: var(--tv-Popover-placement-margin-x); .popper__arrow { top: 50%; - left: calc(var(--ti-popover-arrow-height) * -1); - border-right-color: var(--ti-popover-arrow-border-color); + left: -8px; + border-right-color: transparent; border-left-width: 0; - border-right-width: var(--ti-popover-arrow-height); + border-right-width: 8px; - &::after { + &:after { bottom: -6px; left: 1px; - border-right-color: var(--ti-popover-placement-arrow-after-border-color); + border-right-color: var(--tv-Popover-placement-arrow-after-border-color); border-left-width: 0; } } } &[x-placement^='left'] { - margin-right: var(--ti-popover-placement-margin-horizontal); + margin-right: var(--tv-Popover-placement-margin-x); .popper__arrow { top: 50%; - right: calc(var(--ti-popover-arrow-height) * -1); + right: -8px; border-right-width: 0; - border-left-color: var(--ti-popover-arrow-border-color); - border-left-width: var(--ti-popover-arrow-height); + border-left-color: transparent; + border-left-width: 8px; - &::after { + &:after { right: 1px; bottom: -6px; margin-left: -6px; border-right-width: 0; - border-left-color: var(--ti-popover-placement-arrow-after-border-color); + border-left-color: var(--tv-Popover-placement-arrow-after-border-color); } } } @@ -138,11 +136,11 @@ } .@{popover-prefix-cls}__title { - color: var(--ti-popover-title-text-color); - font-size: var(--ti-popover-title-font-size); - font-weight: var(--ti-popover-title-weight); + color: var(--tv-Popover-title-text-color); + font-size: var(--tv-Popover-title-font-size); + font-weight: var(--tv-Popover-title-weight); line-height: 1; - margin-bottom: var(--ti-popover-title-padding-bottom); + margin-bottom: 8px; } &:focus, diff --git a/packages/theme/src/popover/vars.less b/packages/theme/src/popover/vars.less index c059673a48..f9a50a84c5 100644 --- a/packages/theme/src/popover/vars.less +++ b/packages/theme/src/popover/vars.less @@ -10,47 +10,33 @@ * */ -.component-css-vars-popover() { - // 弹框字体 - --ti-popover-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'); - // 弹框字重 - --ti-popover-font-weight: 400; +.inject-Popover-vars() { // 弹框背景色 - --ti-popover-bg-color: var(--ti-common-color-light, #ffffff); + --tv-Popover-bg-color: var(--tv-color-bg-secondary); // 弹框内容文本色 - --ti-popover-text-color: var(--ti-common-color-text-secondary, #595959); - // 弹框边框色 - --ti-popover-border-color: transparent; + --tv-Popover-text-color: var(--tv-color-text-secondary); // 弹框圆角 - --ti-popover-border-radius: var(--ti-common-border-radius-4, 8px); + --tv-Popover-border-radius: var(--tv-border-radius-lg); // 弹框内容字号 - --ti-popover-font-size: 14px; + --tv-Popover-font-size: var(--tv-font-size-md); // 弹框内容行高 - --ti-popover-line-height: 20px; + --tv-Popover-line-height: var(--tv-line-height-number); // 弹框标题文本色 - --ti-popover-title-text-color: var(--ti-common-color-text-primary, #191919); + --tv-Popover-title-text-color: var(--tv-color-text); // 弹框标题字号 - --ti-popover-title-font-size: var(--ti-common-font-size-2, 16px); + --tv-Popover-title-font-size: var(--tv-font-size-lg); // 弹框标题字重 - --ti-popover-title-weight: 600; - // 弹框标题字重 - --ti-popover-title-padding-bottom: 8px; - // 弹出框小箭头边框厚度 - --ti-popover-arrow-border-width: calc(var(--ti-common-border-weight-2, 3px) * 2); - // 弹出框小箭头高度 - --ti-popover-arrow-height: var(--ti-common-space-2x, 8px); + --tv-Popover-title-weight: var(--tv-font-weight-bold); // 弹出框垂直外边距 - --ti-popover-placement-margin-vertical: var(--ti-common-space-3x, 12px); - // 弹出框小箭头水平外边距(hide) - --ti-popover-placement-margin-horizontal: var(--ti-common-space-3x, 12px); + --tv-Popover-placement-margin-y: var(--tv-space-lg); + // 弹出框小箭头水平外边距 + --tv-Popover-placement-margin-x: var(--tv-space-lg); // 弹框小箭头填充色 - --ti-popover-placement-arrow-after-border-color: var(--ti-common-color-light, #ffffff); + --tv-Popover-placement-arrow-after-border-color: var(--tv-color-bg-secondary); // 弹框阴影 - --ti-popover-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.08); - // 弹框小箭头边框色 - --ti-popover-arrow-border-color: transparent; + --tv-Popover-box-shadow: var(--tv-shadow-2-down); // 弹框垂直内边距 - --ti-popover-padding-vertical: var(--ti-common-space-3x, 12px); + --tv-Popover-padding-y: var(--tv-space-lg); // 弹框水平内边距 - --ti-popover-padding-horizontal: var(--ti-common-space-4x, 16px); + --tv-Popover-padding-x: var(--tv-space-xl); }