clean-snippets/checkbox-styles.css at main · scmacoll/clean-snippets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
@layer properties {
    @property --checkbox-color-hue {
        syntax:'<number>';
        inherits: true;
        initial-value: 0;
    }
    @property --checkbox-color-saturation {
        syntax:'<number>';
        inherits: true;
        initial-value: 0;
    }
    @property --checkbox-color-lightness {
        syntax:'<number>';
        inherits: true;
        initial-value: 0;
    }
    @property --checkbox-color-light-lightness {
        syntax:'<number>';
        inherits: true;
        initial-value: 0;
    }
    @property --icon-opacity {
        syntax:'<number>';
        inherits: true;
        initial-value: 0;
    }
    @property --icon-invert {
        syntax:'<number>';
        inherits: true;
        initial-value: 0;
    }
    @property --icon-size {
        syntax:'<number>';
        inherits: true;
        initial-value: 0;
    }
    @property --negative-shadow-offset {
        syntax:'<number>';
        inherits: true;
        initial-value: 0;
    }
    @property --text-opacity {
        syntax:'<number>';
        inherits: true;
        initial-value: 0;
    }
}

:root {
    /* -- Colors: */
    --body-bg-color: hsl(221deg 16% 12%);
    --checkbox-color-hue: 216;
    --checkbox-color-saturation: 17;
    --checkbox-color-lightness: 15;
    --checkbox-color: hsl(
            calc(var(--checkbox-color-hue) * 1deg) /**/
            calc(var(--checkbox-color-saturation) * 1%) /**/
            calc(var(--checkbox-color-lightness) * 1%) /**/
    );
    --checkbox-color-light: rgba(255 255 255 / 32%);
    --checkbox-color-dark: rgba(0 0 0 / 45%);

    /* -- Box */
    --checkbox-border-radius: 24%;
    --checkbox-width: 14;
    --checkbox-height: 14;

    --text-opacity: 0.6;

    --negative-shadow-offset: 500;
    --active-shadow-opacity: 0;

    /* -- icon */
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' class='feather feather-check'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --icon-opacity: 0;
    --icon-size: 1;

    /* -- easing */
    --cubic-bezier: cubic-bezier(0.6, -1.2, 0.2, 2.2);

    /* -- misc */
    --debug: 0;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    /* debug */
    outline: calc(var(--debug) * 1px) dashed red;
}
label[for*="clean"] {
    cursor: pointer;
    display: flex;
    align-items: center;
    grid-gap: 8px;

    transition: --text-opacity .2s ease;

    &:hover {
        --text-opacity: 1;
        &:after {
            --icon-opacity: .50;
            --icon-invert: 100;
            --icon-size: 0.8;
        }

        & input[type="checkbox"] {
            --checkbox-color-hue: 216;
            --checkbox-color-saturation: 14;
            --checkbox-color-lightness: 18;
            --checkbox-color: hsl(
                    calc(var(--checkbox-color-hue) * 1deg)
                    calc(var(--checkbox-color-saturation) * 1%)
                    calc(var(--checkbox-color-lightness) * 1%)
            );
        }
    }


    /*!* label:after *!*/
    /*&:after {*/
    /*    content: "";*/
    /*    display: block;*/
    /*    position: absolute;*/
    /*    width: calc(var(--checkbox-width) * 1px);*/
    /*    height: calc(var(--checkbox-height) * 1px);*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    background-repeat: no-repeat;*/
    /*    background-position: center center;*/
    /*    background-size: 50%;*/
    /*    border-radius: var(--checkbox-border-radius);*/
    /*    pointer-events: none;*/
    /*    background-image: var(--icon-check);*/
    /*    filter: invert(100%);*/
    /*    opacity: var(--icon-opacity);*/
    /*    transform: scale(var(--icon-size));*/

    /*    !* here I couldn't animate --icon-invert *!*/
    /*    transition: opacity .3s ease, filter .3s ease, transform .3s var(--cubic-bezier);*/

    /*}*/

    /*&:has(input[type="checkbox"]:checked) {*/
    /*    &:after {*/
    /*        --icon-opacity: 1;*/
    /*    // For a reason, this wasn't possible using Scss*/
    /*    // If anyone wants to break their teeth on it*/
    /*    // type this in sassmeister.com*/
    /*        !**/
    /*        div {*/
    /*          filter: invert(calc(var(--icon-invert) * 1%));*/
    /*        }*/
    /*        *!*/
    /*    filter: invert(0%);*/

    /*    }*/
    /*}*/

    /* label input[type="checkbox"] */
    & input[type="checkbox"] {
        appearance: none;
        cursor: pointer;
        margin: 0;
        background: var(--checkbox-color);
        width: calc(var(--checkbox-width) * 1px);
        height: calc(var(--checkbox-height) * 1px);
        border: calc(calc(var(--checkbox-width) / 15) * 1px) solid black;
        border-radius: var(--checkbox-border-radius);
        box-shadow:inset 0 0 calc(calc(var(--checkbox-width) / 10) * 1px) rgba(0 0 0 / calc(var(--active-shadow-opacity))),
        inset 0
        calc(calc(var(--checkbox-width) / 20) * 1px)
        calc(calc(var(--checkbox-width) / 30) * 1px)
        calc(calc(var(--checkbox-width) / var(--negative-shadow-offset)) * -1px)

        var(--checkbox-color-light),
        inset 0 calc(calc(var(--checkbox-width) / 20) * -1px)
        calc(calc(var(--checkbox-width) / 15) * 1px) calc(calc(var(--checkbox-width) / var(--negative-shadow-offset)) * -1px) var(--checkbox-color-dark);
        transition: --checkbox-color-hue .1s ease,
        --checkbox-color-saturation .1s ease,
        --checkbox-color-lightness .1s ease,
        --checkbox-color 0s ease,
        --negative-shadow-offset .2s ease;


        &:active,
        &:checked {
            --checkbox-color-hue: 220;
            --checkbox-color-saturation: 100;
            --checkbox-color-lightness: 35;
            /*--checkbox-color-hue: 264;*/
            /*--checkbox-color-saturation: 56;*/
            /*--checkbox-color-lightness: 49;*/
            --checkbox-color: hsl(
                    calc(var(--checkbox-color-hue) * 1deg) /**/
                    calc(var(--checkbox-color-saturation) * 1%) /**/
                    calc(var(--checkbox-color-lightness) * 1%) /**/
            );
        }

        &:checked {
            --checkbox-color-hue: 220;
            --checkbox-color-saturation: 100;
            --checkbox-color-lightness: 35;
            /*--checkbox-color-hue: 265;*/
            /*--checkbox-color-saturation: 80;*/
            /*--checkbox-color-lightness: 61;*/
            --checkbox-color: hsl(
                    calc(var(--checkbox-color-hue) * 1deg)
                    calc(var(--checkbox-color-saturation) * 1%)
                    calc(var(--checkbox-color-lightness) * 1%)
            );
        }
    }


    &:active {
        --active-shadow-opacity: 0.8;
        &:after {
            --icon-size: 0.7;
        }

        & input[type="checkbox"] {
            --negative-shadow-offset: 0;
        }
    }
}