Styled footer on pattern library pages
This commit is contained in:
AlasdairSwan
@@ -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';
|
||||
|
||||
6
lms/static/sass/base-v2/_extends.scss
Normal file
6
lms/static/sass/base-v2/_extends.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
196
lms/static/sass/shared-v2/_footer.scss
Normal file
196
lms/static/sass/shared-v2/_footer.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user