/* ========================================================================= select2 -> native-feeling bottom sheet (mobile only) ========================================================================= Loaded last in the admin layout head, so it applies to every page that uses select2 without touching a single blade. Nothing here applies above 767.98px: the desktop dropdown is untouched. How it works: select2 appends the open dropdown to inside its own .select2-container--open wrapper and positions that wrapper with inline top/left. The inline widget on the page ALSO gets .select2-container--open, but only the body-appended one contains a .select2-dropdown - that is what every selector below keys on. Pinning .select2-dropdown itself to the viewport with position:fixed makes the wrapper's inline coordinates irrelevant, so select2's own repositioning on scroll cannot fight us. ========================================================================= */ @media (max-width: 767.98px) { /* ---------------------------------------------------------------- sheet */ .select2-container--open .select2-dropdown { position: fixed !important; top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; max-width: 100% !important; max-height: 78vh; display: flex; flex-direction: column; padding: 22px 0 calc(8px + env(safe-area-inset-bottom, 0px)); border: 0 !important; border-radius: 22px 22px 0 0 !important; background: #fff; /* The huge spread is the dimmed page behind. A shadow is painted OUTSIDE the border box, so unlike a ::before overlay it cannot tint the sheet itself - and it needs no extra element and no :has(). */ box-shadow: 0 -10px 40px rgba(11, 32, 26, 0.22), 0 0 0 100vh rgba(10, 22, 18, 0.45); z-index: 1060; animation: fbSheetUp 0.22s cubic-bezier(0.22, 0.9, 0.3, 1); } /* Grabber. Decorative only - the sheet is dismissed by tapping away or picking an option, exactly as before. */ .select2-container--open .select2-dropdown::after { content: ""; position: absolute; top: 9px; left: 50%; width: 38px; height: 4px; border-radius: 99px; background: #dbe3e0; transform: translateX(-50%); } /* select2 flips these two classes depending on the space above/below the field. Anchored to the bottom, that distinction no longer exists. */ .select2-container--open .select2-dropdown--above, .select2-container--open .select2-dropdown--below { border-radius: 22px 22px 0 0 !important; } /* --------------------------------------------------------------- search */ .select2-container--default .select2-search--dropdown { padding: 6px 16px 12px; } .select2-container--default .select2-search--dropdown .select2-search__field { height: 46px; padding: 0 14px; border: 1px solid #e4eae8 !important; border-radius: 13px; background: #f5f8f7; /* 16px keeps iOS Safari from zooming the page on focus. */ font-size: 16px; color: #16241f; outline: 0; } .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--primary-clr, #107980) !important; background: #fff; } /* -------------------------------------------------------------- options */ .select2-container--default .select2-results > .select2-results__options { max-height: none !important; /* The sheet is the flex container; the list is the part that scrolls. */ flex: 1 1 auto; overflow-y: auto; /* Stops the page behind from scrolling once the list hits its end. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .select2-container--open .select2-results { display: flex; flex-direction: column; min-height: 0; max-height: 62vh; } .select2-container--default .select2-results__option { display: flex; align-items: center; min-height: 52px; padding: 13px 46px 13px 18px; border-bottom: 1px solid #f1f5f4; font-size: 15px; line-height: 1.35; color: #1d2b26; } .select2-container--default .select2-results__option:last-child { border-bottom: 0; } /* Touch devices have no hover, so select2's "highlighted" state only shows up mid-tap. Keep it quiet rather than a full-width dark bar. */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #f3f8f7; color: #1d2b26; } .select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option[aria-selected="true"]:hover { position: relative; background: transparent; color: var(--primary-clr, #107980); font-weight: 600; } /* Checkmark on the chosen row, drawn from two borders so no icon font or image is needed. */ .select2-container--default .select2-results__option[aria-selected="true"]::after { content: ""; position: absolute; top: 50%; right: 20px; width: 6px; height: 11px; border: solid var(--primary-clr, #107980); border-width: 0 2px 2px 0; transform: translateY(-60%) rotate(45deg); } .select2-container--default .select2-results__option[aria-disabled="true"] { color: #9aa8a3; } /* "Searching...", "No results found" and friends. */ .select2-container--default .select2-results__option[role="alert"], .select2-container--default .select2-results__message { justify-content: center; color: #8b968f; font-size: 14px; } /* ------------------------------------------------------------ animation */ @keyframes fbSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .select2-container--open .select2-dropdown { animation: none; } } }