.twitter-typeahead { width: 100%; position: relative; } .twitter-typeahead .tt-query, .twitter-typeahead .tt-hint { margin: 0; width: 100%; color: #555555; vertical-align: middle; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } .has-warning .twitter-typeahead .tt-query, .has-warning .twitter-typeahead .tt-hint { border-color: #c09853; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-error .twitter-typeahead .tt-query, .has-error .twitter-typeahead .tt-hint { border-color: #b94a48; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-success .twitter-typeahead .tt-query, .has-success .twitter-typeahead .tt-hint { border-color: #468847; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .twitter-typeahead .tt-query:focus, .twitter-typeahead .tt-hint:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } .has-warning .twitter-typeahead .tt-query:focus, .has-warning .twitter-typeahead .tt-hint:focus { border-color: #a47e3c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; } .has-error .twitter-typeahead .tt-query:focus, .has-error .twitter-typeahead .tt-hint:focus { border-color: #953b39; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; } .has-success .twitter-typeahead .tt-query:focus, .has-success .twitter-typeahead .tt-hint:focus { border-color: #356635; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; } .twitter-typeahead .tt-hint { color: #a1a1a1; z-index: 1; border: 1px solid transparent; } .input-group .twitter-typeahead .tt-query { z-index: 2; } .input-group .twitter-typeahead:first-child .tt-query, .input-group .twitter-typeahead:first-child .tt-hint { border-radius: 4px 0 0 4px !important; } .input-group .twitter-typeahead:last-child .tt-query, .input-group .twitter-typeahead:last-child .tt-hint { border-radius: 0 4px 4px 0 !important; } .input-group .twitter-typeahead .tt-query, .input-group .twitter-typeahead .tt-hint { height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; } .input-group.input-group-sm .twitter-typeahead:first-child .tt-query, .input-group.input-group-sm .twitter-typeahead:first-child .tt-hint { border-radius: 3px 0 0 3px !important; } .input-group.input-group-sm .twitter-typeahead:last-child .tt-query, .input-group.input-group-sm .twitter-typeahead:last-child .tt-hint { border-radius: 0 3px 3px 0 !important; } .input-group.input-group-sm .tt-query, .input-group.input-group-sm .tt-hint { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; } .input-group.input-group-lg .twitter-typeahead:first-child .tt-query, .input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { border-radius: 6px 0 0 6px !important; } .input-group.input-group-lg .twitter-typeahead:last-child .tt-query, .input-group.input-group-lg .twitter-typeahead:last-child .tt-hint { border-radius: 0 6px 6px 0 !important; } .input-group.input-group-lg .tt-query, .input-group.input-group-lg .tt-hint { height: 45px; padding: 10px 16px; font-size: 18px; line-height: 1.33; } .tt-dropdown-menu { width: 100%; min-width: 160px; margin-top: 2px; padding: 5px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); *border-right-width: 2px; *border-bottom-width: 2px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .tt-suggestion { display: block; padding: 3px 20px; } .tt-suggestion.tt-is-under-cursor { color: #fff; background-color: #0081c2; background-image: -moz-linear-gradient(top, #0088cc, #0077b3); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); background-image: -o-linear-gradient(top, #0088cc, #0077b3); background-image: linear-gradient(to bottom, #0088cc, #0077b3); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); } .tt-suggestion.tt-is-under-cursor a { color: #fff; } .tt-suggestion p { margin: 0; }