Created
July 13, 2017 18:54
-
-
Save adlerdias/648824612cd485e49caf268874ee609f to your computer and use it in GitHub Desktop.
css for typeahead js or corejavascript/typeahead
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* typehead.js-bootstrap3.less | |
* @version 0.2.3 | |
* https://github.com/hyspace/typeahead.js-bootstrap3.less | |
* | |
* Licensed under the MIT license: | |
* http://www.opensource.org/licenses/MIT | |
*/ | |
.has-warning .twitter-typeahead .tt-input, | |
.has-warning .twitter-typeahead .tt-hint { | |
border-color: #8a6d3b; | |
-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-warning .twitter-typeahead .tt-input:focus, | |
.has-warning .twitter-typeahead .tt-hint:focus { | |
border-color: #66512c; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; | |
} | |
.has-error .twitter-typeahead .tt-input, | |
.has-error .twitter-typeahead .tt-hint { | |
border-color: #a94442; | |
-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-input:focus, | |
.has-error .twitter-typeahead .tt-hint:focus { | |
border-color: #843534; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; | |
} | |
.has-success .twitter-typeahead .tt-input, | |
.has-success .twitter-typeahead .tt-hint { | |
border-color: #3c763d; | |
-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-input:focus, | |
.has-success .twitter-typeahead .tt-hint:focus { | |
border-color: #2b542c; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; | |
} | |
.input-group .twitter-typeahead:first-child .tt-input, | |
.input-group .twitter-typeahead:first-child .tt-hint { | |
border-bottom-left-radius: 4px; | |
border-top-left-radius: 4px; | |
width: 100%; | |
} | |
.input-group .twitter-typeahead:last-child .tt-input, | |
.input-group .twitter-typeahead:last-child .tt-hint { | |
border-bottom-right-radius: 4px; | |
border-top-right-radius: 4px; | |
width: 100%; | |
} | |
.input-group.input-group-sm .twitter-typeahead .tt-input, | |
.input-group.input-group-sm .twitter-typeahead .tt-hint { | |
height: 30px; | |
padding: 5px 10px; | |
font-size: 12px; | |
line-height: 1.5; | |
border-radius: 3px; | |
} | |
select.input-group.input-group-sm .twitter-typeahead .tt-input, | |
select.input-group.input-group-sm .twitter-typeahead .tt-hint { | |
height: 30px; | |
line-height: 30px; | |
} | |
textarea.input-group.input-group-sm .twitter-typeahead .tt-input, | |
textarea.input-group.input-group-sm .twitter-typeahead .tt-hint, | |
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input, | |
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint { | |
height: auto; | |
} | |
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, | |
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { | |
border-radius: 0; | |
} | |
.input-group.input-group-sm .twitter-typeahead:first-child .tt-input, | |
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint { | |
border-bottom-left-radius: 3px; | |
border-top-left-radius: 3px; | |
border-bottom-right-radius: 0; | |
border-top-right-radius: 0; | |
} | |
.input-group.input-group-sm .twitter-typeahead:last-child .tt-input, | |
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint { | |
border-bottom-left-radius: 0; | |
border-top-left-radius: 0; | |
border-bottom-right-radius: 3px; | |
border-top-right-radius: 3px; | |
} | |
.input-group.input-group-lg .twitter-typeahead .tt-input, | |
.input-group.input-group-lg .twitter-typeahead .tt-hint { | |
height: 46px; | |
padding: 10px 16px; | |
font-size: 18px; | |
line-height: 1.33; | |
border-radius: 6px; | |
} | |
select.input-group.input-group-lg .twitter-typeahead .tt-input, | |
select.input-group.input-group-lg .twitter-typeahead .tt-hint { | |
height: 46px; | |
line-height: 46px; | |
} | |
textarea.input-group.input-group-lg .twitter-typeahead .tt-input, | |
textarea.input-group.input-group-lg .twitter-typeahead .tt-hint, | |
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input, | |
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint { | |
height: auto; | |
} | |
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, | |
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { | |
border-radius: 0; | |
} | |
.input-group.input-group-lg .twitter-typeahead:first-child .tt-input, | |
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { | |
border-bottom-left-radius: 6px; | |
border-top-left-radius: 6px; | |
border-bottom-right-radius: 0; | |
border-top-right-radius: 0; | |
} | |
.input-group.input-group-lg .twitter-typeahead:last-child .tt-input, | |
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint { | |
border-bottom-left-radius: 0; | |
border-top-left-radius: 0; | |
border-bottom-right-radius: 6px; | |
border-top-right-radius: 6px; | |
} | |
.twitter-typeahead { | |
width: 100%; | |
float: left; | |
} | |
.input-group .twitter-typeahead { | |
display: table-cell !important; | |
} | |
.twitter-typeahead .tt-hint { | |
color: #999999; | |
} | |
.twitter-typeahead .tt-input { | |
z-index: 2; | |
} | |
.twitter-typeahead .tt-input[disabled], | |
.twitter-typeahead .tt-input[readonly], | |
fieldset[disabled] .twitter-typeahead .tt-input { | |
cursor: not-allowed; | |
background-color: #eeeeee !important; | |
} | |
.tt-dropdown-menu, | |
.tt-menu { | |
position: absolute; | |
top: 100%; | |
left: 0; | |
z-index: 1000; | |
min-width: 160px; | |
width: 100%; | |
padding: 5px 0; | |
margin: 2px 0 0; | |
list-style: none; | |
font-size: 14px; | |
background-color: #ffffff; | |
border: 1px solid #cccccc; | |
border: 1px solid rgba(0, 0, 0, 0.15); | |
border-radius: 4px; | |
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); | |
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); | |
background-clip: padding-box; | |
*border-right-width: 2px; | |
*border-bottom-width: 2px; | |
} | |
.tt-dropdown-menu .tt-suggestion, | |
.tt-menu .tt-suggestion { | |
display: block; | |
padding: 3px 20px; | |
clear: both; | |
font-weight: normal; | |
line-height: 1.42857143; | |
color: #333333; | |
} | |
.tt-dropdown-menu .tt-suggestion.tt-cursor, | |
.tt-menu .tt-suggestion.tt-cursor, | |
.tt-dropdown-menu .tt-suggestion:hover, | |
.tt-menu .tt-suggestion:hover { | |
cursor: pointer; | |
text-decoration: none; | |
outline: 0; | |
background-color: #f5f5f5; | |
color: #262626; | |
} | |
.tt-dropdown-menu .tt-suggestion.tt-cursor a, | |
.tt-menu .tt-suggestion.tt-cursor a, | |
.tt-dropdown-menu .tt-suggestion:hover a, | |
.tt-menu .tt-suggestion:hover a { | |
color: #262626; | |
} | |
.tt-dropdown-menu .tt-suggestion p, | |
.tt-menu .tt-suggestion p { | |
margin: 0; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment