Update autocomplete dropdown style

janfaracik · Dec 28, 2021 · e28f8a6 · e28f8a6
1 parent f9acb8d
commit e28f8a6
Showing 1 changed file with 41 additions and 8 deletions.
diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
@@ -918,23 +918,56 @@ table.parameters > tbody:hover {
 
 /* ========================= editable combobox style ========================= */
 .comboBoxList {
-  overflow: visible;
-  background-color: var(--background);
+  overflow-y: scroll;
   color: var(--text-color);
-  border-radius: var(--form-input-border-radius);
-  box-shadow: 0 10px 20px rgba(black, 0.1);
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgba(black, 0.15);
+  margin-top: 8px;
+  margin-left: 3px;
+  max-height: 300px;
+  z-index: 1000;
+  background: var(--background);
+  padding: 0.3rem;
 }
 
-.comboBoxSelectedItem {
-  background-color: var(--primary);
-  color: var(--background);
+.comboBoxItem {
+  position: relative;
+  padding: 0.5rem 0.8rem;
+  cursor: pointer;
+  font-weight: 500;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: var(--text-color);
+    border-radius: 10px;
+    opacity: 0;
+    transition: var(--standard-transition);
+    z-index: -1;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 0.1;
+    }
+  }
+
+  &:active,
+  &:focus {
+    &::before {
+      opacity: 0.2;
+    }
+  }
 }
 
 .combobox-values {
   display: none;
 }
 
-
 /* ========================= directory tree ========================= */
 .parentPath {
   font-size: var(--font-size-base);