Files
edx-platform/lms/static/sass/course/layout/_courseware_header.scss
Michael Terry b2d534da61 Show current tab even in high contrast mode
In the dashboard header and the course navigation bar, the current
tab is supposed to be the only one with a bottom border.  But in
high contrast mode in Windows, all of them were assigned a bottom
border color.

So instead of toggling the color when active, toggle the border
style, since Windows overrides our color choice anyway.

LEARNER-3219
2017-11-16 16:33:50 -05:00

180 lines
3.5 KiB
SCSS

.wrapper-course-material {
@include clearfix();
@include box-sizing(border-box);
@extend %ui-print-excluded;
border-bottom: none;
margin: 0 auto;
padding: 0;
width: 100%;
.course-material {
@extend %inner-wrapper;
@include media-breakpoint-down(md) {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
}
.course-tabs {
@include border-top-radius(4px);
@include clearfix();
padding: ($baseline*0.75) 0 ($baseline*0.75) 0;
.tab {
display: inline-block;
list-style: none;
&.prominent {
@include margin-right(16px);
background: rgba(255, 255, 255, 0.5);
border-radius: 3px;
}
&.prominent + li {
@include padding-left($baseline*0.75);
@include border-left(1px solid $gray-d3);
}
a,
a:visited {
@include padding(($baseline/2), ($baseline*0.75), 13px, ($baseline*0.75));
@extend %t-title7;
@extend %t-regular;
color: theme-color("dark");
display: block;
text-align: center;
text-decoration: none;
border-bottom: 4px hidden theme-color("primary");
&:hover,
&:focus,
&.active {
color: theme-color("primary");
border-bottom-style: solid;
background-color: transparent;
}
}
}
}
}
.course-content {
margin-top: ($baseline*1.5);
.courseware {
min-height: 300px;
}
}
.header-global.slim {
box-shadow: 0 1px 2px $shadow-l1;
height: auto;
padding: ($baseline/4) 0 ($baseline/2) 0;
border-bottom: 1px solid $header-border-color;
background: $header-bg;
line-height: 1.4;
.wrapper-header {
padding-top: ($baseline/4);
}
.nav-account-management {
padding: 0;
}
.guest .secondary {
@include margin-right(0);
}
.guest .secondary a {
display: none;
&#login {
@include background-image(linear-gradient(-90deg, lighten($link-color, 8%), lighten($link-color, 5%) 50%, $link-color 50%, darken($link-color, 10%) 100%));
border: 1px solid transparent;
border-color: theme-color("primary");
border-radius: 3px;
@include box-sizing(border-box);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
color: theme-color("inverse");
display: inline-block;
font-family: $font-family-sans-serif;
font-size: $font-size-sm;
font-weight: bold;
letter-spacing: 0;
line-height: 1em;
margin: 4px;
padding: 6px 12px 8px;
text-decoration: none;
text-transform: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.6);
vertical-align: middle;
&:hover,
&:active,
&:focus {
@include background-image(linear-gradient(-90deg, $primary, $primary 50%, $primary 50%, $primary 100%));
}
}
}
nav {
padding-top: ($baseline/4);
}
.logo {
margin: 0 ($baseline/2) 0 0;
img {
height: 30px;
vertical-align: middle;
}
}
.nav-main,
.nav-global {
display: none;
}
.course-header {
@include float(left);
@include margin(10px, 10px, 0, 10px);
display: inline-block;
width: 65%;
font-weight: font-weight(normal);
font-size: font-size(base);
line-height: 1.5;
.provider {
font: inherit;
font-weight: bold;
}
}
a#signup {
position: relative;
margin-top: 3px;
padding: 6px 12px 8px;
text-transform: none;
font-size: 14px;
font-weight: bold;
letter-spacing: 0;
}
@media print {
background: transparent !important;
}
}