/
checkbox.css
64 lines (56 loc) · 1.08 KB
/
checkbox.css
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
.checkbox-label {
@apply grid;
@apply justify-start;
@apply cols-auto;
@apply gap-2;
@apply min-h-0;
@apply cursor-pointer;
@apply text-gray-800;
}
.checkbox {
width: 1.5em;
height: 1.5em;
@apply border-none;
@apply appearance-none;
}
.checkbox:before {
@apply absolute;
width: 1.5em;
height: 1.5em;
@apply border;
@apply border-tint-200;
@apply bg-gray-50;
@apply shadow-input;
@apply rounded-sm;
@apply overflow-hidden;
content: '';
}
.checkbox:after {
@apply absolute;
top: 50%;
left: 50%;
@apply text-purple-500;
font-size: 1.2em;
font-weight: 900;
line-height: 1;
content: '✓';
transition: transform 0.1s;
transform: translate(-50%, -50%) scale(0);
}
.checkbox:focus,
.checkbox:hover {
@apply outline-none;
}
.checkbox:focus:before {
@apply border-tint-300;
@apply bg-white;
}
.checkbox:hover:before {
@apply border-tint-300;
}
.checkbox:checked:after {
transform: translate(-50%, -50%) scale(1);
}
.checkbox:disabled {
@apply opacity-50;
}