Bootstrap 3 Twitter Typeahead LESS Improvements
The following are some improvements I've made for Twitter Typeahead 0.9.3 with Bootstrap 3.
The typeahead-bootstrap.less
file should be imported at the end of the bootstrap.less
file.
typeahead-bootstrap.less
.tt-dropdown-menu
{
min-width: 160px;
width: 100%;
margin-top: 2px;
padding: 5px 0;
background-color: @dropdown-bg;
border: 1px solid #ccc;
border: 1px solid @dropdown-border;
*border-right-width: 2px;
*border-bottom-width: 2px;
.border-top-radius(6px);
.border-right-radius(6px);
.border-bottom-radius(6px);
.border-left-radius(6px);
.box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion
{
display: block;
padding: 3px 20px;
font-size: @font-size-base;
}
.tt-suggestion.tt-is-under-cursor
{
color: @dropdown-link-hover-color;
#gradient > .vertical(@dropdown-link-hover-bg, darken(@dropdown-link-hover-bg, 5%));
}
.tt-suggestion.tt-is-under-cursor a
{
color: @dropdown-bg;
}
.tt-suggestion p
{
margin: 0;
}
.tt-hint
{
font-size: @font-size-base;
line-height: @line-height-base;
width: 100%;
height: @input-height-base;
padding: @padding-base-vertical @padding-base-horizontal;
}
span.twitter-typeahead
{
width: 100%;
}