/* SEARCH BAR ================================================================================ Loaded last in from header.tpl / header1.tpl, after /{$G_ID}/css/style - the generated per-group theme sheet. That position is deliberate: several rules below share their exact specificity with theme rules in styles.tpl (#portal-menu #magnifying-glass div is declared in both), so source order is what decides them. Moving these rules into navbar.css, which loads before the theme sheet, would silently hand those declarations back to the theme. Kept as its own file for the same reason navbar.css is not touched: these are corrections layered over navbar.css and common.css, and keeping them together makes it clear which rules exist to override what. ================================================================================*/ /* 1. AUTOCOMPLETE COULD NEVER APPEAR -------------------------------------------------------------------------------- #ac-dropdown is statically positioned inside .navbar_content, inside .navbar_block - and .navbar_block is 28px tall with overflow:hidden. The suggestions were being built correctly and then clipped to nothing. Giving the block visible overflow and taking the dropdown out of flow lets it hang below the bar. .navbar_content keeps overflow:auto, which is what contains the oversized text input; it does not clip the dropdown because the dropdown's containing block is the positioned .navbar_block. */ #navbar-search .navbar_block { overflow: visible; } /* .navbar_content (overflow:auto) is opened up too, but only while suggestions are showing. Relying on "an overflow ancestor that is not the containing block does not clip" held in desktop Gecko and is exactly the kind of detail mobile WebKit treats differently - which is the difference between it working in desktop responsive mode and not on a handset. The oversized input is contained by .navbar_title instead, which is a sibling of #ac-dropdown, so nothing spills. */ #navbar-search.ddc-open .navbar_content { overflow: visible; } #navbar-search .navbar_title { overflow: hidden; } #ac-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 700; } /* 2. SEARCH BUTTON MARKUP -------------------------------------------------------------------------------- navbar.tpl wraps the label in .navbar_content so the button matches every other navbar button structurally. No styling is attached here: .navbar_content has no rules of its own outside .nv-color, so the render is unchanged. Listed for completeness. */ /* 3. FLYOUT COLUMNS UNREADABLE ON PHONES -------------------------------------------------------------------------------- Below 575px the search field is 70% wide (common.css), so the flyout is only ~340px and the 25/75 split leaves the category column about 85px. Labels like "Contributor(s)" wrap and their right-floated count is pushed onto its own line. Stack the columns and lay the categories out as chips. */ @media screen and (max-width: 575px) { #ac-dropdown .ddc-left, #ac-dropdown .ddc-right { float: none; width: 100%; } #ac-dropdown .ddc-left .ddc { height: auto; max-height: none; overflow: visible; } #ac-dropdown .ddc-left .ddc .type-terms { display: inline-block; width: auto; margin: 0 4px 4px 0; white-space: nowrap; } #ac-dropdown .type-terms span { float: none; margin-left: 4px; } /* navbar.css strips the left margin off the results panel (.ddc-right .ddc { margin-left: 0 !important }) because side by side it butts against the category column. Stacked there is nothing to butt against, so it sat 5px left of the panel above it - the categories looked inset and the results flush. Put the margin back. */ #ac-dropdown .ddc-right .ddc { height: 200px; margin-left: 5px !important; /* ...and join the two panels. Side by side the 5px bottom margin on one and 5px top margin on the other were never adjacent; stacked they leave a 10px slot through which the page carousel - arrows included - shows between the categories and the results. */ margin-top: 0; } #ac-dropdown .ddc-left .ddc { margin-bottom: 0; } /* The flyout is anchored to .navbar_block, which is only as wide as the search field - 70% of the row below 575px. On a 360px handset that left roughly a third of the screen showing the page behind it, which reads as a half-drawn panel. .navbar_block sits 2px in from the left edge of the row, so this spans the viewport without overhanging it. */ #ac-dropdown { right: auto; width: calc(100vw - 4px); } } /* 4. MAGNIFIER DOES NOT MATCH THE MENU ROWS AROUND IT -------------------------------------------------------------------------------- On portals where menu_settings[n].show_nav is 0 the search bar is hidden and #magnifying-glass is the entry point, living as a row in the slide-out menu. As a 42px icon chip among full-width rows it looks misplaced; stretched to full width with only the glyph in it, it looks broken. So it becomes a row like the others: full width, left-aligned, icon plus the same "Search" label, keeping its 5px radius and its themed fill. Two earlier attempts are worth not repeating - replacing the fill with the siblings' rgba(255,255,255,.15) made it invisible (the backdrop is rgb(250,249,249)), and forcing border-radius:0 dropped the rounded corners it should keep. */ @media screen and (max-width: 768px) { #portal-menu ul li.nav-item#magnifying-glass { width: 100%; } #portal-menu #magnifying-glass > div { height: 66px; width: 100%; /* Centred, because that is what the rows around it do - Webinars, Surgical Videos, Events and the rest all centre their label. Left aligning the icon made this the one row that did not match. */ justify-content: center; box-sizing: border-box; } /* common.css gives the glyph line-height:67px, taller than the 66px row, so where it lands depends on the container rather than on the flex centring. Pin it to the glyph and let align-items:center place it. */ #portal-menu #magnifying-glass .fa-search { line-height: 1; } /* The portal's menu font is carried by a rule that needs an a.portal-font ancestor - not by the .tr/.td wrappers, which resolve to Roboto. Wrapping just the label keeps li > div intact, so the base rules that make this a 42px chip above the collapse point still match. The anchor has no href: it is a styling hook, the click target is the li. */ #portal-menu #magnifying-glass > div > a.portal-font { text-decoration: none; display: inline-flex; align-items: center; /* The menu stretches its links to the full row. Left unchecked this anchor took 314px of the 334px row, so the icon and label sat hard left while every other row stayed centred. Shrink it to its text and let justify-content: center place the pair. */ width: auto; flex: 0 0 auto; } /* An h2, because that is the element the other menu rows label themselves with - it inherits the menu's 14px instead of whatever size I would have picked, and keeps doing so if the portal restyles its menu. A span here computes font-size:0 (an ancestor zeroes it), which is why this needs to be the same element rather than a span with a hardcoded size. */ #portal-menu #magnifying-glass .mg-label { margin: 0 0 0 12px; line-height: 1; /* The label inherits white here, which is invisible on this row - the icon does not, because common.css forces .fa-search to #000 at this breakpoint. Icon and label are one control, so they take the same colour rather than each inheriting something different. */ color: #000; } /* The visible fill is not the div's background - it is the themed ::after that styles.tpl generates, sitting behind it at z-index -1. That layer is square, so it covered the div's 5px corners and the button still read as a rectangle. Round the layer that is actually painted. */ #portal-menu ul li.nav-item#magnifying-glass::after { border-radius: 5px; } } /* Above the collapse point this stays the compact icon button it is today, so the label is for the drawer only. */ @media screen and (min-width: 769px) { /* The whole wrapper goes, not just the label. Hiding only .mg-label left the anchor behind as an empty flex item that the menu still laid out as display:table - 22px of the 42px chip - which pushed the 20px icon hard left instead of centring it. The label belongs to the collapsed menu only, so above the collapse point nothing of it should exist. */ #portal-menu #magnifying-glass > div > a.portal-font { display: none; } } /* 5. THE NAVBAR HAS NO EDGE OF ITS OWN -------------------------------------------------------------------------------- #navbar sits directly on the page background with nothing but its own 15px margins separating it from the content below, so the search area reads as part of the page rather than as a distinct section. A hairline border gives it an edge. No box-sizing workaround is needed: .navbar-responsive is a block with width:auto, so the border comes out of the content box instead of widening the element, even under the `box-sizing: content-box !important` rule at navbar.css:14. 5px matches the radius used by the navbar blocks inside it. */ #navbar.navbar-responsive { border: 1px solid #d5d5d5; border-radius: 5px; } /* navbar.css:7 strips the padding at the XS breakpoint, which would leave the new border hard against the logo and the button row. Put a little back. */ .xs #navbar.navbar-responsive { padding: 5px; }