codecheck

1
// core
2
.p-checkbox {
3
    position: relative;
4
    display: inline-flex;
5
    user-select: none;
6
    vertical-align: bottom;
7
}
8

9
.p-checkbox-input {
10
    cursor: pointer;
11
}
12

13
.p-checkbox-box {
14
    display: flex;
15
    justify-content: center;
16
    align-items: center;
17
}
18

19
// theme
20
.p-checkbox {
21
    width: $checkboxWidth;
22
    height: $checkboxHeight;
23

24
    .p-checkbox-input {
25
        appearance: none;
26
        position: absolute;
27
        top: 0;
28
        left: 0;
29
        width: 100%;
30
        height: 100%;
31
        padding: 0;
32
        margin: 0;
33
        opacity: 0;
34
        z-index: 1;
35
        outline: 0 none;
36
        border: $checkboxBorder;
37
        border-radius: $borderRadius;
38
    }
39

40
    .p-checkbox-box {
41
        border: $checkboxBorder;
42
        background: $inputBg;
43
        width: $checkboxWidth;
44
        height: $checkboxHeight;
45
        color: $textColor;
46
        border-radius: $borderRadius;
47
        transition: $formElementTransition;
48
        outline-color: transparent;
49

50
        .p-checkbox-icon {
51
            transition-duration: $transitionDuration;
52
            color: $checkboxIconActiveColor;
53
            font-size: $checkboxIconFontSize;
54

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

62
    &.p-highlight {
63
        .p-checkbox-box {
64
            border-color: $checkboxActiveBorderColor;
65
            background: $checkboxActiveBg;
66
        }
67
    }
68

69
    &:not(.p-disabled) {
70
        &:has(.p-checkbox-input:hover) {
71
            .p-checkbox-box {
72
                border-color: $inputHoverBorderColor;
73
            }
74

75
            &.p-highlight {
76
                .p-checkbox-box {
77
                    border-color: $checkboxActiveHoverBorderColor;
78
                    background: $checkboxActiveHoverBg;
79
                    color: $checkboxIconActiveHoverColor;
80
                }
81
            }
82
        }
83

84
        &:has(.p-checkbox-input:focus-visible) {
85
            .p-checkbox-box {
86
                @include focused-input();
87
            }
88
        }
89
    }
90

91
    &.p-invalid > .p-checkbox-box {
92
        @include invalid-input();
93
    }
94

95
    &.p-variant-filled {
96
        .p-checkbox-box {
97
            background-color: $inputFilledBg;
98
        }
99

100
        &.p-highlight {
101
            .p-checkbox-box {
102
                background: $checkboxActiveBg;
103
            }
104
        }
105

106
        &:not(.p-disabled) {
107
            &:has(.p-checkbox-input:hover) {
108
                .p-checkbox-box {
109
                    background-color: $inputFilledHoverBg;
110
                }
111

112
                &.p-highlight {
113
                    .p-checkbox-box {
114
                        background: $checkboxActiveHoverBg;
115
                    }
116
                }
117
            }
118
        }
119
    }
120
}
121

122
.p-input-filled {
123
    .p-checkbox {
124
        .p-checkbox-box {
125
            background-color: $inputFilledBg;
126
        }
127

128
        &.p-highlight {
129
            .p-checkbox-box {
130
                background: $checkboxActiveBg;
131
            }
132
        }
133

134
        &:not(.p-disabled) {
135
            &:has(.p-checkbox-input:hover) {
136
                .p-checkbox-box {
137
                    background-color: $inputFilledHoverBg;
138
                }
139

140
                &.p-highlight {
141
                    .p-checkbox-box {
142
                        background: $checkboxActiveHoverBg;
143
                    }
144
                }
145
            }
146
        }
147
    }
148
}
149

150
@if ($highlightBg == $checkboxActiveBg) {
151
    .p-highlight {
152
        .p-checkbox {
153
            .p-checkbox-box {
154
                border-color: $checkboxIconActiveColor;
155
            }
156
        }
157
    }
158
}
159