UNPKG

vue-typeahead3

Version:

A super lightweight typeahead / autocompletion component for Vue.js 3. It's written in TypeScript using Vue.js 3 Composition API.

2 lines (1 loc) 1.82 kB
[data-v-9737757a]{box-sizing:border-box}html[data-v-9737757a],body[data-v-9737757a]{margin:0}body[data-v-9737757a]{color:#333;font-family:sans-serif;line-height:1.7;background-color:#87ceeb}.container[data-v-9737757a]{display:flex;width:300px;margin:2.5em auto;justify-content:flex-start}.container #app[data-v-9737757a]{width:100%}label[data-v-9737757a]{font-weight:700}.category[data-v-9737757a]{font-size:14px;font-weight:550;text-align:left;margin:2px 0}.typeahead-container[data-v-9737757a]{position:relative}.typeahead-container .search-container input[data-v-9737757a]{width:100%;padding:8px 10px;color:#333;border:2px solid #e5e5e5;border-radius:5px}.typeahead-container .search-container input[data-v-9737757a]:focus{outline:none}.typeahead-container .results-container[data-v-9737757a]{position:absolute;top:105%;width:100%}.typeahead-container .results[data-v-9737757a]{font-size:16px;text-align:left;display:block;width:100%;margin:0;padding:0;list-style-type:none;background-color:#fff;border:1px solid #f2f2f2;border-radius:5px}.typeahead-container .results li[data-v-9737757a]{padding:2px 6px;color:#333}.typeahead-container .results li[data-v-9737757a]:hover{cursor:pointer}.typeahead-container .results li.focused[data-v-9737757a],.typeahead-container .results li[data-v-9737757a]:hover{color:#fff;background:#0087ff}.typeahead-container .results li.focused[data-v-9737757a]:first-child,.typeahead-container .results li[data-v-9737757a]:hover:first-child{border-top-right-radius:5px;border-top-left-radius:5px}.typeahead-container .results li.focused[data-v-9737757a]:last-child,.typeahead-container .results li[data-v-9737757a]:hover:last-child{border-bottom-right-radius:5px;border-bottom-left-radius:5px}.typeahead-container .results li[data-v-9737757a]:not(:last-child){border-bottom:1px solid #f2f2f2}