// // Autocomplete // ============ // // // Variables // @autocomplete-border: #ddd; @autocomplete-border-radius: 2px; @autocomplete-results-bg: #fff; @autocomplete-zindex: @zindex-dropdown; @autocomplete-suggestion-link-hover-bg: #fafafa; // // Component // .autocomplete { position: relative; } .autocomplete-results { z-index: @autocomplete-zindex; position: absolute; margin: 5px 0; top: 100%; right: 0; border: 1px solid @autocomplete-border; border-radius: @autocomplete-border-radius; background-color: @autocomplete-results-bg; overflow: hidden; box-shadow: 0 1px 0 0 rgba(0,0,0,0.25); } .autocomplete-suggestion { border-top: 1px solid @autocomplete-border; &:first-child { border-top: none; } } .autocomplete-suggestion-link { padding: 5px 13px 5px 28px; display: block; text-decoration: none; .autocomplete-selected &, &:hover { background-color: @autocomplete-suggestion-link-hover-bg; text-decoration: none; } } .autocomplete-info { padding: 5px 15px; }