diff --git a/index.html b/index.html new file mode 100644 index 0000000..788c833 --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + Typehead & Bootstrap + + + + + + + + +
+

typeahead.js and Bootstrap 3 example

+

Choose from:

+
+
+

Normal

+
+ +
+
+
+
+
+

Addon

+

This is more complex because of CSS's inability to select a parent. add input-group-appended to the container div

+
+ + # +
+
+
+
+
+

Pre-addon aka Prepend

+

Prepending an input group is easier because of CSS's sibling select +

+
+ # + +
+
+
+
+ + \ No newline at end of file diff --git a/typeahead.js-bootstrap.css b/typeahead.js-bootstrap.css index e44b673..9c7f132 100644 --- a/typeahead.js-bootstrap.css +++ b/typeahead.js-bootstrap.css @@ -1,49 +1,81 @@ +.twitter-typeahead { + width: 100%; + position: relative; +} + .twitter-typeahead .tt-query, .twitter-typeahead .tt-hint { - margin-bottom: 0; + margin-bottom: 0; + width: 100%; + height: 34px; + position: absolute; + top: 0; + left: 0; +} + +.twitter-typeahead .tt-hint { + color: #a1a1a1; + z-index: 1; + padding: 6px 12px; + border: 1px solid transparent; +} + +.twitter-typeahead .tt-query { + z-index: 2; + border-radius: 4px !important; +} + +.input-group-addon + .twitter-typeahead > .tt-query { + border-top-left-radius: 0!important; + border-bottom-left-radius: 0!important; +} + +.input-group-appended > .twitter-typeahead > .tt-query { + border-top-right-radius: 0!important; + border-bottom-right-radius: 0!important; } .tt-dropdown-menu { - min-width: 160px; - margin-top: 2px; - padding: 5px 0; - background-color: #fff; - border: 1px solid #ccc; - border: 1px solid rgba(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,.2); - -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); - box-shadow: 0 5px 10px rgba(0,0,0,.2); - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; + min-width: 160px; + margin-top: 2px; + padding: 5px 0; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(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, .2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); + 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; + 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) + 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; + color: #fff; } .tt-suggestion p { - margin: 0; -} + margin: 0; +} \ No newline at end of file diff --git a/typeahead.js-bootstrap.less b/typeahead.js-bootstrap.less deleted file mode 100644 index ecdcdaf..0000000 --- a/typeahead.js-bootstrap.less +++ /dev/null @@ -1,33 +0,0 @@ -.tt-dropdown-menu { - min-width: 160px; - margin-top: 2px; - padding: 5px 0; - background-color: @dropdownBackground; - border: 1px solid #ccc; - border: 1px solid @dropdownBorder; - *border-right-width: 2px; - *border-bottom-width: 2px; - .border-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; -} - -.tt-suggestion.tt-is-under-cursor { - color: @dropdownLinkColorHover; - #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%)); -} - -.tt-suggestion.tt-is-under-cursor a { - color: @dropdownBackground; -} - -.tt-suggestion p { - margin: 0; -}