opentiny
/
tiny-vue
2
0
Fork 30
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

fix(anchor): 重构anchor主题 (#2225)

This commit is contained in:
chenxi-20 2024-10-10 19:06:09 -07:00 committed by GitHub
parent fa1ef8bacc
commit 3e824bbb5a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 91 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
packages/theme/src/anchor/index.less
View File

@ -17,20 +17,45 @@
.@{anchor-prefix-cls} { .@{anchor-prefix-cls} {
&__wrapper { &__wrapper {
.component-css-vars-anchor(); .inject-anchor-vars();
} }
background-color: var(--ti-anchor-bg-color);
width: var(--ti-anchor-width);
position: relative; position: relative;
color: var(--ti-anchor-text-color); width: var(--tv-Anchor-width);
font-size: var(--ti-anchor-font-size); background-color: var(--tv-Anchor-bg-color);
color: var(--tv-Anchor-text-color);
font-size: var(--tv-Anchor-font-size);
&__affix { &__affix {
position: fixed; position: fixed;
z-index: 1; 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 { &__line {
.@{anchor-prefix-cls}-link + .@{anchor-prefix-cls}-link { .@{anchor-prefix-cls}-link + .@{anchor-prefix-cls}-link {
margin-top: 0.5em; margin-top: 0.5em;
@ -39,11 +64,11 @@
.@{anchor-prefix-cls}-link-mask { .@{anchor-prefix-cls}-link-mask {
position: absolute; position: absolute;
max-width: 0; max-width: 0;
left: var(--tv-Anchor-orbit-width / 2);
width: 100%;
border-top-right-radius: 10px; border-top-right-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
left: var(--ti-anchor-orbit-width / 2); background-color: var(--tv-Anchor-link-mask-bg-color);
width: 100%;
background-color: var(--ti-anchor-link-mask-bg-color);
} }
.@{anchor-prefix-cls}-orbit { .@{anchor-prefix-cls}-orbit {
@ -51,47 +76,21 @@
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: var(--ti-anchor-orbit-width); width: var(--tv-Anchor-orbit-width);
border-radius: calc(var(--ti-anchor-orbit-width / 2)); border-radius: calc(var(--tv-Anchor-orbit-width / 2));
background-color: var(--ti-anchor-orbit-bg-color); background-color: var(--tv-Anchor-orbit-bg-color);
&-skid { &-skid {
position: absolute; position: absolute;
left: 0; left: 0;
width: var(--ti-anchor-orbit-skid-width); width: var(--tv-Anchor-orbit-skid-width);
background-color: var(--ti-anchor-orbit-bg-color); background-color: var(--tv-Anchor-orbit-bg-color);
&--active { &--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 { &__dot {
width: 160px; width: 160px;
@ -112,40 +111,40 @@
&:before { &:before {
content: ''; content: '';
position: absolute;
left: 0px;
top: 6px;
display: block; display: block;
width: 8px; width: 8px;
height: 8px; height: 8px;
border: 1px solid var(--ti-anchor-dot-border-color); border: 1px solid var(--tv-Anchor-dot-border-color);
position: absolute;
border-radius: 50%; border-radius: 50%;
left: 0px;
top: 6px;
} }
&:after { &:after {
content: ''; content: '';
display: block;
width: 1px;
background-color: var(--ti-anchor-line-bg-color);
position: absolute; position: absolute;
opacity: var(--ti-anchor-line-opacity);
border-radius: 50%;
left: 3.5px; left: 3.5px;
top: 20px; top: 20px;
bottom: -18px; 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 { &--active:before {
background-color: var(--ti-anchor-link-active-text-color); background-color: var(--tv-Anchor-dot-bg-color-active);
border-color: var(--ti-anchor-link-active-text-color); border-color: var(--tv-Anchor-dot-border-color-active);
} }
&:hover, &:hover,
&--active { &--active {
color: var(--ti-anchor-link-active-text-color); color: var(--tv-Anchor-link-text-color-active);
&:before { &:before {
border-color: var(--ti-anchor-link-active-text-color); border-color: var(--tv-Anchor-dot-border-color-active);
opacity: 1; opacity: 1;
} }
} }

10
packages/theme/src/anchor/old-theme.js
View File

@ -1,7 +1,7 @@
export const tinyAnchorOldTheme = { export const tinyAnchorOldTheme = {
'ti-anchor-link-active-text-color': 'var(--ti-common-color-primary-active, #7693f5)', 'tv-Anchor-link-text-color-active': 'var(--ti-common-color-primary-active, #7693f5)',
'ti-anchor-line-opacity': '0.08', 'tv-Anchor-line-opacity': '0.08',
'ti-anchor-line-bg-color': 'var(--ti-common-color-text-primary, #252b3a)', 'tv-Anchor-line-bg-color': 'var(--ti-common-color-text-primary, #252b3a)',
'ti-anchor-text-color': 'var(--ti-common-color-text-primary, #252b3a)', 'tv-Anchor-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
'ti-anchor-width': "'auto'" 'tv-Anchor-width': "'auto'"
} }

64
packages/theme/src/anchor/vars.less
View File

@ -10,41 +10,45 @@
* *
*/ */
.component-css-vars-anchor() { .inject-anchor-vars() {
// 组件默认背景色
--ti-anchor-bg-color: var(--ti-common-color-bg-white-normal, #fff);
// 组件宽度 // 组件宽度
--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); --tv-Anchor-text-color: var(--tv-color-text-secondary, #595959);
// 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);
// 锚点默认字号 // 锚点默认字号
--ti-anchor-font-size: var(--ti-common-font-size-1, 14px); --tv-Anchor-font-size: var(--tv-font-size-md, 14px);
// 选中锚点竖向轨道滑块背景色 // 选中锚点项默认文本色
--ti-anchor-link-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0); --tv-Anchor-link-text-color-active: var(--tv-color-text, #191919);
// 选中锚点竖向轨道滑块宽度 // 锚点项左默认外边距
--ti-anchor-orbit-skid-width: var(--ti-common-size-base, 4px); --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); --tv-Anchor-orbit-width: var(--tv-size-base, 4px);
// 选中锚点文本色
--ti-anchor-link-active-text-color: var(--ti-common-color-text-primary);
// 选中锚点蒙层背景色 // 选中锚点蒙层背景色
--ti-anchor-link-mask-bg-color: rgba(80, 115, 229, 0.15); --tv-Anchor-link-mask-bg-color: rgba(80, 115, 229, 0.15);
// 悬浮锚点文本色
--ti-anchor-link-hover-text-color: var(--ti-common-color-primary-active, #7693f5);
// 锚点竖向轨道背景色 // 锚点竖向轨道背景色
--ti-anchor-orbit-bg-color: var(--ti-common-color-line-disabled, #dfe1e6); --tv-Anchor-orbit-bg-color: var(--tv-color-border-divider-short, #dbdbdb);
// 锚点左外边距 // 选中锚点竖向轨道滑块宽度
--ti-anchor-link-margin-left: var(--ti-common-space-2x, 8px); --tv-Anchor-orbit-skid-width: var(--tv-size-base, 4px);
// 锚点标题垂直内边距 // 选中锚点竖向轨道滑块背景色
--ti-anchor-link-title-padding-vertical: var(--ti-common-space-1, 1px); --tv-Anchor-link-bg-color-active: var(--tv-color-bg, #f5f5f5);
// 锚点标题右外边距 // 锚点标题右外边距
--ti-anchor-link-title-padding-right: var(--ti-common-space-2x, 8px); --tv-Anchor-link-title-padding-right: var(--tv-space-md, 8px);
// 锚点标题左外边距
--ti-anchor-link-title-padding-left: var(--ti-common-space-10, 10px); // 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;
} }