diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 21998b995e6c00dd75dfaf4f2d4392e649f4f337..2b6a3168363108ab967f4778b4290a929c1a52ea 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -227,6 +227,13 @@ $verified-color-lvl3: $m-green-l2; $verified-color-lvl4: $m-green-l3; $verified-color-lvl5: $m-green-l4; +// STATE: professional ed +$professional-color-lvl1: $m-pink; +$professional-color-lvl2: $m-pink-l1; +$professional-color-lvl3: $m-pink-l2; +$professional-color-lvl4: $m-pink-l3; +$professional-color-lvl5: $m-pink-l4; + // STATE: honor code $honorcode-color-lvl1: rgb(50, 165, 217); $honorcode-color-lvl2: tint($honorcode-color-lvl1, 33%); diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index a883f244cd1157837a6b5b4a4f26a030a5f0bdd5..6f5f4c1e710db6832eec20f1be8ecf142fcdb7d0 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -495,6 +495,33 @@ // ==================== + // CASE: "enrolled as" status - professional ed + &.professional { + + // changes to cover + .cover { + border-color: $professional-color-lvl3; + padding: ($baseline/10); + } + + // course enrollment status message + .sts-enrollment { + position: absolute; + left: 30px; + width: auto; + + .label { + @extend %text-sr; + } + + // status message + .sts-enrollment-value { + background: $professional-color-lvl3; + color: tint($professional-color-lvl1, 95%); + } + } + } + // CASE: "enrolled as" status - verified &.verified { diff --git a/lms/templates/dashboard/_dashboard_course_listing.html b/lms/templates/dashboard/_dashboard_course_listing.html index d46634d5209424e6b5a192abb36312220dd9f2b2..a5aff31c18052c4cd3dbcaa280ce7ce62c554a22 100644 --- a/lms/templates/dashboard/_dashboard_course_listing.html +++ b/lms/templates/dashboard/_dashboard_course_listing.html @@ -56,6 +56,11 @@ <span class="label">${_("Enrolled as: ")}</span> <span class="sts-enrollment-value">${_("Auditing")}</span> </span> + % elif enrollment.mode == "professional": + <span class="sts-enrollment" title="${_("You're enrolled as a professional education student")}"> + <span class="label">${_("Enrolled as: ")}</span> + <span class="sts-enrollment-value">${_("Professional Ed")}</span> + </span> % endif % endif