Untitled
unknown
plain_text
4 months ago
3.7 kB
3
Indexable
.site-header__menu { font-size: 100%; list-style: none; margin: 0; padding: 0; @media (--bp-large) { align-items: center; display: flex; justify-content: flex-end; } /* Remove focus ring and add super subtle focus background color */ & a:focus { background-color: var(--c-grey-100); outline: none; @media (--bp-large) { background-color: transparent; outline-color: var(--c-focus-ring); outline-offset: 3px; outline-style: solid; outline-width: 2px; } } & .sub-menu { list-style: none; margin: 0; padding: 0 15px 30px; &[aria-hidden="true"] { display: none; } @nest .js & { display: none; } &:target, &[aria-hidden="false"] { display: block; @media (--bp-large) { background-color: var(--c-header-alt-bg); display: flex; } & .sub-menu { display: block; } } @media (--bp-large) { box-shadow: var(--header-shadow); flex-flow: row wrap; left: 0; padding-bottom: 40px; padding-left: 0; padding-right: 0; padding-top: 30px; position: absolute; right: 0; top: 100%; z-index: 1; & > .menu-item { padding-left: 15px; padding-right: 15px; } } @media (--bp-xlarge) { padding-left: var(--pad-container-md); padding-right: var(--pad-container-md); & > .menu-item { padding-left: 0; padding-right: 0; } } @media (--bp-xxlarge) { padding-left: var(--pad-container-lg); padding-right: var(--pad-container-lg); } & .sub-menu { box-shadow: none; padding: 0; position: relative; top: 0; } & li { padding: 12.5px 0; } & li.menu-item--column { flex-grow: 1; padding: 0; &:last-of-type { padding-bottom: 15px; & > .sub-menu { margin-bottom: 0; } } @media (--bp-large) { flex: 1 0; max-width: none; padding-right: 30px; width: auto; &:last-of-type { padding-bottom: 0; padding-right: 0; } &.menu-item--column--auto { flex: 1 0 auto; max-width: none; padding-right: 0; width: auto; } & > .sub-menu { & li.menu-item--column { float: left; max-width: 100%; min-width: 50%; vertical-align: top; } } } @media (--bp-xlarge) { padding-right: 50px; } &.menu-item--column--separator { @media (--bp-large) { border-left: 1px solid var(--c-grey-200); padding-left: 30px; position: relative; } @media (--bp-xlarge) { padding-left: 50px; } } &.menu-item--column-lg { @media (--bp-large) and (max-width: 98.9em) { flex-basis: 35%; flex-shrink: 0; } } } & > li:not(.menu-item--column) { width: 100%; } & > li.menu-item--title { padding-bottom: 10px; padding-top: 25px; width: 100%; @media (--bp-large ) { padding-top: 10px; } } & li[class*="menu-item-object-"] + li.menu-item--title { @media (--bp-large) { padding-top: 25px; } } & li.menu-item--cta { background-color: var(--c-grey-300); margin-bottom: -30px; margin-left: -15px; margin-right: -15px; margin-top: 15px; padding-bottom: 15px; padding-top: 15px; text-align: center; width: 100vw; @media (--bp-medium ) { margin-left: -15%; margin-right: -15%; width: calc(100vw + 15%); } @media (--bp-large) { margin-bottom: -40px; margin-top: 30px; } } & a.is-style-cta { display: inline; } }
Editor is loading...
Leave a Comment