styles/scrollbar.js at master · AegisJSProject/styles · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { css } from '@aegisjsproject/parsers/css.js';
import { scrollbarColor, scrollbarTrack } from './palette/aegis.js';

export const scrollbarFallback = css`@supports not (scrollbar-color: currentColor transparent) {
	::-webkit-scrollbar {
		display: block;
	}

	::-webkit-scrollbar-thumb {
		background-color: var(--aegis-scrollbar-color, ${scrollbarColor});
	}

	::-webkit-scrollbar-track {
		background-color: var(--aegis-scrollbar-track, ${scrollbarTrack});
	}
}`;

export const scrollbar = css`:root {
	scrollbar-color: var(--aegis-scrollbar-color, ${scrollbarColor}) var(--aegis-scrollbar-track, ${scrollbarTrack});
	scrollbar-width: var(----aegis-scrollbar-width, auto);
}`;

export const componentScrollbar = css`:host {
	scrollbar-color: var(--aegis-scrollbar-color, ${scrollbarColor}) var(--aegis-scrollbar-track, ${scrollbarTrack});
	scrollbar-width: var(----aegis-scrollbar-width, auto);
}`;