Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #12953 from edx/clrux/ac-517

Browse Source 
AC-517 fixes `color-contrast` ignores
This commit is contained in:
Chris
2016-07-12 15:30:29 -04:00
committed by GitHub
parent 3d76f092dd 4e4c740c2c
commit facb1eb8fd
40 changed files with 187 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
cms/static/sass/_base.scss
View File

@@ -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;
}
}

4
cms/static/sass/_build-v1.scss
View File

@@ -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';

11
cms/static/sass/elements/_codemirror-overrides.scss Normal file
View File

@@ -0,0 +1,11 @@
/*
* CodeMirror color contrast overrides
* (so we don't change the vendor file)
*/
.CodeMirror {
.CodeMirror-linenumber.CodeMirror-gutter-elt {
color: $gray-d3 !important;
}
}

52
cms/static/sass/elements/_controls.scss
View File

@@ -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;
}
}

4
cms/static/sass/elements/_footer.scss
View File

@@ -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;
}
}

2
cms/static/sass/elements/_forms.scss
View File

@@ -249,7 +249,7 @@ form {
&:focus {
+ .tip {
color: $gray;
color: $gray-d1;
}
}
}

13
cms/static/sass/elements/_header.scss
View File

@@ -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;
}
}

2
cms/static/sass/elements/_layout.scss
View File

@@ -261,7 +261,7 @@
float: right;
margin-top: ($baseline/2);
text-align: right;
color: $gray-l2;
color: $gray-d1;
}
}
}

14
cms/static/sass/elements/_modules.scss
View File

@@ -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);

4
cms/static/sass/elements/_pagination.scss
View File

@@ -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 {

4
cms/static/sass/elements/_sock.scss
View File

@@ -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;
}
}

2
cms/static/sass/elements/_system-help.scss
View File

@@ -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;

2
cms/static/sass/elements/_xblocks.scss
View File

@@ -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,

6
cms/static/sass/partials/_variables.scss
View File

@@ -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%);

6
cms/static/sass/views/_account.scss
View File

@@ -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;

10
cms/static/sass/views/_certificates.scss
View File

@@ -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;
}
}
}

2
cms/static/sass/views/_container.scss
View File

@@ -277,7 +277,7 @@
@extend %t-copy-sub2;
display: inline-block;
margin: ($baseline/4) 0;
color: $gray-l2;
color: $gray-d1;
}
}

5
cms/static/sass/views/_dashboard.scss
View File

@@ -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;

6
cms/static/sass/views/_group-configuration.scss
View File

@@ -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;
}
}
}

15
cms/static/sass/views/_settings.scss
View File

@@ -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 {

10
cms/static/sass/views/_textbooks.scss
View File

@@ -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 {

12
common/static/sass/_mixins-inherited.scss
View File

@@ -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;
}

20
common/static/sass/_mixins.scss
View File

@@ -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;
}
}

6
common/test/acceptance/tests/lms/test_lms.py
View File

@@ -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()

5
common/test/acceptance/tests/lms/test_lms_instructor_dashboard.py
View File

@@ -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

2
common/test/acceptance/tests/lms/test_problem_types.py
View File

@@ -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
]
})

1
common/test/acceptance/tests/studio/test_studio_library.py
View File

@@ -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

1
common/test/acceptance/tests/studio/test_studio_settings.py
View File

@@ -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

1
common/test/acceptance/tests/studio/test_studio_textbooks.py
View File

@@ -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

6
common/test/test-theme/cms/static/sass/partials/_variables.scss
View File

@@ -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%);

2
lms/static/js/certificates/views/certificate_bulk_whitelist.js
View File

@@ -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));
}

6
lms/static/js/certificates/views/certificate_whitelist.js
View File

@@ -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);
}).call(this, define || RequireJS.define);

4
lms/static/js/spec/instructor_dashboard/certificates_exception_spec.js
View File

@@ -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);
});

4
lms/static/sass/course/_textbook.scss
View File

@@ -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;

23
lms/static/sass/course/courseware/_courseware.scss
View File

@@ -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;
}
}

39
lms/static/sass/course/instructor/_instructor_2.scss
View File

@@ -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] {

14
lms/static/sass/course/layout/_courseware_header.scss
View File

@@ -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%));
}
}
}

16
lms/static/sass/partials/base/_variables.scss
View File

@@ -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;

2
lms/templates/instructor/instructor_dashboard_2/certificate-bulk-white-list.underscore
View File

@@ -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>

BIN
screenshots/baseline/hinted-login-firefox.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB