From 31a5fb31fca8db096c3c95099af8437e441372b4 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 16 Mar 2015 08:55:07 -0400 Subject: [PATCH] certificates: removing edX-centric Sass variables from config --- .../certificates/css/style-application.css | 2 +- .../sass/utilities/_variables.scss | 105 +++++++++--------- .../certificates/sass/views/_certificate.scss | 9 +- .../certificates/sass/views/_invalid.scss | 2 +- .../certificates/sass/views/_validate.scss | 4 +- 5 files changed, 64 insertions(+), 58 deletions(-) diff --git a/lms/static/certificates/css/style-application.css b/lms/static/certificates/css/style-application.css index c764351024..cb8c237b15 100644 --- a/lms/static/certificates/css/style-application.css +++ b/lms/static/certificates/css/style-application.css @@ -1036,7 +1036,7 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif .view-certificate.is-honorcode .certificate-type { color: #88c7ec; } .view-certificate.is-idverified .status { - background: #3aa2e0; } + background: #88c7ec; } .view-certificate.is-idverified .accomplishment { background: white url("../images/logo-idverified-cropped.png") bottom left no-repeat; background-size: 75%; } diff --git a/lms/static/certificates/sass/utilities/_variables.scss b/lms/static/certificates/sass/utilities/_variables.scss index 7af9ec71ca..d6aea906ca 100644 --- a/lms/static/certificates/sass/utilities/_variables.scss +++ b/lms/static/certificates/sass/utilities/_variables.scss @@ -48,49 +48,54 @@ $shadow-d1: rgba($black-t,0.4); $shadow-d2: rgba($black-t,0.6); // colors - default -$edx-blue: rgb(58, 162, 224); -$edx-blue-l1: tint($edx-blue,20%); -$edx-blue-l2: tint($edx-blue,40%); -$edx-blue-l3: tint($edx-blue,60%); -$edx-blue-l4: tint($edx-blue,80%); -$edx-blue-l5: tint($edx-blue,90%); -$edx-blue-d1: shade($edx-blue,20%); -$edx-blue-d2: shade($edx-blue,40%); -$edx-blue-d3: shade($edx-blue,60%); -$edx-blue-d4: shade($edx-blue,80%); -$edx-blue-d5: shade($edx-blue,90%); -$edx-blue-s1: saturate($edx-blue,15%); -$edx-blue-s2: saturate($edx-blue,30%); -$edx-blue-s3: saturate($edx-blue,45%); -$edx-blue-u1: desaturate($edx-blue,15%); -$edx-blue-u2: desaturate($edx-blue,30%); -$edx-blue-u3: desaturate($edx-blue,45%); -$edx-blue-t0: rgba($edx-blue,0.125); -$edx-blue-t1: rgba($edx-blue,0.25); -$edx-blue-t2: rgba($edx-blue,0.50); -$edx-blue-t3: rgba($edx-blue,0.75); +$blue: rgb(58, 162, 224); +$blue-l1: tint($blue,20%); +$blue-l2: tint($blue,40%); +$blue-l3: tint($blue,60%); +$blue-l4: tint($blue,80%); +$blue-l5: tint($blue,90%); +$blue-d1: shade($blue,20%); +$blue-d2: shade($blue,40%); +$blue-d3: shade($blue,60%); +$blue-d4: shade($blue,80%); +$blue-d5: shade($blue,90%); +$blue-s1: saturate($blue,15%); +$blue-s2: saturate($blue,30%); +$blue-s3: saturate($blue,45%); +$blue-u1: desaturate($blue,15%); +$blue-u2: desaturate($blue,30%); +$blue-u3: desaturate($blue,45%); +$blue-t0: rgba($blue,0.125); +$blue-t1: rgba($blue,0.25); +$blue-t2: rgba($blue,0.50); +$blue-t3: rgba($blue,0.75); -$edx-pink: rgb(182,37,104); -$edx-pink-l1: tint($edx-pink,20%); -$edx-pink-l2: tint($edx-pink,40%); -$edx-pink-l3: tint($edx-pink,60%); -$edx-pink-l4: tint($edx-pink,80%); -$edx-pink-l5: tint($edx-pink,90%); -$edx-pink-d1: shade($edx-pink,20%); -$edx-pink-d2: shade($edx-pink,40%); -$edx-pink-d3: shade($edx-pink,60%); -$edx-pink-d4: shade($edx-pink,80%); -$edx-pink-d5: shade($edx-pink,90%); -$edx-pink-s1: saturate($edx-pink,15%); -$edx-pink-s2: saturate($edx-pink,30%); -$edx-pink-s3: saturate($edx-pink,45%); -$edx-pink-u1: desaturate($edx-pink,15%); -$edx-pink-u2: desaturate($edx-pink,30%); -$edx-pink-u3: desaturate($edx-pink,45%); -$edx-pink-t0: rgba($edx-pink,0.125); -$edx-pink-t1: rgba($edx-pink,0.25); -$edx-pink-t2: rgba($edx-pink,0.50); -$edx-pink-t3: rgba($edx-pink,0.75); +$pink: rgb(182,37,104); +$pink-l1: tint($pink,20%); +$pink-l2: tint($pink,40%); +$pink-l3: tint($pink,60%); +$pink-l4: tint($pink,80%); +$pink-l5: tint($pink,90%); +$pink-d1: shade($pink,20%); +$pink-d2: shade($pink,40%); +$pink-d3: shade($pink,60%); +$pink-d4: shade($pink,80%); +$pink-d5: shade($pink,90%); +$pink-s1: saturate($pink,15%); +$pink-s2: saturate($pink,30%); +$pink-s3: saturate($pink,45%); +$pink-u1: desaturate($pink,15%); +$pink-u2: desaturate($pink,30%); +$pink-u3: desaturate($pink,45%); +$pink-t0: rgba($pink,0.125); +$pink-t1: rgba($pink,0.25); +$pink-t2: rgba($pink,0.50); +$pink-t3: rgba($pink,0.75); + +// colors - achievement branding +$color-basic-achievement: $blue-l2; +$color-greater-achievement: $blue; +$color-greatest-achievement: $blue-s1; // ==================== @@ -132,16 +137,16 @@ $anim-distance-offviewport: ($baseline-h*100); // for la // ==================== // application: general actions -$color-primary: $edx-blue-d1; -$color-secondary: $edx-blue-l1; +$color-primary: $blue-d1; +$color-secondary: $blue-l1; $color-tertiary: $gray-l1; $color-quarternary: $gray-l2; // application: general links -$color-link: $edx-blue-d1; -$color-link-focus: $edx-blue; -$color-link-active: $edx-blue; -$color-link-visited: $edx-blue-d2; +$color-link: $blue-d1; +$color-link-focus: $blue; +$color-link-active: $blue; +$color-link-visited: $blue-d2; // application: actions & links (button-focused) $bg-action-primary: $color-primary; @@ -173,8 +178,8 @@ $color-copy-supplemental: $gray-l1; // ==================== // application: states -$bg-selected: $edx-blue-t1; -$color-selected: $edx-blue-s1; +$bg-selected: $blue-t1; +$color-selected: $blue-s1; // ==================== diff --git a/lms/static/certificates/sass/views/_certificate.scss b/lms/static/certificates/sass/views/_certificate.scss index d60a6f4131..92e7cbcdfc 100644 --- a/lms/static/certificates/sass/views/_certificate.scss +++ b/lms/static/certificates/sass/views/_certificate.scss @@ -181,15 +181,16 @@ } } + // TODO - Determine what basic types are supported // CASE: honor code &.is-honorcode { .status { - background: $edx-blue-l2; + background: $color-basic-achievement; } .certificate-type { - color: $edx-blue-l2; + color: $color-basic-achievement; } } @@ -197,7 +198,7 @@ &.is-idverified { .status { - background: $edx-blue; + background: $color-basic-achievement; } .accomplishment { @@ -214,7 +215,7 @@ } .certificate-type { - color: $edx-blue; + color: $blue; .wrapper-img { width: 200px; diff --git a/lms/static/certificates/sass/views/_invalid.scss b/lms/static/certificates/sass/views/_invalid.scss index 802346b8d9..5776d99a0b 100644 --- a/lms/static/certificates/sass/views/_invalid.scss +++ b/lms/static/certificates/sass/views/_invalid.scss @@ -36,7 +36,7 @@ .copy { @extend %t-copy-lead2; - color: $edx-pink; + color: $pink; } } diff --git a/lms/static/certificates/sass/views/_validate.scss b/lms/static/certificates/sass/views/_validate.scss index 078360d118..b7f2c73cc0 100644 --- a/lms/static/certificates/sass/views/_validate.scss +++ b/lms/static/certificates/sass/views/_validate.scss @@ -87,7 +87,7 @@ min-height: ($baseline-v*8); margin-bottom: $baseline-v; border-radius: ($baseline-v/10); - border-top: 4px solid $edx-blue-s1; + border-top: 4px solid $blue-s1; padding: ($baseline-v) ($baseline-h); color: $gray-l1; background: $gray-l5; @@ -138,7 +138,7 @@ } .requirement-allitems { - border-top-color: $edx-pink; + border-top-color: $pink; } }