/** * Standardized phone input (intl-tel-input + flag / dial code). * Pair with templates/partials/_phone_input.html and js/phone-input.js. */ .phone-input-wrap { width: 100%; position: relative; } .phone-input-wrap .iti { width: 100%; display: block; position: relative; } .phone-input-wrap .iti__flag-container { z-index: 3; } /* Flag + dial-code button: vertically center contents */ .phone-input-wrap .iti__selected-flag { display: flex !important; align-items: center !important; height: 100%; padding: 0 6px 0 8px; } .phone-input-wrap .iti__selected-dial-code { margin-left: 4px; line-height: 1 !important; display: inline-flex; align-items: center; font-size: 12px; color: #1c1917; } .phone-input-wrap .iti__arrow { margin-left: 4px; border-top-color: #78716c; } /* Match global form-control height without clipping dial code / typed digits */ .phone-input-wrap input.phone-input, .phone-input-wrap input[type="tel"].phone-input { width: 100% !important; height: 38px !important; min-height: 38px !important; line-height: 1.4 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 0.75rem !important; display: block !important; font-size: 12px !important; border-radius: 3px !important; box-sizing: border-box; } /* * Country list is appended to (dropdownContainer) so overflow:hidden * parents cannot clip it. Must sit above Bootstrap modals (~1055). */ .iti--container { z-index: 2000 !important; } .iti__country-list { z-index: 2000 !important; max-height: 220px !important; width: 300px; font-size: 12px; text-align: left; overflow-y: auto; background: #fff; border: 1px solid #d6d0c6; box-shadow: 0 8px 24px rgba(28, 25, 23, 0.16); } .iti__country { display: flex; align-items: center; padding-top: 6px; padding-bottom: 6px; } .phone-input-wrap input.phone-input.is-invalid { border-color: #dc3545; } .phone-input-wrap input.phone-input.is-valid { border-color: #198754; } .phone-input-wrap .phone-input-error { display: none; color: #dc3545; font-size: 11px; margin-top: 2px; }