rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: increase switch/radio sizing on mobile

Browse Source
This commit is contained in:
Aman Harwara
2023-05-15 19:57:05 +05:30
parent 1ad7aa27f8
commit 19ee9ecb41
4 changed files with 71 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/web/src/javascripts/Components/Switch/Switch.tsx
View File

@@ -19,7 +19,7 @@ const Switch = ({
return (
<label
className={classNames(
'relative box-content inline-block h-4.5 w-8 flex-shrink-0 cursor-pointer rounded-full border-2 border-solid border-transparent bg-clip-padding transition-colors duration-150 ease-out',
'relative box-content inline-block h-8 w-13 flex-shrink-0 cursor-pointer rounded-full border-2 border-solid border-transparent bg-clip-padding transition-colors duration-150 ease-out md:h-4.5 md:w-8',
'ring-2 ring-transparent focus-within:border-default focus-within:shadow-none focus-within:outline-none focus-within:ring-info',
disabled ? 'opacity-50' : '',
isActive ? 'bg-info' : 'bg-neutral',
@@ -37,8 +37,8 @@ const Switch = ({
</VisuallyHidden>
<div
className={classNames(
'absolute left-[2px] top-1/2 block h-3.5 w-3.5 -translate-y-1/2 rounded-full bg-default transition-transform duration-150 ease-out',
checked ? 'translate-x-[calc(2rem-1.125rem)]' : '',
'absolute left-[0.275rem] top-1/2 block h-6 w-6 -translate-y-1/2 rounded-full bg-default transition-transform duration-150 ease-out md:left-[2px] md:h-3.5 md:w-3.5',
checked ? 'translate-x-[calc(3.25rem-1.5rem-0.5rem)] md:translate-x-[calc(2rem-1.125rem)]' : '',
)}
/>
</label>