codecheck

1
// core
2
.p-scrolltop {
3
    position: fixed;
4
    bottom: 20px;
5
    right: 20px;
6
    display: flex;
7
    align-items: center;
8
    justify-content: center;
9
}
10

11
.p-scrolltop-sticky {
12
    position: sticky;
13
}
14

15
.p-scrolltop-sticky.p-link {
16
    margin-left: auto;
17
}
18

19
.p-scrolltop-enter-from {
20
    opacity: 0;
21
}
22

23
.p-scrolltop-enter-active {
24
    transition: opacity 0.15s;
25
}
26

27
.p-scrolltop.p-scrolltop-leave-to {
28
    opacity: 0;
29
}
30

31
.p-scrolltop-leave-active {
32
    transition: opacity 0.15s;
33
}
34

35
// theme
36
.p-scrolltop {
37
    width: $scrollTopWidth;
38
    height: $scrollTopHeight;
39
    border-radius: $scrollTopBorderRadius;
40
    box-shadow: $inputOverlayShadow;
41
    transition: $actionIconTransition;
42

43
    &.p-link {
44
        background: $scrollTopBg;
45

46
        &:hover {
47
            background: $scrollTopHoverBg;
48
        }
49
    }
50

51
    .p-scrolltop-icon {
52
        font-size: $scrollTopFontSize;
53
        color: $scrollTopTextColor;
54

55
        &.p-icon {
56
            width: $scrollTopFontSize;
57
            height: $scrollTopFontSize;
58
        }
59
    }
60
}