[v3] enable outline: 'none' only for :focus-visible state, to fix double ring in Firefox (#2768)

Dimitri POSTOLOV · web-flow · commit eeb4c4cd6228 · 2024-03-06T15:55:35.000+01:00
enable `outline: 'none'` only for `:focus-visible` state, to fix double ring in Firefox
diff --git a/.changeset/blue-suits-scream.md b/.changeset/blue-suits-scream.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+enable `outline: 'none'` only for `:focus-visible` state, to fix double ring in Firefox
diff --git a/packages/nextra-theme-docs/css/styles.css b/packages/nextra-theme-docs/css/styles.css
@@ -27,8 +27,8 @@ summary,
 button,
 input,
 [tabindex]:not([tabindex='-1']) {
-  @apply _outline-none;
   &:focus-visible {
+    @apply _outline-none;
     @apply _ring-2 _ring-primary-200 _ring-offset-1 _ring-offset-primary-300 dark:_ring-primary-800 dark:_ring-offset-primary-700;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -27,8 +27,8 @@ summary,`
`27`	`27`	`button,`
`28`	`28`	`input,`
`29`	`29`	`[tabindex]:not([tabindex='-1']) {`
`30`		`- @apply _outline-none;`
`31`	`30`	`&:focus-visible {`
	`31`	`+ @apply _outline-none;`
`32`	`32`	`@apply _ring-2 _ring-primary-200 _ring-offset-1 _ring-offset-primary-300 dark:_ring-primary-800 dark:_ring-offset-primary-700;`
`33`	`33`	`}`
`34`	`34`	`}`