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

Fixing color contrast issues in Studio

Browse Source 
AC-727
began changing colors in course content, files and uploads, and when creating a course

finished fixing contrast issues on files and uploads page

fixed advanced settings and issue with hovering in files and uploads

fixed color issues in studio home page and when hovering

fixed contrast in updates, pages, textbooks, and group configurations

fixed issues when configuring a section of a course in course outline

fixed hovering colors to make contrast more visible

fixed colors on the green button

AC-727
This commit is contained in:
Sarah Fischmann
2017-06-12 17:57:42 -04:00
parent 8ca5c11a2b
commit 78ef8db40a
16 changed files with 40 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -90,17 +90,17 @@
color: $white;
&:hover, &:active {
background: $uxpl-green-hover-active;
border-color: $uxpl-green-hover-active;
background: $uxpl-green-dark-hover-active;
border-color: $uxpl-green-dark-hover-active;
}
&.current, &.active {
background: $uxpl-green-hover-active;
background: $uxpl-green-dark-hover-active;
color: $white;
border-color: $uxpl-green-hover-active;
border-color: $uxpl-green-dark-hover-active;
&:hover, &:active {
background: $uxpl-green-hover-active;
background: $uxpl-green-dark-hover-active;
}
}
}
@@ -111,7 +111,7 @@
%btn-secondary-gray {
@extend %ui-btn-secondary;
border-color: $gray-l3;
color: $gray-l1;
color: $gray-d1;
&:hover, &:active {
background: $gray-l3;
@@ -294,7 +294,7 @@
display: block;
border-radius: 3px;
padding: 3px ($baseline/2);
color: $gray-l1;
color: $gray-d1;
&:hover {
background-color: $uxpl-blue-base;

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

@@ -276,7 +276,7 @@ form {
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
color: $gray-d1;
}
.tip-note {

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

@@ -107,7 +107,7 @@
display: inline-block;
vertical-align: bottom; // correct for extra padding in FF
max-width: 250px;
color: $gray;
color: $gray-d2;
&.navigation-current {
@extend %ui-disabled;

10
cms/static/sass/elements/_modal-window.scss
View File

@@ -114,7 +114,7 @@
@extend %t-regular;
background-image: none;
background-color: $white;
color: $mediumGrey;
color: $gray-d1;
border-radius: 0;
box-shadow: none;
border: 0;
@@ -122,11 +122,11 @@
text-transform: uppercase;
&:hover {
background-color: $white;
color: $blue;
color: $uxpl-blue-base;
}
&.active {
border-bottom: 4px solid $blue-d2;
color: $offBlack;
border-bottom: 4px solid $uxpl-blue-base;
color: $uxpl-blue-base;
}
}
}
@@ -191,7 +191,7 @@
}
a {
color: $blue;
color: $blue-d2;
&:hover {
color: $blue-s2;

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

@@ -159,7 +159,7 @@ nav {
display: block;
&:hover, &:active {
color: $blue-s1;
color: $uxpl-blue-base;
}
}
}

12
cms/static/sass/elements/_uploaded-assets.scss
View File

@@ -42,11 +42,11 @@
padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2);
vertical-align: middle;
text-align: left;
color: $gray;
color: $gray-d2;
.column-sort-link {
cursor: pointer;
color: $blue;
color: $blue-d2;
}
.current-sort {
@@ -111,7 +111,7 @@
.date-col,
.embed-col,
.embed-col .embeddable-xml-input {
color: $gray;
color: $gray-d1;
}
}
}
@@ -141,13 +141,13 @@
.date-col {
@include transition(all $tmg-f2 ease-in-out 0s);
@extend %t-copy-sub2;
color: $gray-l2;
color: $gray-d1;
}
.embed-col {
@include transition(all $tmg-f2 ease-in-out 0s);
padding-left: ($baseline*0.75);
color: $gray-l2;
color: $gray-d1;
.embeddable-xml-input {
@include transition(all $tmg-f2 ease-in-out 0s);
@@ -156,7 +156,7 @@
border: 1px solid transparent;
background: none;
width: 100%;
color: $gray-l2;
color: $gray-d1;
&:focus {
background-color: $white;

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

@@ -43,9 +43,11 @@ $transparent: rgba(0,0,0,0) !default; // used when color value is needed for UI
// ====================
$uxpl-blue-base: rgb(0, 117, 180) !default; // wcag2a compliant
$uxpl-blue-hover-active: rgb(6, 86, 131) !default; // wcag2a compliant
$uxpl-light-blue-base: rgb(242, 248, 251) !default
$uxpl-green-base: rgb(0, 129, 0) !default; // wcag2a compliant
$uxpl-green-hover-active: rgb(0, 155, 0) !default; // wcag2a compliant
$uxpl-green-dark-hover-active: rgb(0,88,0) !default;
$uxpl-pink-base: rgb(194, 56, 125) !default; // wcag2a compliant
$uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compliant
@@ -218,7 +220,7 @@ $color-staff-only: $black !default;
$color-gated: $black !default;
$color-heading-base: $gray-d2 !default;
$color-copy-base: $gray-l1 !default;
$color-copy-base: $gray-d2 !default;
$color-copy-emphasized: $gray-d2 !default;
// +Timing

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

@@ -54,7 +54,7 @@
display: inline-block;
vertical-align: top;
width: flex-grid(9, 12);
color: $gray-l1;
color: $gray-d1;
.count-current-shown,
.count-total,
@@ -130,7 +130,7 @@
margin: 0 ($baseline*0.75);
padding: ($baseline/4);
text-align: center;
color: $gray;
color: $gray-d1;
}
.current-page {
@@ -143,7 +143,7 @@
@extend %t-title4;
@extend %t-regular;
vertical-align: middle;
color: $gray-l2;
color: $gray;
}
@@ -219,7 +219,7 @@
&.nav-dd{
// basic layout - nav items
margin: 0 -($baseline/2);
color: $blue;
color: $blue-d2;
cursor: pointer;
.wrapper-nav-sub {
top: 35px;
@@ -342,7 +342,7 @@
.type-col {
@extend %t-copy-sub2;
color: $gray-l2;
color: $gray-d1;
}
.date-col {

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

@@ -246,7 +246,7 @@
.copy {
@extend %t-copy-sub2;
color: $gray;
color: $gray-d2;
}
.date,
@@ -287,7 +287,7 @@
@extend %cont-text-wrap;
a {
color: $blue;
color: $uxpl-blue-base;
&:hover {
color: $orange-d1;

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

@@ -491,7 +491,7 @@
.course-metadata {
@extend %t-copy-sub1;
@include transition(opacity $tmg-f1 ease-in-out 0);
color: $gray;
color: $gray-d2;
.metadata-item {
display: inline-block;

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

@@ -21,6 +21,7 @@
.no-content {
@extend %no-content;
color: $gray-d1;
}
.wrapper-groups {

4
cms/static/sass/views/_index.scss
View File

@@ -228,7 +228,7 @@
min-height: ($baseline*8);
margin-right: flex-gutter();
padding: ($baseline*0.75) $baseline;
color: $gray-l1;
color: $gray-d1;
.title {
@extend %t-copy-base;
@@ -244,7 +244,7 @@
top: -($baseline/5);
.title {
color: $blue;
color: $blue-d2;
}
}

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

@@ -1078,7 +1078,7 @@
background-color: $pink-l5;
.status {
color: $pink-l2;
color: $pink;
}
}
}

3
cms/static/sass/views/_static-pages.scss
View File

@@ -17,6 +17,7 @@
.add-pages {
@extend %no-content;
margin: ($baseline*1.5) 0;
color: $gray-d1;
}
.notice-incontext {
@@ -257,7 +258,7 @@
width: auto;
height: ($baseline*1.5);
border-radius: 3px;
color: $gray-l1;
color: $gray-d1;
text-transform: uppercase;
&:hover {

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

@@ -12,6 +12,7 @@
.no-textbook-content {
@extend %no-content;
color: $gray-d1;
}
.textbook {

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

@@ -182,7 +182,7 @@
margin: 0;
@include border-radius(0, 3px, 3px, 0);
@include border-left(none);
background: $lightGrey;
background: $uxpl-light-blue-base;
.title {
@extend %t-title4;