maxjhandsome
/
tiny-vue
forked from opentiny/tiny-vue
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(theme): [select] modify the scrollbar and popper to unify the style (#3160)

This commit is contained in:
MomoPoppy 2025-03-19 14:31:30 +08:00 committed by GitHub
parent 0b5a346c58
commit 9d5e3d351f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/theme/src/base/dark-theme.less
View File

@ -513,5 +513,5 @@
--tv-color-bg-scrollbar-thumb: rgba(255, 255, 255, 0.15); // rgba(255,255,255,0.15)滑块背景色
--tv-color-bg-scrollbar-thumb-hover: var(--tv-base-color-common-6); // #808080 滑块hover背景色
--tv-color-bg-scrollbar-thumb-active: var(--tv-base-color-common-6); // #808080 滑块active背景色
--tv-color-bg-scrollbar-track: var(--tv-base-color-common-13); // #000 轨道背景色
--tv-color-bg-scrollbar-track: transparent; // transparent 轨道背景色
}

49
packages/theme/src/base/reset.less
View File

@ -152,28 +152,33 @@
display: none;
}
@media (min-width: 768px) {
::-webkit-scrollbar {
width: var(--tv-size-scrollbar-width);
height: var(--tv-size-scrollbar-height);
}
::-webkit-scrollbar {
width: var(--tv-size-scrollbar-width);
height: var(--tv-size-scrollbar-height);
}
::-webkit-scrollbar-track-piece {
background: var(--tv-color-bg-scrollbar-track);
}
// x 和 y 滚动条交汇处
::-webkit-scrollbar-corner {
background: var(--tv-color-bg-scrollbar-track);
}
::-webkit-scrollbar-thumb {
background: var(--tv-color-bg-scrollbar-thumb);
border-radius: var(--tv-border-radius-scrollbar-thumb);
}
// 滚动条轨道
::-webkit-scrollbar-track {
background: var(--tv-color-bg-scrollbar-track);
}
::-webkit-scrollbar-thumb:hover {
background: var(--tv-color-bg-scrollbar-thumb-hover);
}
// 滚动滑块
::-webkit-scrollbar-thumb {
background: var(--tv-color-bg-scrollbar-thumb);
border-radius: var(--tv-border-radius-scrollbar-thumb);
}
::-webkit-scrollbar-thumb:active {
background: var(--tv-color-bg-scrollbar-thumb-active);
}
::-webkit-scrollbar-thumb:hover {
background: var(--tv-color-bg-scrollbar-thumb-hover);
}
::-webkit-scrollbar-thumb:active {
background: var(--tv-color-bg-scrollbar-thumb-active);
}
}
@ -197,9 +202,9 @@
}
// 有箭头的场景，统一规范所有样式
.tiny-popconfirm-popover,
.tiny-popper,
.tiny-tooltip__popper {
.tiny-popconfirm-popover:has(.popper__arrow),
.tiny-popper:has(.popper__arrow),
.tiny-tooltip__popper:has(.popper__arrow) {
.popper__arrow {
position: absolute;
display: block;
@ -243,4 +248,4 @@
right: -3px;
}
}
}
}