_scrollbar.scss
ASCII text
1
/* Scrollbars */
2
3
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../../../st-theme";
6
7
StScrollView {
8
&.vfade { -st-vfade-offset: 32px; }
9
&.hfade { -st-hfade-offset: 32px; }
10
}
11
12
StScrollBar {
13
padding: 0;
14
15
StScrollView & {
16
min-width: 16px;
17
min-height: 16px;
18
}
19
20
StBin#trough {
21
margin: 4px;
22
border-radius: (8px / 2);
23
background-color: theme-color.disabled-stroke(theme-color.$on-surface);
24
}
25
26
StButton#vhandle,
27
StButton#hhandle {
28
transition-duration: st-theme.$duration;
29
margin: 4px;
30
// would be nice to margin or at least to transparent
31
// border: 4px solid transparent;
32
border-radius: (8px / 2);
33
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface);
34
35
&:hover {
36
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "hover");
37
}
38
39
&:active {
40
background-color: theme-color.scrollbar-thumb(theme-color.$on-surface, "pressed");
41
}
42
}
43
}
44
45
@mixin color($color) {
46
StBin#trough {
47
background-color: theme-color.disabled-stroke($color);
48
}
49
50
StButton#vhandle,
51
StButton#hhandle {
52
background-color: theme-color.scrollbar-thumb($color);
53
54
&:hover {
55
background-color: theme-color.scrollbar-thumb($color, "hover");
56
}
57
58
&:active {
59
background-color: theme-color.scrollbar-thumb($color, "pressed");
60
}
61
}
62
}
63