diff options
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | resources/css/_base.css | 1 | ||||
| -rw-r--r-- | resources/css/_typeaheadjs.css | 47 | ||||
| -rw-r--r-- | resources/css/vendor.css | 1 |
4 files changed, 49 insertions, 3 deletions
diff --git a/package.json b/package.json index c0e94052ea..0e5d5c8939 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,7 @@ "moment": "2.30.1", "pinch-zoom-element": "1.1.1", "sortablejs": "1.15.7", - "tom-select": "2.5.2", - "typeahead.js-bootstrap4-css": "1.0.0" + "tom-select": "2.5.2" }, "browserslist": [ ">0.1% and not dead" diff --git a/resources/css/_base.css b/resources/css/_base.css index 836a8202b0..9c37821e4d 100644 --- a/resources/css/_base.css +++ b/resources/css/_base.css @@ -29,6 +29,7 @@ @import "_sortable.css"; @import "_tab-album.css"; @import "_tab-relatives.css"; +@import "_typeaheadjs.css"; /* Some icons need to be reversed on right-to-left pages */ /* rtl:ignore */ diff --git a/resources/css/_typeaheadjs.css b/resources/css/_typeaheadjs.css new file mode 100644 index 0000000000..a340efc28e --- /dev/null +++ b/resources/css/_typeaheadjs.css @@ -0,0 +1,47 @@ +/** + * webtrees: online genealogy + * Copyright (C) 2026 webtrees development team + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + */ + +/* + * Bootstrap 5 styling for typeahead.js + */ + +.twitter-typeahead { + width: 100%; +} + +.twitter-typeahead .tt-hint { + background-color: var(--bs-body-bg) !important; + color: var(--bs-tertiary-color); +} + +.twitter-typeahead .tt-menu { + background: var(--bs-body-bg); + border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); + border-radius: var(--bs-border-radius); + box-shadow: var(--bs-box-shadow); + margin-top: 0.25rem; + padding: 0.25rem 0; + width: 100%; +} + +.twitter-typeahead .tt-suggestion { + padding: 0.25rem 0.75rem; + cursor: pointer; +} + +.twitter-typeahead .tt-suggestion:hover, +.twitter-typeahead .tt-suggestion.tt-cursor { + background-color: var(--bs-tertiary-bg); +} diff --git a/resources/css/vendor.css b/resources/css/vendor.css index 5ebafc51bd..d7d4ed91aa 100644 --- a/resources/css/vendor.css +++ b/resources/css/vendor.css @@ -17,7 +17,6 @@ @import "../../node_modules/datatables.net-bs5/css/dataTables.bootstrap5.css"; @import "../../node_modules/tom-select/dist/css/tom-select.min.css"; @import "../../node_modules/tom-select/dist/css/tom-select.bootstrap5.min.css"; -@import "../../node_modules/typeahead.js-bootstrap4-css/typeaheadjs.css"; @import "../../node_modules/leaflet/dist/leaflet.css"; @import "../../node_modules/beautifymarker/leaflet-beautify-marker-icon.css"; @import "../../node_modules/leaflet-control-geocoder/dist/Control.Geocoder.css"; |