rdrew 3 weeks ago
parent
commit
90d62d6f0e
  1. 2
      css/components/form-textarea.css
  2. 4
      css/components/header-buttons-mobile.css
  3. 22
      css/components/header-navigation.css
  4. 26
      css/components/navigation/nav-primary-button.css
  5. 2
      css/components/navigation/nav-primary-wide.css

2
css/components/form-textarea.css

@ -17,7 +17,7 @@ textarea {
padding: var(--sp); padding: var(--sp);
} }
.region--sidebar input.form-text { .region--sidebar input.form-text {
width: 14em; max-width: 14em;
} }
.region--sidebar .advanced-search-form { .region--sidebar .advanced-search-form {
input.form-text { input.form-text {

4
css/components/header-buttons-mobile.css

@ -28,14 +28,14 @@
} }
/* @media ((((min-width: 60rem)))) { */ /* @media ((((min-width: 60rem)))) { */
@media ((((min-width: 55rem)))) { @media ((((min-width: 1250px)))) {
.mobile-buttons { .mobile-buttons {
margin-block-start: var(--sp6); margin-block-start: var(--sp6);
} }
} }
/* @media ((((min-width: 60rem)))) { */ /* @media ((((min-width: 60rem)))) { */
@media ((((min-width: 55rem)))) { @media ((((min-width: 1250px)))) {
body:not(.is-always-mobile-nav) .mobile-buttons { body:not(.is-always-mobile-nav) .mobile-buttons {
display: none; display: none;
} }

22
css/components/header-navigation.css

@ -30,14 +30,17 @@
* mobile navigation needs to slide beneath the button, but we also cannot * 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 * use padding because that would enable the button to scroll out of the
* viewport on short screens. */ * 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); background-color: var(--color--white);
box-shadow: 0 0 72px rgba(0, 0, 0, 0.1); box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
} }
.header-nav.is-active { .header-nav.is-active {
visibility: visible; 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 { [dir="rtl"] .header-nav.is-active {
@ -84,7 +87,7 @@ html.js .header-nav {
} }
/* @media ((((min-width: 60rem)))) { */ /* @media ((((min-width: 60rem)))) { */
@media ((((min-width: 55rem)))) { @media ((((min-width: 1250px)))) {
body:not(.is-always-mobile-nav) .header-nav { body:not(.is-always-mobile-nav) .header-nav {
position: static; position: static;
display: flex; display: flex;
@ -113,14 +116,21 @@ html.js .header-nav {
max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap)))); max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
padding-inline-end: var(--sp); padding-inline-end: var(--sp);
transition: transform 0.2s, visibility 0.2s; 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) { @media (min-width: 90rem) {
body.is-always-mobile-nav .header-nav { 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))))); max-width: calc(
padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp))); 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))
);
} }
} }

26
css/components/navigation/nav-primary-button.css

@ -15,7 +15,9 @@
overflow: hidden; overflow: hidden;
width: var(--sp2); width: var(--sp2);
height: 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-block: 0;
padding-inline-start: 0; padding-inline-start: 0;
padding-inline-end: 0; padding-inline-end: 0;
@ -76,7 +78,7 @@
pointer-events: none; pointer-events: none;
} }
@media ((((min-width: 60rem)))) { @media ((((min-width: 1250px)))) {
body:not(.is-always-mobile-nav) .primary-nav__button-toggle { body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
flex-shrink: 0; flex-shrink: 0;
align-self: stretch; align-self: stretch;
@ -91,7 +93,9 @@
outline: 0; 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); border: solid 2px var(--color--primary-40);
} }
@ -100,11 +104,15 @@
color: currentColor; 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; 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; inset-inline-start: 0.1875rem;
width: 1.125rem; width: 1.125rem;
transform: translateY(-50%); transform: translateY(-50%);
@ -112,11 +120,15 @@
background-color: var(--color--white); 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; 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 */ /* stylelint-disable csstools/use-logical */
top: calc(50% - 2px); top: calc(50% - 2px);
left: 0.1875rem; left: 0.1875rem;

2
css/components/navigation/nav-primary-wide.css

@ -10,7 +10,7 @@
* Nav Primary (wide widths). * Nav Primary (wide widths).
*/ */
@media ((((min-width: 50rem)))) { @media ((((min-width: 1250px)))) {
body:not(.is-always-mobile-nav) .primary-nav__menu-item { body:not(.is-always-mobile-nav) .primary-nav__menu-item {
flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */ flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */
} }

Loading…
Cancel
Save