/* Open dropdown lists: one behaviour for every dropdown on the site. Covers bootstrap-select pickers, the phone number country list and the currency menu. List height capped at 40% of the screen, vertical scroll always, horizontal scroll never, long options wrap. Loaded by all layouts, after the theme bundles. */ /* With container:'body' the picker menu is wrapped in a .bs-container appended to , outside any modal/card stacking context. It must sit above Bootstrap's modal (1050) and backdrop (1040) and the fixed header, or a picker opened in a modal drops behind the dialog. */ .bs-container { z-index: 1060; } /* Phone number country list: the same menu as every Metronic selectpicker, on every layout (register pages included, which do not load partner.css). The plugin ships a 1px #ccc border, a hard drop shadow and a borderless search box that takes the browser's blue focus ring. Values are quoted from the theme bundle: .dropdown-menu (radius, 50px soft shadow, .5rem padding), .bs-searchbox (10px 15px), .form-control (+ :focus border), .dropdown-item:hover (#f3f6f9). */ .iti--inline-dropdown .iti__dropdown-content { border: 0; border-radius: .42rem; box-shadow: 0 0 50px 0 rgba(82, 63, 105, .15); margin-top: .125rem; padding: .5rem 0; } /* partner.css's `.iti input` (width:100%) outranks a bare class, so the element is named here. */ .iti input.iti__search-input { display: block; width: calc(100% - 30px); height: calc(1.5em + 1.3rem + 2px); margin: 10px 15px; padding: .65rem 1rem; font-size: 1rem; color: #3f4254; background-color: #fff; border: 1px solid #e4e6ef; border-radius: .42rem; box-shadow: none; } .iti input.iti__search-input:focus { border-color: var(--primary-30, #D0B3FA); outline: 0; } .iti__search-input + .iti__country-list { border-top: 0; } .iti__country { padding: 10px 15px; } .iti__country.iti__highlight { background-color: #f3f6f9; } .iti__country-name { color: #3f4254; } .iti__dial-code { color: #b5b5c3; } .iti__divider { border-bottom-color: #ebedf3; } /* bootstrap-select sets an inline min-height on the menu and list; min-height beats max-height. */ .bootstrap-select .dropdown-menu { min-height: 0 !important; } /* The scrolling lists. !important beats the plugin's inline "space left on screen" sizes. */ .bootstrap-select .dropdown-menu > .inner, .iti--inline-dropdown .iti__country-list, .wp-ccy__menu { min-height: 0 !important; max-height: 40vh !important; overflow-x: hidden; overflow-y: auto; /* Reaching the end of the list must not start scrolling the page behind it. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Options wrap inside the list width instead of overflowing it sideways. */ .bootstrap-select .dropdown-menu li a, .iti--inline-dropdown .iti__country, .wp-ccy__menu .wp-ccy__item { white-space: normal; overflow-wrap: anywhere; }