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);
}
.region--sidebar input.form-text {
width: 14em;
max-width: 14em;
}
.region--sidebar .advanced-search-form {
input.form-text {

4
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;
}

22
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))
);
}
}

26
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;

2
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. */
}

Loading…
Cancel
Save