Update combobox css

rossta · rossta · commit be81a29818a8 · 2024-11-06T09:44:35.000-05:00
diff --git a/app/javascript/css/components/combobox.css b/app/javascript/css/components/combobox.css
@@ -5,8 +5,13 @@
     margin: 0;
   }
 
-  & a:hover,
-  & .selected {
-    background-color: var(--joy-block-selected);
+  & [role='option'] {
+    &:hover {
+      background-color: var(--joy-block-hover);
+    }
+
+    &.selected {
+      background-color: var(--joy-block-selected);
+    }
   }
 }
diff --git a/app/javascript/css/config/theme.css b/app/javascript/css/config/theme.css
@@ -76,6 +76,7 @@
   --joy-link-decoration: var(--joy-link-1);
   --joy-link-active: var(--joy-link-5);
 
+  --joy-block-hover: var(--joy-color-100);
   --joy-block-selected: var(--joy-color-200);
 
   --joy-button-primary: var(--joy-color-600);
@@ -129,7 +130,8 @@
   --joy-link-decoration: var(--joy-link-8);
   --joy-link-active: var(--joy-link-5);
 
-  --joy-block-selected: var(--joy-color-900);
+  --joy-block-hover: var(--joy-color-900);
+  --joy-block-selected: var(--joy-color-800);
 
   --joy-button-transparent: none;
   --joy-button-transparent-hover: var(--joy-color-950);
diff --git a/app/views/searches/listbox.rb b/app/views/searches/listbox.rb
@@ -13,7 +13,7 @@ def view_template
       ul(**mix(
         id: "search-listbox",
         role: "listbox",
-        class: ["grid"],
+        class: ["grid", ("hidden" unless pages.any? || query_long_enough?)],
         data: {
           controller: "search-listbox"
         }

Original file line number	Diff line number	Diff line change
`@@ -5,8 +5,13 @@`
`5`	`5`	`margin: 0;`
`6`	`6`	`}`
`7`	`7`
`8`		`- & a:hover,`
`9`		`- & .selected {`
`10`		`- background-color: var(--joy-block-selected);`
	`8`	`+ & [role='option'] {`
	`9`	`+ &:hover {`
	`10`	`+ background-color: var(--joy-block-hover);`
	`11`	`+ }`
	`12`	`+`
	`13`	`+ &.selected {`
	`14`	`+ background-color: var(--joy-block-selected);`
	`15`	`+ }`
`11`	`16`	`}`
`12`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ def view_template`
`13`	`13`	`ul(**mix(`
`14`	`14`	`id: "search-listbox",`
`15`	`15`	`role: "listbox",`
`16`		`- class: ["grid"],`
	`16`	`+ class: ["grid", ("hidden" unless pages.any? \|\| query_long_enough?)],`
`17`	`17`	`data: {`
`18`	`18`	`controller: "search-listbox"`
`19`	`19`	`}`