_sass/_libs/uswds/scss/components/_header.scss
// Header helpers
// ---------------------------------
@mixin nav-border-extended {
@include add-bar(0.5, "primary", "bottom", 0, 2);
}
@mixin nav-border-basic {
@include add-bar(0.5, "primary", "bottom", 0, 2, -0.5);
}
$z-index-header: 300;
$z-index-overlay: 400;
// Header
// ---------------------------------
.usa-header {
@include clearfix;
@include typeset($theme-header-font-family);
@include border-box-sizing;
z-index: z-index($z-index-header);
border-bottom: 1px solid #d6d7d9;
a {
border-bottom: none;
}
// The search <form>
.usa-search {
@include at-media($theme-header-min-width) {
float: right;
}
}
// Accessibility: The <div> with search role
[role="search"] {
@include at-media($theme-header-min-width) {
float: right;
max-width: calc(
#{$theme-search-min-width} + #{units($theme-button-small-width)}
);
width: 100%;
}
}
// The search <input>
[type="search"] {
min-width: 0; // Fix a Firefox display quirk
}
+ .usa-hero {
@include at-media($theme-header-min-width) {
border-top: units(1px) solid color("white");
}
}
+ .usa-section,
+ main {
@include at-media($theme-header-min-width) {
border-top: units(1px) solid color("base-lighter");
}
}
}
.usa-logo {
@include at-media-max($theme-header-min-width) {
@include u-flex("fill");
font-size: font-size($theme-header-font-family, "2xs");
line-height: line-height($theme-header-font-family, 1);
margin-left: units($theme-site-margins-mobile-width);
}
@include at-media($theme-header-min-width) {
margin-top: units(4);
margin-bottom: units(2);
font-size: font-size($theme-header-font-family, "lg");
line-height: line-height($theme-header-font-family, 2);
}
a {
color: color("ink");
text-decoration: none;
}
}
.usa-logo__text {
display: block;
font-style: normal;
font-weight: font-weight("bold");
margin: 0;
}
.usa-menu-btn {
@include button-unstyled;
@include u-flex("auto");
@include u-padding-x(1.5);
background-color: color("primary");
color: color("white");
font-size: font-size($theme-header-font-family, "3xs");
height: units($size-touch-target);
text-align: center;
text-decoration: none;
text-transform: uppercase;
@include at-media($theme-header-min-width) {
display: none;
}
&:hover {
background-color: color("primary-dark");
color: color("white");
text-decoration: none;
}
&:active {
color: color("white");
}
&:visited {
color: color("white");
}
}
.usa-overlay {
@include u-pin("all");
position: fixed;
background: color("black");
opacity: opacity(0);
transition: opacity 0.2s ease-in-out;
visibility: hidden;
z-index: z-index($z-index-overlay);
&.is-visible {
opacity: opacity(20);
visibility: visible;
}
}
// usa-header--basic
// ---------------------------------
.usa-header--basic {
@include at-media($theme-header-min-width) {
.usa-navbar {
position: relative;
width: $theme-header-logo-text-width; // TODO: review this more
}
.usa-nav {
@include u-flex("row", "align-center", "justify-end");
display: flex;
padding: 0 0 units(0.5) units(1);
width: 100%;
}
.usa-nav-container {
@include u-flex("align-end", "justify");
display: flex;
}
.usa-nav__primary-item > .usa-current,
.usa-nav__link:hover {
@include nav-border-basic;
}
// Don't show extended border if dropdown is active.
.usa-nav__link[aria-expanded="true"]::after,
.usa-nav__link[aria-expanded="true"]:hover::after {
display: none;
}
.usa-nav__primary {
width: auto;
}
// Issue #3401: last dropdown gets cutoff.
.usa-nav__primary-item:last-of-type {
position: relative;
.usa-nav__submenu {
@include u-pin-right;
}
}
.usa-search {
top: 0;
padding: 2rem;
}
}
&.usa-header--megamenu {
.usa-nav__inner {
display: flex;
flex-direction: column;
@include at-media($theme-header-min-width) {
display: block;
float: right;
margin-top: units(-5);
}
}
.usa-nav__primary-item:last-of-type {
@include at-media($theme-header-min-width) {
position: static;
}
}
}
}
// usa-header--extended
// ---------------------------------
.usa-header--extended {
@include at-media($theme-header-min-width) {
padding-top: 0;
.usa-nav__primary-item > .usa-current,
.usa-nav__primary-item > .usa-nav__link:hover {
@include nav-border-extended;
}
// Don't show extended border if dropdown is active.
.usa-nav__link[aria-expanded="true"]::after,
.usa-nav__link[aria-expanded="true"]:hover::after {
display: none;
}
}
.usa-logo {
@include at-media($theme-header-min-width) {
font-size: font-size($theme-header-font-family, "xl");
margin: units(4) 0 units(3);
max-width: 50%;
}
}
.usa-navbar {
@include at-media($theme-header-min-width) {
@include grid-container($theme-header-max-width);
display: block;
height: auto;
overflow: auto;
}
}
.usa-nav {
@include at-media($theme-header-min-width) {
border-top: units(1px) solid color("base-lighter");
padding: 0;
width: 100%;
}
}
.usa-nav__inner {
@include at-media($theme-header-min-width) {
@include grid-container($theme-header-max-width);
position: relative;
}
}
.usa-nav__primary {
@include at-media($theme-header-min-width) {
@include clearfix;
margin-left: units(-2);
}
}
.usa-nav__link {
@include at-media($theme-header-min-width) {
@include u-padding-y(2);
}
}
.usa-nav__submenu {
.usa-grid-full {
@include at-media($theme-header-min-width) {
padding-left: units(1.5);
}
}
}
.usa-nav__submenu.usa-megamenu {
@include at-media($theme-header-min-width) {
left: 0;
padding-left: units($theme-site-margins-width);
}
}
}