www.reboot.components.nf-autosuggest.nf-autosuggest.css Maven / Gradle / Ivy
:host {
display: inline-block;
cursor: pointer;
font-size: 14px;
font-family: inherit;
position: relative;
min-width: 240px;
border: none;
}
input {
width: 100%;
margin: 0;
}
/*fixes width change in Safari/FF when there are no matches*/
:host(.is-ready) input {
display: inline-block;
}
#filteredSelect {
display: none;
position: absolute;
z-index: 9999;
width: calc(100% - 2px);
}
/*#filteredSelect:focus,*/
/*#search:focus ~ #filteredSelect {*/
:host(.is-focused) #filteredSelect,
:host(.is-focused) #search ~ #filteredSelect {
display:inline-block;
}
#filteredSelect[size="0"] {
display: none !important;
}
ol {
border: 1px solid #D9D9D9;
padding: 0.5em 0.6em;
margin: 0;
background-color: #ccc;
}
li {
list-style: none;
background-color: #ccc;
}
input,
li,
select {
font-size: inherit;
font-family: inherit;
}
#search {
padding: 0.2em 30px 0.2em 0.7em;
}
#clear {
position: absolute;
width: 20px;
height: 20px;
top: 3px;
right: 3px;
}
#loadingIcon {
position: absolute;
top: 6px;
left: 5px;
display: none;
}
:host(.is-loading) #loadingIcon,
:host([loading]) #loadingIcon {
display: inline-block;
}
/* from styleguide */
.is-hidden {
display: none;
}
input,
select {
padding: 0.5em 0.6em;
display: inline-block;
border: 1px solid #D9D9D9;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #6A6A6A;
}
input:focus,
select:focus {
outline: 0;
border-color: #129FEA;
}
input::placeholder {
color: #C4C4C4;
font-weight: 300;
}
input.is-invalid {
color: #b94a48;
border-color: #e9322d;
}