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

Merge pull request #15300 from edx/sarahkf/fix-color-contrast

Browse Source 
fixing color contrast issues in studio
This commit is contained in:
sarahkf
2017-06-29 12:00:30 -04:00
committed by GitHub
parent d48b237c6f 78ef8db40a
commit b673ceee5d
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;