_sass/_libs/uswds/scss/components/_footer.scss
// General footer styles
.usa-footer {
@include border-box-sizing;
@include typeset($theme-footer-font-family);
overflow: hidden;
}
.usa-footer__return-to-top {
@include u-padding-y(2.5);
line-height: line-height($theme-footer-font-family, 1);
a {
@include typeset-link;
}
}
.usa-footer__nav {
@include u-margin-x("auto");
@include u-padding-x(0);
border-bottom: 1px solid color("base-light");
max-width: units("desktop");
@include at-media("mobile-lg") {
@include add-responsive-site-margins;
border-bottom: none;
}
> ul {
@include add-list-reset;
}
}
.usa-footer__primary-section {
background-color: color("base-lightest");
}
.usa-footer__primary-container {
@include u-margin-x("auto");
max-width: units("desktop");
@include at-media("desktop") {
@include u-padding-x(4);
}
}
.usa-footer__primary-content {
line-height: line-height($theme-footer-font-family, 2);
}
.usa-footer__primary-link a,
.usa-footer__secondary-link a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.usa-footer__primary-link {
padding-bottom: 1rem;
padding-top: .5rem;
@include u-text("ink", "no-underline", "bold");
display: block;
@include at-media("mobile-lg") {
@include u-padding-x(0);
}
}
.usa-footer__secondary-link {
line-height: line-height($theme-footer-font-family, 2);
margin-left: units(2);
padding: 0;
a {
@include typeset-link;
}
& + .usa-footer__secondary-link {
padding-top: units(2);
}
@include at-media("mobile-lg") {
margin-left: 0;
}
}
.usa-footer__contact-info {
line-height: line-height($theme-footer-font-family, 2);
a {
@include u-text("ink", "no-underline");
&:hover {
text-decoration: underline;
}
}
@include at-media("mobile-lg") {
@include u-flex("justify-end");
margin-top: units(1);
}
}
.usa-footer__primary-content {
border-top: 1px solid color("base-light");
@include at-media("mobile-lg") {
border: none;
}
}
.usa-sign-up {
padding-bottom: units(4);
padding-top: units(3);
.usa-label,
.usa-button {
margin-top: units(1.5);
}
}
.usa-sign-up__heading {
@include h3;
margin: 0;
}
.usa-footer__secondary-section {
@include u-padding-y(2.5);
background-color: color("base-lighter");
a {
color: color("ink");
}
}
.usa-footer__logo {
@include u-margin-y(1);
@include at-media("mobile-lg") {
@include u-margin-y(0);
@include u-flex("align-center");
}
}
.usa-footer__logo-img {
max-width: units(10);
}
.usa-footer__logo-heading {
@include typeset($theme-footer-font-family, $theme-h3-font-size, 1);
@include u-margin-y(1);
}
.usa-footer__contact-links {
margin-top: units(3);
@include at-media("mobile-lg") {
margin-top: 0;
text-align: right;
}
}
.usa-footer__contact-heading {
@include typeset(
$theme-footer-font-family,
$theme-h3-font-size,
$theme-heading-line-height
);
margin-top: 0;
@include at-media("mobile-lg") {
@include u-margin-y(0.5);
}
}
.usa-footer__social-links {
line-height: line-height($theme-footer-font-family, 1);
padding-bottom: units(1);
a {
text-decoration: none;
}
@include at-media("mobile-lg") {
@include u-flex("justify-end");
}
}
.usa-social-link {
$background-height: units(3); // Height of icon within hit area.
@include u-square($size-touch-target);
background-position: center center;
background-size: auto $background-height;
background-color: color("black-transparent-10");
display: inline-block;
span {
@include sr-only();
}
}
.usa-social-link--facebook {
@include add-background-svg("social-icons/facebook25");
}
.usa-social-link--twitter {
@include add-background-svg("social-icons/twitter16");
}
.usa-social-link--youtube {
@include add-background-svg("social-icons/youtube15");
}
.usa-social-link--rss {
@include add-background-svg("social-icons/rss25");
}
.usa-footer__address {
@include at-media("mobile-lg") {
@include u-flex("justify-end");
}
}
// Slim footer styles
.usa-footer--slim {
.usa-footer__nav {
@include at-media("desktop") {
@include u-padding-x(0);
}
}
.usa-footer__address {
@include u-padding-x($theme-site-margins-mobile-width);
@include u-padding-y(2);
@include at-media("mobile-lg") {
@include u-padding(0);
}
}
.usa-footer__logo {
@include u-flex("align-center");
}
.usa-footer__logo-img {
max-width: units(6);
}
.usa-footer__contact-info {
display: inline-block;
@include at-media("mobile-lg") {
@include u-padding-y(2);
margin-top: 0;
}
}
}
// Big footer styles
.usa-footer--big {
.usa-footer__nav {
@include u-margin-x($theme-site-margins-mobile-width * -1);
@include at-media("mobile-lg") {
border-bottom: 1px solid color("base-light");
padding-top: units(4);
}
@include at-media("tablet") {
@include u-margin-x(0);
@include u-padding-x(0);
border-bottom: none;
}
}
.usa-footer__primary-link {
@include h4;
line-height: line-height("heading", 2);
margin: 0;
@include at-media("mobile-lg") {
@include u-padding-y(0);
margin-bottom: units(1);
&:hover {
cursor: auto;
text-decoration: none;
}
}
}
.usa-footer__primary-content--collapsible {
.usa-footer__primary-link {
align-items: center;
cursor: pointer;
display: flex;
justify-content: flex-start;
// Arrow for collapsible content.
&::before {
@include add-background-svg("arrow-down");
align-items: center;
background-size: contain;
content: "";
display: inline-flex;
height: units(1.5);
justify-content: center;
margin-right: units(1);
width: units(1.5);
}
@include at-media("mobile-lg") {
&::before {
content: none;
}
}
}
&.hidden {
.usa-list--unstyled {
display: none;
}
.usa-footer__primary-link {
&::before {
@include add-background-svg("arrow-right");
}
@include at-media("mobile-lg") {
margin: 0;
}
}
}
.usa-list--unstyled {
@include u-padding-x($theme-site-margins-mobile-width);
padding-bottom: units(2.5);
@include at-media("mobile-lg") {
@include u-padding-x(0);
padding-bottom: units(4);
padding-top: units(1.5);
}
}
}
}