opensourcemirror
/
daisyui
mirror of https://github.com/saadeghi/daisyui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix: hardcoded checkbox background. Closes: #2585

This commit is contained in:
Pouya Saadeghi 2023-11-27 08:08:38 +03:30
parent d92ecdad8e
commit b2b87d2268
3 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/styled/checkbox.css
View File

@ -11,8 +11,9 @@
&:checked,
&[checked="true"],
&[aria-checked="true"] {
@apply bg-base-content bg-no-repeat;
@apply bg-no-repeat;
animation: checkmark var(--animation-input, 0.2s) ease-out;
background-color: var(--chkbg);
background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%),
linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%),
linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%),

9
src/docs/src/routes/(docs)/components/checkbox/+page.svelte.md
View File

@ -214,3 +214,12 @@ data="{[
<input type="checkbox" class="$$checkbox" id="my-checkbox" />`
}</pre>
</Component>
<Component title="Checkbox with custom colors">
<input type="checkbox" checked="checked" class="checkbox border-orange-400 checked:border-indigo-800 [--chkbg:theme(colors.indigo.600)] [--chkfg:orange]" />
<input type="checkbox" checked="checked" class="checkbox [--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]" />
<pre slot="html" use:replace={{ to: $prefix }}>{
`<input type="checkbox" checked="checked" class="$$checkbox border-orange-400 checked:border-indigo-800 [--chkbg:theme(colors.indigo.600)] [--chkfg:orange]" />
<input type="checkbox" checked="checked" class="$$checkbox [--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]" />`
}</pre>
</Component>

6
src/docs/src/routes/(docs)/docs/utilities/+page.svelte.md
View File

@ -115,8 +115,8 @@ tooltip
--tooltip-tail-offset // offset of tooltip tail from target element
checkbox
--chkbg // background color of checkbox (HSL values)
--chkfg // foreground color of checkbox (HSL values)
--chkbg // background color of checkbox
--chkfg // foreground color of checkbox
toggle
--tglbg // background color of toggle
@ -125,7 +125,7 @@ toggle
range
--filler-size // size of range thumb
--filler-offset // offset of range thumb
--range-shdw // shadow color of range thumb (HSL values)
--range-shdw // shadow color of range thumb (OKLCH values)
glass
--glass-blur // blur value of glass effect