Autocomplete suggestion focus outline (#1989)

elixir-lang · Dec 30, 2024 · 10c4e70 · 10c4e70
1 parent f72d6d5
commit 10c4e70
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css
@@ -136,8 +136,14 @@
   font-size: 0.9rem;
 }
 
-.autocomplete-suggestion:hover,
+
 .autocomplete-suggestion.selected {
+  background-color: var(--autocompleteSelected);
+  /* focus indicator on left, similar to default in focus.css  */
+  box-shadow: inset 2px 0 var(--main);
+}
+
+.autocomplete-suggestion:hover {
   background-color: var(--autocompleteHover);
 }
 

diff --git a/assets/css/custom-props/theme-dark.css b/assets/css/custom-props/theme-dark.css
@@ -91,6 +91,7 @@ body.dark {
   --searchSearch:                var(--gray900);
   --autocompleteBorder:          rgba(28,42,60,.75);
   --autocompletePreview:         var(--gray750);
+  --autocompleteSelected:        var(--gray750);
   --autocompleteHover:           var(--gray700);
   --autocompleteBackground:      var(--gray800);
   --suggestionBorder:            var(--gray600);

diff --git a/assets/css/custom-props/theme-light.css b/assets/css/custom-props/theme-light.css
@@ -92,7 +92,8 @@
   --searchSearch:                var(--white);
   --autocompleteBorder:          rgba(3, 9, 19, 0.10);
   --autocompletePreview:         var(--gray25);
-  --autocompleteHover:           var(--grey50, #F0F5F9);
+  --autocompleteSelected:        var(--gray25);
+  --autocompleteHover:           var(--gray50);
   --autocompleteBackground:      var(--white);
   --suggestionBorder:            var(--gray200);
   --autocompleteResults:         var(--gray600);