/** * Company filter above the job list. * * The dropdown is a select2 widget, the same one the service network filters * use, so the two pages read as one system. This file only skins it; select2's * own stylesheet ships alongside as com_fnetjobs.select2. * * Like brand-images.css, the rules are scoped to the wrapper class rather than * written as bare single-class selectors: UIkit's form rules and the template's * custom.css load after this file, so a selector that only ties on specificity * would lose against them. * * Deliberately not styled: the dropdown arrow. custom.css nudges every select2 * arrow down by 10px with !important, which is what centres it in a 48px tall * control -- exactly the height used here. */ .com-fnetjobs-filter { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 32px; } /* Full width so the label claims a flex row of its own and the control wraps underneath it, rather than sitting beside it. */ .com-fnetjobs-filter .com-fnetjobs-filter__label { display: block; width: 100%; margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; } /* select2 replaces the select in place and sizes itself to 100%, so the width of the control is decided here. */ .com-fnetjobs-filter .com-fnetjobs-filter__control { display: block; width: 320px; max-width: 100%; } .com-fnetjobs-filter .select2-container--default .select2-selection--single { height: 48px; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 4px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .com-fnetjobs-filter .select2-container--default .select2-selection--single:hover { border-color: rgba(0, 0, 0, 0.5); } .com-fnetjobs-filter .select2-container--default.select2-container--open .select2-selection--single, .com-fnetjobs-filter .select2-container--default.select2-container--focus .select2-selection--single { border-color: rgba(0, 0, 0, 0.7); /* The template kills every focus outline with `*:focus-visible{outline:0}`, so the focus state has to be drawn with a shadow. */ box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); } .com-fnetjobs-filter .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 16px; padding-right: 44px; font-size: 18px; line-height: 46px; color: inherit; } /* * The dropdown panel is appended to , outside the wrapper, so it is scoped * by the class handed to select2 as dropdownCssClass instead. */ .com-fnetjobs-filter__dropdown { border-color: rgba(0, 0, 0, 0.25); } .com-fnetjobs-filter__dropdown .select2-results__option { padding: 10px 16px; font-size: 18px; line-height: 1.3; } .com-fnetjobs-filter__dropdown .select2-results__option--highlighted[aria-selected], .com-fnetjobs-filter__dropdown .select2-results__option--highlighted[data-selected] { /* Same blue the site's autocomplete uses for its hovered entries. */ background-color: #006b9d; } .com-fnetjobs-filter__dropdown .select2-results__option[aria-selected="true"], .com-fnetjobs-filter__dropdown .select2-results__option[data-selected="true"] { background-color: #e5e5e5; color: inherit; } .com-fnetjobs-filter__dropdown .select2-results__option--highlighted[aria-selected="true"], .com-fnetjobs-filter__dropdown .select2-results__option--highlighted[data-selected="true"] { background-color: #006b9d; color: #fff; } /* * Fallback appearance for the bare select: shown until select2 initialises, and * for good when JavaScript or jQuery is unavailable. Once select2 takes over it * hides the original select, so these rules stop being visible. */ .com-fnetjobs-filter .com-fnetjobs-filter__select { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; width: 100%; height: 48px; margin: 0; padding: 0 44px 0 16px; font-family: inherit; font-size: 18px; color: inherit; background-color: #fff; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23333333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 16px; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 4px; cursor: pointer; } /* Only rendered inside