diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 34dd58dd6b..9525e06b2f 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -157,6 +157,15 @@ $courseware-footer-margin: 0px; // ==================== +// STATE: verified +$verified-color-lvl1: $m-green; +$verified-color-lvl2: $m-green-l1; +$verified-color-lvl3: $m-green-l2; +$verified-color-lvl4: $m-green-l3; +$verified-color-lvl5: $m-green-l4; + +// ==================== + // ACTIONS: general $button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%); $button-bg-color: transparent; diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index 67959debb2..e3dc6fdd25 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -76,7 +76,7 @@ border-bottom: 1px dotted transparent; &:hover, &:active { - border-color: $m-blue-d2; + border-color: $link-color-d1; } } @@ -90,6 +90,12 @@ // ==================== +.btn-verify-primary { + @extend .btn-primary-green; +} + +// ==================== + // MISC: extends - UI - window .ui-window { @include clearfix(); @@ -277,7 +283,7 @@ } .action-confirm { - @extend .btn-primary-green; + @extend .btn-verify-primary; border: none; } @@ -411,7 +417,7 @@ .sts-track-value { @extend .copy-badge; color: $white; - background: $m-green-l2; + background: $verified-color-lvl3; .context { margin-right: ($baseline/4); @@ -461,7 +467,7 @@ width: 0%; height: 100%; display: block; - background: $m-green-l3; + background: $verified-color-lvl4; } } @@ -522,10 +528,10 @@ // STATE: is completed &.is-completed { - border-bottom: ($baseline/5) solid $m-green-l2; + border-bottom: ($baseline/5) solid $verified-color-lvl3; .wrapper-step-number { - border-color: $m-green-l2; + border-color: $verified-color-lvl3; } .step-number, .step-name { @@ -675,7 +681,7 @@ &.approved { .action { - @extend .btn-primary-green; + @extend .btn-verify-primary; } } } @@ -1182,7 +1188,7 @@ } .register-choice-certificate { - border-color: $m-green-l1; + border-color: $verified-color-lvl3; position: relative; .deco-ribbon { @@ -1217,7 +1223,7 @@ } .action-select input { - @extend .btn-primary-green; + @extend .btn-verify-primary; } .action-intro { @@ -1347,7 +1353,7 @@ min-height: ($baseline*15); float: left; margin-right: flex-gutter(); - border-color: $m-green-l3; + border-color: $verified-color-lvl4; text-align: center; &:last-child { @@ -1358,8 +1364,8 @@ @extend .t-title5; @extend .t-weight4; padding: $baseline; - border-bottom: 1px solid $m-green-l3; - background: $m-green-l4; + border-bottom: 1px solid $verified-color-lvl4; + background: $verified-color-lvl5; } @@ -1368,7 +1374,7 @@ display: inline-block; margin: $baseline 0 ($baseline/2) 0; padding: $baseline; - background: $m-green-l2; + background: $verified-color-lvl3; border-radius: ($baseline*10); *[class^="icon"] { @@ -1390,7 +1396,7 @@ position: absolute; left: 24px; top: 34px; - background: $m-green-l2; + background: $verified-color-lvl3; padding: 3px 5px; } } @@ -1406,7 +1412,7 @@ .copy-super { @extend .t-copy-base; margin-bottom: ($baseline/2); - color: $m-green; + color: $verified-color-lvl1; } .copy-sub { @@ -1470,10 +1476,10 @@ // STATE: is completed &#progress-step0 { - border-bottom: ($baseline/5) solid $m-green-l2; + border-bottom: ($baseline/5) solid $verified-color-lvl3; .wrapper-step-number { - border-color: $m-green-l2; + border-color: $verified-color-lvl3; } .step-number, .step-name { @@ -1510,10 +1516,10 @@ // STATE: is completed &#progress-step0, &#progress-step1 { - border-bottom: ($baseline/5) solid $m-green-l2; + border-bottom: ($baseline/5) solid $verified-color-lvl3; .wrapper-step-number { - border-color: $m-green-l2; + border-color: $verified-color-lvl3; } .step-number, .step-name { @@ -1585,10 +1591,10 @@ // STATE: is completed &#progress-step0, &#progress-step1, &#progress-step2 { - border-bottom: ($baseline/5) solid $m-green-l2; + border-bottom: ($baseline/5) solid $verified-color-lvl3; .wrapper-step-number { - border-color: $m-green-l2; + border-color: $verified-color-lvl3; } .step-number, .step-name { @@ -1625,10 +1631,10 @@ // STATE: is completed &#progress-step0, &#progress-step1, &#progress-step2, &#progress-step3, &#progress-step4 { - border-bottom: ($baseline/5) solid $m-green-l2; + border-bottom: ($baseline/5) solid $verified-color-lvl3; .wrapper-step-number { - border-color: $m-green-l2; + border-color: $verified-color-lvl3; } .step-number, .step-name { @@ -1742,10 +1748,10 @@ // STATE: is completed &#progress-step1 { - border-bottom: ($baseline/5) solid $m-green-l2; + border-bottom: ($baseline/5) solid $verified-color-lvl3; .wrapper-step-number { - border-color: $m-green-l2; + border-color: $verified-color-lvl3; } .step-number, .step-name {