Merge pull request #12316 from edx/alasdair/ECOM-4315-edx.org-pattern-library-page-footer

ECOM-4313 Styled footer on pattern library pages

lms/static/sass/_build-lms-v2.scss

@@ -6,8 +6,10 @@
 // Configuration
 @import 'config';
 @import 'base/variables';
+@import 'base-v2/extends';
 
 // Extensions
 @import 'shared-v2/base';
 @import 'shared-v2/navigation';
 @import 'shared-v2/header';
+@import 'shared-v2/footer';

lms/static/sass/base-v2/_extends.scss

+// Adds a simple extend that indicates that this user interface element should not print
+%ui-print-excluded {
+  @media print {
+    display:none;
+  }
+}

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

+// Open edX: LMS footer
+// ====================
+
+.wrapper-footer {
+  @extend %ui-print-excluded;
+  margin-top: ($baseline*2) + px;
+  box-shadow: 0 -1px 5px 0 $shadow-l1;
+  border-top: 1px solid tint(palette(grayscale, light), 50%);
+  padding: 25px ($baseline/2 + px) ($baseline*1.5 + px) ($baseline/2 + px);
+  background: $footer-bg;
+  clear: both;
+
+  footer#footer-openedx {
+    @include clearfix();
+    box-sizing: border-box;
+    margin: 0 auto;
+
+    p, ol, ul {
+      font-family: $sans-serif;
+
+      // override needed for poorly scoped font-family styling on p a:link {}
+      a {
+        font-family: $sans-serif;
+      }
+    }
+
+    a {
+      @extend %link-text;
+      border-bottom: none;
+
+      &:hover,
+      &:focus,
+      &:active {
+        border-bottom: 1px dotted $link-color;
+      }
+    }
+
+    // colophon
+    .colophon {
+      @include span(12);
+
+      @include susy-media($bp-screen-sm) {
+        @include span(8);
+      }
+
+      .nav-colophon {
+        @include clearfix();
+        margin: $footer_margin;
+
+        li {
+          @include float(left);
+          margin-right: ($baseline*0.75) + px;
+
+          a {
+            color: tint($black, 20%);
+
+            &:hover,
+            &:focus,
+            &:active {
+              color: $link-color;
+            }
+          }
+
+          &:last-child {
+            @include margin-right(0);
+          }
+        }
+      }
+
+      .colophon-about {
+        @include clearfix();
+
+        img {
+          @include float(left);
+          width: 68px;
+          height: 34px;
+          margin-right: 0;
+        }
+
+        p {
+          @include float(left);
+          @include span(9);
+          margin-left: $baseline + px;
+          padding-left: $baseline + px;
+          font-size: font-size(small);
+          background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
+        }
+      }
+    }
+
+    // references
+    .references {
+      @include span(4);
+      margin: -10px 0 0 0;
+      display: inline-block;
+    }
+
+    .wrapper-logo {
+      margin: ($baseline*0.75) + px 0;
+
+      a {
+        display: inline-block;
+
+        &:hover {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    .copyright {
+      @include text-align(left);
+      margin: -2px 0 8px 0;
+      font-size: font-size(xx-small);
+      color: palette(grayscale, dark);
+    }
+
+    .nav-legal {
+      @include clearfix();
+      @include text-align(left);
+
+      li {
+        display: inline-block;
+        font-size: font-size(xx-small);
+      }
+
+      .nav-legal-02 a {
+        &:before {
+          @include margin-right(($baseline/4) + px);
+          content: "-";
+        }
+      }
+    }
+
+    .nav-social {
+      @include text-align(right);
+      margin: 0;
+
+      li {
+        display: inline-block;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        a {
+          display: block;
+
+          &:hover,
+          &:focus,
+          &:active {
+            border: none;
+          }
+        }
+
+        img {
+          display: block;
+        }
+      }
+    }
+
+    // platform Open edX logo and link
+    .footer-about-openedx {
+      @include span(12);
+      @include text-align(right);
+      vertical-align: bottom;
+
+      @include susy-media($bp-screen-sm) {
+        @include span(4);
+        @include margin-right(0);
+      }
+
+      
+      a {
+        @include float(right);
+        display: inline-block;
+
+        &:hover {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}
+
+// marketing site design syncing
+.view-register,
+.view-login,
+.view-passwordreset {
+  .wrapper-footer footer {
+    width: 960px;
+
+    .colophon-about img {
+      margin-top: ($baseline*1.5) + px;
+    }
+  }
+}

lms/static/sass/shared-v2/_header.scss

@@ -2,7 +2,7 @@
 
 .header-global {
     @extend %ui-depth1;
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     position: relative;
     width: 100%;
     border-bottom: 4px solid $courseware-border-bottom-color;
@@ -11,7 +11,7 @@
 
     .wrapper-header {
         @include clearfix();
-        @include box-sizing(border-box);
+        box-sizing: border-box;
         height: 74px;
         margin: 0 auto;
         padding: 10px 10px 0;

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

@@ -17,6 +17,10 @@ footer#footer-edx-v3 {
   background: $edx-footer-bg-color;
   padding: 20px;
   border-top: 1px solid $courseware-button-border-color;
+  
+  // To match the Pattern Library
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
   .footer-content-wrapper {
     @include outer-container;

lms/static/sass/shared/_footer.scss

@@ -191,9 +191,7 @@
 
   // edx theme overrides
   &.edx-footer {
-
     footer {
-
       .copyright {
         text-align: right;
       }
@@ -216,86 +214,3 @@
     }
   }
 }
-
-
-// edX theme: LMS Footer
-// ====================
-$edx-footer-spacing: ($baseline*0.75);
-$edx-footer-link-color: $link-color;
-$edx-footer-bg-color: rgb(252,252,252);
-
-%edx-footer-reset {
-  @include box-sizing(border-box);
-}
-
-%edx-footer-section {
-  @include float(left);
-  min-height: ($baseline*17.5);
-  @include margin-right(flex-gutter());
-  @include border-right(1px solid rgb(230, 230, 230));
-  @include padding-right($baseline*1.5);
-
-  // CASE: last child
-  &:last-child {
-    @include margin-right(0);
-    border: none;
-    @include padding-right(0);
-  }
-}
-
-%edx-footer-title {
-  // TODO: refactor _typography.scss to extend this set of styling
-  @extend %t-title;
-  @extend %t-weight4;
-  @include font-size(15);
-  @include line-height(15);
-  text-transform: none;
-  letter-spacing: inherit;
-  color: rgb(61, 62, 63);
-}
-
-%edx-footer-link {
-  @extend %t-copy-sub1;
-  @include transition(color $tmg-f2 ease-in-out 0);
-  display: block;
-  margin-bottom: ($baseline/2);
-
-  // NOTE: resetting poor link styles
-  border: none;
-  padding: 0;
-  color: $edx-footer-link-color;
-
-  .copy {
-    @include transition(border-color $tmg-f2 ease-in-out 0);
-    display: inline-block;
-    border-bottom: 1px solid transparent;
-    padding: 0 0 ($baseline/20) 0;
-    color: $edx-footer-link-color;
-  }
-
-  // STATE: hover + focused
-  &:hover, &:focus {
-    color: saturate($edx-footer-link-color, 25%);
-
-    // NOTE: resetting poor link styles
-    border: none;
-
-    .copy {
-      border-bottom-color: saturate($edx-footer-link-color, 25%);
-    }
-  }
-
-  // CASE: last child
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  // CASE: has visual emphasis
-  &.has-emphasis {
-    @extend %t-weight4;
-
-    .copy {
-      @extend %t-weight4;
-    }
-  }
-}

lms/templates/footer.html

@@ -9,7 +9,7 @@
 <%namespace name='static' file='static_content.html'/>
 
 <div class="wrapper wrapper-footer">
-  <footer id="footer-openedx"
+  <footer id="footer-openedx" class="grid-container"
     ## When rendering the footer through the branding API,
     ## the direction may not be set on the parent element,
     ## so we set it here.

lms/templates/navigation.html

@@ -71,7 +71,7 @@ site_status_msg = get_site_status_msg(course_id)
       % endif
 
       % if user.is_authenticated():
-        <ol class="left nav-global authenticated">
+        <ol class="left nav-global list-inline authenticated">
         <%block name="navigation_global_links_authenticated">
           % if settings.FEATURES.get('COURSES_ARE_BROWSABLE') and not show_program_listing:
             <li class="item nav-global-01">