components/AutoComplete/AutoComplete.scss
.rf-autocomplete {
position: relative;
}
.ac-searchbox {
outline: none;
border-radius: 2px;
border: 1px solid #eee;
width: 100%;
box-sizing: border-box;
will-change: border-color;
transition: border-color .2s ease-in;
background-color: #ffffff;
&:focus {
border: 1px solid deepskyblue;
}
.disabled & {
pointer-events: none;
background-color: #fafafa;
}
&.tags{
padding-left: 10px;
}
}
.ac-searchbox-input{
width: 100%;
padding: 10px;
font-size: 12px;
line-height: 14px;
border:none;
outline: none;
font-family: inherit;
box-sizing: border-box;
background-color: transparent;
.tags &{
display: inline-block;
max-width: 150px;
vertical-align: top;
padding-left: 0;
}
}
.ac-suggestions-wrapper {
border: 1px solid #eee;
border-top: 0;
background-color: #fff;
position: absolute;
width: 100%;
box-sizing: border-box;
}
.ac-suggestion {
font-size: 12px;
line-height: 30px;
padding: 0 10px;
color: #666;
border-bottom: 1px solid #eeeeee;
&:last-of-type {
border-bottom: none;
}
&.ac-suggestion-active {
background-color: #fafafa;
}
}
.ac-reset {
position: absolute;
right: 10px;
top: 8px;
cursor: pointer;
}
.ac-tag-wrapper{
display: inline-block;
padding: 6px 0;
float: left;
font-size: 12px;
}
.ac-tag {
display: inline-block;
background-color: cornflowerblue;
color: #fff;
border-radius: 2px;
padding: 0 5px;
line-height: 22px;
margin-right: 5px;
}
.ac-tag-remove {
padding-left: 5px;
cursor: pointer;
border-left: 1px solid #a5c5ff;
margin-left: 5px;
}