fix: focus-ring styles

This commit is contained in:
iCrawl
2022-09-21 15:46:44 +02:00
parent 0b12d6fa10
commit 9b40a79b3e
15 changed files with 101 additions and 49 deletions

View File

@@ -35,7 +35,11 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
<div id={key} className="scroll-mt-30 flex flex-col gap-4">
<div className="flex flex-col">
<div className="flex flex-col gap-2 md:-ml-9 md:flex-row md:place-items-center">
<a className="hidden md:inline-block" aria-label="Anchor" href={`#${key}`}>
<a
className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
aria-label="Anchor"
href={`#${key}`}
>
<FiLink size={20} />
</a>
{data.deprecated ||
@@ -72,7 +76,7 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
<div className="flex flex-row place-items-center gap-2">
<MenuButton
state={menu}
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
>
<div className="flex flex-row place-content-between place-items-center gap-2">
<VscVersions size={20} />
@@ -88,12 +92,12 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
</MenuButton>
<Menu
state={menu}
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
>
{data.mergedSiblings.map((_, idx) => (
<MenuItem
key={idx}
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 cursor-pointer rounded bg-white p-3 text-sm"
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 focus:ring"
onClick={() => setOverloadIndex(idx + 1)}
>{`Overload ${idx + 1}`}</MenuItem>
))}