-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Bootstrap 3 Styling
Josh edited this page May 23, 2014
·
1 revision
The following Sass/LESS rules will make jQuery Autocomplete suggestions resemble Bootstrap 3 dropdowns.
Sass
.autocomplete-selected
background: $dropdown-link-hover-bg
color: $dropdown-link-hover-color
.autocomplete-suggestion
cursor: pointer
overflow: hidden // From the jQuery Autocomplete README.
padding: 3px 20px // Same as .dropdown-menu links.
white-space: nowrap // From the jQuery Autocomplete README.
.autocomplete-suggestions
background: $dropdown-bg
border: 1px solid $dropdown-border
border-radius: $border-radius-base // From the .dropdown-menu rule.
+box-shadow(0 6px 12px rgba(0,0,0,.175)) // From the .dropdown-menu rule.
overflow: auto // From the jQuery Autocomplete README.
padding: 5px 0 // From the .dropdown-menu rule.
LESS
.autocomplete-selected {
background: @dropdown-link-hover-bg;
color: @dropdown-link-hover-color;
}
.autocomplete-suggestion {
cursor: pointer;
overflow: hidden; // From the jQuery Autocomplete README.
padding: 3px 20px; // Same as .dropdown-menu links.
white-space: nowrap; // From the jQuery Autocomplete README.
}
.autocomplete-suggestions {
background: @dropdown-bg;
border: 1px solid @dropdown-border;
border-radius: @border-radius-base; // From the .dropdown-menu rule.
.box-shadow(0 6px 12px rgba(0,0,0,.175)); // From the .dropdown-menu rule.
overflow: auto; // From the jQuery Autocomplete README.
padding: 5px 0; // From the .dropdown-menu rule.
}