Merge pull request Charlie85270#56 from wanacode/main

fix toggle button transition
xhendyagsx · Feb 4, 2021 · 08d2c13 · 08d2c13
2 parents 4396bec + 4354071
commit 08d2c13
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/components/kit/components/form/toggle/MultipleToggle.tsx b/components/kit/components/form/toggle/MultipleToggle.tsx
@@ -52,13 +52,13 @@ const MultipleToggle = (props: Props) => {
             {colors.map((color) => {
                 return (
                     <div key={color.label} className="mb-3">
-                        <div className="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
+                        <div className="relative inline-block w-10 mr-2 align-middle select-none">
                             <input
                                 type="checkbox"
                                 name="toggle"
                                 id={color.label}
                                 onChange={(e) => props.onChange(e.target.checked)}
-                                className={`${color.color} focus:outline-none checked:right-0 absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer`}
+                                className={`${color.color} outline-none focus:outline-none right-4 checked:right-0 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer`}
                             />
                             <label
                                 htmlFor={color.label}

diff --git a/components/kit/components/form/toggle/Toggle.tsx b/components/kit/components/form/toggle/Toggle.tsx
@@ -18,7 +18,7 @@ const Toggle = (props: Props) => {
                     id={id}
                     checked={props.check}
                     onChange={(e) => props.onChange(e.target.checked)}
-                    className="checked:right-0 checked:bg-blue-600 absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
+                    className="right-4 checked:right-0 duration-200 ease-in checked:bg-blue-600 absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
                 />
                 <label htmlFor={id} className="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer" />
             </div>