feat(project): init
This commit is contained in:
60
components/tree-select/mantine-scrollbar.css
Normal file
60
components/tree-select/mantine-scrollbar.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* 根容器 */
|
||||
.custom-scrollbar {
|
||||
scrollbar-gutter: stable both-edges;
|
||||
border-radius: 4px; /* Mantine 默认圆角 */
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
.custom-scrollbar {
|
||||
scrollbar-width: thin; /* 细滚动条 */
|
||||
scrollbar-color: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4))
|
||||
transparent;
|
||||
scroll-behavior: smooth;
|
||||
border-radius: 4px; /* Mantine 默认圆角 */
|
||||
}
|
||||
|
||||
/* Webkit 滚动条(Chrome / Edge / Safari) */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 8px; /* Mantine 默认宽度 */
|
||||
height: 8px;
|
||||
border-radius: 4px; /* Mantine 默认圆角 */
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: transparent; /* Mantine 无轨道背景 */
|
||||
border-radius: 4px; /* Mantine 默认圆角 */
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.25); /* Mantine 默认 thumb 颜色 */
|
||||
border-radius: 4px; /* Mantine 默认圆角 */
|
||||
transition: background-color 150ms ease;
|
||||
border-radius: 4px; /* Mantine 默认圆角 */
|
||||
}
|
||||
|
||||
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.35); /* hover 时更深 */
|
||||
border-radius: 4px; /* Mantine 默认圆角 */
|
||||
}
|
||||
|
||||
/* Active(按住拖动) */
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:active {
|
||||
background-color: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
|
||||
border-radius: 4px; /* Mantine 默认圆角 */
|
||||
}
|
||||
|
||||
/* Hover 效果(Firefox) */
|
||||
.custom-scrollbar:hover {
|
||||
scrollbar-color: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.3))
|
||||
transparent;
|
||||
scroll-behavior: smooth;
|
||||
border-radius: 4px; /* Mantine 默认圆角 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 支持垂直 + 水平滚动条交汇区域(ScrollArea 的 corner)
|
||||
*/
|
||||
.custom-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
border-radius: 4px; /* Mantine 默认圆角 */
|
||||
}
|
||||
Reference in New Issue
Block a user