Skip to content

Commit

Permalink
fix(anchor): 重构anchor主题
Browse files Browse the repository at this point in the history
  • Loading branch information
@chenxi-20
chenxi-20 committed Sep 30, 2024
1 parent 520b427 commit e55c17a
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 88 deletions.
105 changes: 52 additions & 53 deletions packages/theme/src/anchor/index.less
View file
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
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
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;
}

0 comments on commit e55c17a

Please sign in to comment.