feat: support [checked=true] style on checkbox and toggle

saadeghi · Dec 26, 2021 · 8131232 · 8131232
1 parent 32d9a5a
commit 8131232
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/components/styled/checkbox.css b/src/components/styled/checkbox.css
@@ -5,7 +5,8 @@
   &:focus-visible {
     box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
   }
-  &:checked{
+  &:checked,
+  &[checked=true]{
     @apply bg-base-content bg-no-repeat;
     animation: checkmark var(--animation-input, .2s)  ease-in-out;
     background-image:
@@ -23,7 +24,8 @@
     &:focus-visible {
       box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
     }
-    &:checked{
+    &:checked,
+  &[checked=true]{
       @apply bg-primary border-primary text-primary-content;
     }
   }
@@ -34,7 +36,8 @@
     &:focus-visible {
       box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
     }
-    &:checked{
+    &:checked,
+  &[checked=true]{
       @apply bg-secondary border-secondary text-secondary-content;
     }
   }
@@ -45,7 +48,8 @@
     &:focus-visible {
       box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
     }
-    &:checked{
+    &:checked,
+  &[checked=true]{
       @apply bg-accent border-accent text-accent-content;
     }
   }

diff --git a/src/components/styled/toggle.css b/src/components/styled/toggle.css
@@ -8,7 +8,8 @@
   &:focus-visible {
     --focus-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
   }
-  &:checked{
+  &:checked,
+  &[checked=true]{
     --chkbg: hsl(var(--bc));
     @apply border-opacity-100 bg-opacity-100;
     box-shadow: var(--handleoffset) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset, var(--focus-shadow);
@@ -20,7 +21,8 @@
     &:focus-visible {
       --focus-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
     }
-    &:checked{
+    &:checked,
+    &[checked=true]{
       --chkbg: hsl(var(--p));
       @apply border-primary;
       @apply bg-primary border-opacity-10 border-primary text-primary-content;
@@ -30,7 +32,8 @@
     &:focus-visible {
       --focus-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
     }
-    &:checked{
+    &:checked,
+    &[checked=true]{
       --chkbg: hsl(var(--s));
       @apply border-secondary;
       @apply bg-secondary border-opacity-10 border-secondary text-secondary-content;
@@ -40,7 +43,8 @@
     &:focus-visible {
       --focus-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
     }
-    &:checked{
+    &:checked,
+    &[checked=true]{
       --chkbg: hsl(var(--a));
       @apply border-accent;
       @apply bg-accent border-opacity-10 border-accent text-accent-content;