scss/web-design-standards/_scss/components/_footer.scss
.usa-footer {
.usa-unstyled-list {
display: block;
}
.usa-footer-primary-link {
color: $color-base;
display: block;
font-weight: $font-bold;
margin-top: 0;
padding-bottom: 2rem;
padding-top: 2rem;
@include media($medium-screen) {
border-top: none;
}
}
a {
font-weight: normal;
}
}
.usa-footer-return-to-top {
padding-bottom: 2rem;
padding-top: 2rem;
}
.usa-footer-primary-section {
background-color: $color-gray-lightest;
.usa-footer-primary-content {
padding-left: 2.5rem;
padding-right: 2.5rem;
@include media($medium-screen) {
padding-left: 0;
padding-right: 0;
}
li {
margin-left: 1rem;
@include media($medium-screen) {
margin-left: 0;
}
}
}
.usa-grid-full {
@include media($medium-screen) {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
}
.width-one-sixth {
@include media($medium) {
@include span-columns(2);
}
}
.usa-footer-medium {
.usa-footer-primary-section {
padding: 0;
@include media($medium-screen) {
padding-bottom: 1rem;
padding-top: 1rem;
}
}
.usa-footer-nav ul {
@include media($medium-screen) {
align-items: center;
display: flex;
}
}
}
.usa-footer-slim {
.usa-footer-nav a {
display: block;
}
.usa-footer-primary-section {
padding-bottom: 2rem;
@include media($medium-screen) {
padding-bottom: 1rem;
padding-top: 1rem;
.usa-grid-full {
align-items: center;
display: flex;
}
}
}
}
ul.usa-footer-primary-content,
li.usa-footer-primary-content,
li.usa-footer-primary-content {
border-top: 1px solid $color-base;
@include media($medium-screen) {
border: none;
}
&:last-child {
border-bottom: 1px solid $color-base;
@include media($medium-screen) {
border-bottom: none;
}
}
}
.usa-sign_up-block {
padding-bottom: 2rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
@include media($medium-screen) {
float: right;
padding: 0;
}
label:first-of-type {
margin-top: 0;
}
button {
float: none;
margin-right: 0;
margin-top: 1.5rem;
}
input {
width: 100%;
}
}
.usa-footer-secondary_section {
background-color: $color-gray-lighter;
padding-bottom: 3rem;
padding-top: 3rem;
a {
color: $color-base;
}
}
.usa-footer-big-secondary-section {
@include media($medium-screen) {
padding-top: 5rem;
}
}
.usa-footer-contact-links {
@include media($medium-screen) {
text-align: right;
}
}
.usa-footer-big {
.usa-footer-primary-section {
@include media($medium-screen) {
padding-bottom: 4rem;
padding-top: 3rem;
}
}
ul {
padding-bottom: 2.5rem;
@include media($medium-screen) {
padding-bottom: 0;
}
&:last-child {
border-bottom: 1px solid $color-base;
@include media($medium-screen) {
border-bottom: none;
}
}
li {
line-height: 2em;
}
.usa-footer-primary-link {
background-image: url('../img/arrow-down.png');
background-image: url('../img/arrow-down.svg');
background-position: 1.5rem center;
background-repeat: no-repeat;
background-size: 1.3rem;
padding-left: 3.5rem;
@include media($medium-screen) {
background: none;
padding-bottom: 0;
padding-left: 0;
}
}
&.hidden {
padding-bottom: 0;
.usa-footer-primary-link {
background-image: url('../img/arrow-right.png');
background-image: url('../img/arrow-right.svg');
cursor: pointer;
margin: 0;
@include media($medium-screen) {
background: none;
padding-left: 0;
}
}
li { display: none; }
}
}
}
.usa-footer-topic {
margin: 0;
padding: 2rem 0;
}
.usa-sign_up-header {
@include media($medium-screen) {
margin: 0;
padding: 2rem 0;
}
}
.usa-footer-logo-img {
max-width: 14rem;
}
.usa-footer-slim-logo-img {
float: left;
max-width: 10rem;
}
.usa-footer-logo-heading {
margin-top: 2rem;
}
.usa-footer-contact-heading {
margin-top: 0;
@include media($medium-screen) {
margin-top: 1rem;
}
}
.usa-footer-slim-logo-heading {
display: block;
padding-top: 1rem;
@include media($medium-screen) {
display: inline-block;
padding-left: 1em;
}
}