Merge pull request #171 from ASU/UDS-327

fix(bootstrap4-theme): 🐛 global footer: alignment problems (desktop)
ASU · Apr 21, 2021 · 8d8f61d · 8d8f61d
2 parents cc81f0d + 70bfbb7
commit 8d8f61d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/packages/bootstrap4-theme/src/scss/extends/_globalfooter.scss b/packages/bootstrap4-theme/src/scss/extends/_globalfooter.scss
@@ -238,7 +238,6 @@ Footer - Table of Contents
     justify-content: space-between;
     align-items: center;
     font-weight: 700;
-
     img {
       height: 100px;
       width: auto;
@@ -252,13 +251,18 @@ Footer - Table of Contents
 }
 
 // #footer-innovation, Mobile
-
+@include media-breakpoint-down(lg) {
+  .footer-innovation-links {
+    padding-left: 15px;
+  }
+}
 @include media-breakpoint-down(md) {
   #footer-innovation {
     padding: 0;
 
     .footer-innovation-links {
       flex-direction: column;
+      padding-left: 0;
       padding-bottom: $uds-size-spacing-3;
 
       img {

diff --git a/...me/stories/components/global-footer/200420-GlobalFooter-No1InnovationLockup.png b/...me/stories/components/global-footer/200420-GlobalFooter-No1InnovationLockup.png
diff --git a/packages/bootstrap4-theme/stories/components/global-footer/globalfooter.stories.js b/packages/bootstrap4-theme/stories/components/global-footer/globalfooter.stories.js
@@ -897,7 +897,7 @@ storiesOf('Components/Global Footer', module)
     <div class="wrapper" id="wrapper-footer-innovation">
       <div class="container" id="footer-innovation">
         <div class="row">
-          <div class="col">
+          <div class="col p-xl-0">
             <div class="d-flex footer-innovation-links">
               <img src=${innovationLockup} alt="Number one in the U.S. for innovation. #1 ASU, #2 Stanford, #3 MIT. - U.S. News and World Report, 5 years, 2016-2020">
               <nav class="nav" aria-label="University Services">
@@ -916,14 +916,16 @@ storiesOf('Components/Global Footer', module)
     <div class="wrapper" id="wrapper-footer-colophon">
       <div class="container" id="footer-colophon">
         <div class="row">
-          <div class="col">
-            <nav class="nav colophon" aria-label="University Legal and Compliance">
-              <a class="nav-link" href="https://www.asu.edu/copyright/">Copyright and Trademark</a>
-              <a class="nav-link" href="https://www.asu.edu/accessibility/">Accessibility</a>
-              <a class="nav-link" href="https://www.asu.edu/privacy/">Privacy</a>
-              <a class="nav-link" href="https://www.asu.edu/tou/">Terms of Use</a>
-              <a class="nav-link" href="https://www.asu.edu/emergency/">Emergency</a>
-            </nav>
+          <div class="col p-xl-0">
+            <div class="footer-legal-links pl-lg-2 pl-xl-0">
+              <nav class="nav colophon" aria-label="University Legal and Compliance">
+                <a class="nav-link" href="https://www.asu.edu/copyright/">Copyright and Trademark</a>
+                <a class="nav-link" href="https://www.asu.edu/accessibility/">Accessibility</a>
+                <a class="nav-link" href="https://www.asu.edu/privacy/">Privacy</a>
+                <a class="nav-link" href="https://www.asu.edu/tou/">Terms of Use</a>
+                <a class="nav-link" href="https://www.asu.edu/emergency/">Emergency</a>
+              </nav>
+            </div>
           </div>
         </div>
       </div>