Skip to content

Commit

Permalink
fix(link-menu): fix link-menu theme vars
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzcr
zzcr committed Oct 12, 2024
1 parent 98246dd commit d9faa3f
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 43 deletions.
56 changes: 29 additions & 27 deletions packages/theme/src/link-menu/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}

Expand All @@ -52,44 +52,46 @@

.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;
}
}
}

&__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;
border: none;
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);
}
}

&__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);
}
}

Expand All @@ -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;
Expand All @@ -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);
}
}
}
Expand Down Expand Up @@ -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);
}
}

Expand Down
32 changes: 16 additions & 16 deletions packages/theme/src/link-menu/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

0 comments on commit d9faa3f

Please sign in to comment.