fix(VerticalNavigation): improve focus

nuxt · May 9, 2023 · 034a95d · 034a95d
1 parent 530d8a8
commit 034a95d
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
@@ -450,11 +450,11 @@ const container = {
 
 const verticalNavigation = {
   wrapper: 'relative',
-  base: 'group flex items-center gap-2 text-sm font-medium rounded-md w-full relative focus:outline-none before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
+  base: 'group flex items-center gap-2 text-sm font-medium rounded-md w-full relative focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
   spacing: 'px-3 py-1.5',
-  active: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800',
-  inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 focus-visible:before:bg-gray-50 dark:focus-visible:before:bg-gray-800/50',
-  label: 'truncate z-0',
+  active: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800 ',
+  inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
+  label: 'truncate relative',
   icon: {
     base: 'flex-shrink-0 w-4 h-4',
     active: 'text-gray-700 dark:text-gray-200',