-
Notifications
You must be signed in to change notification settings - Fork 1.8k
/
ScrollArea.styles.ts
90 lines (79 loc) · 2.27 KB
/
ScrollArea.styles.ts
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import { createStyles } from '@mantine/styles';
export interface ScrollAreaStylesParams {
scrollbarSize: number;
offsetScrollbars: boolean;
scrollbarHovered: boolean;
hidden: boolean;
}
export default createStyles(
(
theme,
{ scrollbarSize, offsetScrollbars, scrollbarHovered, hidden }: ScrollAreaStylesParams,
getRef
) => ({
root: {
overflow: 'hidden',
},
viewport: {
width: '100%',
height: '100%',
paddingRight: offsetScrollbars ? scrollbarSize : undefined,
paddingBottom: offsetScrollbars ? scrollbarSize : undefined,
},
scrollbar: {
display: hidden ? 'none' : 'flex',
userSelect: 'none',
touchAction: 'none',
boxSizing: 'border-box',
padding: scrollbarSize / 5,
transition: 'background-color 150ms ease, opacity 150ms ease',
'&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
[`& .${getRef('thumb')}`]: {
backgroundColor:
theme.colorScheme === 'dark'
? theme.fn.rgba(theme.white, 0.5)
: theme.fn.rgba(theme.black, 0.5),
},
},
'&[data-orientation="vertical"]': {
width: scrollbarSize,
},
'&[data-orientation="horizontal"]': {
flexDirection: 'column',
height: scrollbarSize,
},
'&[data-state="hidden"]': {
display: 'none',
opacity: 0,
},
},
thumb: {
ref: getRef('thumb'),
flex: 1,
backgroundColor:
theme.colorScheme === 'dark'
? theme.fn.rgba(theme.white, 0.4)
: theme.fn.rgba(theme.black, 0.4),
borderRadius: scrollbarSize,
position: 'relative',
transition: 'background-color 150ms ease',
display: hidden ? 'none' : undefined,
'&::before': {
content: '""',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '100%',
height: '100%',
},
},
corner: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
transition: 'opacity 150ms ease',
opacity: scrollbarHovered ? 1 : 0,
display: hidden ? 'none' : undefined,
},
})
);