ECOM-1339 minor CSS tweaks for the footer. It now extends the full width of...

ECOM-1339 minor CSS tweaks for the footer. It now extends the full width of the browser and fixes issues with link hover states.

lms/static/sass/shared/_footer-edx.scss

@@ -14,11 +14,14 @@ $edx-footer-bg-color: rgb(252,252,252);
 // sites so the scope has to be aggressive to override default
 // CMS styles
 footer#footer-edx-v3 {
-  @include outer-container;
-  @include box-sizing(border-box);
   background: $edx-footer-bg-color;
   padding: 20px;
 
+  .footer-content-wrapper {
+    @include outer-container;
+    @include box-sizing(border-box);
+  }
+
   p {
     @include font-size(14);
     @include line-height(14);
@@ -36,6 +39,11 @@ footer#footer-edx-v3 {
       &:last-of-type {
         @include margin-right(0);
       }
+
+      &:hover,
+      &:focus {
+        border: none;
+      }
     }
   }
 
@@ -59,8 +67,8 @@ footer#footer-edx-v3 {
   }
 
   .openedx-link {
+    @include margin(10px, 0, 30px, -8px);
     width: 141px;
-    margin-bottom: 30px;
 
     a {
       display: inline-block;
@@ -82,10 +90,10 @@ footer#footer-edx-v3 {
 
   a.sm-link {
     @include float(left);
-    @include margin(0, 0, 10px, 12px);
+    @include margin(0, 0, 10px, 7px);
     @include font-size(28);
     @include line-height(28);
-    width: 30px;
+    width: 35px;
     height: 30px;
     line-height: 1;
     position: relative;
@@ -97,8 +105,10 @@ footer#footer-edx-v3 {
       @include margin-left(0);
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       opacity: 0.7;
+      border: none;
     }
 
     .icon {

lms/templates/footer-edx-v3.html

@@ -16,51 +16,52 @@
   % endif
 >
     <h2 class="sr footer-about-title">${_("About edX")}</h2>
+    <div class="footer-content-wrapper">
+      <div class="footer-logo">
+          <img alt="edX logo" src="${footer['logo_image']}">
+      </div>
 
-    <div class="footer-logo">
-        <img alt="edX logo" src="${footer['logo_image']}">
-    </div>
+      <div class="site-details">
+          <nav class="site-nav" aria-label="${_("About edX")}">
+              % for link in footer["navigation_links"]:
+              <a href="${link['url']}">${link['title']}</a>
+              % endfor
+          </nav>
+          <nav class="legal-notices" aria-label="${_("Legal")}">
+              % for link in footer["legal_links"]:
+              <a href="${link['url']}">${link['title']}</a>
+              % endfor
+          </nav>
+          <p class="copyright">${footer['copyright']}</p>
 
-    <div class="site-details">
-        <nav class="site-nav" aria-label="${_("About edX")}">
-            % for link in footer["navigation_links"]:
-            <a href="${link['url']}">${link['title']}</a>
-            % endfor
-        </nav>
-        <nav class="legal-notices" aria-label="${_("Legal")}">
-            % for link in footer["legal_links"]:
-            <a href="${link['url']}">${link['title']}</a>
-            % endfor
-        </nav>
-        <p class="copyright">${footer['copyright']}</p>
+          ## The OpenEdX link may be hidden when this view is served
+          ## through an API to partner sites (such as marketing sites or blogs),
+          ## which are not technically powered by OpenEdX.
+          % if not hide_openedx_link:
+          <div class="openedx-link">
+            <a href="${footer['openedx_link']['url']}" title="${footer['openedx_link']['title']}">
+              <img alt="${footer['openedx_link']['title']}" src="${footer['openedx_link']['image']}" width="140">
+            </a>
+          </div>
+          % endif
+      </div>
 
-        ## The OpenEdX link may be hidden when this view is served
-        ## through an API to partner sites (such as marketing sites or blogs),
-        ## which are not technically powered by OpenEdX.
-        % if not hide_openedx_link:
-        <div class="openedx-link">
-          <a href="${footer['openedx_link']['url']}" title="${footer['openedx_link']['title']}">
-            <img alt="${footer['openedx_link']['title']}" src="${footer['openedx_link']['image']}" width="140">
+      <div class="external-links">
+        <div class="social-media-links">
+          % for link in footer['social_links']:
+          <a href="${link['url']}" class="sm-link external" title="${link['title']}" rel="noreferrer">
+            <span class="icon fa ${link['icon-class']}" aria-hidden="true"></span>
           </a>
+          % endfor
         </div>
-        % endif
-    </div>
 
-    <div class="external-links">
-      <div class="social-media-links">
-        % for link in footer['social_links']:
-        <a href="${link['url']}" class="sm-link external" title="${link['title']}" rel="noreferrer">
-          <span class="icon fa ${link['icon-class']}" aria-hidden="true"></span>
-        </a>
-        % endfor
-      </div>
-
-      <div class="mobile-app-links">
-        % for link in footer['mobile_links']:
-        <a href="${link['url']}" class="app-link external">
-          <img alt="${link['title']}" src="${link['image']}">
-        </a>
-        % endfor
+        <div class="mobile-app-links">
+          % for link in footer['mobile_links']:
+          <a href="${link['url']}" class="app-link external">
+            <img alt="${link['title']}" src="${link['image']}">
+          </a>
+          % endfor
+        </div>
       </div>
     </div>
 </footer>