codecheck

1
@use 'sass:math';
2

3
// core
4
.p-slider {
5
    position: relative;
6
}
7

8
.p-slider .p-slider-handle {
9
    cursor: grab;
10
    touch-action: none;
11
    display: block;
12
}
13

14
.p-slider-range {
15
    display: block;
16
}
17

18
.p-slider-horizontal .p-slider-range {
19
    top: 0;
20
    left: 0;
21
    height: 100%;
22
}
23

24
.p-slider-horizontal .p-slider-handle {
25
    top: 50%;
26
}
27

28
.p-slider-vertical {
29
    height: 100px;
30
}
31

32
.p-slider-vertical .p-slider-handle {
33
    left: 50%;
34
}
35

36
.p-slider-vertical .p-slider-range {
37
    bottom: 0;
38
    left: 0;
39
    width: 100%;
40
}
41

42
// theme
43
.p-slider {
44
    background: $sliderBg;
45
    border: $sliderBorder;
46
    border-radius: $borderRadius;
47

48
    &.p-slider-horizontal {
49
        height: $sliderHorizontalHeight;
50

51
        .p-slider-handle {
52
            margin-top: math.div(-1 * $sliderHandleHeight, 2);
53
            margin-left: math.div(-1 * $sliderHandleWidth, 2);
54
        }
55
    }
56

57
    &.p-slider-vertical {
58
        width: $sliderVerticalWidth;
59

60
        .p-slider-handle {
61
            margin-left: math.div(-1 * $sliderHandleWidth, 2);
62
            margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
63
        }
64
    }
65

66
    .p-slider-handle {
67
        height: $sliderHandleHeight;
68
        width: $sliderHandleWidth;
69
        background: $sliderHandleBg;
70
        border: $sliderHandleBorder;
71
        border-radius: $sliderHandleBorderRadius;
72
        transition: $formElementTransition;
73
        outline-color: transparent;
74

75
        &:focus-visible {
76
            @include focused();
77
        }
78
    }
79

80
    .p-slider-range {
81
        background: $sliderRangeBg;
82
        border-radius: $borderRadius;
83
    }
84

85
    &:not(.p-disabled) {
86
        .p-slider-handle:hover {
87
            background: $sliderHandleHoverBg;
88
            border-color: $sliderHandleHoverBorderColor;
89
        }
90
    }
91
}
92