Skip to content

Commit 83ac0ee

Browse files
zzcrzzcr
authored
fix(link-menu): fix link-menu theme vars (#2246)
1 parent 513d5ae commit 83ac0ee

File tree

2 files changed

+44
-42
lines changed

2 files changed

+44
-42
lines changed

‎packages/theme/src/link-menu/index.less‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
@svg-prefix-cls: ~'@{css-prefix}svg';
2424

2525
.@{link-menu-prefix-cls} {
26-
.component-css-vars-link-menu();
26+
.inject-LinkMenu-vars();
2727

2828
&__nav &__nav-item {
29-
color: var(--tv-Link-menu-nav-item-text-color);
30-
font-size: var(--tv-Link-menu-item-font-size);
31-
border-right: 1px solid var(--tv-Link-menu-nav-item-border-color);
29+
color: var(--tv-LinkMenu-nav-item-text-color);
30+
font-size: var(--tv-LinkMenu-item-font-size);
31+
border-right: 1px solid var(--tv-LinkMenu-nav-item-border-color);
3232
padding: 0 8px;
3333
line-height: 1;
3434
display: inline-block;
@@ -40,7 +40,7 @@
4040
cursor: pointer;
4141

4242
.@{svg-prefix-cls} {
43-
fill: var(--tv-Link-menu-nav-item-text-color);
43+
fill: var(--tv-LinkMenu-nav-item-text-color);
4444
margin-right: 4px;
4545
}
4646

@@ -54,42 +54,44 @@
5454
.tiny-dialog-box__header {
5555
padding: 32px 32px 16px;
5656
}
57+
5758
.tiny-dialog-box__body {
5859
.tiny-link-menu__filert {
5960
.tiny-input {
6061
width: 100%;
6162
}
6263
}
64+
6365
.tiny-tree {
6466
padding: 16px 8px;
6567
}
6668
}
6769
}
6870

6971
&__nav {
70-
color: var(--tv-Link-menu-btn-text-color);
71-
background: var(--tv-Link-menu-btn-bg-color);
72+
color: var(--tv-LinkMenu-btn-text-color);
73+
background: var(--tv-LinkMenu-btn-bg-color);
7274
padding: 0 8px;
7375
line-height: 1;
7476
outline: 0;
7577
border: none;
7678
cursor: pointer;
7779

7880
.@{svg-prefix-cls} {
79-
fill: var(--tv-Link-menu-nav-item-text-color);
81+
fill: var(--tv-LinkMenu-nav-item-text-color);
8082
font-size: var(--ti-common-font-size-3);
8183
}
8284
}
8385

8486
&__btn {
8587
width: 32px;
8688
height: 32px;
87-
border-radius: var(--tv-Link-menu-btn-border-radius);
88-
border: 1px solid var(--tv-Link-menu-btn-border-color);
89-
background: var(--tv-Link-menu-btn-bg-color);
89+
border-radius: var(--tv-LinkMenu-btn-border-radius);
90+
border: 1px solid var(--tv-LinkMenu-btn-border-color);
91+
background: var(--tv-LinkMenu-btn-bg-color);
9092
.@{svg-prefix-cls} {
91-
fill: var(--tv-Link-menu-nav-item-text-color);
92-
font-size: var(--tv-Link-menu-btn-size);
93+
fill: var(--tv-LinkMenu-nav-item-text-color);
94+
font-size: var(--tv-LinkMenu-btn-size);
9395
}
9496
}
9597

@@ -98,13 +100,13 @@
98100
margin-bottom: 5px;
99101

100102
.@{input-prefix-cls}__inner {
101-
height: var(--tv-Link-menu-input-height);
102-
line-height: var(--tv-Link-menu-input-height);
103-
font-size: var(--tv-Link-menu-input-font-size);
104-
color: var(--tv-Link-menu-input-text-color);
105-
background: var(--tv-Link-menu-btn-bg-color);
106-
border: 1px solid var(--tv-Link-menu-input-border-color);
107-
border-radius: var(--tv-Link-menu-input-border-radius);
103+
height: var(--tv-LinkMenu-input-height);
104+
line-height: var(--tv-LinkMenu-input-height);
105+
font-size: var(--tv-LinkMenu-input-font-size);
106+
color: var(--tv-LinkMenu-input-text-color);
107+
background: var(--tv-LinkMenu-btn-bg-color);
108+
border: 1px solid var(--tv-LinkMenu-input-border-color);
109+
border-radius: var(--tv-LinkMenu-input-border-radius);
108110
padding: 0 8px;
109111
display: block;
110112
white-space: nowrap;
@@ -131,16 +133,16 @@
131133
}
132134

133135
.tree-node-name {
134-
color: var(--tv-Link-menu-tree-node-text-color);
135-
font-size: var(--tv-Link-menu-input-font-size);
136-
border-radius: var(--tv-Link-menu-input-border-radius);
136+
color: var(--tv-LinkMenu-tree-node-text-color);
137+
font-size: var(--tv-LinkMenu-input-font-size);
138+
border-radius: var(--tv-LinkMenu-input-border-radius);
137139
padding-left: 4px;
138140
vertical-align: middle;
139141
}
140142

141143
&.is-focusable {
142144
.tree-node-name {
143-
color: var(--tv-Link-menu-input-text-color);
145+
color: var(--tv-LinkMenu-input-text-color);
144146
}
145147
}
146148
}
@@ -168,8 +170,8 @@
168170

169171
.tree-node-icon {
170172
svg.tiny-svg {
171-
width: var(--tv-Link-menu-icon-size);
172-
height: var(--tv-Link-menu-icon-size);
173+
width: var(--tv-LinkMenu-icon-size);
174+
height: var(--tv-LinkMenu-icon-size);
173175
}
174176
}
175177

‎packages/theme/src/link-menu/vars.less‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,35 +10,35 @@
1010
*
1111
*/
1212

13-
.component-css-vars-link-menu() {
13+
.inject-LinkMenu-vars() {
1414
// 收藏夹设置按钮图标色(和取消按钮文本色)
15-
--tv-Link-menu-nav-item-text-color: var(--tv-color-text);
15+
--tv-LinkMenu-nav-item-text-color: var(--tv-color-text);
1616
// 收藏夹设置字体大小
17-
--tv-Link-menu-item-font-size: var(--tv-font-size-md);
17+
--tv-LinkMenu-item-font-size: var(--tv-font-size-md);
1818
// 收藏夹菜单导航右边框色
19-
--tv-Link-menu-nav-item-border-color: var(--tv-color-border);
19+
--tv-LinkMenu-nav-item-border-color: var(--tv-color-border);
2020
// 收藏夹菜单按钮文本色
21-
--tv-Link-menu-btn-text-color: var(--tv-color-info-text);
21+
--tv-LinkMenu-btn-text-color: var(--tv-color-info-text);
2222
// 收藏夹设置按钮,弹出框输入框和取消按钮的背景色
23-
--tv-Link-menu-btn-bg-color: var(--tv-color-info-bg-white);
23+
--tv-LinkMenu-btn-bg-color: var(--tv-color-info-bg-white);
2424
// 收藏夹弹出框的输入框高度
25-
--tv-Link-menu-input-height: var(--tv-size-height-md);
25+
--tv-LinkMenu-input-height: var(--tv-size-height-md);
2626
// 收藏夹弹出框字号
27-
--tv-Link-menu-input-font-size: var(--tv-font-size-md);
27+
--tv-LinkMenu-input-font-size: var(--tv-font-size-md);
2828
// 收藏夹弹出框输入框(和列表项非节点)的文本色
29-
--tv-Link-menu-input-text-color: var(--tv-color-text);
29+
--tv-LinkMenu-input-text-color: var(--tv-color-text);
3030
// 收藏夹弹出框的输入框和取消按钮边框色
31-
--tv-Link-menu-input-border-color: var(--tv-color-border);
31+
--tv-LinkMenu-input-border-color: var(--tv-color-border);
3232
// 收藏夹弹出框的输入框圆角
33-
--tv-Link-menu-input-border-radius: var(--tv-border-radius-md);
33+
--tv-LinkMenu-input-border-radius: var(--tv-border-radius-md);
3434
// 收藏夹弹出框列表项的节点文本色
35-
--tv-Link-menu-tree-node-text-color: var(--tv-color-border);
35+
--tv-LinkMenu-tree-node-text-color: var(--tv-color-border);
3636
// 按钮边框颜色
37-
--tv-Link-menu-btn-border-color: var(--tv-color-border);
37+
--tv-LinkMenu-btn-border-color: var(--tv-color-border);
3838
// 按钮圆角
39-
--tv-Link-menu-btn-border-radius: var(--tv-border-radius-md);
39+
--tv-LinkMenu-btn-border-radius: var(--tv-border-radius-md);
4040
// 按钮大小
41-
--tv-Link-menu-btn-size: var(--tv-font-size-lg);
41+
--tv-LinkMenu-btn-size: var(--tv-font-size-lg);
4242
// 图标大小
43-
--tv-Link-menu-icon-size: var(--tv-icon-size);
43+
--tv-LinkMenu-icon-size: var(--tv-icon-size);
4444
}

0 commit comments

Comments
 (0)