mirror of
https://github.com/gchq/CyberChef.git
synced 2025-05-08 15:25:01 -04:00
[#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:
parent
4faaae3151
commit
7ae22ff16b
7 changed files with 36 additions and 35 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue