Skip to content

fix(anchor): [anchor] Reconstruct the anchor theme. #2225

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 1 commit into from
Oct 11, 2024
Merged

fix(anchor): [anchor] Reconstruct the anchor theme. #2225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 52 additions & 53 deletions packages/theme/src/anchor/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,45 @@

.@{anchor-prefix-cls} {
&__wrapper {
.component-css-vars-anchor();
.inject-anchor-vars();
}

background-color: var(--ti-anchor-bg-color);
width: var(--ti-anchor-width);
position: relative;
color: var(--ti-anchor-text-color);
font-size: var(--ti-anchor-font-size);
width: var(--tv-Anchor-width);
background-color: var(--tv-Anchor-bg-color);
color: var(--tv-Anchor-text-color);
font-size: var(--tv-Anchor-font-size);

&__affix {
position: fixed;
z-index: 1;
}

&-link {
margin: 0 0 0 var(--tv-Anchor-link-margin-left);
line-height: 22px;
cursor: pointer;

&-title:hover {
color: var(--tv-Anchor-link-text-color-hover);
}

&-title {
display: block;
max-width: 100%;
padding: 1px var(--tv-Anchor-link-title-padding-right) 1px 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
color: var(--tv-Anchor-text-color);
&&--active {
color: var(--tv-Anchor-link-text-color-active);
}
}
}

&__line {
.@{anchor-prefix-cls}-link + .@{anchor-prefix-cls}-link {
margin-top: 0.5em;
Expand All @@ -39,59 +64,33 @@
.@{anchor-prefix-cls}-link-mask {
position: absolute;
max-width: 0;
left: var(--tv-Anchor-orbit-width / 2);
width: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
left: var(--ti-anchor-orbit-width / 2);
width: 100%;
background-color: var(--ti-anchor-link-mask-bg-color);
background-color: var(--tv-Anchor-link-mask-bg-color);
}

.@{anchor-prefix-cls}-orbit {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: var(--ti-anchor-orbit-width);
border-radius: calc(var(--ti-anchor-orbit-width / 2));
background-color: var(--ti-anchor-orbit-bg-color);
width: var(--tv-Anchor-orbit-width);
border-radius: calc(var(--tv-Anchor-orbit-width / 2));
background-color: var(--tv-Anchor-orbit-bg-color);
&-skid {
position: absolute;
left: 0;
width: var(--ti-anchor-orbit-skid-width);
background-color: var(--ti-anchor-orbit-bg-color);
width: var(--tv-Anchor-orbit-skid-width);
background-color: var(--tv-Anchor-orbit-bg-color);
&--active {
background-color: var(--ti-anchor-link-active-bg-color);
background-color: var(--tv-Anchor-link-bg-color-active);
}
}
}
}

&-link-title:hover {
color: var(--ti-anchor-link-hover-text-color);
}

&-link {
margin: 0 0 0 var(--ti-anchor-link-margin-left);
cursor: pointer;
line-height: 22px;

&-title {
display: block;
max-width: 100%;
padding: var(--ti-anchor-link-title-padding-vertical) var(--ti-anchor-link-title-padding-right)
var(--ti-anchor-link-title-padding-vertical) var(--ti-anchor-link-title-padding-left);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
color: var(--ti-anchor-text-color);
&&--active {
color: var(--ti-anchor-link-active-text-color);
}
}
}

&__dot {
width: 160px;

Expand All @@ -112,40 +111,40 @@

&:before {
content: '';
position: absolute;
left: 0px;
top: 6px;
display: block;
width: 8px;
height: 8px;
border: 1px solid var(--ti-anchor-dot-border-color);
position: absolute;
border: 1px solid var(--tv-Anchor-dot-border-color);
border-radius: 50%;
left: 0px;
top: 6px;
}

&:after {
content: '';
display: block;
width: 1px;
background-color: var(--ti-anchor-line-bg-color);
position: absolute;
opacity: var(--ti-anchor-line-opacity);
border-radius: 50%;
left: 3.5px;
top: 20px;
bottom: -18px;
display: block;
width: 1px;
background-color: var(--tv-Anchor-line-bg-color);
opacity: var(--tv-Anchor-line-opacity);
border-radius: 50%;
}

&--active:before {
background-color: var(--ti-anchor-link-active-text-color);
border-color: var(--ti-anchor-link-active-text-color);
background-color: var(--tv-Anchor-dot-bg-color-active);
border-color: var(--tv-Anchor-dot-border-color-active);
}

&:hover,
&--active {
color: var(--ti-anchor-link-active-text-color);
color: var(--tv-Anchor-link-text-color-active);

&:before {
border-color: var(--ti-anchor-link-active-text-color);
border-color: var(--tv-Anchor-dot-border-color-active);
opacity: 1;
}
}
Expand Down
10 changes: 5 additions & 5 deletions packages/theme/src/anchor/old-theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const tinyAnchorOldTheme = {
'ti-anchor-link-active-text-color': 'var(--ti-common-color-primary-active, #7693f5)',
'ti-anchor-line-opacity': '0.08',
'ti-anchor-line-bg-color': 'var(--ti-common-color-text-primary, #252b3a)',
'ti-anchor-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
'ti-anchor-width': "'auto'"
'tv-Anchor-link-text-color-active': 'var(--ti-common-color-primary-active, #7693f5)',
'tv-Anchor-line-opacity': '0.08',
'tv-Anchor-line-bg-color': 'var(--ti-common-color-text-primary, #252b3a)',
'tv-Anchor-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
'tv-Anchor-width': "'auto'"
}
64 changes: 34 additions & 30 deletions packages/theme/src/anchor/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,41 +10,45 @@
*
*/

.component-css-vars-anchor() {
// 组件默认背景色
--ti-anchor-bg-color: var(--ti-common-color-bg-white-normal, #fff);
.inject-anchor-vars() {
// 组件宽度
--ti-anchor-width: var(--ti-common-size-40x);
--tv-Anchor-width: calc(var(--tv-size-base, 4px) * 40);
// 组件默认背景色
--tv-Anchor-bg-color: var(--tv-color-bg-secondary, #fff);
// 锚点默认文本色
--ti-anchor-text-color: var(--ti-common-color-text-secondary);
// dot类型线条背景色(new)
--ti-anchor-line-bg-color: var(--ti-common-scrollbar-thumb-bg-color);
// dot类型线条透明度(hide)
--ti-anchor-line-opacity: 1;
// dot类型圆点边框色(new)
--ti-anchor-dot-border-color: var(--ti-common-color-line-normal, #adb0b8);
--tv-Anchor-text-color: var(--tv-color-text-secondary, #595959);
// 锚点默认字号
--ti-anchor-font-size: var(--ti-common-font-size-1, 14px);
// 选中锚点竖向轨道滑块背景色
--ti-anchor-link-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
// 选中锚点竖向轨道滑块宽度
--ti-anchor-orbit-skid-width: var(--ti-common-size-base, 4px);
--tv-Anchor-font-size: var(--tv-font-size-md, 14px);
// 选中锚点项默认文本色
--tv-Anchor-link-text-color-active: var(--tv-color-text, #191919);
// 锚点项左默认外边距
--tv-Anchor-link-margin-left: var(--tv-space-md, 8px);
// 悬浮锚点项默认文本色
--tv-Anchor-link-text-color-hover: var(--tv-color-text-secondary, #595959);

// line类型
// 竖向轨道宽度
--ti-anchor-orbit-width: var(--ti-common-size-base, 4px);
// 选中锚点文本色
--ti-anchor-link-active-text-color: var(--ti-common-color-text-primary);
--tv-Anchor-orbit-width: var(--tv-size-base, 4px);
// 选中锚点蒙层背景色
--ti-anchor-link-mask-bg-color: rgba(80, 115, 229, 0.15);
// 悬浮锚点文本色
--ti-anchor-link-hover-text-color: var(--ti-common-color-primary-active, #7693f5);
--tv-Anchor-link-mask-bg-color: rgba(80, 115, 229, 0.15);
// 锚点竖向轨道背景色
--ti-anchor-orbit-bg-color: var(--ti-common-color-line-disabled, #dfe1e6);
// 锚点左外边距
--ti-anchor-link-margin-left: var(--ti-common-space-2x, 8px);
// 锚点标题垂直内边距
--ti-anchor-link-title-padding-vertical: var(--ti-common-space-1, 1px);
--tv-Anchor-orbit-bg-color: var(--tv-color-border-divider-short, #dbdbdb);
// 选中锚点竖向轨道滑块宽度
--tv-Anchor-orbit-skid-width: var(--tv-size-base, 4px);
// 选中锚点竖向轨道滑块背景色
--tv-Anchor-link-bg-color-active: var(--tv-color-bg, #f5f5f5);
// 锚点标题右外边距
--ti-anchor-link-title-padding-right: var(--ti-common-space-2x, 8px);
// 锚点标题左外边距
--ti-anchor-link-title-padding-left: var(--ti-common-space-10, 10px);
--tv-Anchor-link-title-padding-right: var(--tv-space-md, 8px);

// dot类型
// dot类型圆点边框色
--tv-Anchor-dot-border-color: var(--tv-color-border, #c2c2c2);
// dot类型线条背景色
--tv-Anchor-line-bg-color: var(--tv-color-border-disabled, #dbdbdb);
// dot类型选中项圆点背景色
--tv-Anchor-dot-bg-color-active: var(--tv-color-bg-primary, #191919);
// dot类型选中项圆点边框色
--tv-Anchor-dot-border-color-active: var(--tv-color-border-hover, #191919);
// dot类型线条透明度(hide)
--tv-Anchor-line-opacity: 1;
}
Loading