Merge pull request #3214 from uswds/internal-develop-3124

[internal] Update footers
uswds · Nov 19, 2019 · 902a66a · 902a66a
2 parents 50f6ffd + 57ead6f
commit 902a66a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 22 deletions.
diff --git a/src/components/10-footer/footer--slim.njk b/src/components/10-footer/footer--slim.njk
@@ -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>

diff --git a/src/components/10-footer/footer.njk b/src/components/10-footer/footer.njk
@@ -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>

diff --git a/src/stylesheets/components/_footer.scss b/src/stylesheets/components/_footer.scss
@@ -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;
+    }
   }
 
   @include at-media("mobile-lg") {
@@ -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);
     }
@@ -250,6 +248,8 @@
   }
 
   .usa-footer__contact-info {
+    display: inline-block;
+
     @include at-media("mobile-lg") {
       @include u-padding-y(2);
       margin-top: 0;
@@ -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;
@@ -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;
         }
       }
     }