Commit 41fa73b6 by Brian Talbot

studio - wraps nav elements in floated containers for easier layout

parent beaa5979
......@@ -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);
......
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