diff --git a/resources/css/app.css b/resources/css/app.css index 7fa64d0d..11d75bba 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -1696,3 +1696,129 @@ html[data-wms-sidebar="collapsed"] .wms-sidebar { color: rgb(191 219 254); } } + + +/* Company/country Select2 dark override ------------------------------------------------- + Keep the Select2 country field visually consistent with the WMS dark form inputs. */ +.wms-select2-field .select2-container, +.wms-select2-field .select2-container--wms, +.wms-select2-field .select2-container--default { + margin-top: 0.5rem !important; + width: 100% !important; + display: block !important; +} + +.wms-select2-field .select2-container--wms .select2-selection--single, +.wms-select2-field .select2-container--default .select2-selection--single { + height: 3rem !important; + min-height: 3rem !important; + border: 1px solid rgb(63 63 70) !important; + border-radius: 0.75rem !important; + background: rgb(9 9 11) !important; + box-shadow: none !important; + display: flex !important; + align-items: center !important; +} + +.wms-select2-field .select2-container--wms.select2-container--focus .select2-selection--single, +.wms-select2-field .select2-container--wms.select2-container--open .select2-selection--single, +.wms-select2-field .select2-container--default.select2-container--focus .select2-selection--single, +.wms-select2-field .select2-container--default.select2-container--open .select2-selection--single { + border-color: rgb(59 130 246) !important; + box-shadow: 0 0 0 3px rgb(59 130 246 / 0.24) !important; +} + +.wms-select2-field .select2-selection--single .select2-selection__rendered { + width: 100% !important; + padding-left: 1rem !important; + padding-right: 3rem !important; + color: rgb(244 244 245) !important; + font-size: 0.875rem !important; + font-weight: 500 !important; + line-height: 3rem !important; +} + +.wms-select2-field .select2-selection--single .select2-selection__placeholder { + color: rgb(161 161 170) !important; + font-weight: 500 !important; +} + +.wms-select2-field .select2-selection--single .select2-selection__clear { + position: absolute !important; + right: 2.75rem !important; + top: 0.5rem !important; + width: 2rem !important; + height: 2rem !important; + color: rgb(161 161 170) !important; + font-size: 1.2rem !important; + line-height: 1.85rem !important; + text-align: center !important; +} + +.wms-select2-field .select2-selection--single .select2-selection__arrow { + position: absolute !important; + top: 0.5rem !important; + right: 0.625rem !important; + width: 2rem !important; + height: 2rem !important; + border-radius: 0.625rem !important; + background: rgb(39 39 42) !important; +} + +.wms-select2-field .select2-selection--single .select2-selection__arrow b { + border-color: rgb(212 212 216) transparent transparent transparent !important; +} + +.select2-container--wms .select2-dropdown, +.select2-container--default .select2-dropdown { + overflow: hidden !important; + border: 1px solid rgb(63 63 70) !important; + border-radius: 0.875rem !important; + background: rgb(24 24 27) !important; + color: rgb(244 244 245) !important; + box-shadow: 0 24px 60px rgb(0 0 0 / 0.45) !important; +} + +.select2-container--wms .select2-search--dropdown, +.select2-container--default .select2-search--dropdown { + padding: 0.75rem !important; + background: rgb(24 24 27) !important; +} + +.select2-container--wms .select2-search--dropdown .select2-search__field, +.select2-container--default .select2-search--dropdown .select2-search__field { + height: 2.75rem !important; + border: 1px solid rgb(63 63 70) !important; + border-radius: 0.75rem !important; + background: rgb(9 9 11) !important; + color: rgb(244 244 245) !important; + padding: 0 0.875rem !important; + font-size: 0.875rem !important; + outline: none !important; +} + +.select2-container--wms .select2-results__options, +.select2-container--default .select2-results__options { + background: rgb(24 24 27) !important; + max-height: 16rem !important; +} + +.select2-container--wms .select2-results__option, +.select2-container--default .select2-results__option { + padding: 0.75rem 1rem !important; + color: rgb(244 244 245) !important; + font-size: 0.875rem !important; + font-weight: 500 !important; +} + +.select2-container--wms .select2-results__option--highlighted.select2-results__option--selectable, +.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { + background: rgb(37 99 235) !important; + color: white !important; +} + +.select2-container--wms .select2-results__option--selected, +.select2-container--default .select2-results__option--selected { + background: rgb(30 41 59) !important; + color: rgb(191 219 254) !important; +} diff --git a/resources/css/wms-select2.css b/resources/css/wms-select2.css index afd4dea1..20e71182 100644 --- a/resources/css/wms-select2.css +++ b/resources/css/wms-select2.css @@ -155,3 +155,24 @@ .select2-container--wms .select2-results__message { color: rgb(161 161 170) !important; } + +/* Safety: any WMS Select2 target should disappear once Select2 has initialised, + even if a view is not wrapped in .wms-select2-field. */ +select[data-wms-select2].select2-hidden-accessible, +select[data-company-country-select2].select2-hidden-accessible, +select[data-helpdesk-select2].select2-hidden-accessible { + position: absolute !important; + width: 1px !important; + height: 1px !important; + overflow: hidden !important; + clip: rect(0 0 0 0) !important; + white-space: nowrap !important; + border: 0 !important; + padding: 0 !important; + margin: -1px !important; +} + +/* Keep country Select2 controls aligned with the surrounding WMS form fields. */ +.wms-select2-field .select2-container--wms { + margin-top: 0.5rem !important; +} diff --git a/resources/js/app.js b/resources/js/app.js index 53936f79..93818bcd 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -7,10 +7,12 @@ import $ from 'jquery'; window.$ = $; window.jQuery = $; -import 'select2'; +import attachSelect2 from 'select2'; import 'select2/dist/css/select2.min.css'; import '../css/wms-select2.css'; +attachSelect2(window.jQuery); + const chartColours = [ 'rgb(8, 145, 178)', 'rgb(37, 99, 235)', @@ -168,11 +170,11 @@ function initialiseSelect2() { return; } - $('[data-helpdesk-select2], [data-wms-select2]').each(function () { + $('[data-helpdesk-select2], [data-wms-select2], [data-company-country-select2]').each(function () { const $select = $(this); if ($select.hasClass('select2-hidden-accessible')) { - $select.select2('destroy'); + return; } const isMultiple = $select.prop('multiple');