diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss index 26ee1cea53..fca20860f0 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -22,6 +22,23 @@ // ==================== // basic layout + + .wrapper-l, .wrapper-r { + background: $white; + } + + .wrapper-l { + float: left; + margin-right: flex-gutter(); + width: flex-grid(7,12); + } + + .wrapper-r { + float: right; + width: flex-grid(4,12); + text-align: right; + } + .branding, .info-course, .nav-course, .nav-account, .nav-pitch { @include box-sizing(border-box); display: inline-block; @@ -29,13 +46,6 @@ } // basic layout - nav items - .nav-item { - - .title { - - } - } - nav { > ol > .nav-item { @@ -116,9 +126,9 @@ // specific elements - course name/info .info-course { - margin-right: ($baseline*0.75); + margin-right: flex-gutter(); border-right: 1px solid $gray-l4; - padding: ($baseline*0.75) $baseline ($baseline*0.75) 0; + padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0; .course-org, .course-number { @extend .t-action4; @@ -169,7 +179,6 @@ .nav-account { position: relative; padding: ($baseline*0.75) 0; - text-align: right; .nav-sub { text-align: left; @@ -199,7 +208,6 @@ .nav-pitch { position: relative; padding: ($baseline*0.75) 0; - text-align: right; .nav-sub { text-align: left; @@ -212,16 +220,21 @@ // CASE: user signed in .is-signedin { - .wrapper-header { + .wrapper-l { + width: flex-grid(9,12); + } - .branding { - width: 15%; - margin-right: 2%; - } + .wrapper-r { + width: flex-grid(3,12); + } - .nav-account { - width: 80%; - } + .branding { + width: 20%; + margin-right: 2%; + } + + .nav-account { + top: ($baseline/4); } } @@ -232,21 +245,26 @@ .wrapper-header { + .wrapper-l { + width: flex-grid(9,12); + } + + .wrapper-r { + width: flex-grid(3,12); + } + .branding { - width: 15%; + width: 20%; margin-right: 2%; } .info-course { width: 25%; + margin-right: 2%; } .nav-course { - width: 34%; - } - - .nav-account { - width: 20%; + width: 45%; } } } @@ -258,13 +276,20 @@ .wrapper-header { + .wrapper-l { + width: flex-grid(2,12); + } + + .wrapper-r { + width: flex-grid(10,12); + } + .branding { - width: 15%; - margin-right: 2%; + width: 100%; } .nav-pitch { - width: 80%; + top: ($baseline/4); .nav-item { margin-right: ($baseline/2); diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index 1e19514d66..2ad4b654e1 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -2,156 +2,160 @@