elixir/http/autocomplete.css
Maxime Chretien 086250fb03 web : Add autocompletion for ident search bar
To do that we use a slightly modified version of the script found here:
https://github.com/autocompletejs/autocomplete.js/tree/2.7
This code is under MIT licence so it's compatible with Elixir's licence

The server answers requests from the script via a new interface:
https://elixir.bootlin.com/acp?q=<query>&f=<family>&p=<project>

And this is handled by autocomplete.py
The script creates and uses a tmp file to store idents for each project
in order to reduce the time needed to answer a request.

Signed-off-by: Maxime Chretien <maxime.chretien@bootlin.com>
2020-06-11 14:38:44 +02:00

89 lines
2.1 KiB
CSS

/*
* @license MIT
*
* Autocomplete.js v2.7.1
* Developed by Baptiste Donaux
* http://autocomplete-js.com
*
* (c) 2017, Baptiste Donaux
*
* Modified by Maxime Chretien <maxime.chretien@bootlin.com>
* for the needs of Elixir Cross Referencer
* https://github.com/bootlin/elixir
*
*/
input[data-autocomplete] {
border-color: #808080;
border-style: none none solid none;
border-width: 0px 0px 1px 0px;
margin: 0px;
padding: 5px;
width: 100%;
}
.autocomplete {
position: absolute;
transition: all 0.5s ease 0s;
max-height: 0;
overflow-y: hidden;
transition-duration: 0.3s;
transition-property: all;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.autocomplete:active,
.autocomplete:focus,
.autocomplete:hover {
background-color: #EEEEEE;
transition: all 0.5s ease 0s;
}
.autocomplete:empty {
display: none;
}
.autocomplete > ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.autocomplete > ul > li {
cursor: pointer;
padding: 5px 0 5px 10px;
white-space: nowrap;
}
.autocomplete > ul > li.active,
.autocomplete > ul > li:active,
.autocomplete > ul > li:focus,
.autocomplete > ul > li:hover {
background-color: #DDDDDD;
transition: all 0.5s ease 0s;
}
.autocomplete > ul > li.active a:active,
.autocomplete > ul > li:active a:active,
.autocomplete > ul > li:focus a:active,
.autocomplete > ul > li:hover a:active,
.autocomplete > ul > li.active a:focus,
.autocomplete > ul > li:active a:focus,
.autocomplete > ul > li:focus a:focus,
.autocomplete > ul > li:hover a:focus,
.autocomplete > ul > li.active a:hover,
.autocomplete > ul > li:active a:hover,
.autocomplete > ul > li:focus a:hover,
.autocomplete > ul > li:hover a:hover {
text-decoration: none;
}
.autocomplete > ul > li.locked {
cursor: inherit;
}
.autocomplete.open {
display: block;
transition: all 0.5s ease 0s;
background-color: #EEEEEE;
max-height: 500px;
overflow-y: auto;
transition-duration: 0.3s;
transition-property: all;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
z-index: 100;
}
.autocomplete.open:empty {
display: none;
}