Merge pull request #5784 from edx/alasdair/rwd-header-and-footer
Alasdair/rwd header and footer
This commit is contained in:
AlasdairSwan
@@ -9,4 +9,5 @@ $border-box-sizing: false;
|
||||
/* Breakpoints */
|
||||
$mobile: new-breakpoint(max-width 320px 4);
|
||||
$tablet: new-breakpoint(min-width 321px max-width 768px, 8);
|
||||
$desktop: new-breakpoint(min-width 769px 12);
|
||||
$desktop: new-breakpoint(min-width 769px 12);
|
||||
$xl-desktop: new-breakpoint(min-width 980px 12);
|
||||
@@ -1,5 +1,8 @@
|
||||
// Open edX: LMS footer
|
||||
// ====================
|
||||
@import '../base/grid-settings';
|
||||
@import 'neat/neat'; // lib - Neat
|
||||
|
||||
.wrapper-footer {
|
||||
box-shadow: 0 -1px 5px 0 rgba(0,0,0, 0.1);
|
||||
border-top: 1px solid tint($m-gray,50%);
|
||||
@@ -354,6 +357,7 @@ $edx-footer-bg-color: rgb(252,252,252);
|
||||
|
||||
.footer-nav-title {
|
||||
@extend %edx-footer-title;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.footer-nav-links {
|
||||
@@ -370,16 +374,19 @@ $edx-footer-bg-color: rgb(252,252,252);
|
||||
@extend %edx-footer-reset;
|
||||
@extend %edx-footer-section;
|
||||
width: flex-grid(3,12);
|
||||
|
||||
}
|
||||
|
||||
.footer-follow-title {
|
||||
@extend %edx-footer-title;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.footer-follow-links {
|
||||
|
||||
a {
|
||||
@extend %edx-footer-link;
|
||||
line-height: 34px;
|
||||
|
||||
.icon, .copy {
|
||||
display: inline-block;
|
||||
@@ -399,4 +406,37 @@ $edx-footer-bg-color: rgb(252,252,252);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.rwd {
|
||||
@include box-sizing(border-box);
|
||||
@include outer-container;
|
||||
$grid-columns: 4;
|
||||
|
||||
&.wrapper-footer footer {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.footer-about,
|
||||
.footer-nav,
|
||||
.footer-follow {
|
||||
@include span-columns(4);
|
||||
}
|
||||
|
||||
@include media( $tablet ) {
|
||||
/*$grid-columns: 8;*/
|
||||
}
|
||||
|
||||
@include media( $desktop ) {
|
||||
$grid-columns: 12;
|
||||
|
||||
.footer-about {
|
||||
@include span-columns(6);
|
||||
}
|
||||
|
||||
.footer-nav,
|
||||
.footer-follow {
|
||||
@include span-columns(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@import '../base/grid-settings';
|
||||
@import 'neat/neat'; // lib - Neat
|
||||
|
||||
header.global {
|
||||
border-bottom: 1px solid $m-gray;
|
||||
box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.1);
|
||||
@@ -331,8 +334,10 @@ header.global {
|
||||
// CASE: marketing/course discovery
|
||||
header.global-new {
|
||||
@extend %ui-depth1;
|
||||
/* Temp. fix until applied globally */
|
||||
@include box-sizing(border-box);
|
||||
|
||||
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);
|
||||
@@ -340,15 +345,16 @@ header.global-new {
|
||||
|
||||
nav {
|
||||
@include clearfix();
|
||||
@include box-sizing(border-box);
|
||||
width: grid-width(12);
|
||||
height: ($baseline*2);
|
||||
height: 74px;
|
||||
margin: 0 auto;
|
||||
padding: 18px ($baseline/2) 0;
|
||||
padding: 17px 0;
|
||||
}
|
||||
|
||||
h1.logo {
|
||||
float: left;
|
||||
margin: -2px 39px 0px 0px;
|
||||
margin: -2px 39px 0 10px;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
@@ -560,7 +566,7 @@ header.global-new {
|
||||
}
|
||||
}
|
||||
|
||||
.nav-global {
|
||||
%default-header-nav {
|
||||
margin-top: ($baseline/4);
|
||||
list-style: none;
|
||||
float: left;
|
||||
@@ -568,25 +574,21 @@ header.global-new {
|
||||
li,
|
||||
div {
|
||||
display: inline-block;
|
||||
margin: 0 $baseline+1 0 0;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0 !important;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 4px solid $header-bg;
|
||||
display:block;
|
||||
padding: ($baseline/4);
|
||||
padding: 3px 10px;
|
||||
font-size: 18px;
|
||||
padding-bottom: ($baseline*1.25);
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
font-family: $header-sans-serif;
|
||||
color: $courseware-navigation-color;
|
||||
|
||||
&:hover, &:focus{
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: $courseware-hover-color;
|
||||
}
|
||||
@@ -594,25 +596,26 @@ header.global-new {
|
||||
}
|
||||
}
|
||||
|
||||
.nav-global {
|
||||
@extend %default-header-nav;
|
||||
}
|
||||
|
||||
.nav-courseware {
|
||||
@extend .nav-global;
|
||||
@extend %default-header-nav;
|
||||
float: right;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
margin: 0 21px 0 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0!important;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
&.nav-courseware-button {
|
||||
padding: 5px 45px 5px 45px;
|
||||
border: 3px solid $courseware-button-border-color;
|
||||
border-radius: 5px;
|
||||
margin-top: -22px;
|
||||
@@ -628,6 +631,175 @@ header.global-new {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.rwd {
|
||||
nav {
|
||||
max-width: 1180px;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.mobile-menu-button {
|
||||
display: inline;
|
||||
float: left;
|
||||
text-decoration: none;
|
||||
color: $m-gray;
|
||||
margin-toP: 9px;
|
||||
font-size: 18px;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
width: 54px;
|
||||
left: calc( 50% - 90px );
|
||||
top: 20px;
|
||||
|
||||
img {
|
||||
width: 54px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-global,
|
||||
.nav-courseware {
|
||||
a {
|
||||
font-size: 14px;
|
||||
|
||||
&.nav-courseware-button {
|
||||
width: 86px;
|
||||
text-align: center;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-global,
|
||||
.nav-courseware-01 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-global {
|
||||
position: absolute;
|
||||
top: 73px;
|
||||
left: calc( 50% - 160px );
|
||||
z-index: 1000;
|
||||
width: 320px;
|
||||
background: $m-blue-d3;
|
||||
|
||||
&.show {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
padding: 10px;
|
||||
font-weight: 300;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $m-blue-d5;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
border-bottom: 1px solid $m-blue-d5;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-courseware {
|
||||
display: inline;
|
||||
|
||||
div:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media( $desktop ) {
|
||||
nav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-menu-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: relative;
|
||||
width: auto;
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
margin-left: 10px;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-global {
|
||||
display: inline;
|
||||
position: relative;
|
||||
z-index: auto;
|
||||
width: auto;
|
||||
top: auto;
|
||||
left: auto;
|
||||
background: inherit;
|
||||
|
||||
a {
|
||||
color: $courseware-navigation-color;
|
||||
padding: 3px 10px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: inherit;
|
||||
color: $courseware-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-courseware {
|
||||
div:last-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-courseware-01 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.desktop-hide {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@include media( $xl-desktop ) {
|
||||
nav {
|
||||
padding: 17px 10px;
|
||||
}
|
||||
|
||||
.nav-global,
|
||||
.nav-courseware {
|
||||
a {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-register header.global-new .cta-register {
|
||||
|
||||
Reference in New Issue
Block a user