diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss index 4846a14ae5..b1e323effc 100644 --- a/lms/static/sass/elements/_controls.scss +++ b/lms/static/sass/elements/_controls.scss @@ -84,6 +84,23 @@ } } +// blue primary error color +%btn-primary-error { + @extend %btn-primary; + box-shadow: 0 2px 1px 0 shade($error-color, 25%); + background: shade($error-color, 25%); + color: $white; + + &:hover, &:active { + background: $error-color; + color: $white; + } + + &.disabled, &[disabled] { + box-shadow: none; + } +} + // blue primary button %btn-primary-blue { @extend %btn-primary; diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss index 3ea9620259..2d677700c6 100644 --- a/lms/static/sass/elements/_typography.scss +++ b/lms/static/sass/elements/_typography.scss @@ -271,11 +271,7 @@ %copy-link { border-bottom: 1px dotted transparent; -<<<<<<< HEAD &:hover, &:active, &:focus { -======= - &:hover, &:active { ->>>>>>> LMS: revises semantics and styling for dashboard messages border-color: $link-color-d1; } } diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 9740298cbe..0b4f33efa2 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -786,6 +786,111 @@ } } + // status - verification + .status-verification { + + .status-title { + margin: 0 0 ($baseline/4) 26px; + } + + .status-data { + margin: 0 0 ($baseline/2) 26px; + width: 80%; + } + + .status-data-message { + @extend %t-copy-sub1; + @extend %t-weight4; + margin-bottom: ($baseline/2); + } + + .list-actions { + @extend %ui-no-list; + + .action { + @extend %t-weight4; + display: block; + @include font-size(14); + } + } + + .status-note { + @extend %t-copy-sub2; + position: relative; + margin-top: $baseline; + border-top: 1px solid $black-t0; + padding-top: ($baseline/2); + + p { + @extend %t-copy-sub2; + } + + .deco-arrow { + @include triangle(($baseline/2), $m-gray-d3, up); + position: absolute; + left: 45%; + top: -($baseline/2); + } + } + + // CASE: is denied + &.is-denied { + + .status-data-message { + color: $error-color; + border-bottom-color: rgba($error-color, 0.25); + } + + .status-note { + color: desaturate($error-color, 65%); + border-top-color: rgba($error-color, 0.25); + } + + .action-reverify { + @extend %btn-primary-error; + @extend %t-weight4; + display: block; + @include font-size(14); + } + + .deco-arrow { + @include triangle(($baseline/2), $error-color, up); + } + } + + // CASE: is accepted + &.is-accepted { + + .status-data-message { + color: $verified-color-lvl1; + border-bottom-color: $verified-color-lvl4; + } + + .status-note { + color: $m-gray-l1; + border-top-color: $verified-color-lvl4; + } + + .deco-arrow { + @include triangle(($baseline/2), $verified-color-lvl4, up); + } + } + + // CASE: is pending + &.is-pending { + + .status-data-message { + color: $m-gray-d3; + border-bottom-color: $m-gray-l4; + } + + .status-note { + color: $m-gray-l1; + border-top-color: $m-gray-d3; + } + } + } + // status - verification .status--verification { diff --git a/lms/templates/dashboard/_dashboard_status_verification.html b/lms/templates/dashboard/_dashboard_status_verification.html index da4915cef5..f5c0dd7aae 100644 --- a/lms/templates/dashboard/_dashboard_status_verification.html +++ b/lms/templates/dashboard/_dashboard_status_verification.html @@ -8,20 +8,51 @@ <%namespace name='static' file='../static_content.html'/> %if verification_status == 'denied': -