197 lines
2.8 KiB
SCSS
197 lines
2.8 KiB
SCSS
// studio - elements - global header
|
|
// ====================
|
|
|
|
.wrapper-header {
|
|
@extend .depth3;
|
|
margin: 0;
|
|
@include box-shadow(0 1px 2px 0 $shadow-l1);
|
|
background: $white;
|
|
position: relative;
|
|
width: 100%;
|
|
padding: $baseline;
|
|
|
|
header.primary {
|
|
@include box-sizing(border-box);
|
|
@include clearfix();
|
|
max-width: $fg-max-width;
|
|
min-width: $fg-min-width;
|
|
width: flex-grid(12);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
// ====================
|
|
|
|
// basic layout
|
|
.branding, .info-course, .nav-course, .nav-account, .nav-pitch {
|
|
@include box-sizing(border-box);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
// basic layout - nav items
|
|
.nav-item {
|
|
|
|
.title {
|
|
|
|
}
|
|
}
|
|
|
|
nav {
|
|
|
|
> ol > .nav-item {
|
|
@extend .t-action2;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: ($baseline);
|
|
font-weight: 600;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// basic layout - dropdowns
|
|
.nav-dd {
|
|
|
|
.title {
|
|
@extend .t-action2;
|
|
|
|
&:hover {
|
|
@extend .fake-link;
|
|
}
|
|
|
|
.label, .icon-caret-down {
|
|
|
|
}
|
|
|
|
.icon-caret-down {
|
|
@include transition(opacity 0.25s ease-in-out 0);
|
|
opacity: 0.25;
|
|
}
|
|
|
|
&:hover {
|
|
|
|
.icon-caret-down {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// specific elements - branding
|
|
.branding {
|
|
|
|
a {
|
|
display: block;
|
|
|
|
img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// specific elements - course name/info
|
|
.info-course {
|
|
|
|
.course-org, .course-number {
|
|
@extend .text-sr;
|
|
}
|
|
|
|
.course-title {
|
|
@extend .t-action3;
|
|
display: block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-weight: 600;
|
|
color: $gray-d1;
|
|
|
|
}
|
|
|
|
// entire link
|
|
a {
|
|
|
|
&:hover {
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// specific elements - course nav
|
|
.nav-course {
|
|
|
|
.nav-item {
|
|
|
|
.title {
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// specific elements - account-based nav
|
|
.nav-account {
|
|
text-align: right;
|
|
|
|
.nav-account-help {
|
|
|
|
}
|
|
|
|
.nav-account-user {
|
|
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// specific elements - pitch/how it works nav
|
|
.nav-pitch {
|
|
text-align: right;
|
|
}
|
|
}
|
|
// CASE: user signed in
|
|
.is-signedin {
|
|
|
|
.branding {
|
|
width: flex-grid(2, 12);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
.info-course {
|
|
width: flex-grid(3, 12);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
.nav-course {
|
|
width: flex-grid(4, 12);
|
|
}
|
|
|
|
.nav-account {
|
|
width: flex-grid(3, 12);
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// CASE: user not signed in
|
|
.not-signedin {
|
|
|
|
.branding {
|
|
width: flex-grid(2, 12);
|
|
}
|
|
|
|
.nav-pitch {
|
|
width: flex-grid(10, 12);
|
|
}
|
|
}
|