Files
cursor-byok/apps/desktop/src/shared/scrollable/ScrollArea.module.scss
T

81 lines
1.5 KiB
SCSS

.root {
--oa-scrollbar-size: 8px;
--oa-scrollbar-min-thumb-size: 20px;
--oa-scrollbar-inset-top: 0px;
--oa-scrollbar-thumb: var(--vscode-scrollbarSlider-background, rgba(0, 0, 0, 0.1));
--oa-scrollbar-thumb-hover: var(--vscode-scrollbarSlider-background, rgba(0, 0, 0, 0.12));
--oa-scrollbar-thumb-active: var(--vscode-scrollbarSlider-background, rgba(0, 0, 0, 0.12));
--oa-scrollbar-hit-size: max(12px, var(--oa-scrollbar-size));
position: relative;
min-width: 0;
min-height: 0;
overflow: hidden;
&.always .scrollbar,
&.active .scrollbar,
&:hover .scrollbar {
opacity: 1;
pointer-events: auto;
}
&.active .thumb {
background: var(--oa-scrollbar-thumb-active);
}
}
.viewport {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
}
.content {
min-width: 0;
}
.scrollbar {
position: absolute;
top: var(--oa-scrollbar-inset-top);
right: 0;
bottom: 0;
z-index: 20;
width: var(--oa-scrollbar-hit-size);
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease;
}
.hidden {
visibility: hidden;
pointer-events: none;
}
.track {
position: absolute;
inset: 0;
cursor: default;
}
.thumb {
position: absolute;
right: 0;
width: var(--oa-scrollbar-size);
min-height: var(--oa-scrollbar-min-thumb-size);
background: var(--oa-scrollbar-thumb);
border-radius: 999px;
cursor: default;
&:hover {
background: var(--oa-scrollbar-thumb-hover);
}
}