/
checkbox.css
92 lines (89 loc) 路 3.01 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
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
.checkbox {
--chkbg: var(--bc);
--chkfg: var(--b1);
@apply h-6 w-6 cursor-pointer appearance-none border border-base-content border-opacity-20 rounded-btn;
&:focus-visible {
outline: 2px solid hsl(var(--bc));
outline-offset: 2px;
}
&:checked,
&[checked="true"],
&[aria-checked="true"] {
@apply bg-base-content bg-no-repeat;
animation: checkmark var(--animation-input, 0.2s) ease-in-out;
background-image: linear-gradient(-45deg, transparent 65%, hsl(var(--chkbg)) 65.99%), linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 75.99%), linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 40.99%), linear-gradient(45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 30.99%, hsl(var(--chkfg)) 40%, transparent 40.99%), linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
}
&:indeterminate {
@apply bg-base-content bg-no-repeat;
animation: checkmark var(--animation-input, 0.2s) ease-in-out;
background-image: linear-gradient(90deg, transparent 80%, hsl(var(--chkbg)) 80%), linear-gradient(-90deg, transparent 80%, hsl(var(--chkbg)) 80%), linear-gradient(0deg, hsl(var(--chkbg)) 43%, hsl(var(--chkfg)) 43%, hsl(var(--chkfg)) 57%, hsl(var(--chkbg)) 57%);
}
&-primary {
--chkbg: var(--p);
--chkfg: var(--pc);
@apply border-primary hover:border-primary;
&:focus-visible {
outline: 2px solid hsl(var(--p));
}
&:checked,
&[checked="true"],
&[aria-checked="true"] {
@apply border-primary bg-primary text-primary-content;
}
}
&-secondary {
--chkbg: var(--s);
--chkfg: var(--sc);
@apply border-secondary hover:border-secondary;
&:focus-visible {
outline: 2px solid hsl(var(--s));
}
&:checked,
&[checked="true"],
&[aria-checked="true"] {
@apply border-secondary bg-secondary text-secondary-content;
}
}
&-accent {
--chkbg: var(--a);
--chkfg: var(--ac);
@apply border-accent hover:border-accent;
&:focus-visible {
outline: 2px solid hsl(var(--a));
}
&:checked,
&[checked="true"],
&[aria-checked="true"] {
@apply border-accent bg-accent text-accent-content;
}
}
&:disabled {
@apply cursor-not-allowed border-transparent bg-base-content opacity-20;
}
}
@keyframes checkmark {
0% {
background-position-y: 5px;
}
50% {
background-position-y: -2px;
}
100% {
background-position-y: 0;
}
}
/* backward comptability */
.checkbox-mark {
@apply hidden;
}
[dir="rtl"] {
.checkbox {
--chkbg: var(--bc);
--chkfg: var(--b1);
&:checked,
&[checked="true"],
&[aria-checked="true"] {
background-image: linear-gradient(45deg, transparent 65%, hsl(var(--chkbg)) 65.99%), linear-gradient(-45deg, transparent 75%, hsl(var(--chkbg)) 75.99%), linear-gradient(45deg, hsl(var(--chkbg)) 40%, transparent 40.99%), linear-gradient(-45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 30.99%, hsl(var(--chkfg)) 40%, transparent 40.99%), linear-gradient(45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
}
}
}