codecheck

1
// core
2
.p-scrollpanel-wrapper {
3
    overflow: hidden;
4
    width: 100%;
5
    height: 100%;
6
    position: relative;
7
    z-index: 1;
8
    float: left;
9
}
10

11
.p-scrollpanel-content {
12
    height: calc(100% + 18px);
13
    width: calc(100% + 18px);
14
    padding: 0 18px 18px 0;
15
    position: relative;
16
    overflow: auto;
17
    box-sizing: border-box;
18
    scrollbar-width: none;
19
}
20

21
.p-scrollpanel-content::-webkit-scrollbar {
22
    display: none;
23
}
24

25
.p-scrollpanel-bar {
26
    position: relative;
27
    background: #c1c1c1;
28
    border-radius: 3px;
29
    z-index: 2;
30
    cursor: pointer;
31
    opacity: 0;
32
    transition: opacity 0.25s linear;
33
}
34

35
.p-scrollpanel-bar-y {
36
    width: 9px;
37
    top: 0;
38
}
39

40
.p-scrollpanel-bar-x {
41
    height: 9px;
42
    bottom: 0;
43
}
44

45
.p-scrollpanel-hidden {
46
    visibility: hidden;
47
}
48

49
.p-scrollpanel:hover .p-scrollpanel-bar,
50
.p-scrollpanel:active .p-scrollpanel-bar {
51
    opacity: 1;
52
}
53

54
.p-scrollpanel-grabbed {
55
    user-select: none;
56
}
57

58
// theme
59
.p-scrollpanel {
60
    .p-scrollpanel-bar {
61
        background: $scrollPanelTrackBg;
62
        border: $scrollPanelTrackBorder;
63
        transition: $formElementTransition;
64
        outline-color: transparent;
65

66
        &:focus-visible {
67
            @include focused();
68
        }
69
    }
70
}