@basis-ng/styles 0.0.1-alpha.124 → 0.0.1-alpha.126
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/checkbox.css +53 -18
package/package.json
CHANGED
|
@@ -1,31 +1,66 @@
|
|
|
1
|
-
|
|
2
|
-
/* Base
|
|
3
|
-
@apply
|
|
1
|
+
button[b-checkbox] {
|
|
2
|
+
/* Base */
|
|
3
|
+
@apply inline-flex items-center justify-center align-middle select-none text-secondary-foreground bg-background inset-ring-1 inset-ring-ring shadow-xs;
|
|
4
|
+
@apply dark:bg-background-dark dark:text-secondary-foreground-dark dark:inset-ring-ring-dark;
|
|
5
|
+
@apply size-5 rounded-size-sm;
|
|
6
|
+
|
|
7
|
+
&:not([data-disabled]) {
|
|
8
|
+
@apply cursor-pointer hover:bg-secondary/20;
|
|
9
|
+
@apply dark:hover:bg-secondary-dark/30;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&[data-disabled] {
|
|
13
|
+
@apply opacity-50 cursor-not-allowed;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&[data-state='checked'] {
|
|
17
|
+
@apply bg-primary text-primary-foreground inset-ring-primary;
|
|
18
|
+
@apply dark:bg-primary-dark dark:text-primary-foreground-dark dark:inset-ring-primary-dark;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&[data-state='checked']:not([data-disabled]) {
|
|
22
|
+
@apply hover:bg-primary/80;
|
|
23
|
+
@apply dark:hover:bg-primary-dark/80;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&:focus-visible {
|
|
27
|
+
@apply outline-2 outline-offset-4 outline-primary;
|
|
28
|
+
@apply dark:outline-primary-dark;
|
|
29
|
+
}
|
|
4
30
|
|
|
5
31
|
/* Sizes */
|
|
6
32
|
&.b-size-sm {
|
|
7
|
-
@apply
|
|
8
|
-
}
|
|
9
|
-
&.b-size-md {
|
|
10
|
-
@apply w-5 h-5 rounded-md;
|
|
33
|
+
@apply size-4 rounded-size-xs;
|
|
11
34
|
}
|
|
12
35
|
&.b-size-lg {
|
|
13
|
-
@apply
|
|
36
|
+
@apply size-6 rounded-size-md;
|
|
14
37
|
}
|
|
15
38
|
|
|
16
|
-
|
|
17
|
-
@apply
|
|
39
|
+
.b-checkbox-indicator {
|
|
40
|
+
@apply pointer-events-none flex items-center justify-center text-current;
|
|
41
|
+
}
|
|
18
42
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
43
|
+
&.b-size-sm .b-checkbox-indicator svg {
|
|
44
|
+
@apply h-2.5 w-2.5;
|
|
22
45
|
}
|
|
23
46
|
|
|
24
|
-
|
|
25
|
-
@apply
|
|
47
|
+
&.b-size-md .b-checkbox-indicator svg {
|
|
48
|
+
@apply h-3 w-3;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&.b-size-lg .b-checkbox-indicator svg {
|
|
52
|
+
@apply h-3.5 w-3.5;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&[data-state='unchecked'] .b-checkbox-indicator {
|
|
56
|
+
@apply opacity-0 scale-75;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&[data-state='checked'] .b-checkbox-indicator {
|
|
60
|
+
@apply opacity-100 scale-100;
|
|
61
|
+
}
|
|
26
62
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
63
|
+
svg {
|
|
64
|
+
@apply block;
|
|
30
65
|
}
|
|
31
66
|
}
|