D10 theme for Island Lives. This is a clone of drupals core theme Olivero. Notice this theme is named Olivera not Olivero :)
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

/*
* 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;
}
}