ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Increase link and text color contrast 

Fixes: CNVS-14594

Note: The only changes here are to the Canvas
high-contrast UI, not the regular UI.

To enable the high-contrast UI, go to Settings
from the top-right user menu, then scroll down
and turn Use High Contrast Styles to ON. Then
refresh the browser.

Per Dana, the solution to the issue of text color
and link color contrast is to make all text links
underlined by default when Canvas is in high-contrast
mode. When the links are hovered, the underline
should go away -- this is the opposite of the default UI.

**Exceptions are links in the main Canvas menu and
sidebar menu, as well as buttons.**

QA Test Plan:
- Enable high-contrast mode and refresh the browser
- Check to make sure text links in Canvas are now
  underlined by default, like in this example:
  http://cl.ly/image/411a1n082X0b/link-underline-example.gif
- Turn high-contrast mode OFF, and click around to
  make sure links in Canvas are no longer underlined
  by default.

Change-Id: I36dae3536dec288a42cb1912078c5275e761074e
Reviewed-on: https://gerrit.instructure.com/39768
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Colleen Palmer <colleen@instructure.com>
QA-Review: Anna Koalenz <akoalenz@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>
This commit is contained in:
Chris Hart 2014-08-22 10:36:06 -04:00
parent 2f78d4c747
commit ee2061f802
8 changed files with 46 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/stylesheets/base/_#header.sass
View File

@ -104,16 +104,18 @@
.user_name
@if $is-k12 == false
margin-right: 15px
a
@if $is-k12 == false
text-decoration: none !important
a
@if $is-k12
color: $k12-header-text
text-decoration: none
&:hover, &:focus
text-decoration: underline
@else
color: $identity_link_color
@if $use_high_contrast
text-decoration: none
&:hover, &:focus
text-decoration: underline
.emphasize-name
color: $masquerade-link-color
@ -160,6 +162,8 @@
.menu-item-title, .menu-item-no-drop
position: relative
z-index: 100
text-decoration: none
@if $is-k12
+border-box
transition: background 0.2s linear
@ -178,26 +182,13 @@
display: block
padding: 6px 17px 5px
height: 29px
text-decoration: none
color: #fff
font-size: 15px
.menu-item-title
@if $is-k12
&:focus
outline: none
box-shadow: inset 0 0 0 2px $orange
@if $use_high_contrast == false
&:hover, &:focus
text-decoration: none
.menu-item-no-drop
.menu-item-no-drop, .menu-item-title
&:hover, &:focus
text-decoration: underline
@if $is-k12
&:focus
outline: none
box-shadow: inset 0 0 0 2px $orange
&:hover, &:focus
background: rgba($k12-header-text, 0.15)
@if $use_high_contrast == false
@ -211,7 +202,8 @@
@if $is-k12
background: rgba($k12-header-text, 0.1)
color: $k12-header-text
text-decoration: none
@if $use_high_contrast == false
text-decoration: none
@else
color: $menu-text-color
border-top-color: $menu-border-color

3
app/stylesheets/base/_#right-side.sass
View File

@ -51,7 +51,8 @@
display: block
border-bottom: 1px solid #d6d6d6
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85)
@if $use_high_contrast
text-decoration: none
&:hover, &:focus
b, &.more_link
text-decoration: underline

16
app/stylesheets/components/_components.scss
View File

@ -69,9 +69,9 @@
& > a {
display: block;
color: ensure-contrast($gray, $lightBackground);
&:hover { text-decoration: none; }
&:focus { text-decoration: underline; }
text-decoration: none;
// K-12 styles
@if $is-k12 {
padding: ($k12-sp - 4) $k12-sp;
border-radius: $k12-sp/2;
@ -85,12 +85,15 @@
@else { &:hover, &:focus { background: #f2f2f2; } }
}
// Default UI styles
@else {
padding: 4px 8px;
&:hover {
&:hover, &:focus {
@if $use_high_contrast {
background: #333;
color: #fff;
text-decoration: underline;
}
@else { background: $white; }
}
@ -173,10 +176,9 @@
box-shadow: 0 1px 0px rgba(255, 255, 255, 0.85);
padding: 8px 0;
&:hover {
text-decoration: none;
color: $blue;
}
&:hover, &:focus { color: $blue; }
@if $use_high_contrast { text-decoration: none; }
&:active {
color: $grayLight;

4
app/stylesheets/components/_g_syllabus.sass
View File

@ -70,6 +70,10 @@
tr.syllabus_assignment
.name a
:font-weight bold
@if $use_high_contrast
:text-decoration none
&:hover, &:focus
:text-decoration underline
td.not_last
:border-bottom 1px solid #ddd

2
app/stylesheets/pages/context_list.sass
View File

@ -23,6 +23,7 @@ ul.context_list
a
font-weight: bold
display: block
.subtitle
color: #888
@ -36,7 +37,6 @@ ul.context_list
font-weight: normal
.name
display: block
font-size: 1.5em
.subtitle

7
app/stylesheets/pages/discussions.scss
View File

@ -245,8 +245,11 @@ body.with-right-side.with-left-side {
.discussion-reply-action {
@if $use_high_contrast { color: #666; }
@else { color: #888; }
text-decoration: none;
@else {
text-decoration: none;
color: #888;
}
&:hover, &:focus {
text-decoration: none;
color: #444;

1
app/stylesheets/vendor/bootstrap/_buttons.scss vendored
View File

@ -82,6 +82,7 @@ listen to the "click" and "keyclick" events and add tabindex="0" and role="butto
text-align: center;
vertical-align: middle;
cursor: pointer;
text-decoration: none;
@include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid $btnBorder;
*border: 0; // Remove the border to prevent IE7's black border on input:focus

19
app/stylesheets/vendor/bootstrap/_scaffolding.scss vendored
View File

@ -21,14 +21,23 @@ body {
a {
color: $linkColor;
text-decoration: none;
&:hover {
color: $linkColorHover;
text-decoration: underline;
}
&:hover { color: $linkColorHover; }
&:focus { @include button-focus; }
@if $use_high_contrast {
text-decoration: underline;
&:hover { text-decoration: none; }
}
@else {
text-decoration: none;
&:hover { text-decoration: underline; }
}
}
// Images
// -------------------------