feat: highlight focused menu items

isqua · Oct 23, 2023 · 44e612b · 44e612b
1 parent 25c9649
commit 44e612b
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/components/Menu/Item/Item.module.css b/src/components/Menu/Item/Item.module.css
@@ -10,9 +10,10 @@
         var(--menu-item-inline-end-padding)
         var(--menu-item-block-padding)
         var(--menu-item-inline-start-padding);
+    border: 1px solid transparent;
     color: var(--color-general-text);
     text-decoration: none;
-    transition: color 0.15s, background-color 0.15s;
+    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
 }
 
 .text {
@@ -35,6 +36,11 @@
     background-color: var(--color-secondary-background);
 }
 
+.link:focus {
+    border-color: var(--color-active-background);
+    outline: none;
+}
+
 .link.parent {
     background-color: var(--color-secondary-background);
 }