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

AC-517 fixes color-contrast ignores across platform

Browse Source
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
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 {