/* ══════════════════════════════════════════════════════════════════════════ Sidhuvudets rullgardiner får c-dropdowns utseende Sidhuvudet har två menyer som Bricks renderar med helt olika markup: toppraden nav-menu → li.menu-item-has-children > ul.sub-menu huvudraden nav-nested → li.brxe-dropdown > ul.brx-dropdown-content (panelen innehåller en xslidemenu, så länkarna ligger ett par nivåer längre ned) De såg därför olika ut, och ingen av dem såg ut som c-dropdown — komponenten som startsidans två rullgardiner kör sedan `818de0e`. Den här filen ger båda samma panel- och länkutseende som komponenten. Bricks öppnar och stänger dem fortfarande själv; det som ändras är formen. ── Varför inte återanvända .c-dropdown rakt av ───────────────────────────── Komponentens kontrakt är .c-dropdown > __toggle + __panel > __list, och den markupen kan man inte få ur Bricks nav-element. Klasserna går alltså inte att sätta. Värdena nedan är därför kopierade ur komponenten och adaptern. HÅLL DEM I SYNK. Ändras brokk-dropdown.css eller brokk-dropdown-bricks.css ska motsvarande värde här följa med, annars glider sidhuvudet isär från sidornas rullgardiner igen. Alla mått är skrivna i sajtens rem-idiom (ACSS 62,5 %, 1rem = 10px), samma som adaptern räknat om komponenten till. ── Bricks-inställningarna måste vara borta ──────────────────────────────── Panelernas gamla utseende satt som elementinställningar i sidhuvudsmallen (post 5764) och emitterades som id-regler — `#brxe-hqwvzf { … }`. En id-selektor slår varje klass här. Inställningarna är därför borttagna ur elementdatan av `_project-docs/scripts/strip-header-submenu-styles.php`. Sätter någon tillbaka radie, padding, ram eller skugga på panelerna i byggaren slutar den här filen synas. Det är samma fälla som avsnitt 4.3 i handoffen beskriver. ══════════════════════════════════════════════════════════════════════════ */ /* Tokens ligger på :root, inte på nav-elementen. De började som lokala variabler för sidhuvudets två menyer. Sedan ville megamenyn ha dem (den ligger inuti .brxe-nav-nested och ärvde dem gratis), och därefter marknadsväljaren — som är en Bricks-popup på body-nivå och INTE ligger inuti någon nav. Där slutade arvet fungera, och alternativet hade varit en fjärde kopia av #f4f2ee. På :root delar alla menyytor på sajten exakt en uppsättning värden. Byter du hovertonen här byter den på alla fem menyerna och i väljaren samtidigt. Namnprefixet står kvar för att det redan är refererat från mega-menu.css och region-switcher.css. */ :root { --hdd-panel-bg: #ffffff; --hdd-panel-fg: #14161a; --hdd-link-fg: #14161a; /* Samma värde som komponentens --dd-link-bg-hover. Sajten har en andra, snarlik hoverton — ACSS --base-ultra-light, #f2f2f2 — som xslidemenu- klassen `nndmko` sätter på just de här länkarna. Den överträffas här, så att sidhuvudet och sidornas rullgardiner delar exakt en ton. Ska tonen bytas ska den bytas på båda ställena samtidigt. */ --hdd-link-bg-hover: #f4f2ee; --hdd-accent: #ffcd00; --hdd-focus-ring: #0b57d0; /* 4,5:1 mot vitt och mot #ffcd00 */ /* ── Skalan ──────────────────────────────────────────────────────────── Formen är komponentens, måtten är det inte. En rullgardin i sidhuvudet hänger under en 40px hög menyrad och rymmer fyra till sju korta länkar; sidornas rullgardiner sitter i brödtexten under en egen knapp och rymmer upp till nitton. Komponentens mått gjorde headerpanelerna för tunga. Allt nedan är komponentvärdet gånger ungefär två tredjedelar, utom radavståndet som redan är minimalt. Typsnittsgraden hämtas ett steg ned i ACSS-skalan, --text-s i stället för --text-m (14 mot 15,4px), så att den följer med om skalan ändras. Skuggan är inte bara nedskalad utan också nedtonad — en 48px djup skugga under en 24px hög panelkant blir en grå platta, inte en skugga. */ --hdd-panel-padding: 1.6rem; --hdd-link-padding: 0.8rem 1.2rem; --hdd-row-gap: 0.2rem; --hdd-link-font-size: var(--text-s); --hdd-panel-min: 20rem; --hdd-panel-radius: 0.8rem; --hdd-link-radius: 0.4rem; --hdd-shadow: 0 1.6rem 3.2rem -0.8rem rgba(20, 22, 26, 0.18), 0 0.2rem 0.8rem rgba(20, 22, 26, 0.06); --hdd-duration: 180ms; --hdd-ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* ── Panelen ─────────────────────────────────────────────────────────────── Megamenyn (Products) undantas: den har en egen layout ur mega-menu.css och ska inte få vare sig panelpadding eller den här bredden. */ .brxe-nav-menu .bricks-nav-menu .sub-menu, .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) > .brx-dropdown-content { box-sizing: border-box; width: max-content; min-width: max(100%, var(--hdd-panel-min)); max-width: min(40rem, calc(100vw - 3.2rem)); padding: var(--hdd-panel-padding); border: 0; border-radius: var(--hdd-panel-radius); background: var(--hdd-panel-bg); color: var(--hdd-panel-fg); box-shadow: var(--hdd-shadow); } /* nav-nested renderar panelen som flex-kolumn med ACSS `gap: var(--content-gap)` på .brxe-div. Radavståndet ska vara komponentens, inte innehållsgapets. */ .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) > .brx-dropdown-content { gap: var(--hdd-row-gap); } /* ── Länkarna ───────────────────────────────────────────────────────────── Två markupvarianter, samma utseende. Den nestade menyns länkar ligger i en xslidemenu, vars egna regler (`.brokk-slide_menu.brxe-xslidemenu .menu-item a`, 0-3-0) måste överträffas — därav den längre selektorn. */ .brxe-nav-menu .bricks-nav-menu .sub-menu a, .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .x-slide-menu_list .menu-item a { display: block; padding: var(--hdd-link-padding); border-radius: var(--hdd-link-radius); color: var(--hdd-link-fg); font-weight: 400; font-size: var(--hdd-link-font-size); line-height: 1.35; text-decoration: none; text-wrap: pretty; transition: background-color 120ms var(--hdd-ease); } .brxe-nav-menu .bricks-nav-menu .sub-menu a:hover, .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .x-slide-menu_list .menu-item a:hover { background: var(--hdd-link-bg-hover); color: var(--hdd-link-fg); text-decoration: none; } .brxe-nav-menu .bricks-nav-menu .sub-menu a:focus-visible, .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .x-slide-menu_list .menu-item a:focus-visible { outline: 3px solid var(--hdd-focus-ring); outline-offset: -1px; background: var(--hdd-link-bg-hover); } /* Aktuell sida markeras som i komponenten: gul platta, fet text — inte understrykning, som nav-menu-elementet gjorde. */ .brxe-nav-menu .bricks-nav-menu .sub-menu .current-menu-item > a, .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .x-slide-menu_list .current-menu-item > a { background: var(--hdd-accent); font-weight: 600; } /* ── Chevronen ──────────────────────────────────────────────────────────── Komponentens enda visuella återkoppling på öppet läge är att pilen vänder. Toppmenyn saknade det helt. Rotationen skrivs som en 180-graders vridning kring X, samma som huvudmenyns xslidemenu-inställning, så att en pil som redan står rätt inte vänds två gånger. */ .brxe-nav-menu .brx-submenu-toggle > button > svg, .brxe-nav-nested .brx-submenu-toggle > button > svg { transition: transform var(--hdd-duration) var(--hdd-ease); } .brxe-nav-menu .brx-submenu-toggle > button[aria-expanded="true"] > svg, .brxe-nav-nested .brx-submenu-toggle > button[aria-expanded="true"] > svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .brxe-nav-menu .brx-submenu-toggle > button > svg, .brxe-nav-nested .brx-submenu-toggle > button > svg { transition-duration: 1ms; } }