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} {
&__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;
@ -39,11 +64,11 @@
.@{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 {
@ -51,47 +76,21 @@
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;
@ -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;
}
}

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

@ -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
packages/theme/src/anchor/vars.less
View File

@ -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;
}