[#181] resolve operations-dropdown behaviour: search-result are at the top if applicable, categories below. clearing search value will display categories

This commit is contained in:
Robin Scholtes 2023-04-20 14:59:22 +12:00
parent 4faaae3151
commit 7ae22ff16b
7 changed files with 36 additions and 35 deletions

View file

@ -1,14 +1,34 @@
/**
* Operations component styles
*
* For consistency sake I'm using an ID, but the custom wrapper / dropdown component
* can ( should ) be made into a reusable, generic component
*/
.operations-wrapper {
#operations-wrapper {
position: relative;
}
#operations-dropdown {
position: absolute;
top: 40px; /* the height of the input[type="search"] with pos relative */
width: 100%;
height: auto;
max-height: 60vh;
overflow: auto;
z-index: 20; /* to dropdown on top of all the other elements */
border-bottom: 1px solid var(--primary-border-colour);
}
#reset-operations.hidden,
#search-results.hidden,
#categories.hidden {
z-index: -10;
display: none;
}
@media only screen and ( min-width: 768px ){
#operations-dropdown {
border-bottom: none;
}
}