From d9faa3f31f381b821acaefe7b3befbd43fea5c8f Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Sat, 12 Oct 2024 16:53:24 +0800 Subject: [PATCH] fix(link-menu): fix link-menu theme vars --- packages/theme/src/link-menu/index.less | 56 +++++++++++++------------ packages/theme/src/link-menu/vars.less | 32 +++++++------- 2 files changed, 45 insertions(+), 43 deletions(-) diff --git a/packages/theme/src/link-menu/index.less b/packages/theme/src/link-menu/index.less index 935339d2f1..c035d6806d 100644 --- a/packages/theme/src/link-menu/index.less +++ b/packages/theme/src/link-menu/index.less @@ -23,12 +23,12 @@ @svg-prefix-cls: ~'@{css-prefix}svg'; .@{link-menu-prefix-cls} { - .component-css-vars-link-menu(); + .inject-LinkMenu-vars(); &__nav &__nav-item { - color: var(--tv-Link-menu-nav-item-text-color); - font-size: var(--tv-Link-menu-item-font-size); - border-right: 1px solid var(--tv-Link-menu-nav-item-border-color); + color: var(--tv-LinkMenu-nav-item-text-color); + font-size: var(--tv-LinkMenu-item-font-size); + border-right: 1px solid var(--tv-LinkMenu-nav-item-border-color); padding: 0 8px; line-height: 1; display: inline-block; @@ -40,7 +40,7 @@ cursor: pointer; .@{svg-prefix-cls} { - fill: var(--tv-Link-menu-nav-item-text-color); + fill: var(--tv-LinkMenu-nav-item-text-color); margin-right: 4px; } @@ -52,14 +52,16 @@ .tiny-dialog-box__wrapper { .tiny-dialog-box__header { - padding: 32px 32px 16px; + padding: 32px 32px 16px; } + .tiny-dialog-box__body { .tiny-link-menu__filert { .tiny-input { width: 100%; } } + .tiny-tree { padding: 16px 8px; } @@ -67,8 +69,8 @@ } &__nav { - color: var(--tv-Link-menu-btn-text-color); - background: var(--tv-Link-menu-btn-bg-color); + color: var(--tv-LinkMenu-btn-text-color); + background: var(--tv-LinkMenu-btn-bg-color); padding: 0 8px; line-height: 1; outline: 0; @@ -76,7 +78,7 @@ cursor: pointer; .@{svg-prefix-cls} { - fill: var(--tv-Link-menu-nav-item-text-color); + fill: var(--tv-LinkMenu-nav-item-text-color); font-size: var(--ti-common-font-size-3); } } @@ -84,12 +86,12 @@ &__btn { width: 32px; height: 32px; - border-radius: var(--tv-Link-menu-btn-border-radius); - border: 1px solid var(--tv-Link-menu-btn-border-color); - background: var(--tv-Link-menu-btn-bg-color); + border-radius: var(--tv-LinkMenu-btn-border-radius); + border: 1px solid var(--tv-LinkMenu-btn-border-color); + background: var(--tv-LinkMenu-btn-bg-color); .@{svg-prefix-cls} { - fill: var(--tv-Link-menu-nav-item-text-color); - font-size: var(--tv-Link-menu-btn-size); + fill: var(--tv-LinkMenu-nav-item-text-color); + font-size: var(--tv-LinkMenu-btn-size); } } @@ -98,13 +100,13 @@ margin-bottom: 5px; .@{input-prefix-cls}__inner { - height: var(--tv-Link-menu-input-height); - line-height: var(--tv-Link-menu-input-height); - font-size: var(--tv-Link-menu-input-font-size); - color: var(--tv-Link-menu-input-text-color); - background: var(--tv-Link-menu-btn-bg-color); - border: 1px solid var(--tv-Link-menu-input-border-color); - border-radius: var(--tv-Link-menu-input-border-radius); + height: var(--tv-LinkMenu-input-height); + line-height: var(--tv-LinkMenu-input-height); + font-size: var(--tv-LinkMenu-input-font-size); + color: var(--tv-LinkMenu-input-text-color); + background: var(--tv-LinkMenu-btn-bg-color); + border: 1px solid var(--tv-LinkMenu-input-border-color); + border-radius: var(--tv-LinkMenu-input-border-radius); padding: 0 8px; display: block; white-space: nowrap; @@ -131,16 +133,16 @@ } .tree-node-name { - color: var(--tv-Link-menu-tree-node-text-color); - font-size: var(--tv-Link-menu-input-font-size); - border-radius: var(--tv-Link-menu-input-border-radius); + color: var(--tv-LinkMenu-tree-node-text-color); + font-size: var(--tv-LinkMenu-input-font-size); + border-radius: var(--tv-LinkMenu-input-border-radius); padding-left: 4px; vertical-align: middle; } &.is-focusable { .tree-node-name { - color: var(--tv-Link-menu-input-text-color); + color: var(--tv-LinkMenu-input-text-color); } } } @@ -168,8 +170,8 @@ .tree-node-icon { svg.tiny-svg { - width: var(--tv-Link-menu-icon-size); - height: var(--tv-Link-menu-icon-size); + width: var(--tv-LinkMenu-icon-size); + height: var(--tv-LinkMenu-icon-size); } } diff --git a/packages/theme/src/link-menu/vars.less b/packages/theme/src/link-menu/vars.less index 0374ebe35b..7ee47ef9ce 100644 --- a/packages/theme/src/link-menu/vars.less +++ b/packages/theme/src/link-menu/vars.less @@ -10,35 +10,35 @@ * */ -.component-css-vars-link-menu() { +.inject-LinkMenu-vars() { // 收藏夹设置按钮图标色(和取消按钮文本色) - --tv-Link-menu-nav-item-text-color: var(--tv-color-text); + --tv-LinkMenu-nav-item-text-color: var(--tv-color-text); // 收藏夹设置字体大小 - --tv-Link-menu-item-font-size: var(--tv-font-size-md); + --tv-LinkMenu-item-font-size: var(--tv-font-size-md); // 收藏夹菜单导航右边框色 - --tv-Link-menu-nav-item-border-color: var(--tv-color-border); + --tv-LinkMenu-nav-item-border-color: var(--tv-color-border); // 收藏夹菜单按钮文本色 - --tv-Link-menu-btn-text-color: var(--tv-color-info-text); + --tv-LinkMenu-btn-text-color: var(--tv-color-info-text); // 收藏夹设置按钮,弹出框输入框和取消按钮的背景色 - --tv-Link-menu-btn-bg-color: var(--tv-color-info-bg-white); + --tv-LinkMenu-btn-bg-color: var(--tv-color-info-bg-white); // 收藏夹弹出框的输入框高度 - --tv-Link-menu-input-height: var(--tv-size-height-md); + --tv-LinkMenu-input-height: var(--tv-size-height-md); // 收藏夹弹出框字号 - --tv-Link-menu-input-font-size: var(--tv-font-size-md); + --tv-LinkMenu-input-font-size: var(--tv-font-size-md); // 收藏夹弹出框输入框(和列表项非节点)的文本色 - --tv-Link-menu-input-text-color: var(--tv-color-text); + --tv-LinkMenu-input-text-color: var(--tv-color-text); // 收藏夹弹出框的输入框和取消按钮边框色 - --tv-Link-menu-input-border-color: var(--tv-color-border); + --tv-LinkMenu-input-border-color: var(--tv-color-border); // 收藏夹弹出框的输入框圆角 - --tv-Link-menu-input-border-radius: var(--tv-border-radius-md); + --tv-LinkMenu-input-border-radius: var(--tv-border-radius-md); // 收藏夹弹出框列表项的节点文本色 - --tv-Link-menu-tree-node-text-color: var(--tv-color-border); + --tv-LinkMenu-tree-node-text-color: var(--tv-color-border); // 按钮边框颜色 - --tv-Link-menu-btn-border-color: var(--tv-color-border); + --tv-LinkMenu-btn-border-color: var(--tv-color-border); // 按钮圆角 - --tv-Link-menu-btn-border-radius: var(--tv-border-radius-md); + --tv-LinkMenu-btn-border-radius: var(--tv-border-radius-md); // 按钮大小 - --tv-Link-menu-btn-size: var(--tv-font-size-lg); + --tv-LinkMenu-btn-size: var(--tv-font-size-lg); // 图标大小 - --tv-Link-menu-icon-size: var(--tv-icon-size); + --tv-LinkMenu-icon-size: var(--tv-icon-size); }