Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[internal] Update footers #3214

Merged
merged 8 commits into from Nov 19, 2019
Merged

[internal] Update footers #3214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a6d3741
Remove extra class on slim footer.
mejiaj Oct 30, 2019
a03efdf
Move inline-block on contact-info to slim footer only.
mejiaj Oct 31, 2019
e0d1fe5
Set grid-col-auto on desktop to Primary Footer section.
mejiaj Oct 31, 2019
6c1c821
Update Big Footer.
mejiaj Oct 31, 2019
a18081c
Merge pull request #3143 from mejiaj/develop+3124
thisisdano Nov 15, 2019
ac62269
Alphabetize and Prettier
thisisdano Nov 18, 2019
ca3cea9
Merge branch 'develop' into internal-develop-3124
thisisdano Nov 18, 2019
57ead6f
Properly scope contact info link hover
thisisdano Nov 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/10-footer/footer--slim.njk
View file
Open in desktop
Expand Up @@ -24,7 +24,7 @@
</div>
<div class="mobile-lg:grid-col-4">
<address class="usa-footer__address">
<div class="grid-row grid-gap mobile-lg:grid-gap-0">
<div class="grid-row grid-gap">
<div class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto">
<div class="usa-footer__contact-info">
<a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
Expand Down
10 changes: 5 additions & 5 deletions src/components/10-footer/footer.njk
View file
Open in desktop
Expand Up @@ -5,19 +5,19 @@
<div class="usa-footer__primary-section">
<nav class="usa-footer__nav">
<ul class="grid-row grid-gap">
<li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
</ul>
Expand Down
51 changes: 35 additions & 16 deletions src/stylesheets/components/_footer.scss
View file
Open in desktop
Expand Up @@ -91,15 +91,13 @@
}

.usa-footer__contact-info {
display: inline-block;
line-height: line-height($theme-footer-font-family, 2);

a {
@include u-text("ink", "no-underline");
}

&:hover {
text-decoration: underline;
&:hover {
text-decoration: underline;
}
thisisdano marked this conversation as resolved.
Show resolved Hide resolved
}

@include at-media("mobile-lg") {
Expand Down Expand Up @@ -234,8 +232,8 @@
}

.usa-footer__address {
@include u-padding-y(2);
@include u-padding-x($theme-site-margins-mobile-width);
@include u-padding-y(2);
@include at-media("mobile-lg") {
@include u-padding(0);
}
Expand All @@ -250,6 +248,8 @@
}

.usa-footer__contact-info {
display: inline-block;

@include at-media("mobile-lg") {
@include u-padding-y(2);
margin-top: 0;
Expand All @@ -275,18 +275,12 @@

.usa-footer__primary-link {
@include h4;
@include add-background-svg("arrow-down");
background-position: units(2) center;
background-size: units(1.5);
line-height: line-height("heading", 2);
margin: 0;
padding-left: units(4);

@include at-media("mobile-lg") {
@include u-padding-y(0);
background: none;
margin-bottom: units(1);
padding-left: 0;

&:hover {
cursor: auto;
Expand All @@ -296,19 +290,44 @@
}

.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 {
@include add-background-svg("arrow-right");
cursor: pointer;
&::before {
@include add-background-svg("arrow-right");
}

@include at-media("mobile-lg") {
background: none;
margin: 0;
padding-left: 0;
}
}
}
Expand Down