45 lines
965 B
CSS
45 lines
965 B
CSS
/**
|
|
* 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 {
|
|
background-color: var(--primary-background-colour);
|
|
}
|
|
|
|
#operations-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
#operations-dropdown {
|
|
position: absolute;
|
|
top: var(--banner-height);
|
|
width: 100%;
|
|
height: auto;
|
|
overflow: auto;
|
|
z-index: 20; /* to dropdown on top of all the other elements */
|
|
background-color: var(--secondary-background-colour);
|
|
}
|
|
|
|
#close-operations-dropdown.hidden,
|
|
#search-results.hidden,
|
|
#categories.hidden {
|
|
z-index: -10;
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and ( min-width: 768px ){
|
|
#operations-dropdown {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* On desktop UI, the dropdown is always open */
|
|
#search-results.hidden,
|
|
#categories.hidden {
|
|
z-index: initial;
|
|
display: block;
|
|
}
|
|
}
|