site/components/header/style.css
@value badgerRedOnWhite, badgerWhite, badgerBlack, badgerRedOnBlack from "../../css/_colors.css";
@value zindexOverlay from "../../css/_zindex.css";
@value mediumScreen from "../../css/_sizes.css";
.header {
display: flex;
padding: 15px 20px;
background-color: badgerWhite;
}
.mediumScreenNavContainer {
display: none;
width: 100%;
justify-content: flex-end;
position: relative;
flex: 0 1 auto; /*Provide all values to avoid IE10 bug with shorthand flex - http://git.io/vllC7*/
}
.logo {
width: 140px;
height: 35px;
flex: 0 1 auto; /*Provide all values to avoid IE10 bug with shorthand flex - http://git.io/vllC7*/
}
.logo svg {
height: 35px;
}
.mediumScreenNav {
composes: boldSansSerif from '../../css/typography/_fonts.css';
composes: fontXS from '../../css/typography/_fonts.css';
list-style: none;
align-self: center;
margin-top: 8px;
justify-content: flex-end;
display: flex;
}
.mediumScreenNav li {
display: inline-block;
margin-left: 2.5em;
}
.mediumScreenNav .mediumScreenChildList li {
margin-left: 1.5em;
}
.mediumScreenNav a {
text-decoration: none;
color: badgerBlack;
}
.mediumScreenNav > li:hover > a,
.smallScreenNavContainer a,
.activeNavLink,
.mediumScreenChildList li:hover a {
border-bottom: 2px solid badgerRedOnWhite;
}
.mediumScreenChildList li a,
.childList li a span {
/*
ProximaNova-Light glyph doesn't have the same height of ProximaNova-Bold.
We need to add padding, so the border doesn't touch the letters.
*/
padding-bottom: 0.1em;
}
.mediumScreenChildList {
position: absolute;
padding: 1em 0;
display: none;
composes: sansSerif from '../../css/typography/_fonts.css';
font-size: 15px;
}
.mediumScreenChildList::after,
.mediumScreenChildList:before {
content: '';
display: block;
top: 0;
bottom: 0;
position: absolute;
/*
Need to move these elements in the background, so they don't crop the
outline of the actual content.
*/
z-index: -1;
}
.mediumScreenChildList::after {
left: 100%;
right: -100vw;
}
.mediumScreenChildList::before {
left: -100vw;
right: 100%;
}
.mediumScreenChildList li:first-of-type {
margin-left: 0;
}
.mediumScreenNav li a.activeNavLink + .mediumScreenChildList,
.mediumScreenNav li:hover > .mediumScreenChildList {
display: flex;
}
.navItemWithChild:hover > .mediumScreenChildList {
z-index: 10;
background: badgerWhite;
}
.navItemWithChild:hover > .mediumScreenChildList::before,
.navItemWithChild:hover > .mediumScreenChildList::after {
background: badgerWhite;
}
.overlay {
position: fixed;
top: 0;
right: -100%;
bottom: 0;
left: 100%;
z-index: zindexOverlay;
composes: serif from '../../css/typography/_fonts.css';
composes: fontM from '../../css/typography/_fonts.css';
font-weight: bold;
transition: left 0.3s;
}
.smallScreenNavMargin {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 54px;
}
.smallScreenNavWrapper {
background: badgerBlack;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 54px;
display: none;
overflow-y: scroll;
}
.overlay .mediumScreenNav {
display: block;
}
.smallScreenNavContainer {
margin-top: 30px;
text-align: center;
}
.smallScreenNav {
width: 100%;
padding-left: 25%;
display: inline-block;
text-align: left;
margin-top: 10px;
}
.smallScreenNav li {
margin: 0;
}
.smallScreenNav li a {
color: badgerWhite;
text-decoration: none;
border: none;
display: inline-block;
width: 100%;
padding-bottom: 20px;
}
.smallScreenNav li a:focus {
outline: none;
}
.smallScreenNav li:hover > a span {
border-bottom: 2px solid badgerRedOnBlack;
}
.menuCloseButton {
composes: fontXS from '../../css/typography/_fonts.css';
composes: boldSansSerif from '../../css/typography/_fonts.css';
position: absolute;
top: 5px;
left: 10px;
color: badgerWhite;
text-decoration: none;
cursor: pointer;
}
.smallScreenNavComponent {
flex: 1;
}
.triggerContainer {
width: 100%;
height: 35px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.triggerLabel {
composes: boldSansSerif from '../../css/typography/_fonts.css';
composes: fontXS from '../../css/typography/_fonts.css';
border-bottom: 2px solid badgerRedOnWhite;
line-height: 1em;
cursor: pointer;
margin-bottom: 6px;
}
.trigger {
position: absolute;
top: -9999px;
left: -9999px;
}
.trigger:checked + .overlay {
left: 0;
right: 0;
}
.trigger:checked + .overlay .smallScreenNavWrapper {
display: block;
}
/*new navigation*/
.childList {
margin-left: 1em;
composes: sansSerif from '../../css/typography/_fonts.css';
composes: fontM2 from '../../css/typography/_fonts.css';
}
@media mediumScreen {
.header {
margin-bottom: 2.5em;
}
.triggerContainer {
display: none;
}
.mediumScreenNavContainer {
display: flex;
}
.logo {
width: 178px;
height: 44px;
position: relative;
z-index: 20;
}
.logo svg {
height: 44px;
}
.smallScreenNavComponent {
width: auto;
}
}