Skip to content

Commit 3e824bb

Browse files
chenxi-20chenxi-20
authored
fix(anchor): 重构anchor主题 (#2225)
1 parent fa1ef8b commit 3e824bb

File tree

3 files changed

+91
-88
lines changed

3 files changed

+91
-88
lines changed

‎packages/theme/src/anchor/index.less‎

Lines changed: 52 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,45 @@
1717

1818
.@{anchor-prefix-cls} {
1919
&__wrapper {
20-
.component-css-vars-anchor();
20+
.inject-anchor-vars();
2121
}
2222

23-
background-color: var(--ti-anchor-bg-color);
24-
width: var(--ti-anchor-width);
2523
position: relative;
26-
color: var(--ti-anchor-text-color);
27-
font-size: var(--ti-anchor-font-size);
24+
width: var(--tv-Anchor-width);
25+
background-color: var(--tv-Anchor-bg-color);
26+
color: var(--tv-Anchor-text-color);
27+
font-size: var(--tv-Anchor-font-size);
2828

2929
&__affix {
3030
position: fixed;
3131
z-index: 1;
3232
}
3333

34+
&-link {
35+
margin: 0 0 0 var(--tv-Anchor-link-margin-left);
36+
line-height: 22px;
37+
cursor: pointer;
38+
39+
&-title:hover {
40+
color: var(--tv-Anchor-link-text-color-hover);
41+
}
42+
43+
&-title {
44+
display: block;
45+
max-width: 100%;
46+
padding: 1px var(--tv-Anchor-link-title-padding-right) 1px 10px;
47+
overflow: hidden;
48+
text-overflow: ellipsis;
49+
display: -webkit-box;
50+
-webkit-box-orient: vertical;
51+
-webkit-line-clamp: 1;
52+
color: var(--tv-Anchor-text-color);
53+
&&--active {
54+
color: var(--tv-Anchor-link-text-color-active);
55+
}
56+
}
57+
}
58+
3459
&__line {
3560
.@{anchor-prefix-cls}-link + .@{anchor-prefix-cls}-link {
3661
margin-top: 0.5em;
@@ -39,59 +64,33 @@
3964
.@{anchor-prefix-cls}-link-mask {
4065
position: absolute;
4166
max-width: 0;
67+
left: var(--tv-Anchor-orbit-width / 2);
68+
width: 100%;
4269
border-top-right-radius: 10px;
4370
border-bottom-right-radius: 10px;
44-
left: var(--ti-anchor-orbit-width / 2);
45-
width: 100%;
46-
background-color: var(--ti-anchor-link-mask-bg-color);
71+
background-color: var(--tv-Anchor-link-mask-bg-color);
4772
}
4873

4974
.@{anchor-prefix-cls}-orbit {
5075
position: absolute;
5176
left: 0;
5277
top: 0;
5378
bottom: 0;
54-
width: var(--ti-anchor-orbit-width);
55-
border-radius: calc(var(--ti-anchor-orbit-width / 2));
56-
background-color: var(--ti-anchor-orbit-bg-color);
79+
width: var(--tv-Anchor-orbit-width);
80+
border-radius: calc(var(--tv-Anchor-orbit-width / 2));
81+
background-color: var(--tv-Anchor-orbit-bg-color);
5782
&-skid {
5883
position: absolute;
5984
left: 0;
60-
width: var(--ti-anchor-orbit-skid-width);
61-
background-color: var(--ti-anchor-orbit-bg-color);
85+
width: var(--tv-Anchor-orbit-skid-width);
86+
background-color: var(--tv-Anchor-orbit-bg-color);
6287
&--active {
63-
background-color: var(--ti-anchor-link-active-bg-color);
88+
background-color: var(--tv-Anchor-link-bg-color-active);
6489
}
6590
}
6691
}
6792
}
6893

69-
&-link-title:hover {
70-
color: var(--ti-anchor-link-hover-text-color);
71-
}
72-
73-
&-link {
74-
margin: 0 0 0 var(--ti-anchor-link-margin-left);
75-
cursor: pointer;
76-
line-height: 22px;
77-
78-
&-title {
79-
display: block;
80-
max-width: 100%;
81-
padding: var(--ti-anchor-link-title-padding-vertical) var(--ti-anchor-link-title-padding-right)
82-
var(--ti-anchor-link-title-padding-vertical) var(--ti-anchor-link-title-padding-left);
83-
overflow: hidden;
84-
text-overflow: ellipsis;
85-
display: -webkit-box;
86-
-webkit-box-orient: vertical;
87-
-webkit-line-clamp: 1;
88-
color: var(--ti-anchor-text-color);
89-
&&--active {
90-
color: var(--ti-anchor-link-active-text-color);
91-
}
92-
}
93-
}
94-
9594
&__dot {
9695
width: 160px;
9796

@@ -112,40 +111,40 @@
112111

113112
&:before {
114113
content: '';
114+
position: absolute;
115+
left: 0px;
116+
top: 6px;
115117
display: block;
116118
width: 8px;
117119
height: 8px;
118-
border: 1px solid var(--ti-anchor-dot-border-color);
119-
position: absolute;
120+
border: 1px solid var(--tv-Anchor-dot-border-color);
120121
border-radius: 50%;
121-
left: 0px;
122-
top: 6px;
123122
}
124123

125124
&:after {
126125
content: '';
127-
display: block;
128-
width: 1px;
129-
background-color: var(--ti-anchor-line-bg-color);
130126
position: absolute;
131-
opacity: var(--ti-anchor-line-opacity);
132-
border-radius: 50%;
133127
left: 3.5px;
134128
top: 20px;
135129
bottom: -18px;
130+
display: block;
131+
width: 1px;
132+
background-color: var(--tv-Anchor-line-bg-color);
133+
opacity: var(--tv-Anchor-line-opacity);
134+
border-radius: 50%;
136135
}
137136

138137
&--active:before {
139-
background-color: var(--ti-anchor-link-active-text-color);
140-
border-color: var(--ti-anchor-link-active-text-color);
138+
background-color: var(--tv-Anchor-dot-bg-color-active);
139+
border-color: var(--tv-Anchor-dot-border-color-active);
141140
}
142141

143142
&:hover,
144143
&--active {
145-
color: var(--ti-anchor-link-active-text-color);
144+
color: var(--tv-Anchor-link-text-color-active);
146145

147146
&:before {
148-
border-color: var(--ti-anchor-link-active-text-color);
147+
border-color: var(--tv-Anchor-dot-border-color-active);
149148
opacity: 1;
150149
}
151150
}

‎packages/theme/src/anchor/old-theme.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const tinyAnchorOldTheme = {
2-
'ti-anchor-link-active-text-color': 'var(--ti-common-color-primary-active, #7693f5)',
3-
'ti-anchor-line-opacity': '0.08',
4-
'ti-anchor-line-bg-color': 'var(--ti-common-color-text-primary, #252b3a)',
5-
'ti-anchor-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
6-
'ti-anchor-width': "'auto'"
2+
'tv-Anchor-link-text-color-active': 'var(--ti-common-color-primary-active, #7693f5)',
3+
'tv-Anchor-line-opacity': '0.08',
4+
'tv-Anchor-line-bg-color': 'var(--ti-common-color-text-primary, #252b3a)',
5+
'tv-Anchor-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
6+
'tv-Anchor-width': "'auto'"
77
}

‎packages/theme/src/anchor/vars.less‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,41 +10,45 @@
1010
*
1111
*/
1212

13-
.component-css-vars-anchor() {
14-
// 组件默认背景色
15-
--ti-anchor-bg-color: var(--ti-common-color-bg-white-normal, #fff);
13+
.inject-anchor-vars() {
1614
// 组件宽度
17-
--ti-anchor-width: var(--ti-common-size-40x);
15+
--tv-Anchor-width: calc(var(--tv-size-base, 4px) * 40);
16+
// 组件默认背景色
17+
--tv-Anchor-bg-color: var(--tv-color-bg-secondary, #fff);
1818
// 锚点默认文本色
19-
--ti-anchor-text-color: var(--ti-common-color-text-secondary);
20-
// dot类型线条背景色(new)
21-
--ti-anchor-line-bg-color: var(--ti-common-scrollbar-thumb-bg-color);
22-
// dot类型线条透明度(hide)
23-
--ti-anchor-line-opacity: 1;
24-
// dot类型圆点边框色(new)
25-
--ti-anchor-dot-border-color: var(--ti-common-color-line-normal, #adb0b8);
19+
--tv-Anchor-text-color: var(--tv-color-text-secondary, #595959);
2620
// 锚点默认字号
27-
--ti-anchor-font-size: var(--ti-common-font-size-1, 14px);
28-
// 选中锚点竖向轨道滑块背景色
29-
--ti-anchor-link-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
30-
// 选中锚点竖向轨道滑块宽度
31-
--ti-anchor-orbit-skid-width: var(--ti-common-size-base, 4px);
21+
--tv-Anchor-font-size: var(--tv-font-size-md, 14px);
22+
// 选中锚点项默认文本色
23+
--tv-Anchor-link-text-color-active: var(--tv-color-text, #191919);
24+
// 锚点项左默认外边距
25+
--tv-Anchor-link-margin-left: var(--tv-space-md, 8px);
26+
// 悬浮锚点项默认文本色
27+
--tv-Anchor-link-text-color-hover: var(--tv-color-text-secondary, #595959);
28+
29+
// line类型
3230
// 竖向轨道宽度
33-
--ti-anchor-orbit-width: var(--ti-common-size-base, 4px);
34-
// 选中锚点文本色
35-
--ti-anchor-link-active-text-color: var(--ti-common-color-text-primary);
31+
--tv-Anchor-orbit-width: var(--tv-size-base, 4px);
3632
// 选中锚点蒙层背景色
37-
--ti-anchor-link-mask-bg-color: rgba(80, 115, 229, 0.15);
38-
// 悬浮锚点文本色
39-
--ti-anchor-link-hover-text-color: var(--ti-common-color-primary-active, #7693f5);
33+
--tv-Anchor-link-mask-bg-color: rgba(80, 115, 229, 0.15);
4034
// 锚点竖向轨道背景色
41-
--ti-anchor-orbit-bg-color: var(--ti-common-color-line-disabled, #dfe1e6);
42-
// 锚点左外边距
43-
--ti-anchor-link-margin-left: var(--ti-common-space-2x, 8px);
44-
// 锚点标题垂直内边距
45-
--ti-anchor-link-title-padding-vertical: var(--ti-common-space-1, 1px);
35+
--tv-Anchor-orbit-bg-color: var(--tv-color-border-divider-short, #dbdbdb);
36+
// 选中锚点竖向轨道滑块宽度
37+
--tv-Anchor-orbit-skid-width: var(--tv-size-base, 4px);
38+
// 选中锚点竖向轨道滑块背景色
39+
--tv-Anchor-link-bg-color-active: var(--tv-color-bg, #f5f5f5);
4640
// 锚点标题右外边距
47-
--ti-anchor-link-title-padding-right: var(--ti-common-space-2x, 8px);
48-
// 锚点标题左外边距
49-
--ti-anchor-link-title-padding-left: var(--ti-common-space-10, 10px);
41+
--tv-Anchor-link-title-padding-right: var(--tv-space-md, 8px);
42+
43+
// dot类型
44+
// dot类型圆点边框色
45+
--tv-Anchor-dot-border-color: var(--tv-color-border, #c2c2c2);
46+
// dot类型线条背景色
47+
--tv-Anchor-line-bg-color: var(--tv-color-border-disabled, #dbdbdb);
48+
// dot类型选中项圆点背景色
49+
--tv-Anchor-dot-bg-color-active: var(--tv-color-bg-primary, #191919);
50+
// dot类型选中项圆点边框色
51+
--tv-Anchor-dot-border-color-active: var(--tv-color-border-hover, #191919);
52+
// dot类型线条透明度(hide)
53+
--tv-Anchor-line-opacity: 1;
5054
}

0 commit comments

Comments
 (0)