M: Improve checkbox structure

This commit is contained in:
Ivan 2024-12-20 13:36:42 +03:00
parent d11ccb45c4
commit 2b73f5e6af
2 changed files with 6 additions and 16 deletions

View File

@ -65,7 +65,8 @@ function Checkbox({
<div <div
className={clsx( className={clsx(
'max-w-[1rem] min-w-[1rem] h-4', // prettier: split lines 'max-w-[1rem] min-w-[1rem] h-4', // prettier: split lines
'border rounded-sm ', 'pt-[0.1rem] pl-[0.1rem]',
'border rounded-sm',
'cc-animate-color', 'cc-animate-color',
{ {
'bg-sec-600 text-sec-0': value !== false, 'bg-sec-600 text-sec-0': value !== false,
@ -73,11 +74,7 @@ function Checkbox({
} }
)} )}
> >
{value ? ( {value ? <CheckboxChecked /> : null}
<div className='mt-[1px] ml-[1px]'>
<CheckboxChecked />
</div>
) : null}
</div> </div>
{label ? <span className={clsx('text-start text-sm whitespace-nowrap select-text', cursor)}>{label}</span> : null} {label ? <span className={clsx('text-start text-sm whitespace-nowrap select-text', cursor)}>{label}</span> : null}
</button> </button>

View File

@ -66,6 +66,7 @@ function CheckboxTristate({
<div <div
className={clsx( className={clsx(
'w-4 h-4', // prettier: split lines 'w-4 h-4', // prettier: split lines
'pt-[0.1rem] pl-[0.1rem]',
'border rounded-sm', 'border rounded-sm',
'cc-animate-color', 'cc-animate-color',
{ {
@ -74,16 +75,8 @@ function CheckboxTristate({
} }
)} )}
> >
{value ? ( {value ? <CheckboxChecked /> : null}
<div className='mt-[1px] ml-[1px]'> {value == null ? <CheckboxNull /> : null}
<CheckboxChecked />
</div>
) : null}
{value == null ? (
<div className='mt-[1px] ml-[1px]'>
<CheckboxNull />
</div>
) : null}
</div> </div>
{label ? <span className={clsx('text-start text-sm whitespace-nowrap select-text', cursor)}>{label}</span> : null} {label ? <span className={clsx('text-start text-sm whitespace-nowrap select-text', cursor)}>{label}</span> : null}
</button> </button>