mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Updated toggle in AdminX Design System
refs. https://github.com/TryGhost/Team/issues/3150
This commit is contained in:
parent
e38af593dc
commit
d85286ecf2
1 changed files with 5 additions and 10 deletions
|
@ -40,23 +40,18 @@ const Toggle: React.FC<ToggleProps> = ({id, size, direction, label, hint, separa
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div className={`flex items-start gap-2 ${direction === 'rtl' && 'justify-between'} ${separator && 'pb-2'}`}>
|
||||
<div className={`group flex items-start gap-2 ${direction === 'rtl' && 'justify-between'} ${separator && 'pb-2'}`}>
|
||||
<input checked={checked}
|
||||
className={`appearance-none rounded-full bg-grey-300 after:absolute after:ml-0.5 after:mt-0.5 after:rounded-full after:border-none after:bg-white after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-green checked:after:absolute checked:after:rounded-full checked:after:border-none checked:after:bg-white checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer dark:bg-grey-600 dark:after:bg-grey-400 dark:checked:bg-green dark:checked:after:bg-green ${sizeStyles} ${direction === 'rtl' && ' order-2'}`}
|
||||
className={`appearance-none rounded-full bg-grey-300 transition after:absolute after:ml-0.5 after:mt-0.5 after:rounded-full after:border-none after:bg-white after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-green checked:after:absolute checked:after:rounded-full checked:after:border-none checked:after:bg-white checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer group-hover:bg-grey-400 checked:group-hover:bg-green-600 ${sizeStyles} ${direction === 'rtl' && ' order-2'}`}
|
||||
id={id}
|
||||
role="switch"
|
||||
type="checkbox"
|
||||
onChange={onChange} />
|
||||
{label &&
|
||||
<div className={`flex flex-col ${direction === 'rtl' && 'order-1'} ${labelStyles}`}>
|
||||
<label
|
||||
className={`inline-block hover:cursor-pointer`}
|
||||
htmlFor={id}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
<label className={`flex flex-col hover:cursor-pointer ${direction === 'rtl' && 'order-1'} ${labelStyles}`} htmlFor={id}>
|
||||
<span>{label}</span>
|
||||
{hint && <span className={`text-xs ${error ? 'text-red' : 'text-grey-700'}`}>{hint}</span>}
|
||||
</div>
|
||||
</label>
|
||||
}
|
||||
</div>
|
||||
{(separator || error) && <Separator color={error ? 'red' : ''} />}
|
||||
|
|
Loading…
Add table
Reference in a new issue