fix toggle button transition

LK4268 · Feb 4, 2021 · 1d0baae · 1d0baae
1 parent 4396bec
commit 1d0baae
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 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
@@ -11,14 +11,14 @@ const Toggle = (props: Props) => {
     const [id] = useState(_uniqueId('prefix-'));
     return (
         <div>
-            <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 transition duration-200 ease-in focus-within:ring-2 focus-within:ring-black focus-within:outline-none focus-within:ring-offset-2	 rounded-full">
                 <input
                     type="checkbox"
                     name="toggle"
                     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 outline-none"
                 />
                 <label htmlFor={id} className="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer" />
             </div>