Skip to content

E
edx-platform
Commit 78ef8db4 by Sarah Fischmann
Options

Fixing color contrast issues in Studio 

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
parent 8ca5c11a
Showing with 40 additions and 35 deletions
cms/static/sass/elements/_controls.scss
......@@ -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;
......
cms/static/sass/elements/_forms.scss
......@@ -276,7 +276,7 @@ form {
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
color: $gray-d1;
}
.tip-note {
......
cms/static/sass/elements/_layout.scss
......@@ -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;
......
cms/static/sass/elements/_modal-window.scss
......@@ -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;
......
cms/static/sass/elements/_navigation.scss
......@@ -159,7 +159,7 @@ nav {
display: block;
&:hover, &:active {
color: $blue-s1;
color: $uxpl-blue-base;
}
}
}
......
cms/static/sass/elements/_uploaded-assets.scss
......@@ -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;
......
cms/static/sass/partials/_variables.scss
......@@ -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
......
cms/static/sass/views/_assets.scss
......@@ -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 {
......
cms/static/sass/views/_container.scss
......@@ -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;
......
cms/static/sass/views/_dashboard.scss
......@@ -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;
......
cms/static/sass/views/_group-configuration.scss
......@@ -21,6 +21,7 @@
.no-content {
@extend %no-content;
color: $gray-d1;
}
.wrapper-groups {
......
cms/static/sass/views/_index.scss
......@@ -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;
}
}
......
cms/static/sass/views/_settings.scss
......@@ -1078,7 +1078,7 @@
background-color: $pink-l5;
.status {
color: $pink-l2;
color: $pink;
}
}
}
......
cms/static/sass/views/_static-pages.scss
......@@ -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 {
......
cms/static/sass/views/_textbooks.scss
......@@ -12,6 +12,7 @@
.no-textbook-content {
@extend %no-content;
color: $gray-d1;
}
.textbook {
......
cms/static/sass/views/_updates.scss
......@@ -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;
......
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