AC-517 fixes color-contrast ignores across platform

This commit is contained in:
Chris Rodriguez
2016-06-28 08:32:38 -04:00
parent 3d76f092dd
commit 4e4c740c2c
40 changed files with 187 additions and 176 deletions

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

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

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

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;

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

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

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

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;