Skip to content

E
edx-platform
Commit 4e4c740c by Chris Rodriguez
Options

AC-517 fixes `color-contrast` ignores across platform

parent 3d76f092
Showing with 187 additions and 177 deletions
cms/static/sass/_base.scss
......@@ -44,10 +44,10 @@ body, input, button {
a {
@include transition(color $tmg-f2 ease-in-out 0s);
text-decoration: none;
color: $blue;
color: $uxpl-blue-base;
&:hover {
color: $orange-d1;
color: $uxpl-blue-hover-active;
}
}
......@@ -84,7 +84,7 @@ h1 {
position: relative;
top: ($baseline/4);
display: block;
color: $gray-l2;
color: $gray-d2;
}
}
......@@ -293,14 +293,6 @@ p, ul, ol, dl {
.button {
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
}
.new-button {
}
.view-button {
}
}
}
......@@ -452,11 +444,11 @@ p, ul, ol, dl {
.tip {
@extend %t-copy-sub2;
@include text-align(right);
@include float(right);
width: flex-grid(7, 12);
float: right;
margin-top: ($baseline/2);
text-align: right;
color: $gray-l2;
color: $gray-d1;
}
}
}
......@@ -705,9 +697,10 @@ hr.divider {
color: $white;
}
&:hover {
&:hover,
&:active {
top: 0;
background: $blue;
background: $uxpl-blue-base;
}
}
......
cms/static/sass/_build-v1.scss
......@@ -81,3 +81,7 @@
@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
@import 'shame'; // used for any bad-form/orphaned scss
// +CodeMirror Overrides
// ====================
@import 'elements/codemirror-overrides';
cms/static/sass/elements/_codemirror-overrides.scss 0 → 100644
/*
* CodeMirror color contrast overrides
* (so we don't change the vendor file)
*/
.CodeMirror {
.CodeMirror-linenumber.CodeMirror-gutter-elt {
color: $gray-d3 !important;
}
}
cms/static/sass/elements/_controls.scss
......@@ -62,22 +62,22 @@
// blue primary button
%btn-primary-blue {
@extend %ui-btn-primary;
background: $blue;
border-color: $blue-s1;
background: $uxpl-blue-base;
border-color: $uxpl-blue-base;
color: $white;
&:hover, &:active {
background: $blue-l1;
border-color: $blue-l1;
background: $uxpl-blue-hover-active;
border-color: $uxpl-blue-hover-active;
}
&.current, &.active {
background: $blue-d1;
background: $uxpl-blue-hover-active;
border-color: $uxpl-blue-hover-active;
color: $blue-l4;
border-color: $blue-d2;
&:hover, &:active {
background: $blue-d1;
background: $uxpl-blue-hover-active;
}
}
}
......@@ -85,22 +85,22 @@
// green primary button
%btn-primary-green {
@extend %ui-btn-primary;
background: $green;
border-color: $green;
background: $uxpl-green-base;
border-color: $uxpl-green-base;
color: $white;
&:hover, &:active {
background: $green-s1;
border-color: $green-s1;
background: $uxpl-green-hover-active;
border-color: $uxpl-green-hover-active;
}
&.current, &.active {
background: $green-d1;
color: $green-l4;
border-color: $green-d2;
background: $uxpl-green-hover-active;
color: $white;
border-color: $uxpl-green-hover-active;
&:hover, &:active {
background: $green-d1;
background: $uxpl-green-hover-active;
}
}
}
......@@ -132,21 +132,17 @@
%btn-secondary-blue {
@extend %ui-btn-secondary;
border-color: $blue-l3;
color: $blue;
color: $uxpl-blue-base;
&:hover, &:active {
background: $blue-l4;
color: $blue-s2;
color: $uxpl-blue-hover-active;
}
&.current, &.active {
border-color: $blue-l3;
background: $blue-l3;
color: $blue-d1;
&:hover, &:active {
}
color: $uxpl-blue-base;
}
}
......@@ -235,7 +231,7 @@
&:hover, &:active {
background: $white;
color: $blue-s1;
color: $uxpl-blue-hover-active;
}
&.current, &.active {
......@@ -243,7 +239,7 @@
color: $gray-d4;
&:hover, &:active {
color: $blue-s1;
color: $uxpl-blue-hover-active;
}
}
}
......@@ -268,7 +264,7 @@
color: $gray-l1;
&:hover {
background-color: $blue;
background-color: $uxpl-blue-base;
color: $gray-l6;
}
......@@ -320,7 +316,7 @@
vertical-align: top;
&:hover {
color: $blue;
color: $uxpl-blue-base;
}
.ui-toggle-expansion {
......@@ -358,7 +354,7 @@
// STATE: hover/active
&:hover, &:active {
@extend %ui-fake-link;
color: $ui-link-color-focus;
color: $uxpl-blue-base;
}
}
......@@ -404,7 +400,7 @@
position: absolute;
top: -12px;
left: -($baseline/4);
color: $blue-s1;
color: $blue-d1;
}
}
......
cms/static/sass/elements/_footer.scss
......@@ -27,10 +27,10 @@
}
a {
color: $ui-link-color;
color: $uxpl-blue-base;
&:hover, &:active {
color: $ui-link-color-focus;
color: $uxpl-blue-hover-active;
}
}
......
cms/static/sass/elements/_forms.scss
......@@ -249,7 +249,7 @@ form {
&:focus {
+ .tip {
color: $gray;
color: $gray-d1;
}
}
}
......
cms/static/sass/elements/_header.scss
......@@ -76,7 +76,7 @@
color: $gray-d1;
&:hover {
color: $blue-s1;
color: $uxpl-blue-hover-active;
}
}
}
......@@ -151,7 +151,8 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
opacity: 0.75;
opacity: 1.0;
color: $gray-d3;
}
.course-org {
......@@ -172,10 +173,10 @@
.course-link {
@include transition(color $tmg-f2 ease-in-out 0s);
display: block;
color: $gray-d1;
color: $gray-d3;
&:hover {
color: $blue-s1;
color: $uxpl-blue-hover-active;
}
}
}
......@@ -398,10 +399,10 @@ body.course.view-team .nav-library-settings .title,
body.course.view-team .nav-library-settings-team,
{
color: $blue;
color: $uxpl-blue-base;
a {
color: $blue;
color: $uxpl-blue-base;
pointer-events: none;
}
}
cms/static/sass/elements/_layout.scss
......@@ -261,7 +261,7 @@
float: right;
margin-top: ($baseline/2);
text-align: right;
color: $gray-l2;
color: $gray-d1;
}
}
}
......
cms/static/sass/elements/_modules.scss
......@@ -26,13 +26,13 @@
@extend %t-title8;
@extend %t-strong;
margin-bottom: ($baseline/4);
color: $gray-l2;
color: $gray-d2;
text-transform: uppercase;
}
.meta {
@extend %t-copy-sub2;
color: $gray-l1;
color: $gray-d2;
}
}
}
......@@ -110,7 +110,7 @@
@extend %t-title5;
@extend %t-strong;
margin-bottom: ($baseline*0.75);
color: $green-d1;
color: $uxpl-green-base;
}
// add component - list of green buttons
......@@ -131,16 +131,10 @@
height: ($baseline*5);
margin-bottom: ($baseline/2);
box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset;
border: 1px solid $green-d2;
border-radius: ($baseline/4);
padding: 0;
background-color: $green-l1;
text-align: center;
color: $white;
&:hover {
background: $green-s1;
}
@extend %btn-primary-green;
.name {
@include box-sizing(border-box);
......
cms/static/sass/elements/_pagination.scss
......@@ -69,7 +69,7 @@
margin: 0 ($baseline*0.75);
padding: ($baseline/4);
text-align: center;
color: $gray;
color: $gray-d2;
}
.current-page {
......@@ -82,7 +82,7 @@
@extend %t-title4;
@extend %t-regular;
vertical-align: middle;
color: $gray-l2;
color: $gray;
}
.pagination-form {
......
cms/static/sass/elements/_sock.scss
......@@ -31,7 +31,7 @@
@extend %t-action4;
background: $gray-l5;
padding: ($baseline/2) $baseline;
color: $gray;
color: $gray-d2;
.icon {
@extend %t-icon6;
......@@ -39,7 +39,7 @@
}
&:hover {
background: $blue;
background: $uxpl-blue-base;
color: $white;
}
}
......
cms/static/sass/elements/_system-help.scss
......@@ -220,7 +220,7 @@
margin: 0 0 $baseline 0;
border-bottom: 1px solid $gray-l4;
padding: 0 0 $baseline 0;
color: $gray-l1;
color: $gray-d1;
&:last-child {
margin-bottom: 0;
......
cms/static/sass/elements/_xblocks.scss
......@@ -167,7 +167,7 @@
display: inline-block;
vertical-align: top;
width: flex-grid(9, 12);
color: $gray-l1;
color: $gray-d1;
.count-current-shown,
.count-total,
......
cms/static/sass/partials/_variables.scss
......@@ -87,6 +87,12 @@ $blue-t1: rgba($blue, 0.25);
$blue-t2: rgba($blue, 0.50);
$blue-t3: rgba($blue, 0.75);
$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant
$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant
$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant
$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant
$pink: rgb(183, 37, 103); // #b72567;
$pink-l1: tint($pink,20%);
$pink-l2: tint($pink,40%);
......
cms/static/sass/views/_account.scss
......@@ -148,7 +148,7 @@
&:focus {
+ .tip {
color: $gray;
color: $gray-d1;
}
}
}
......@@ -173,7 +173,7 @@
@include transition(color $tmg-f3 ease-in-out 0s);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
color: $gray-d1;
}
}
......@@ -214,7 +214,7 @@
margin: 0 0 $baseline 0;
border-bottom: 1px solid $gray-l4;
padding: 0 0 $baseline 0;
color: $gray-l1;
color: $gray-d1;
&:last-child {
margin-bottom: 0;
......
cms/static/sass/views/_certificates.scss
......@@ -242,11 +242,11 @@
@include transition(color, 0.15s, ease-in-out);
display: block;
margin-top: ($baseline/2);
color: $gray-l2;
color: $gray-d1;
}
.is-focused .tip {
color: $gray;
color: $gray-d2;
}
......@@ -325,7 +325,7 @@
&:focus {
+ .tip {
color: $gray;
color: $gray-d2;
}
}
}
......@@ -588,7 +588,7 @@
@include transition(color, 0.15s, ease-in-out);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
color: $gray-d1;
}
.field {
......@@ -661,7 +661,7 @@
&:focus {
+ .tip {
color: $gray;
color: $gray-d1;
}
}
}
......
cms/static/sass/views/_container.scss
......@@ -277,7 +277,7 @@
@extend %t-copy-sub2;
display: inline-block;
margin: ($baseline/4) 0;
color: $gray-l2;
color: $gray-d1;
}
}
......
cms/static/sass/views/_dashboard.scss
......@@ -300,7 +300,7 @@
margin: 0 10px;
&.active {
border-bottom: 4px solid $blue;
border-bottom: 4px solid $uxpl-blue-base;
}
&.active, &:hover {
......@@ -310,7 +310,7 @@
}
a {
color: $blue;
color: $uxpl-blue-base;
cursor: pointer;
display: inline-block;
}
......@@ -492,7 +492,6 @@
@extend %t-copy-sub1;
@include transition(opacity $tmg-f1 ease-in-out 0);
color: $gray;
opacity: 0.75;
.metadata-item {
display: inline-block;
......
cms/static/sass/views/_group-configuration.scss
......@@ -269,11 +269,11 @@
@include transition(color, 0.15s, ease-in-out);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
color: $gray-d1;
}
.is-focused .tip {
color: $gray;
color: $gray-d2;
}
......@@ -352,7 +352,7 @@
&:focus {
+ .tip {
color: $gray;
color: $gray-d1;
}
}
}
......
cms/static/sass/views/_settings.scss
......@@ -104,7 +104,7 @@
@include float(right);
margin-top: ($baseline/2);
@include text-align(right);
color: $gray-l2;
color: $gray-d1;
}
}
......@@ -219,7 +219,7 @@
margin: 0 0 ($baseline/4) 0;
&.is-focused {
color: $blue;
color: $uxpl-blue-base;
}
}
......@@ -242,7 +242,7 @@
&:focus {
+ .tip {
color: $gray;
color: $gray-d1;
}
}
}
......@@ -398,9 +398,10 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: $uxpl-blue-base;
&:hover {
color: $uxpl-blue-hover-active;
}
}
}
......@@ -546,7 +547,7 @@
@extend %t-copy-sub2;
display: block;
margin-top: ($baseline/2);
color: $gray-l3;
color: $gray-d3;
}
}
......@@ -562,7 +563,7 @@
.action-upload-image {
@extend %ui-btn-flat-outline;
float: right;
@include float(right);
width: flex-grid(2,9);
margin-top: ($baseline/4);
padding: ($baseline/2) $baseline;
......@@ -1039,7 +1040,7 @@
}
.tip {
color: $gray-l1;
color: $gray-d1;
}
input.error {
......
cms/static/sass/views/_textbooks.scss
......@@ -44,10 +44,10 @@
@extend %ui-fake-link;
&:hover {
color: $blue;
color: $uxpl-blue-base;
.ui-toggle-expansion {
color: $blue;
color: $uxpl-blue-base;
}
}
}
......@@ -212,7 +212,7 @@
margin: 0 0 ($baseline/4) 0;
&.is-focused {
color: $blue;
color: $uxpl-blue-base;
}
}
......@@ -256,7 +256,7 @@
&:focus {
+ .tip {
color: $gray;
color: $gray-d1;
}
}
}
......@@ -281,7 +281,7 @@
@include transition(color, 0.15s, ease-in-out);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
color: $gray-d1;
}
&.error {
......
common/static/sass/_mixins-inherited.scss
......@@ -147,13 +147,13 @@
@include button;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
border: 1px solid $green-d1;
border: 1px solid $uxpl-green-base;
border-radius: 3px;
background-color: $green;
background-color: $uxpl-green-base;
color: $white;
&:hover, &:focus {
background-color: $green-s1;
background-color: $uxpl-green-hover-active;
color: $white;
}
......@@ -168,13 +168,13 @@
@mixin blue-button {
@include button;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
border: 1px solid $blue-d1;
border: 1px solid $uxpl-blue-base;
border-radius: 3px;
background-color: $blue;
background-color: $uxpl-blue-base;
color: $white;
&:hover, &:focus, &:active {
background-color: $blue-s2;
background-color: $uxpl-blue-hover-active;
color: $white;
}
......
common/static/sass/_mixins.scss
......@@ -261,14 +261,6 @@
background: transparent;
line-height: 1.5em;
text-align: center;
&:hover, &:active, &:focus {
}
&.current, &.active {
}
}
%ui-btn-flat-outline {
......@@ -277,14 +269,14 @@
@extend %t-action4;
text-align: center;
border-radius: ($baseline/4);
border: 1px solid $blue-l2;
border: 1px solid $uxpl-blue-base;
padding: 1px ($baseline/2) 2px ($baseline/2);
background-color: transparent;
color: $blue-l2;
background-color: $white;
color: $uxpl-blue-base;
&:hover, &:focus {
border: 1px solid $blue;
background-color: $blue;
border: 1px solid $uxpl-blue-hover-active;
background-color: $uxpl-blue-hover-active;
color: $white;
}
......@@ -320,7 +312,7 @@
@extend %ui-btn-non;
&:hover, &:focus {
background-color: $blue;
background-color: $uxpl-blue-base;
color: $white;
}
}
......
common/test/acceptance/tests/lms/test_lms.py
......@@ -169,7 +169,7 @@ class LoginFromCombinedPageTest(UniqueCourseTest):
# Navigate to the login page
self.login_page.visit()
# Baseline screen-shots are different for chrome and firefox.
self.assertScreenshot('#login .login-providers', 'login-providers-{}'.format(self.browser.name))
self.assertScreenshot('#login .login-providers', 'login-providers-{}'.format(self.browser.name), .25)
# Try to log in using "Dummy" provider
self.login_page.click_third_party_dummy_provider()
......@@ -217,7 +217,7 @@ class LoginFromCombinedPageTest(UniqueCourseTest):
)
# Baseline screen-shots are different for chrome and firefox.
self.assertScreenshot('#hinted-login-form', 'hinted-login-{}'.format(self.browser.name))
self.assertScreenshot('#hinted-login-form', 'hinted-login-{}'.format(self.browser.name), .25)
self.login_page.click_third_party_dummy_provider()
# We should now be redirected to the course page
......@@ -354,7 +354,7 @@ class RegisterFromCombinedPageTest(UniqueCourseTest):
# Navigate to the register page
self.register_page.visit()
# Baseline screen-shots are different for chrome and firefox.
self.assertScreenshot('#register .login-providers', 'register-providers-{}'.format(self.browser.name))
self.assertScreenshot('#register .login-providers', 'register-providers-{}'.format(self.browser.name), .25)
# Try to authenticate using the "Dummy" provider
self.register_page.click_third_party_dummy_provider()
......
common/test/acceptance/tests/lms/test_lms_instructor_dashboard.py
......@@ -95,8 +95,7 @@ class BulkEmailTest(BaseInstructorDashboardTest):
])
self.send_email_page.a11y_audit.config.set_rules({
"ignore": [
'button-name', # TinyMCE button is missing accessible text
'color-contrast', # TODO: AC-491
'button-name', # TODO: AC-491
]
})
self.send_email_page.a11y_audit.check_for_accessibility_errors()
......@@ -1053,7 +1052,6 @@ class CertificatesTest(BaseInstructorDashboardTest):
"ignore": [
'aria-valid-attr-value', # TODO: AC-491
'checkboxgroup', # TODO: AC-491
'color-contrast', # TODO: AC-491
'duplicate-id', # TODO: AC-491
'label', # TODO: AC-491
'radiogroup', # TODO: AC-491
......@@ -1272,7 +1270,6 @@ class CertificateInvalidationTest(BaseInstructorDashboardTest):
"ignore": [
'aria-valid-attr-value', # TODO: AC-491
'checkboxgroup', # TODO: AC-491
'color-contrast', # TODO: AC-491
'duplicate-id', # TODO: AC-491
'label', # TODO: AC-491
'radiogroup', # TODO: AC-491
......
common/test/acceptance/tests/lms/test_problem_types.py
......@@ -252,7 +252,6 @@ class ProblemTypeTestMixin(object):
'aria-roles', # TODO: AC-491
'checkboxgroup', # TODO: AC-491
'radiogroup', # TODO: AC-491
'color-contrast', # TODO: AC-491
'section', # TODO: AC-491
'label', # TODO: AC-491
]
......@@ -694,7 +693,6 @@ class CodeProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin):
self.problem_page.a11y_audit.config.set_rules({
'ignore': [
'section', # TODO: AC-491
'color-contrast', # TODO: AC-286
'label', # TODO: AC-286
]
})
......
common/test/acceptance/tests/studio/test_studio_library.py
......@@ -656,7 +656,6 @@ class StudioLibraryA11yTest(StudioLibraryTest):
# we will ignore this error in the test until we fix them.
lib_page.a11y_audit.config.set_rules({
"ignore": [
'color-contrast', # TODO: AC-225
'link-href', # TODO: AC-226
'nav-aria-label', # TODO: AC-227
'icon-aria-hidden', # TODO: AC-229
......
common/test/acceptance/tests/studio/test_studio_settings.py
......@@ -503,7 +503,6 @@ class StudioSettingsA11yTest(StudioCourseTest):
# we will ignore this error in the test until we fix them.
self.settings_page.a11y_audit.config.set_rules({
"ignore": [
'color-contrast', # TODO: AC-225
'link-href', # TODO: AC-226
'nav-aria-label', # TODO: AC-227
'icon-aria-hidden', # TODO: AC-229
......
common/test/acceptance/tests/studio/test_studio_textbooks.py
......@@ -60,7 +60,6 @@ class TextbooksTest(StudioCourseTest):
self.textbook_view_page.a11y_audit.config.set_rules({
'ignore': [
'color-contrast', # AC-500
'skip-link', # AC-501
'link-href', # AC-502
'section' # AC-503
......
common/test/test-theme/cms/static/sass/partials/_variables.scss
......@@ -87,6 +87,12 @@ $blue-t1: rgba($blue, 0.25);
$blue-t2: rgba($blue, 0.50);
$blue-t3: rgba($blue, 0.75);
$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant
$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant
$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant
$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant
$pink: rgb(183, 37, 103); // #b72567;
$pink-l1: tint($pink,20%);
$pink-l2: tint($pink,40%);
......
lms/static/js/certificates/views/certificate_bulk_whitelist.js
......@@ -206,7 +206,7 @@
chooseFile: function(event) {
if (event && event.preventDefault) { event.preventDefault(); }
if (event.currentTarget.files.length === 1) {
this.$el.find(DOM_SELECTORS.upload_csv_button).removeClass('disabled');
this.$el.find(DOM_SELECTORS.upload_csv_button).attr('disabled', 'false');
this.$el.find(DOM_SELECTORS.browse_file).val(
event.currentTarget.value.substring(event.currentTarget.value.lastIndexOf("\\") + 1));
}
......
lms/static/js/certificates/views/certificate_whitelist.js
......@@ -34,10 +34,10 @@
var template = this.loadTemplate('certificate-white-list');
this.$el.html(template({certificates: this.collection.models}));
if (!this.active_certificate || this.collection.isEmpty()){
this.$("#generate-exception-certificates").addClass("is-disabled");
this.$("#generate-exception-certificates").attr("disabled", "disabled");
}
else {
this.$("#generate-exception-certificates").removeClass("is-disabled");
this.$("#generate-exception-certificates").removeAttr("disabled");
}
},
......@@ -107,4 +107,4 @@
});
}
);
}).call(this, define || RequireJS.define);
\ No newline at end of file
}).call(this, define || RequireJS.define);
lms/static/js/spec/instructor_dashboard/certificates_exception_spec.js
......@@ -204,7 +204,7 @@ define([
it("verifies that Generate Exception Certificate button is disabled", function() {
expect(view.$el.find('table tbody tr').length).toBe(2);
expect(view.$el.find('#generate-exception-certificates').first()).not.toHaveClass('is-disabled');
expect(view.$el.find('#generate-exception-certificates').first()).not.toHaveAttr('disabled');
// Render the view with active_certificate set to false.
view = new CertificateWhiteListView({
......@@ -214,7 +214,7 @@ define([
view.render();
// Verify that `Generate Exception Certificate` is disabled even when Collection is not empty.
expect(view.$el.find('#generate-exception-certificates').first()).toHaveClass('is-disabled');
expect(view.$el.find('#generate-exception-certificates').first()).toHaveAttr('disabled', 'disabled');
expect(view.$el.find('table tbody tr').length).toBe(2);
});
......
lms/static/sass/course/_textbook.scss
......@@ -53,11 +53,11 @@ div.book-wrapper {
a {
@include clearfix();
padding: 0;
color: $link-color;
color: $uxpl-blue-base;
&:hover, &:focus {
background-color: transparent;
color: $link-hover;
color: $uxpl-blue-hover-active;
.page-number {
opacity: 1.0;
......
lms/static/sass/course/courseware/_courseware.scss
......@@ -75,7 +75,7 @@ html.video-fullscreen {
color: $gray;
}
a:active, a:hover {
color: $link-hover;
color: $uxpl-blue-base;
}
.license-label,
......@@ -151,7 +151,7 @@ html.video-fullscreen {
}
button.gated-sequence {
background: $transparent;
color: $blue-d1;
color: $uxpl-blue-base;
border: none;
box-shadow: none;
@include text-align(left);
......@@ -160,7 +160,7 @@ html.video-fullscreen {
&:hover {
background-color: transparent;
color: $link-hover;
color: $uxpl-blue-hover-active;
}
}
......@@ -169,12 +169,12 @@ html.video-fullscreen {
font-size: 1.3em;
}
.gated-sequence {
color: #147ABA;
color: $uxpl-blue-base;
font-weight: 600;
padding: ($baseline / 1.5) ($baseline / 4);
a.start-timed-exam {
cursor: pointer;
color: #147ABA;
color: $uxpl-blue-base;
font-weight: 600;
position: relative;
top: ($baseline/10);
......@@ -306,7 +306,7 @@ html.video-fullscreen {
}
&:last-child {
> .practice-exam {
color: #147ABA;
color: $uxpl-blue-base;
}
border-bottom: none;
}
......@@ -663,3 +663,14 @@ section.self-assessment {
}
/*
* CodeMirror color contrast overrides
* (so we don't change the vendor file)
*/
.CodeMirror {
.CodeMirror-linenumber.CodeMirror-gutter-elt {
color: $gray-d3 !important;
}
}
lms/static/sass/course/instructor/_instructor_2.scss
......@@ -33,7 +33,7 @@
.file-download-link a {
font-size: 15px;
color: $link-color;
color: $uxpl-blue-base;
text-decoration: underline;
padding: ($baseline/4);
}
......@@ -674,7 +674,7 @@
// .add-field
input[type="button"].add {
@include idashbutton($blue);
@include idashbutton($uxpl-blue-base);
position: absolute;
@include right($baseline);
}
......@@ -756,7 +756,7 @@
}
}
.form-submit {
@include idashbutton($blue);
@include idashbutton($uxpl-blue-base);
@include font-size(14);
@include line-height(14);
margin-right: ($baseline/2);
......@@ -778,7 +778,7 @@
}
.action-create {
@include idashbutton($blue);
@include idashbutton($uxpl-blue-base);
@extend %t-weight4;
@include float(right);
@include text-align(right);
......@@ -803,7 +803,7 @@
// specific message actions
.message .action-create {
@include idashbutton($blue);
@include idashbutton($uxpl-blue-base);
}
}
......@@ -979,7 +979,7 @@
}
.action-submit {
@include idashbutton($blue);
@include idashbutton($uxpl-blue-base);
// needed to override very poor specificity and base rules for blue button
@include font-size(14);
margin-bottom: 0;
......@@ -1126,7 +1126,7 @@
}
.cohorted-text {
color: $link-color;
color: $uxpl-blue-base;
}
.discussions-wrapper {
......@@ -1427,7 +1427,7 @@ input[name="subject"] {
color: #3c3c3c;
line-height: 30px;
.add{
@include button(simple, $blue);
@include button(simple, $uxpl-blue-base);
@extend .button-reset;
font-size: em(13);
@include float(right);
......@@ -1632,7 +1632,7 @@ input[name="subject"] {
border-radius: 2px;
input[type="button"]#update_coupon_button, input[type="button"]#add_coupon_button,
input[type="button"]#set_course_button, input[type="button"]#lookup_regcode {
@include button(simple, $blue);
@include button(simple, $uxpl-blue-base);
@extend .button-reset;
display: block;
height: auto;
......@@ -1641,7 +1641,7 @@ input[name="subject"] {
white-space: normal;
}
input[name="generate-registration-codes-csv"]{
@include button(simple, $blue);
@include button(simple, $uxpl-blue-base);
@extend .button-reset;
}
.modal-form-error {
......@@ -1782,7 +1782,7 @@ input[name="subject"] {
h2 {
font-size: 24px;
font-weight: 100;
color: #1580b0;
color: $uxpl-blue-base;
@include text-align(left);
}
}
......@@ -1906,7 +1906,7 @@ input[name="subject"] {
color: #3c3c3c;
line-height: 30px;
.add{
@include button(simple, $blue);
@include button(simple, $uxpl-blue-base);
@extend .button-reset;
font-size: em(13);
@include float(right);
......@@ -1925,7 +1925,7 @@ input[name="subject"] {
color: #3C3C3C;
line-height: 30px;
.add{
@include button(simple, $blue);
@include button(simple, $uxpl-blue-base);
@extend .button-reset;
font-size: em(13);
}
......@@ -1948,7 +1948,7 @@ input[name="subject"] {
color: #3C3C3C;
line-height: 30px;
.add{
@include button(simple, $blue);
@include button(simple, $uxpl-blue-base);
@extend .button-reset;
font-size: em(13);
}
......@@ -2135,8 +2135,8 @@ input[name="subject"] {
&:focus {
z-index: 2;
color: #fff;
background-color: darken(#428bca, 6.5%);
border-color: darken(#428bca, 6.5%);
background-color: $uxpl-blue-base;
border-color: $uxpl-blue-base;
cursor: default;
}
}
......@@ -2302,7 +2302,7 @@ input[name="subject"] {
color: $gray-d1;
&:hover {
color: $blue;
color: $uxpl-blue-hover-active;
}
}
......@@ -2361,21 +2361,20 @@ input[name="subject"] {
display: inline;
@include margin-left(-5px);
span.browse {
@include button(simple, $blue);
@include button(simple, $uxpl-blue-base);
@include margin-right($baseline);
padding: 6px ($baseline/2);
font-size: 12px;
border-radius: 0 3px 3px 0;
}
input.file_field {
@extend %cont-text-sr;
position: absolute;
@include right(0);
top: 0;
margin: 0;
padding: 0;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
}
& > span, & input[disabled] {
......
lms/static/sass/course/layout/_courseware_header.scss
......@@ -44,18 +44,18 @@
&:hover,
&:focus {
color: $blue;
border-bottom: 4px solid $blue;
color: $uxpl-blue-hover-active;
border-bottom: 4px solid $uxpl-blue-hover-active;
}
&.active {
border-bottom: 4px solid $blue;
border-bottom: 4px solid $uxpl-blue-base;
background-color: transparent;
color: $blue;
color: $uxpl-blue-base;
&:hover,
&:focus {
color: $blue;
color: $uxpl-blue-base;
}
}
}
......@@ -97,7 +97,7 @@
display: block;
@include background-image(linear-gradient(-90deg, lighten($link-color, 8%), lighten($link-color, 5%) 50%, $link-color 50%, darken($link-color, 10%) 100%));
border: 1px solid transparent;
border-color: darken($link-color, 10%);
border-color: $uxpl-blue-base;
border-radius: 3px;
@include box-sizing(border-box);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
......@@ -117,7 +117,7 @@
vertical-align: middle;
&:hover, &:active, &:focus {
@include background-image(linear-gradient(-90deg, $link-color, $link-color 50%, $link-color 50%, $link-color 100%));
@include background-image(linear-gradient(-90deg, $uxpl-blue-base, $uxpl-blue-base 50%, $uxpl-blue-base 50%, $uxpl-blue-base 100%));
}
}
}
......
lms/static/sass/partials/base/_variables.scss
......@@ -159,6 +159,12 @@ $blue-t1: rgba($blue, 0.25);
$blue-t2: rgba($blue, 0.50);
$blue-t3: rgba($blue, 0.75);
$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant
$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant
$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant
$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant
$orange: rgb(237, 189, 60);
$orange-l1: tint($orange,20%);
$orange-l2: tint($orange,40%);
......@@ -423,11 +429,11 @@ $action-secondary-disabled-bg: $m-gray-d3 !default;
$action-secondary-disabled-fg: $white !default;
// actions - misc
$link-color: $blue !default;
$link-color-d1: $blue !default;
$link-hover: $blue-l1 !default; // from our Pattern Library http://ux.edx.org/elements/colors/
$link-color: $uxpl-blue-base !default;
$link-color-d1: $link-color !default;
$link-hover: $uxpl-blue-hover-active !default; // from our Pattern Library http://ux.edx.org/elements/colors/
$site-status-color: $pink !default;
$button-color: $blue !default;
$button-color: $uxpl-blue-base !default;
$button-archive-color: rgb(238,238,238) !default; // #eeeeee
// larger, random elements
......@@ -462,7 +468,7 @@ $courseware-footer-margin: 0px !default;
$courseware-border-bottom-color: rgb(68,162,222) !default;
$courseware-button-border-color: rgb(230,230,230) !default;
$courseware-hover-color: rgb(51,52,53) !default;
$courseware-navigation-color: $blue !default;
$courseware-navigation-color: $uxpl-blue-base !default;
// homepage, onboarding, and course discovery
$homepage__header--gradient__color--alpha: lighten($gray, 15%) !default;
......
lms/templates/instructor/instructor_dashboard_2/certificate-bulk-white-list.underscore
......@@ -11,7 +11,7 @@
<input class="file_field" id="browseBtn" name="students_list" type="file" accept=".csv"/>
</div>
</div>
<div><button class="btn-blue disabled upload-csv-button" type="submit"><%- gettext('Add to Exception List') %></button></div>
<div><button class="btn-blue upload-csv-button" type="submit"><%- gettext('Add to Exception List') %></button></div>
</form>
<div class="bulk-exception-results hidden"></div>
</div>
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