diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index bed438406a..2cb199f4c7 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -33,6 +33,17 @@ $very-light-text: #fff; // ==================== +// TIMING - used for animation/transition mixin syncing +$tmg-s3: 3.0s; +$tmg-s2: 2.0s; +$tmg-s1: 1.0s; +$tmg-avg: 0.75s; +$tmg-f1: 0.50s; +$tmg-f2: 0.25s; +$tmg-f3: 0.125s; + +// ==================== + // COLORS - utility $transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index 672967dc69..dad40f9cdb 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/lms/static/sass/shared/_footer.scss @@ -1,191 +1,4 @@ -// edX theme: LMS Footer -// ==================== - -.region-footer { - border: 1px solid #f1f1f1; - padding-top: 16px; - background: none; - background-color: #fcfcfc; - .container { - background: none !important; - max-width: 1180px !important; - padding: 15px 20px; - width: calc(100% - 40px) !important; - } -} -.region-footer-columns { - padding: 0!important; - background: none; - border: none; - - > .region-container-inner { - width: 100%; - margin: auto; - border: none; - background: none; - } - - .region-footer-first { - width: 100% ; - float: none ; - - .region-inner { - padding-right: 10px; - } - - nav { - margin-bottom: 1em; - } - } - h2{ - color: #3f4041; - font-size: 13px; - font-weight: 600; - border-bottom: none; - } - ul.menu{ - padding: 0px; - margin-top: 1em; - li{ - list-style: none none; - color: #8a8c8f; - font-size: 14px; - float: none !important; - padding-top: 3px !important; - span{font-size: 0px; color: #fcfcfc;} - a{ - font-size: 14px; - color: #009ee7; - font-family: "Open Sans",Arial,Helvetica,sans-serif; - line-height: 24px; - span{font-size: 14px; font-weight: semibold;} - &.edx-bold{font-weight: 600;} - i{ - font-size: 24px; - width: 25px; - display: inline-block; - margin-right: 10px; - font-family: FontAwesome; - } - } - } - } - ul.menu li a.fa{ - line-height: 42px; - } - p.copyright{ - color: #8a8c8f !important; - } - - .region-footer-second { - width: 100% ; - float: none ; - nav { - margin-bottom: 1em; - width: 100%; - float: none; - padding-right: 0px; - padding-left: 0px; - border-left: none; - border-right: none; - margin-top: 30px; - } - .nav{ - clear: none; - } - - section.block-menu-social{ - width: 100%; - padding: 0px; - margin-top: 30px; - } - } - - .block-disclosure { - p{ - font-size: 14px; - font-weight: normal; - line-height: 21px; - color: #3d3e3f; - padding-right: 20px; - img{ - display: block; - padding: 15px 0px; - } - - } - - } - - .block-menu-business a { - color: #565656; - - &:hover { - color: #2F73BC; - } - } - - .block-menu-social { - a { - border: 0; - } - - ul.menu li { - margin: 0; - padding: 0; - float: right; - - .menu_icon { - display: block; - background-position: center top !important; - overflow: hidden; - text-indent: -9999px; - width: 45px; - margin: 0; - padding: 0 !important; - } - } - - li { - margin: 0; - padding: 0; - float: right; - } - } - - .block-menu-supplement { - - ul.menu li { - margin: 0; - padding: 0; - float: right; - - a:hover { - border-bottom: 1px dotted #2F73BC; - } - - span.separator { - padding: 0 10px; - } - } - - .block-menu-supplement li { - margin: 0; - padding: 0; - float: right; - - a:hover { - border-bottom: 1px dotted #2F73BC; - } - - span.separator { - padding: 0 10px; - } - } - } -} - -// LMS: footer +// Open edX: LMS footer // ==================== .wrapper-footer { box-shadow: 0 -1px 5px 0 rgba(0,0,0, 0.1); @@ -206,13 +19,10 @@ a { @include transition(link-color 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s); - - &:link, &:visited, &:hover, &:focus, &:active { - border-bottom: none; - color: $link-color; - text-decoration: none !important; - font-family: $sans-serif; - } + border-bottom: none; + color: $link-color; + text-decoration: none !important; + font-family: $sans-serif; &:hover, &:focus, &:active { border-bottom: 1px dotted $link-color; @@ -386,3 +196,203 @@ } } } + + +// edX theme: LMS Footer +// ==================== +$edx-footer-spacing: ($baseline*0.75); +$edx-footer-link-color: rgb(0, 158, 231); + +%edx-footer-reset { + @include box-sizing(border-box); +} + +%edx-footer-section { + float: left; + min-height: ($baseline*17.5); + margin-right: flex-gutter(); + border-right: 1px solid rgb(230, 230, 230); + padding-right: ($baseline*1.5); + + // CASE: last child + &:last-child { + margin-right: 0; + border: none; + 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; + } + } + + +} + +.edx-footer-new { + width: 100%; + background: rgb(252, 252, 252) url("../images/footer-seal.png") -($baseline*15.5) ($baseline) no-repeat; + + // NOTE: resetting older footer styles - can be removed once not needed + box-shadow: none; + border-top: none; + padding: ($baseline*2) $baseline; + + // about + // -------------------- + .footer-about { + @extend %edx-footer-reset; + @extend %edx-footer-section; + width: flex-grid(6,12); + } + + .footer-about-title { + @extend %edx-footer-title; + } + + .footer-about-logo { + margin-bottom: $edx-footer-spacing; + } + + .footer-about-copy { + @extend %t-copy-sub1; + margin-bottom: $edx-footer-spacing; + color: rgb(61, 62, 63); + + p { + // NOTE: needed for poor LMS span styling + color: inherit; + } + } + + .footer-about-copyright { + @extend %t-copy-sub1; + margin-bottom: $edx-footer-spacing; + color: rgb(138, 140, 143); + + p { + // NOTE: needed for poor LMS span styling + color: inherit; + } + } + + .footer-about-links { + + a { + @extend %edx-footer-link; + margin-bottom: ($edx-footer-spacing/2); + } + + .note { + color: rgb(138, 140, 143); + } + } + + // nav (learn more links) + // -------------------- + .footer-nav { + @extend %edx-footer-reset; + @extend %edx-footer-section; + width: flex-grid(3,12); + } + + .footer-nav-title { + @extend %edx-footer-title; + } + + .footer-nav-links { + margin-bottom: ($edx-footer-spacing*2.25); + + a { + @extend %edx-footer-link; + } + } + + // follow (social media) + // -------------------- + .footer-follow { + @extend %edx-footer-reset; + @extend %edx-footer-section; + width: flex-grid(3,12); + } + + .footer-follow-title { + @extend %edx-footer-title; + } + + .footer-follow-links { + + a { + @extend %edx-footer-link; + + .icon, .copy { + display: inline-block; + vertical-align: middle; + } + + .icon { + @extend %t-icon3; + margin-right: ($baseline/4); + text-align: center; + min-width: ($baseline*1.5); + } + + .copy { + // NOTE: needed for poor LMS span styling + color: inherit; + } + } + } +} diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 4799f1a09d..eb6226e97a 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -318,22 +318,26 @@ header.global { } +// edX theme: Global Header +// ==================== + +// CASE: marketing/course discovery header.global-new { + @extend %ui-depth1; + position: relative; + height: ($baseline*3.75); + width: 100%; border-bottom: 4px solid $courseware-border-bottom-color; box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.1); background: $header-bg; - height: 75px; - position: relative; - width: 100%; - z-index: 10; nav { - @include clearfix; - height: 40px; - margin: 0 auto; - padding: 18px 10px 0px; + @include clearfix(); max-width: grid-width(12); min-width: 760px; + height: ($baseline*2); + margin: 0 auto; + padding: 18px ($baseline/2) 0; } h1.logo { diff --git a/lms/templates/footer-edx-new.html b/lms/templates/footer-edx-new.html index 9ccbadf8d0..05d3ffcf3a 100644 --- a/lms/templates/footer-edx-new.html +++ b/lms/templates/footer-edx-new.html @@ -3,78 +3,88 @@ <%! from django.utils.translation import ugettext as _ %> <%namespace name='static' file='static_content.html'/> -
- +
+ ${_("About")} + ${_("News")} + ${_("Contact")} +
+ +
+ ${_("FAQ")} + ${_("edX Blog")} +
+ +
+ ${_("Donate to edX")} + ${_("Jobs at edX")} +
+
+ +
+

${_("Follow Us")}

+ +
+ + + ${_("Twitter")} + + + + ${_("Facebook")} + + + + ${_("Meetup")} + + + + ${_("LinkedIn")} + + + + ${_("Google+")} + +
+
+ diff --git a/lms/templates/footer-edx.html b/lms/templates/footer-edx.html index c733ad185d..717814387b 100644 --- a/lms/templates/footer-edx.html +++ b/lms/templates/footer-edx.html @@ -3,6 +3,7 @@ <%! from django.utils.translation import ugettext as _ %> <%namespace name='static' file='static_content.html'/> +## WARNING: These files are specific to edx.org and are not used in installations outside of that domain. Open edX users will want to use the file "footer.html" for any changes or overrides.
-
\ No newline at end of file +