codecheck

1
@use 'sass:math';
2

3
// core
4
.p-inputswitch {
5
    display: inline-block;
6
}
7

8
.p-inputswitch-input {
9
    cursor: pointer;
10
}
11

12
.p-inputswitch-slider {
13
    position: absolute;
14
    cursor: pointer;
15
    top: 0;
16
    left: 0;
17
    right: 0;
18
    bottom: 0;
19
    border: 1px solid transparent;
20
}
21

22
.p-inputswitch-slider:before {
23
    position: absolute;
24
    content: '';
25
    top: 50%;
26
}
27

28
// theme
29
.p-inputswitch {
30
    width: $inputSwitchWidth;
31
    height: $inputSwitchHeight;
32

33
    .p-inputswitch-input {
34
        appearance: none;
35
        position: absolute;
36
        top: 0;
37
        left: 0;
38
        width: 100%;
39
        height: 100%;
40
        padding: 0;
41
        margin: 0;
42
        opacity: 0;
43
        z-index: 1;
44
        outline: 0 none;
45
        border-radius: $inputSwitchBorderRadius;
46
    }
47

48
    .p-inputswitch-slider {
49
        background: $inputSwitchSliderOffBg;
50
        transition: $formElementTransition;
51
        border-radius: $inputSwitchBorderRadius;
52
        outline-color: transparent;
53

54
        &:before {
55
            background: $inputSwitchHandleOffBg;
56
            width: $inputSwitchHandleWidth;
57
            height: $inputSwitchHandleHeight;
58
            left: $inputSwitchSliderPadding;
59
            margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
60
            border-radius: $inputSwitchHandleBorderRadius;
61
            transition-duration: $transitionDuration;
62
        }
63
    }
64

65
    &.p-highlight {
66
        .p-inputswitch-slider {
67
            background: $inputSwitchSliderOnBg;
68

69
            &:before {
70
                background: $inputSwitchHandleOnBg;
71
                transform: translateX($inputSwitchHandleWidth);
72
            }
73
        }
74
    }
75

76
    &:not(.p-disabled) {
77
        &:has(.p-inputswitch-input:hover) {
78
            .p-inputswitch-slider {
79
                background: $inputSwitchSliderOffHoverBg;
80
            }
81

82
            &.p-highlight {
83
                .p-inputswitch-slider {
84
                    background: $inputSwitchSliderOnHoverBg;
85
                }
86
            }
87
        }
88

89
        &:has(.p-inputswitch-input:focus-visible) {
90
            .p-inputswitch-slider {
91
                @include focused();
92
            }
93
        }
94
    }
95

96
    &.p-invalid > .p-inputswitch-slider {
97
        @include invalid-input();
98
    }
99
}