Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ElasticSearch - Angular Search Styles
.searchbox {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 480px;
margin: 0 auto;
padding: 15px;
input {
padding: 5px 10px;
border: 1px solid #999;
border-radius: 4px;
&:focus { outline: none; }
}
.search-icon {
position: absolute;
top: 25px;
right: 25px;
color: #DDD;
cursor: text;
}
.clear-icon {
position: absolute;
top: 14px;
right: 27px;
font-size: 26px;
color: #DDD;
cursor: pointer;
}
}
.results {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
min-height: 70px;
margin: 10px 0;
padding: 10px;
background: #FFF;
border: 1px solid #FAFAFA;
border-radius: 4px;
box-shadow: 0 0 3px rgba(0,0,0, .25);
animation: fade-in .15s ease-in-out forwards;
li {
margin-bottom: 5px;
&:last-of-type { margin-bottom: 0; }
}
a {
display: flex;
flex-direction: row;
padding: 5px 5px 5px 0;
color: #212529;
overflow: hidden;
user-select: none;
@media (min-width: 768px) {
padding: 5px;
}
&:hover {
color: #555;
background: #FAFAFA;
border-radius: 3px;
}
i { margin: 3px 10px 0 5px; }
}
}
.no-results {
padding: 15px;
font-size: .85rem;
text-align: center;
}
.loading {
top: 18px;
right: 20px;
left: initial;
height: 30px;
width: 30px;
color: #DDD;
font-size: 16px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.