diff --git a/resource/css/styles.css b/resource/css/styles.css index a5598ee1f..c231c8602 100644 --- a/resource/css/styles.css +++ b/resource/css/styles.css @@ -215,6 +215,13 @@ html,body { font-family: var(--font-family); } +label { + display: inline-block; + max-width: 100%; + /* replaces margin-bottom from .form-label */ + margin-bottom: 5px !important; +} + ul { list-style: none; } @@ -230,6 +237,12 @@ ul { margin: 0 !important; } +.btn-default { + color: #333; + background-color: #fff; + border-color: #ccc; +} + @media print { /* Quick style sheet for printing. */ body * { visibility: hidden; @@ -579,6 +592,11 @@ ul.dropdown-menu > li:last-child > input { padding: 3px 20px; } +.multiselect-selected-text::after { + content: " "; + white-space: pre; +} + .form-check-input:checked { background-color: #398ee7; } @@ -1184,24 +1202,52 @@ span.xl-pref-label > img { color: var(--gray-900); } -.search-options > .input-group > .btn-group { +.search-options > .input-group > .multiselect-native-select > .btn-group { display: block; } -.search-options > .input-group > .btn-group > .multiselect { +.search-options > .input-group > .multiselect-native-select > .btn-group > .multiselect { background-color: var(--white-color); border: 1px solid var(--gray-500); overflow-y: hidden; } -.search-options > .input-group > .btn-group > .multiselect-container { +.search-options > .input-group > .multiselect-native-select > .btn-group > .multiselect:focus { + background-color: var(--white-color) !important; + border: 1px solid var(--gray-500); + overflow-y: hidden; +} + +.search-options > .input-group > .multiselect-native-select > .btn-group > .multiselect-container { top: 44px; } -.search-options > .input-group > .btn-group > .multiselect-container > li:first-of-type > * { +.search-options > .input-group > .multiselect-native-select > .btn-group > .multiselect-container > li:first-of-type > * { height: 26px; } +.search-options > .input-group > .multiselect-native-select > .dropdown > .dropdown-toggle::after { + display: inline-block; + margin-left: .255em; + vertical-align: .255em; + content: ""; + border-top: .3em solid var(--dark-color); + border-right: .3em solid var(--white-color); + border-bottom: 0 solid var(--dark-color); + border-left: .3em solid var(--white-color); +} + +.search-options > .input-group > .multiselect-native-select > .dropdown > .dropdown-toggle:focus::after { + display: inline-block; + margin-left: .255em; + vertical-align: .255em; + content: ""; + border-top: .3em solid var(--dark-color); + border-right: .3em solid var(--white-color); + border-bottom: 0 solid var(--dark-color); + border-left: .3em solid var(--white-color); +} + .multiselect-container li { min-height: 26px; } @@ -1232,6 +1278,17 @@ span.xl-pref-label > img { top: 16px; } +.multiselect-option { + padding-top: 0 !important; + padding-bottom: 0 !important; + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.multiselect-option > .form-check { + margin-bottom: 0; +} + .fixed { height: 95%; height: calc(100% - 2px) !important; @@ -1272,9 +1329,10 @@ div#sidebar-grey > div > div > form.search-options { .search-options { padding-left: 15px; + padding-right: 15px; } -.search-options > .input-group * { +.form-check-input[type="checkbox"] { border-radius: 0; } @@ -2055,7 +2113,7 @@ span.date-info { font-size: var(--font-size); } -.search-options > div.input-group > .twitter-typeahead, .search-options > div.input-group > .twitter-typeahead > .tt-menu, .search-options > .input-group > .btn-group > * { +.search-options > div.input-group > .twitter-typeahead, .search-options > div.input-group > .twitter-typeahead > .tt-menu, .search-options > .input-group > .multiselect-native-select > .btn-group > * { width: 280px; } @@ -2527,11 +2585,11 @@ body, .versal, h1, h2, h3, p, .versal-bold { height: calc(100% - 150px) !important; } - .sidebar-grey > .search-options > .input-group > .btn-group > .multiselect { + .sidebar-grey > .search-options > .input-group > .multiselect-native-select > .btn-group > .multiselect { width: 370px; } - .sidebar-grey > .search-options > .input-group > .btn-group > .multiselect-container { + .sidebar-grey > .search-options > .input-group > .multiselect-native-select > .btn-group > .multiselect-container { width: 370px; } diff --git a/resource/js/docready.js b/resource/js/docready.js index 8b44787ca..6632cac19 100644 --- a/resource/js/docready.js +++ b/resource/js/docready.js @@ -1011,7 +1011,7 @@ $(function() { // DOCUMENT READY $('.sidebar-grey .multiselect').multiselect({ buttonText: function(options) { - if (options.length === 0) { + if (options.length === 0 || options.length === ($('.sidebar-grey .multiselect-container li').length - 1)) { return ''; } else { var selected = ''; @@ -1024,6 +1024,13 @@ $(function() { // DOCUMENT READY }, numberDisplayed: 2, buttonWidth: 'auto', + buttonClass: 'btn btn-secondary', + buttonContainer : '
', + templates: { + ul: ' ', + li: '', + button: '', + }, onDropdownShown: function(event) { var $activeChild = $(event.currentTarget).find('.active'); $('.multiselect-container').mCustomScrollbar('scrollTo', $activeChild); diff --git a/view/light.twig b/view/light.twig index 2e0cf9085..d3de7bc27 100644 --- a/view/light.twig +++ b/view/light.twig @@ -167,7 +167,7 @@