6d89cc1bd1
LEARNER-1785 This story was to update the existing custom themes to work with the flexible bootstrap design. It also updates the red theme to more closely resemble the real implementation on openedx.
157 lines
3.5 KiB
SCSS
157 lines
3.5 KiB
SCSS
// LMS header styles
|
|
|
|
.header-global {
|
|
@extend %ui-depth1;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
width: 100%;
|
|
border-bottom: 1px solid $header-border-color;
|
|
box-shadow: 0 1px 5px 0 $shadow-l1;
|
|
background: $header-bg;
|
|
|
|
.logo-header {
|
|
display: inline;
|
|
}
|
|
|
|
.wrapper-header {
|
|
@include clearfix();
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
padding: 10px 10px 0;
|
|
width: 100%;
|
|
max-width: $lms-max-width;
|
|
|
|
.left {
|
|
@include float(left);
|
|
}
|
|
|
|
.right {
|
|
@include float(right);
|
|
}
|
|
|
|
.logo {
|
|
@include float(left);
|
|
@include margin-right(10px);
|
|
margin-top: 4px;
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.course-header {
|
|
@include float(left);
|
|
@include margin(12px, 10px, 0px, 10px);
|
|
color: $lms-label-color;
|
|
.provider {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.wrapper-user-menu {
|
|
@include float(right);
|
|
margin-top: 4px;
|
|
width: auto;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
@include text-align(left);
|
|
top: inherit;
|
|
}
|
|
|
|
.user-menu {
|
|
display: inline;
|
|
}
|
|
|
|
.list-inline {
|
|
&.nav-global {
|
|
@include margin(0, 0, 0, $baseline/2);
|
|
|
|
.btn {
|
|
text-transform: uppercase;
|
|
border: none;
|
|
padding: 0;
|
|
color: $lms-active-color;
|
|
background: transparent;
|
|
|
|
&:hover {
|
|
background: transparent;
|
|
color: $link-hover;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item {
|
|
font-weight: font-weight(semi-bold);
|
|
|
|
&.active {
|
|
a {
|
|
text-decoration: none;
|
|
color: $link-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-nav-item{
|
|
@include float(left);
|
|
display: flex;
|
|
margin: 0;
|
|
justify-content: center;
|
|
|
|
.tab-nav-link{
|
|
font-size: font-size(base);
|
|
font-weight: font-weight(semi-bold);
|
|
color: palette(grayscale, dark);
|
|
padding: 5px 25px 23px;
|
|
display: inline-block;
|
|
|
|
&:active,
|
|
&:focus,
|
|
&:hover {
|
|
border-bottom: 4px solid $lms-border-color;
|
|
}
|
|
}
|
|
|
|
.active{
|
|
border-bottom: 4px solid $black-t3 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Style the courseware's slim version of the header
|
|
&.slim {
|
|
.wrapper-header {
|
|
height: 60px;
|
|
|
|
.logo img {
|
|
margin-top: 4px;
|
|
height: 30px;
|
|
}
|
|
|
|
.course-header {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.list-inline.nav-global {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.wrapper-user-menu {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.doc-link {
|
|
@include float(right);
|
|
@include margin(($baseline*0.75), ($baseline*0.75), ($baseline*0.75), ($baseline*0.75));
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $base-font-color;
|
|
|
|
&:visited {
|
|
color: $base-font-color;
|
|
}
|
|
}
|