Skip to content

E
edx-platform
Commit cc93dcab by AlasdairSwan
Options

Merge pull request #8247 from edx/alasdair/ECOM-1547-footer-v3-style-update 

ECOM-1339 minor CSS tweaks for the footer. It now extends the full wi…
parents 0d975674 0c7abfbe
Showing with 56 additions and 45 deletions
lms/static/sass/shared/_footer-edx.scss
...@@ -14,11 +14,14 @@ $edx-footer-bg-color: rgb(252,252,252); ...@@ -14,11 +14,14 @@ $edx-footer-bg-color: rgb(252,252,252);
// sites so the scope has to be aggressive to override default // sites so the scope has to be aggressive to override default
// CMS styles // CMS styles
footer#footer-edx-v3 { footer#footer-edx-v3 {
@include outer-container;
@include box-sizing(border-box);
background: $edx-footer-bg-color; background: $edx-footer-bg-color;
padding: 20px; padding: 20px;
.footer-content-wrapper {
@include outer-container;
@include box-sizing(border-box);
}
p { p {
@include font-size(14); @include font-size(14);
@include line-height(14); @include line-height(14);
...@@ -36,6 +39,11 @@ footer#footer-edx-v3 { ...@@ -36,6 +39,11 @@ footer#footer-edx-v3 {
&:last-of-type { &:last-of-type {
@include margin-right(0); @include margin-right(0);
} }
&:hover,
&:focus {
border: none;
}
} }
} }
...@@ -59,8 +67,8 @@ footer#footer-edx-v3 { ...@@ -59,8 +67,8 @@ footer#footer-edx-v3 {
} }
.openedx-link { .openedx-link {
@include margin(10px, 0, 30px, -8px);
width: 141px; width: 141px;
margin-bottom: 30px;
a { a {
display: inline-block; display: inline-block;
...@@ -82,10 +90,10 @@ footer#footer-edx-v3 { ...@@ -82,10 +90,10 @@ footer#footer-edx-v3 {
a.sm-link { a.sm-link {
@include float(left); @include float(left);
@include margin(0, 0, 10px, 12px); @include margin(0, 0, 10px, 7px);
@include font-size(28); @include font-size(28);
@include line-height(28); @include line-height(28);
width: 30px; width: 35px;
height: 30px; height: 30px;
line-height: 1; line-height: 1;
position: relative; position: relative;
...@@ -97,8 +105,10 @@ footer#footer-edx-v3 { ...@@ -97,8 +105,10 @@ footer#footer-edx-v3 {
@include margin-left(0); @include margin-left(0);
} }
&:hover { &:hover,
&:focus {
opacity: 0.7; opacity: 0.7;
border: none;
} }
.icon { .icon {
......
lms/templates/footer-edx-v3.html
...@@ -16,51 +16,52 @@ ...@@ -16,51 +16,52 @@
% endif % endif
> >
<h2 class="sr footer-about-title">${_("About edX")}</h2> <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"> <div class="site-details">
<img alt="edX logo" src="${footer['logo_image']}"> <nav class="site-nav" aria-label="${_("About edX")}">
</div> % 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"> ## The OpenEdX link may be hidden when this view is served
<nav class="site-nav" aria-label="${_("About edX")}"> ## through an API to partner sites (such as marketing sites or blogs),
% for link in footer["navigation_links"]: ## which are not technically powered by OpenEdX.
<a href="${link['url']}">${link['title']}</a> % if not hide_openedx_link:
% endfor <div class="openedx-link">
</nav> <a href="${footer['openedx_link']['url']}" title="${footer['openedx_link']['title']}">
<nav class="legal-notices" aria-label="${_("Legal")}"> <img alt="${footer['openedx_link']['title']}" src="${footer['openedx_link']['image']}" width="140">
% for link in footer["legal_links"]: </a>
<a href="${link['url']}">${link['title']}</a> </div>
% endfor % endif
</nav> </div>
<p class="copyright">${footer['copyright']}</p>
## The OpenEdX link may be hidden when this view is served <div class="external-links">
## through an API to partner sites (such as marketing sites or blogs), <div class="social-media-links">
## which are not technically powered by OpenEdX. % for link in footer['social_links']:
% if not hide_openedx_link: <a href="${link['url']}" class="sm-link external" title="${link['title']}" rel="noreferrer">
<div class="openedx-link"> <span class="icon fa ${link['icon-class']}" aria-hidden="true"></span>
<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> </a>
% endfor
</div> </div>
% endif
</div>
<div class="external-links"> <div class="mobile-app-links">
<div class="social-media-links"> % for link in footer['mobile_links']:
% for link in footer['social_links']: <a href="${link['url']}" class="app-link external">
<a href="${link['url']}" class="sm-link external" title="${link['title']}" rel="noreferrer"> <img alt="${link['title']}" src="${link['image']}">
<span class="icon fa ${link['icon-class']}" aria-hidden="true"></span> </a>
</a> % endfor
% endfor </div>
</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> </div>
</div> </div>
</footer> </footer>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment