diff --git a/bower.json b/bower.json index 543ac666bb5afe1b0ef7a5c5b4e134d3cf9c5280..c144c8f4f87c5f6da0d77f7fb064c51b7171a3e8 100644 --- a/bower.json +++ b/bower.json @@ -6,8 +6,8 @@ "typeaheadjs.scss" ], "dependencies": { - "bootstrap": "~3.3", - "typeahead.js": "~0.10.0" + "bootstrap": "4.0", + "typeahead.js": "~0.11.0" }, "ignore":[ ".gitignore", diff --git a/typeaheadjs.css b/typeaheadjs.css index 7dab8abfe42a5ff38dc57e76a422515612944344..efd2f954a4ee874de2c7985fe45dea27382c4f1e 100644 --- a/typeaheadjs.css +++ b/typeaheadjs.css @@ -1,4 +1,4 @@ -span.twitter-typeahead .tt-menu, span.twitter-typeahead .tt-dropdown-menu { +.dropdown-menu, span.twitter-typeahead .tt-menu { position: absolute; top: 100%; left: 0; @@ -29,18 +29,18 @@ span.twitter-typeahead .tt-suggestion { white-space: nowrap; background: none; border: 0; } - span.twitter-typeahead .tt-suggestion:focus, .dropdown-item:hover, span.twitter-typeahead .tt-suggestion:hover { +span.twitter-typeahead .tt-suggestion:focus, .dropdown-item:hover, span.twitter-typeahead .tt-suggestion:hover { color: #2b2d2f; text-decoration: none; background-color: #f5f5f5; } - span.twitter-typeahead .active.tt-suggestion, span.twitter-typeahead .tt-suggestion.tt-cursor, .dropdown-item.active:focus, span.twitter-typeahead .active.tt-suggestion:focus, span.twitter-typeahead .tt-suggestion.tt-cursor:focus, .dropdown-item.active:hover, span.twitter-typeahead .active.tt-suggestion:hover, span.twitter-typeahead .tt-suggestion.tt-cursor:hover { +span.twitter-typeahead .active.tt-suggestion, span.twitter-typeahead .tt-suggestion.tt-cursor, span.twitter-typeahead .active.tt-suggestion:focus, span.twitter-typeahead .tt-suggestion.tt-cursor:focus, span.twitter-typeahead .active.tt-suggestion:hover, span.twitter-typeahead .tt-suggestion.tt-cursor:hover { color: #fff; text-decoration: none; background-color: #0275d8; outline: 0; } - span.twitter-typeahead .disabled.tt-suggestion, .dropdown-item.disabled:focus, span.twitter-typeahead .disabled.tt-suggestion:focus, .dropdown-item.disabled:hover, span.twitter-typeahead .disabled.tt-suggestion:hover { +span.twitter-typeahead .disabled.tt-suggestion, span.twitter-typeahead .disabled.tt-suggestion:focus, span.twitter-typeahead .disabled.tt-suggestion:hover { color: #818a91; } - span.twitter-typeahead .disabled.tt-suggestion:focus, .dropdown-item.disabled:hover, span.twitter-typeahead .disabled.tt-suggestion:hover { +span.twitter-typeahead .disabled.tt-suggestion:focus, span.twitter-typeahead .disabled.tt-suggestion:hover { text-decoration: none; cursor: not-allowed; background-color: transparent; @@ -50,9 +50,5 @@ span.twitter-typeahead { width: 100%; } .input-group span.twitter-typeahead { display: block !important; } - .input-group span.twitter-typeahead .tt-dropdown-menu { - top: 32px !important; } - .input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu { - top: 44px !important; } - .input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu { - top: 28px !important; } + .input-group span.twitter-typeahead .tt-menu { + top: 2.375rem !important; } diff --git a/typeaheadjs.less b/typeaheadjs.less deleted file mode 100644 index c331557eb33b54c16ba43f53ab5e9b61fbdc3d88..0000000000000000000000000000000000000000 --- a/typeaheadjs.less +++ /dev/null @@ -1,40 +0,0 @@ -span.twitter-typeahead { - width: 100%; - - .tt-menu { - &:extend(.dropdown-menu); - } - - .tt-dropdown-menu { - &:extend(.dropdown-menu); - } - - .tt-suggestion { - &:extend(.dropdown-menu > li > a); - &:hover, - &:focus { - &:extend(.dropdown-menu > .active > a); - } - } - - .tt-suggestion.tt-cursor { - &:extend(.dropdown-menu > .active > a); - } - - .input-group & { - display: block !important; - .tt-dropdown-menu { - top:32px !important; - } - } - .input-group.input-group-lg & { - .tt-dropdown-menu { - top:44px !important; - } - } - .input-group.input-group-sm & { - .tt-dropdown-menu { - top:28px !important; - } - } -} diff --git a/typeaheadjs.scss b/typeaheadjs.scss index 919b3068e4699622342f581528db3142799a2b91..90227dd975e1e0c474b0342bd5001826433748aa 100644 --- a/typeaheadjs.scss +++ b/typeaheadjs.scss @@ -1,4 +1,3 @@ -@import '../bootstrap4/bootstrap-4-dev/scss/bootstrap.scss'; span.twitter-typeahead { width: 100%; @@ -6,10 +5,6 @@ span.twitter-typeahead { @extend .dropdown-menu; } - .tt-dropdown-menu { - @extend .dropdown-menu; - } - .tt-suggestion { @extend .dropdown-item; } @@ -18,20 +13,11 @@ span.twitter-typeahead { @extend .dropdown-item.active; } + .input-group & { display: block !important; - .tt-dropdown-menu { - top:32px !important; - } - } - .input-group.input-group-lg & { - .tt-dropdown-menu { - top:44px !important; - } - } - .input-group.input-group-sm & { - .tt-dropdown-menu { - top:28px !important; + .tt-menu { + top:(2 * $input-padding-y + $font-size-base*$line-height + 2 * $input-btn-border-width/$font-size-root) !important; } } }