From 2c8f3c8046f900b3274c341c130a12912e5248ee Mon Sep 17 00:00:00 2001 From: AlasdairSwan Date: Fri, 29 Apr 2016 15:28:51 -0400 Subject: [PATCH] Styled footer on pattern library pages --- lms/static/sass/_build-lms-v2.scss | 2 + lms/static/sass/base-v2/_extends.scss | 6 + lms/static/sass/shared-v2/_footer.scss | 196 ++++++++++++++++++++++++ lms/static/sass/shared-v2/_header.scss | 4 +- lms/static/sass/shared/_footer-edx.scss | 4 + lms/static/sass/shared/_footer.scss | 85 ---------- lms/templates/footer.html | 2 +- lms/templates/navigation.html | 2 +- 8 files changed, 212 insertions(+), 89 deletions(-) create mode 100644 lms/static/sass/base-v2/_extends.scss create mode 100644 lms/static/sass/shared-v2/_footer.scss diff --git a/lms/static/sass/_build-lms-v2.scss b/lms/static/sass/_build-lms-v2.scss index b20fe16b6b..470ce959c7 100644 --- a/lms/static/sass/_build-lms-v2.scss +++ b/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'; diff --git a/lms/static/sass/base-v2/_extends.scss b/lms/static/sass/base-v2/_extends.scss new file mode 100644 index 0000000000..e2d6206c75 --- /dev/null +++ b/lms/static/sass/base-v2/_extends.scss @@ -0,0 +1,6 @@ +// Adds a simple extend that indicates that this user interface element should not print +%ui-print-excluded { + @media print { + display:none; + } +} diff --git a/lms/static/sass/shared-v2/_footer.scss b/lms/static/sass/shared-v2/_footer.scss new file mode 100644 index 0000000000..8951da58af --- /dev/null +++ b/lms/static/sass/shared-v2/_footer.scss @@ -0,0 +1,196 @@ +// 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; + } + } +} diff --git a/lms/static/sass/shared-v2/_header.scss b/lms/static/sass/shared-v2/_header.scss index 76a0d3398d..0998ed4c01 100644 --- a/lms/static/sass/shared-v2/_header.scss +++ b/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; diff --git a/lms/static/sass/shared/_footer-edx.scss b/lms/static/sass/shared/_footer-edx.scss index c877108b28..f6d6776ecf 100644 --- a/lms/static/sass/shared/_footer-edx.scss +++ b/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; diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index 635b59842e..a19c655438 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/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; - } - } -} diff --git a/lms/templates/footer.html b/lms/templates/footer.html index 1ca055d128..b0e9fa85f2 100644 --- a/lms/templates/footer.html +++ b/lms/templates/footer.html @@ -9,7 +9,7 @@ <%namespace name='static' file='static_content.html'/>
-