You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
221 lines
7.2 KiB
221 lines
7.2 KiB
/* |
|
* DO NOT EDIT THIS FILE. |
|
* See the following change record for more information, |
|
* https://www.drupal.org/node/3084859 |
|
* @preserve |
|
*/ |
|
|
|
/** |
|
* @file |
|
* Nav Primary (wide widths). |
|
*/ |
|
|
|
@media (min-width: 75rem) { |
|
body:not(.is-always-mobile-nav) .primary-nav__menu-item { |
|
flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */ |
|
} |
|
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link, |
|
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink { |
|
flex-basis: auto; |
|
} |
|
|
|
/* Remove hover state if submenu exists. */ |
|
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner::after { |
|
content: none; |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link { |
|
letter-spacing: 0.02em; |
|
font-size: 1rem; |
|
line-height: var(--sp1-5); |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus { |
|
position: relative; |
|
outline: 0; |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus::before { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
width: calc(100% + var(--sp)); |
|
height: var(--sp3); |
|
content: ""; |
|
transform: translate(-50%, -50%); |
|
border: solid 2px var(--color--primary-50); |
|
border-radius: 0.25rem; |
|
} |
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children { |
|
overflow: visible; /* Necessary to view icon in IE11 */ |
|
padding-inline-end: 0.5625rem; |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus::before { |
|
width: calc(100% + var(--sp1-5)); |
|
content: ""; |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before { |
|
content: none; |
|
} |
|
|
|
/* Chevron icon for desktop navigation. */ |
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after { |
|
position: absolute; |
|
inset-block-start: 50%; |
|
inset-inline-start: calc(100% - 0.1875rem); |
|
width: 0.5rem; |
|
height: 0.5rem; |
|
margin-block-start: -2px; |
|
transform: translateY(-50%) rotate(45deg); |
|
/* Intentionally not using CSS logical properties. */ |
|
border-top: 0; |
|
border-right: solid 2px currentColor; |
|
border-bottom: solid 2px currentColor; |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after { |
|
opacity: 1; |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner { |
|
padding-block: var(--sp2); |
|
padding-inline-start: 0; |
|
padding-inline-end: 0; |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner::after { |
|
transform-origin: center; |
|
border-top-width: var(--sp0-5); |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 { |
|
display: flex; |
|
align-items: stretch; |
|
margin-inline-end: var(--sp); |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 { |
|
position: relative; /* Anchor secondary menu */ |
|
display: flex; |
|
align-items: center; |
|
width: max-content; |
|
max-width: 12.5rem; |
|
margin-block: 0; |
|
margin-inline-start: 0; |
|
margin-inline-end: 0; |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) { |
|
margin-inline-end: var(--sp2); |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 { |
|
position: absolute; |
|
z-index: 105; /* Appear above search container. */ |
|
top: calc(100% - (0.5 * var(--sp))); |
|
left: 50%; |
|
visibility: hidden; |
|
overflow: auto; |
|
width: 15.625rem; |
|
/* Ensure that long level-2 menus will never overflow viewport (focused |
|
* elements should always be in viewport per accessibility guidelines). */ |
|
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp)); |
|
margin-block-start: 0; |
|
margin-inline-start: 0; |
|
padding-block: calc(3 * var(--sp)); |
|
padding-inline-start: var(--sp2); |
|
padding-inline-end: var(--sp2); |
|
transition: none; |
|
transform: translate(-50%, -1.25rem); |
|
opacity: 0; |
|
/* Intentionally not using CSS logical properties. */ |
|
border-top: solid var(--color--primary-50) var(--sp0-5); |
|
border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */ |
|
border-bottom: solid 1px transparent; |
|
border-left: solid 1px transparent; |
|
border-radius: 0 0 2px 2px; |
|
background: var(--color--white); |
|
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08); |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent { |
|
visibility: visible; |
|
margin-block-start: 0; |
|
transform: translate(-50%, 0); |
|
opacity: 1; |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 { |
|
display: block; |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus::before { |
|
top: 0; |
|
left: calc(var(--sp0-5) * -1); |
|
height: 100%; |
|
transform: none; |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner { |
|
padding-block: var(--sp0-5); |
|
padding-inline-start: 0; |
|
padding-inline-end: 0; |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after { |
|
transform-origin: left; /* LTR */ |
|
border-top-width: 3px; |
|
} |
|
|
|
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after { |
|
transform-origin: right; |
|
} |
|
|
|
/** |
|
* Arrow is placed outside of submenu because the submenu has the |
|
* `overflow: hidden` CSS rule applied. |
|
*/ |
|
body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 { |
|
position: absolute; |
|
z-index: 105; /* Match level 2 menus. */ |
|
top: calc(100% - var(--sp)); |
|
left: 50%; |
|
visibility: hidden; |
|
width: 0; |
|
height: 0; |
|
transform: translate(-50%, -1.25rem); |
|
opacity: 0; |
|
/* Intentionally not using CSS logical properties. */ |
|
border-right: solid 10px transparent; |
|
border-bottom: solid 10px var(--color--primary-50); |
|
border-left: solid 10px transparent; |
|
} |
|
|
|
body:not(.is-always-mobile-nav) .primary-nav__menu-🥕.is-active-menu-parent { |
|
visibility: visible; |
|
transform: translate(-50%, 0); |
|
opacity: 1; |
|
} |
|
|
|
/** |
|
* When ensuring that long menus don't overflow viewport, we can give a |
|
* little extra room when the toolbar is fixed (and is shorter). |
|
*/ |
|
body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 { |
|
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp) + var(--sp4)); |
|
} |
|
} |
|
|
|
/* |
|
* Only apply transition styles to menu when JS is loaded. This |
|
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189 |
|
*/ |
|
|
|
@media (min-width: 75rem) { |
|
html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2, |
|
html.js body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 { |
|
transition: visibility 0.2s, transform 0.2s, opacity 0.2s; |
|
} |
|
}
|
|
|