Skip to content

E
edx-platform
Commit 58f93cc7 by Harry Rein Committed by Andy Armstrong
Options

Styling fixes for the dashboard and course header.

parent d0f348d3
Showing with 550 additions and 513 deletions
lms/djangoapps/courseware/testutils.py
...@@ -33,7 +33,7 @@ class RenderXBlockTestMixin(object): ...@@ -33,7 +33,7 @@ class RenderXBlockTestMixin(object):
'<ol class="tabs course-tabs"', '<ol class="tabs course-tabs"',
'<footer id="footer-openedx"', '<footer id="footer-openedx"',
'<div class="window-wrap"', '<div class="window-wrap"',
'<div class="preview-menu container"', '<div class="preview-menu"',
'<div class="container"', '<div class="container"',
] ]
......
lms/static/sass/_header.scss
...@@ -30,28 +30,36 @@ ...@@ -30,28 +30,36 @@
height: $header-logo-height; height: $header-logo-height;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
margin-left: calc(50% - 30px); @include margin-left(50%);
height: $header-logo-height; height: $header-logo-height;
width: auto; width: auto;
.logo {
@include margin-left(-50%);
}
} }
} }
.course-header { .course-header {
@include float(left); @include float(left);
@include margin($baseline*1.25, 0, 0, $baseline); @include margin($baseline*0.8, 0, 0, $baseline);
font-size: $font-size-lg; font-size: $font-size-sm;
color: theme-color("dark"); color: theme-color("dark");
line-height: 1em; line-height: 1em;
display: none; display: none;
.provider { .course-name {
font-weight: $font-weight-bold; display: block;
font-size: $font-size-base;
margin-top: 7px;
font-weight: 600;
} }
// Hide the course header for smaller screen sizes // Hide the course header for smaller screen sizes
@include media-breakpoint-up(md) { @include media-breakpoint-up(lg) {
display: block; display: block;
} }
} }
...@@ -64,7 +72,7 @@ ...@@ -64,7 +72,7 @@
by the desktop styling by the desktop styling
*/ */
// Desktop styling // Desktop styling
@include media-breakpoint-up(md) { @include media-breakpoint-up(lg) {
.nav-links { .nav-links {
.nav-item { .nav-item {
margin: 0 $baseline; margin: 0 $baseline;
...@@ -90,11 +98,11 @@ ...@@ -90,11 +98,11 @@
a { a {
color: theme-color("secondary"); color: theme-color("secondary");
padding: $baseline*0.35 $baseline*1.25 $baseline; padding: $baseline*0.35 $baseline*1.25 19px;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
display: inline-block; display: inline-block;
margin-bottom: -1*$baseline/2; margin-bottom: -1*$baseline/2;
border-bottom: 2px solid transparent; border-bottom: 3px solid transparent;
cursor: pointer; cursor: pointer;
&.active, &.active,
...@@ -121,9 +129,14 @@ ...@@ -121,9 +129,14 @@
padding: $baseline/2 0 0; padding: $baseline/2 0 0;
margin: 0 $baseline/2; margin: 0 $baseline/2;
&.nav-item-dropdown {
padding: 0;
margin: 0;
}
a { a {
color: theme-color("dark"); color: theme-color("dark");
font-weight: $font-weight-bold; font-weight: $font-weight-normal;
} }
} }
...@@ -173,6 +186,7 @@ ...@@ -173,6 +186,7 @@
// Dropdown behavior // Dropdown behavior
.toggle-user-dropdown { .toggle-user-dropdown {
padding: $baseline/2;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
...@@ -224,7 +238,7 @@ ...@@ -224,7 +238,7 @@
} }
// Responsive styling for mobile // Responsive styling for mobile
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
// Display the menu icon and allow for transition to an X on click // Display the menu icon and allow for transition to an X on click
.hamburger-menu { .hamburger-menu {
@include left(22px); @include left(22px);
...@@ -308,11 +322,11 @@ ...@@ -308,11 +322,11 @@
.mobile-menu { .mobile-menu {
border-bottom: 1px solid theme-color('primary'); border-bottom: 1px solid theme-color('primary');
@include media-breakpoint-up(md) { @include media-breakpoint-up(lg) {
display: none !important; display: none !important;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
display: none; display: none;
// Override standard styling for the mobile menu links // Override standard styling for the mobile menu links
...@@ -353,7 +367,7 @@ ...@@ -353,7 +367,7 @@
// Hide elements in menu bar when they exist in mobile // Hide elements in menu bar when they exist in mobile
.hidden-mobile { .hidden-mobile {
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
&:not(.mobile-nav-link) { &:not(.mobile-nav-link) {
display: none; display: none;
} }
......
lms/static/sass/bootstrap/_layouts.scss
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
padding-bottom: $baseline*2; padding-bottom: $baseline*2;
.course-tabs { .course-tabs {
padding: 0; padding: 0 $baseline*2;
font-size: $font-size-sm; font-size: $font-size-sm;
.nav-item { .nav-item {
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
padding: 20px; padding: $baseline $baseline*2;
.page-header-search { .page-header-search {
@include margin-right($baseline); @include margin-right($baseline);
...@@ -62,6 +62,10 @@ ...@@ -62,6 +62,10 @@
.page-header-main { .page-header-main {
flex-grow: 1; // This column should consume all the available space flex-grow: 1; // This column should consume all the available space
.page-title {
margin-top: $baseline*0.4;
}
} }
.page-header-secondary { .page-header-secondary {
...@@ -84,7 +88,7 @@ ...@@ -84,7 +88,7 @@
} }
.page-content { .page-content {
padding: $baseline; padding: $baseline*2;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
display: flex; display: flex;
......
lms/static/sass/multicourse/_dashboard.scss
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
.course-title { .course-title {
a, span { a, span {
@extend %t-title3; @extend %t-title3;
@extend %t-light; @extend %t-regular;
display: inline-block; display: inline-block;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
...@@ -155,7 +155,7 @@ ...@@ -155,7 +155,7 @@
@include float(left); @include float(left);
padding: 0; padding: 0;
margin-top: ($baseline/2); margin-top: $baseline;
[class*="info-"] { [class*="info-"] {
color: $gray-d1; color: $gray-d1;
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
.wrapper-course-actions { .wrapper-course-actions {
@include margin-right($baseline); @include margin-right($baseline);
margin-top: $baseline/2; margin-top: $baseline;
} }
...@@ -378,661 +378,676 @@ ...@@ -378,661 +378,676 @@
// ==================== // ====================
// UI: messages // CASE: "enrolled as" status - professional ed
.wrapper-messages-primary { &.professional {
@include clearfix();
.messages-list { // changes to cover
margin: 0; .wrapper-course-image .cover {
padding: 0; border-color: $professional-color-lvl3;
background-color: theme-color("lightest"); padding: ($baseline/10);
} }
.message { // course enrollment status message
@extend %ui-depth1; .sts-enrollment {
.label {
border-radius: 3px; @extend %text-sr;
display: none;
padding: ($baseline/2) $baseline;
border-top: 1px solid $gray-l4;
color: $base-font-color; // Overrides the normal white color in this one case
// STATE: shown
&.is-shown {
@include clearfix();
display: block;
} }
a { // status message
font-family: $font-family-sans-serif; .sts-enrollment-value {
background: $professional-color-lvl3;
} }
}
}
strong { // CASE: "enrolled as" status - verified
font-weight: 700; &.verified {
a {
font-weight: 700;
}
}
.actions { // changes to cover
@include clearfix(); .wrapper-course-image .cover {
border-color: $verified-color-lvl1;
padding: ($baseline/10);
}
list-style: none; // course enrollment status message
margin: 0; .sts-enrollment {
padding: 0; .label {
@extend %text-sr;
} }
.message-title, .deco-graphic {
.message-copy .title { @extend %ui-depth3;
@extend %t-title6;
@extend %t-weight4;
line-height: 1em; width: 40px;
margin-bottom: ($baseline/4); position: absolute;
} top: -5px;
.message-copy, @include right(0);
.message-copy .copy { }
@extend %t-copy-sub1;
margin: 2px 0 0 0; // status message
.sts-enrollment-value {
background: $verified-color-lvl1;
} }
}
}
// CASE: expandable // CASE: "enrolled as" status - honor code
&.is-expandable { &.honor {
.wrapper-tip {
.message-title, .message-copy {
margin-bottom: 0;
display: inline-block;
}
.message-title .value, .message-copy { // changes to cover
@include transition(color $tmg-f2 ease-in-out 0s); .wrapper-course-image .cover {
} border-color: $honorcode-color-lvl2;
padding: ($baseline/10);
}
// STATE: hover // status message
&:hover { .sts-enrollment-value {
cursor: pointer; background: $honorcode-color-lvl1;
}
}
.message-title .value, .message-copy, .ui-toggle-expansion { // CASE: "enrolled as" status - auditing
color: $link-color; &.audit {
}
}
}
.wrapper-extended { // changes to cover
@include transition(opacity $tmg-f2 ease-in-out 0); .wrapper-course-image .cover {
border-color: $audit-color-lvl2;
padding: ($baseline/10);
}
display: none; // status message
opacity: 0; .sts-enrollment-value {
} background: $audit-color-lvl1;
} }
}
}
}
// STATE: is expanded // Responsive behavior
&.is-expanded { @include media-breakpoint-down(md) {
.ui-toggle-expansion { padding: $baseline;
@include rtl { }
@include transform(rotate(-90deg)); }
}
@include ltr { // Secondary functionality
@include transform(rotate(90deg)); .side-container {
} @include padding($baseline*2, $baseline*2, $baseline, $baseline);
@include transform-origin(50% 50%); max-width: $baseline*20;
} min-width: $baseline*20;
min-height: $baseline/2;
.wrapper-extended { flex-grow: 1;
display: block; order: 2;
opacity: 1;
}
}
// TYPE: upsell .wrapper-find-courses {
&.message-upsell { .course-advertise {
.wrapper-tip { @include clearfix();
@include clearfix();
.message-title { box-sizing: border-box;
@include float(left); padding: $baseline;
} border: 1px solid $border-color-l3;
.ui-toggle-expansion { .advertise-message {
@include transition(all $tmg-f2 ease-in-out 0s); @include font-size(12);
@include font-size(18);
display: inline-block; color: $gray-d4;
vertical-align: middle; margin-bottom: $baseline;
}
@include margin-right($baseline/4); .ad-link {
} @include text-align(center);
.message-copy { .btn-neutral {
@include float(right); padding-bottom: 12px;
} padding-top: 12px;
} }
.wrapper-extended { a {
padding: ($baseline/4) 0; @include font-size(16);
@include line-height(17);
.message-copy { padding: $baseline * 0.5;
display: inline-block; border: 1px solid theme-color('primary');
color: theme-color('primary');
text-decoration: none;
display: block;
.message-copy-bold { &:hover,
font-weight: 600; &:focus,
} &:active {
} color: $white;
} background-color: theme-color('primary');
}
.action-upgrade-container { span {
@include float(right); @include margin-left($baseline*0.25);
}
display: inline-block; .icon {
margin-top: ($baseline/2); @include margin-right($baseline*0.25);
} }
}
}
}
}
.action-upgrade { .profile-sidebar {
@extend %btn-primary-green; ul {
padding: 0;
border: 1px solid theme-color("light");
}
}
@include clearfix(); // Responsive behavior
@include media-breakpoint-down(md) {
margin: 0 $baseline $baseline*2;
padding: 0;
max-width: 100%;
}
position: relative; // Responsive behavior
@include media-breakpoint-down(xl) {
max-width: $baseline*15;
min-width: $baseline*15;
}
}
@include left($baseline/2); // Responsive behavior
@include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75)); @include media-breakpoint-down(md) {
flex-direction: column;
}
}
.action-upgrade-icon { // ====================
@include float(left); // UI: messages
.wrapper-messages-primary {
@include clearfix();
display: inline; .messages-list {
margin: 0;
padding: 0;
background-color: theme-color("lightest");
}
@include margin-right($baseline*0.4); .message {
@extend %ui-depth1;
margin-top: ($baseline/4); border-radius: 3px;
background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat; display: none;
background-position: -($baseline*0.3); padding: ($baseline/2) $baseline;
background-color: white; border-top: 1px solid $gray-l4;
width: ($baseline*0.8); color: $base-font-color; // Overrides the normal white color in this one case
height: ($baseline*0.7);
}
.deco-graphic { // STATE: shown
position: absolute; &.is-shown {
top: -($baseline/4); @include clearfix();
@include left(-($baseline*0.75)); display: block;
}
width: ($baseline*2); a {
} font-family: $font-family-sans-serif;
}
span { strong {
color: $white; // nasty but needed override for poor <span> styling font-weight: 700;
}
.copy, .copy-sub { a {
display: inline-block; font-weight: 700;
vertical-align: middle; }
} }
.copy { .actions {
@extend %t-action3; @include clearfix();
@extend %t-weight4;
@include margin-right($baseline); list-style: none;
} margin: 0;
padding: 0;
}
.copy-sub { .message-title,
@extend %t-action4; .message-copy .title {
@extend %t-title6;
@extend %t-weight4;
opacity: 0.875; line-height: 1em;
} margin-bottom: ($baseline/4);
} }
}
// TYPE: status .message-copy,
&.message-status { .message-copy .copy {
border-color: $gray-l4; @extend %t-copy-sub1;
.wrapper-message-primary { margin: 2px 0 0 0;
@include clearfix(); }
}
.message-copy { // CASE: expandable
@extend %t-copy-sub1; &.is-expandable {
.wrapper-tip {
.message-title, .message-copy {
margin-bottom: 0;
display: inline-block;
}
margin: 0; .message-title .value, .message-copy {
} @include transition(color $tmg-f2 ease-in-out 0s);
}
.credit-action { // STATE: hover
.credit-btn { &:hover {
@extend %btn-pl-yellow-base; cursor: pointer;
@include float(right); .message-title .value, .message-copy, .ui-toggle-expansion {
@include margin-right(5px); color: $link-color;
}
}
}
background-image: none ; .wrapper-extended {
text-shadow: none; @include transition(opacity $tmg-f2 ease-in-out 0);
box-shadow: none;
text-transform: none;
}
}
.actions { display: none;
.action { opacity: 0;
@include float(left); }
@include margin(0, 15px, 0, 0); }
.btn { // STATE: is expanded
display: inline-block; &.is-expanded {
} .ui-toggle-expansion {
@include rtl {
@include transform(rotate(-90deg));
}
.btn { @include ltr {
@include box-sizing(border-box); @include transform(rotate(90deg));
@include float(left); }
border-radius: 3px; @include transform-origin(50% 50%);
font: normal 0.8rem/1.2rem $font-family-sans-serif; }
letter-spacing: 1px;
padding: 6px 12px;
text-align: center;
&.disabled { .wrapper-extended {
cursor: default !important; display: block;
opacity: 1;
}
}
&:hover, &:focus { // TYPE: upsell
@include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%)); &.message-upsell {
.wrapper-tip {
@include clearfix();
background: #eee; .message-title {
} @include float(left);
} }
}
.btn { .ui-toggle-expansion {
@include float(left); @include transition(all $tmg-f2 ease-in-out 0s);
@include font-size(18);
font: normal 0.8rem/1.2rem $font-family-sans-serif; display: inline-block;
letter-spacing: 1px; vertical-align: middle;
padding: 6px 12px;
text-align: center;
}
}
}
.exam-registration-number { @include margin-right($baseline/4);
font-family: $font-family-sans-serif; }
font-size: 18px;
a { .message-copy {
font-family: $font-family-sans-serif; @include float(right);
} }
} }
&.exam-register { .wrapper-extended {
.message-copy { padding: ($baseline/4) 0;
margin-top: ($baseline/4);
width: 55%;
}
}
&.exam-schedule { .message-copy {
.exam-button { display: inline-block;
margin-top: ($baseline/4);
}
}
.exam-button { .message-copy-bold {
@include button(simple, $pink); font-weight: 600;
@include float(right); }
}
}
margin-top: 0; .action-upgrade-container {
} @include float(right);
.contact-button { display: inline-block;
@include button(simple, $pink); margin-top: ($baseline/2);
} }
.button { .action-upgrade {
display: inline-block; @extend %btn-primary-green;
margin-top: ($baseline/2);
padding: 9px 18px 10px;
font-size: 13px;
font-weight: bold;
letter-spacing: 0;
&:hover, &:focus { @include clearfix();
text-decoration: none;
}
}
position: relative;
&.course-status-certrendering { @include left($baseline/2);
.btn { @include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
margin-top: 2px;
}
}
&.course-status-certavailable { .action-upgrade-icon {
.message-copy { @include float(left);
width: flex-grid(6, 12);
position: relative;
@include float(left); display: inline;
}
.actions-primary { @include margin-right($baseline*0.4);
@include float(right);
.action { margin-top: ($baseline/4);
@include margin(0, 0, ($baseline/2), ($baseline*.75)); background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat;
background-position: -($baseline*0.3);
background-color: white;
width: ($baseline*0.8);
height: ($baseline*0.7);
}
float: none; .deco-graphic {
text-align: center; position: absolute;
top: -($baseline/4);
&:last-child { @include left(-($baseline*0.75));
margin-bottom: 0;
}
.btn { width: ($baseline*2);
float: none; }
}
}
.action-certificate .btn { span {
@extend %btn-inherited-primary; color: $white; // nasty but needed override for poor <span> styling
}
@include box-sizing(border-box); .copy, .copy-sub {
display: inline-block;
vertical-align: middle;
}
float: none; .copy {
border-radius: 3px; @extend %t-action3;
display: block; @extend %t-weight4;
@include padding(7px, ($baseline*.75), 7px, ($baseline*.75)); @include margin-right($baseline);
}
text-align: center; .copy-sub {
@extend %t-action4;
a:link, a:visited { opacity: 0.875;
color: #fff; }
} }
} }
.action-share .btn { // TYPE: status
display: inline; &.message-status {
letter-spacing: 0; border-color: $gray-l4;
}
}
}
.actions-secondary { .wrapper-message-primary {
margin-top: ($baseline/2); @include clearfix();
border-top: 1px solid $gray-l4; }
padding-top: ($baseline/2);
.action-share { .message-copy {
@include float(right); @extend %t-copy-sub1;
margin: 0; margin: 0;
} }
}
.certificate-explanation { .credit-action {
@extend %t-copy-sub1; .credit-btn {
@extend %btn-pl-yellow-base;
margin-top: ($baseline/2); @include float(right);
border-top: 1px solid $gray-l4; @include margin-right(5px);
padding-top: ($baseline/2);
}
.verification-reminder { background-image: none ;
width: flex-grid(8, 12); text-shadow: none;
box-shadow: none;
text-transform: none;
}
}
@include float(left); .actions {
.action {
@include float(left);
@include margin(0, 15px, 0, 0);
position: relative; .btn {
} display: inline-block;
}
.verification-cta { .btn {
width: flex-grid(4, 12); @include box-sizing(border-box);
@include float(left);
@include float(left); border-radius: 3px;
font: normal 0.8rem/1.2rem $font-family-sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
text-align: center;
position: relative; &.disabled {
cursor: default !important;
.btn { &:hover, &:focus {
@extend %btn-pl-green-base; @include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%));
@include float(right); background: #eee;
}
} }
} }
}
.btn {
@include float(left);
font: normal 0.8rem/1.2rem $font-family-sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
text-align: center;
}
}
}
&.message-related-programs { .exam-registration-number {
background: none; font-family: $font-family-sans-serif;
border: none; font-size: 18px;
margin-top: ($baseline/4);
padding-bottom: 0;
.related-programs-preface { a {
@include float(left); font-family: $font-family-sans-serif;
}
}
font-weight: bold; &.exam-register {
} .message-copy {
margin-top: ($baseline/4);
width: 55%;
}
}
ul { &.exam-schedule {
display: inline; .exam-button {
padding: 0; margin-top: ($baseline/4);
margin: 0; }
} }
li { .exam-button {
@include float(left); @include button(simple, $pink);
@include float(right);
display: inline; margin-top: 0;
padding: 0 0.5em; }
border-right: 1px solid;
.category-icon { .contact-button {
@include float(left); @include button(simple, $pink);
@include margin-right($baseline/4); }
margin-top: ($baseline/10); .button {
background-color: transparent; display: inline-block;
background-size: 100%; margin-top: ($baseline/2);
width: ($baseline*0.7); padding: 9px 18px 10px;
height: ($baseline*0.7); font-size: 13px;
} font-weight: bold;
} letter-spacing: 0;
// Remove separator from last list item. &:hover, &:focus {
li:last-child { text-decoration: none;
border: 0; }
} }
}
// TYPE: pre-requisites
.prerequisites {
@include clearfix;
.tip { &.course-status-certrendering {
font-family: $font-family-sans-serif; .btn {
font-size: 1em; margin-top: 2px;
color: $lighter-base-font-color; }
margin-top: ($baseline/2); }
}
}
@include media-breakpoint-down(md) { &.course-status-certavailable {
@include padding($baseline/2, $baseline, $baseline/2, $baseline/2); .message-copy {
} width: flex-grid(6, 12);
} position: relative;
@include float(left);
} }
// ==================== .actions-primary {
@include float(right);
// CASE: "enrolled as" status - professional ed .action {
&.professional { @include margin(0, 0, ($baseline/2), ($baseline*.75));
// changes to cover float: none;
.wrapper-course-image .cover { text-align: center;
border-color: $professional-color-lvl3;
padding: ($baseline/10);
}
// course enrollment status message &:last-child {
.sts-enrollment { margin-bottom: 0;
.label {
@extend %text-sr;
} }
// status message .btn {
.sts-enrollment-value { float: none;
background: $professional-color-lvl3;
} }
} }
}
// CASE: "enrolled as" status - verified .action-certificate .btn {
&.verified { @extend %btn-inherited-primary;
// changes to cover @include box-sizing(border-box);
.wrapper-course-image .cover {
border-color: $verified-color-lvl1;
padding: ($baseline/10);
}
// course enrollment status message float: none;
.sts-enrollment { border-radius: 3px;
.label { display: block;
@extend %text-sr;
}
.deco-graphic { @include padding(7px, ($baseline*.75), 7px, ($baseline*.75));
@extend %ui-depth3;
width: 40px; text-align: center;
position: absolute;
top: -5px;
@include right(0); a:link, a:visited {
color: #fff;
} }
}
// status message .action-share .btn {
.sts-enrollment-value { display: inline;
background: $verified-color-lvl1; letter-spacing: 0;
}
} }
} }
}
// CASE: "enrolled as" status - honor code .actions-secondary {
&.honor { margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/2);
// changes to cover .action-share {
.wrapper-course-image .cover { @include float(right);
border-color: $honorcode-color-lvl2;
padding: ($baseline/10);
}
// status message margin: 0;
.sts-enrollment-value {
background: $honorcode-color-lvl1;
}
} }
}
// CASE: "enrolled as" status - auditing .certificate-explanation {
&.audit { @extend %t-copy-sub1;
// changes to cover
.wrapper-course-image .cover {
border-color: $audit-color-lvl2;
padding: ($baseline/10);
}
// status message margin-top: ($baseline/2);
.sts-enrollment-value { border-top: 1px solid $gray-l4;
background: $audit-color-lvl1; padding-top: ($baseline/2);
}
}
} }
}
// Responsive behavior .verification-reminder {
@include media-breakpoint-down(md) { width: flex-grid(8, 12);
padding: $baseline;
}
}
// Secondary functionality @include float(left);
.side-container {
@include padding($baseline*2, $baseline*2, $baseline, $baseline);
max-width: $baseline*20; position: relative;
flex-grow: 1; }
order: 2;
.wrapper-find-courses { .verification-cta {
.course-advertise { width: flex-grid(4, 12);
@include clearfix();
box-sizing: border-box; @include float(left);
padding: $baseline;
border: 1px solid $border-color-l3;
.advertise-message { position: relative;
@include font-size(12);
color: $gray-d4; .btn {
margin-bottom: $baseline; @extend %btn-pl-green-base;
@include float(right);
} }
}
}
.ad-link { &.message-related-programs {
@include text-align(center); background: none;
margin-top: ($baseline/4);
margin-bottom: $baseline/2;
padding: 0;
.btn-neutral { .related-programs-preface {
padding-bottom: 12px; @include float(left);
padding-top: 12px;
}
a { font-weight: bold;
@include font-size(16); }
@include line-height(17);
padding: $baseline * 0.5; ul {
border: 1px solid theme-color('primary'); display: inline;
color: theme-color('primary'); padding: 0;
text-decoration: none; margin: 0;
display: block; }
&:hover, li {
&:focus, @include float(left);
&:active {
color: $white;
background-color: theme-color('primary');
}
span { display: inline;
@include margin-left($baseline*0.25); padding: 0 0.5em;
} border-right: 1px solid;
.icon { .category-icon {
@include margin-right($baseline*0.25); @include float(left);
} @include margin-right($baseline/4);
}
margin-top: ($baseline/10);
background-color: transparent;
background-size: 100%;
width: ($baseline*0.7);
height: ($baseline*0.7);
} }
} }
// Remove separator from last list item.
li:last-child {
border: 0;
}
} }
// Responsive behavior // TYPE: pre-requisites
@include media-breakpoint-down(md) { .prerequisites {
margin: 0 $baseline $baseline*2; @include clearfix;
padding: 0;
max-width: 100%; .tip {
font-family: $font-family-sans-serif;
font-size: 1em;
color: $lighter-base-font-color;
margin-top: ($baseline/2);
}
} }
}
// Responsive behavior @include media-breakpoint-down(md) {
@include media-breakpoint-down(md) { @include padding($baseline/2, $baseline, $baseline/2, $baseline/2);
flex-direction: column; }
} }
} }
...@@ -1093,6 +1108,9 @@ ...@@ -1093,6 +1108,9 @@
// status - verification // status - verification
.status-verification { .status-verification {
list-style: none;
padding: $baseline/2;
.status-title { .status-title {
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
} }
...@@ -1124,6 +1142,7 @@ ...@@ -1124,6 +1142,7 @@
@extend %t-copy-sub2; @extend %t-copy-sub2;
position: relative; position: relative;
padding-top: $baseline/2;
p { p {
@extend %t-copy-sub2; @extend %t-copy-sub2;
......
lms/static/sass/shared-v2/_components.scss
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0 auto; margin: 0 auto;
padding: ($baseline*0.75); padding: ($baseline*0.75) ($baseline*2);
background-color: $lms-preview-menu-color; background-color: $lms-preview-menu-color;
@media print { @media print {
......
lms/templates/header/user_dropdown.html
...@@ -27,7 +27,7 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_ ...@@ -27,7 +27,7 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
<span class="username">${username}</span> <span class="username">${username}</span>
</a> </a>
</div> </div>
<div class="nav-item hidden-mobile" tabindex="-1"> <div class="nav-item hidden-mobile nav-item-dropdown" tabindex="-1">
<div class="user-dropdown" aria-expanded="false" aria-haspopup="true" aria-controls="user-menu"> <div class="user-dropdown" aria-expanded="false" aria-haspopup="true" aria-controls="user-menu">
<span class="sr">user menu</span> <span class="sr">user menu</span>
<span class="fa fa-caret-down toggle-user-dropdown" aria-hidden="true" tabindex="0"></span> <span class="fa fa-caret-down toggle-user-dropdown" aria-hidden="true" tabindex="0"></span>
......
lms/templates/main.html
...@@ -159,7 +159,7 @@ from pipeline_mako import render_require_js_path_overrides ...@@ -159,7 +159,7 @@ from pipeline_mako import render_require_js_path_overrides
<div class="marketing-hero"><%block name="marketing_hero"></%block></div> <div class="marketing-hero"><%block name="marketing_hero"></%block></div>
<div class="content-wrapper ${"container-fluid" if uses_bootstrap else "" } main-container" id="content"> <div class="content-wrapper main-container" id="content">
${self.body()} ${self.body()}
<%block name="bodyextra"/> <%block name="bodyextra"/>
</div> </div>
......
lms/templates/preview_menu.html
...@@ -27,7 +27,7 @@ show_preview_menu = course and staff_access and supports_preview_menu ...@@ -27,7 +27,7 @@ show_preview_menu = course and staff_access and supports_preview_menu
student_selected = selected(not staff_selected and not specific_student_selected and not masquerade_group_id) student_selected = selected(not staff_selected and not specific_student_selected and not masquerade_group_id)
%> %>
<nav class="wrapper-preview-menu" aria-label="${_('Course View')}"> <nav class="wrapper-preview-menu" aria-label="${_('Course View')}">
<div class="preview-menu container"> <div class="preview-menu">
<ol class="preview-actions"> <ol class="preview-actions">
<li class="action-preview"> <li class="action-preview">
<form action="#" class="action-preview-form" method="post"> <form action="#" class="action-preview-form" method="post">
......
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