From 7b3dd8e53c109e4c3e6f74f9268bce185d570b60 Mon Sep 17 00:00:00 2001 From: rdrew Date: Tue, 26 May 2026 11:16:32 -0300 Subject: [PATCH] mobile menu --- css/components/form-textarea.css | 2 +- css/components/header-buttons-mobile.css | 4 +-- css/components/header-navigation.css | 22 +++++++++++----- .../navigation/nav-primary-button.css | 26 ++++++++++++++----- .../navigation/nav-primary-wide.css | 2 +- 5 files changed, 39 insertions(+), 17 deletions(-) diff --git a/css/components/form-textarea.css b/css/components/form-textarea.css index 5df31e0..5217178 100755 --- a/css/components/form-textarea.css +++ b/css/components/form-textarea.css @@ -17,7 +17,7 @@ textarea { padding: var(--sp); } .region--sidebar input.form-text { - width: 14em; + max-width: 14em; } .region--sidebar .advanced-search-form { input.form-text { diff --git a/css/components/header-buttons-mobile.css b/css/components/header-buttons-mobile.css index e322aad..4b907db 100755 --- a/css/components/header-buttons-mobile.css +++ b/css/components/header-buttons-mobile.css @@ -28,14 +28,14 @@ } /* @media ((((min-width: 60rem)))) { */ -@media ((((min-width: 55rem)))) { +@media ((((min-width: 1250px)))) { .mobile-buttons { margin-block-start: var(--sp6); } } /* @media ((((min-width: 60rem)))) { */ -@media ((((min-width: 55rem)))) { +@media ((((min-width: 1250px)))) { body:not(.is-always-mobile-nav) .mobile-buttons { display: none; } diff --git a/css/components/header-navigation.css b/css/components/header-navigation.css index 94abe37..c630aee 100755 --- a/css/components/header-navigation.css +++ b/css/components/header-navigation.css @@ -30,14 +30,17 @@ * mobile navigation needs to slide beneath the button, but we also cannot * use padding because that would enable the button to scroll out of the * viewport on short screens. */ - border-block-start: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px)); + border-block-start: solid var(--color--white) + calc(var(--sp3) + var(--drupal-displace-offset-top, 0px)); background-color: var(--color--white); box-shadow: 0 0 72px rgba(0, 0, 0, 0.1); } .header-nav.is-active { visibility: visible; - transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */ + transform: translateX( + calc(-100% - var(--drupal-displace-offset-right, 0px)) + ); /* LTR */ } [dir="rtl"] .header-nav.is-active { @@ -84,7 +87,7 @@ html.js .header-nav { } /* @media ((((min-width: 60rem)))) { */ -@media ((((min-width: 55rem)))) { +@media ((((min-width: 1250px)))) { body:not(.is-always-mobile-nav) .header-nav { position: static; display: flex; @@ -113,14 +116,21 @@ html.js .header-nav { max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap)))); padding-inline-end: var(--sp); transition: transform 0.2s, visibility 0.2s; - border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11)); + border-top-width: calc( + var(--drupal-displace-offset-top, 0px) + var(--sp11) + ); } } @media (min-width: 90rem) { body.is-always-mobile-nav .header-nav { - max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap))))); - padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp))); + max-width: calc( + 100vw - (var(--max-width) + var(--content-left)) + + ((7 * (var(--grid-col-width) + var(--grid-gap)))) + ); + padding-inline-end: calc( + 100vw - (var(--max-width) + var(--content-left) - var(--sp)) + ); } } diff --git a/css/components/navigation/nav-primary-button.css b/css/components/navigation/nav-primary-button.css index 0704e2f..edad2e4 100755 --- a/css/components/navigation/nav-primary-button.css +++ b/css/components/navigation/nav-primary-button.css @@ -15,7 +15,9 @@ overflow: hidden; width: var(--sp2); height: var(--sp2); - margin-block-start: var(--sp0-5); /* Visually align button with menu link text. */ + margin-block-start: var( + --sp0-5 + ); /* Visually align button with menu link text. */ padding-block: 0; padding-inline-start: 0; padding-inline-end: 0; @@ -76,7 +78,7 @@ pointer-events: none; } -@media ((((min-width: 60rem)))) { +@media ((((min-width: 1250px)))) { body:not(.is-always-mobile-nav) .primary-nav__button-toggle { flex-shrink: 0; align-self: stretch; @@ -91,7 +93,9 @@ outline: 0; } - body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus .icon--menu-toggle { + body:not(.is-always-mobile-nav) + .primary-nav__button-toggle:focus + .icon--menu-toggle { border: solid 2px var(--color--primary-40); } @@ -100,11 +104,15 @@ color: currentColor; } - body:not(.is-always-mobile-nav) .primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle::after { + body:not(.is-always-mobile-nav) + .primary-nav__button-toggle[aria-expanded="true"] + .icon--menu-toggle::after { opacity: 0.8; } - body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle { + body:not(.is-always-mobile-nav) + .primary-nav__button-toggle + .icon--menu-toggle { inset-inline-start: 0.1875rem; width: 1.125rem; transform: translateY(-50%); @@ -112,11 +120,15 @@ background-color: var(--color--white); } - body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::before { + body:not(.is-always-mobile-nav) + .primary-nav__button-toggle + .icon--menu-toggle::before { content: none; } - body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::after { + body:not(.is-always-mobile-nav) + .primary-nav__button-toggle + .icon--menu-toggle::after { /* stylelint-disable csstools/use-logical */ top: calc(50% - 2px); left: 0.1875rem; diff --git a/css/components/navigation/nav-primary-wide.css b/css/components/navigation/nav-primary-wide.css index 26f0094..dc7f0c7 100755 --- a/css/components/navigation/nav-primary-wide.css +++ b/css/components/navigation/nav-primary-wide.css @@ -10,7 +10,7 @@ * Nav Primary (wide widths). */ -@media ((((min-width: 50rem)))) { +@media ((((min-width: 1250px)))) { body:not(.is-always-mobile-nav) .primary-nav__menu-item { flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */ }