From 2fd7cdbe83cbe267cbd975829334213fc50b1064 Mon Sep 17 00:00:00 2001 From: John Okely Date: Tue, 27 Jun 2017 12:14:58 +0800 Subject: [PATCH] MDL-58889 boost: Use underline links in footer It's impossible to gain the right colour contrast against a dark footer using the same primary colour that gets 4.5 against white. --- theme/boost/scss/moodle/core.scss | 22 +++++++++++++++++++++- theme/boost/upgrade.txt | 7 +++++++ 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 theme/boost/upgrade.txt diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss index a48811d197c..e87fa512f5a 100644 --- a/theme/boost/scss/moodle/core.scss +++ b/theme/boost/scss/moodle/core.scss @@ -1,5 +1,10 @@ /* core.less */ +// When we upgrade boostrap to v4 release, we will need to change this to be used by the text-white class. +// Because a primary colour that is both AA accessible on grey (footer) and white is not possible, we always +// want white default colour. +$bg-inverse-link-color: #fff !default; + #region-main > .card { overflow-x: auto; overflow-y: visible; @@ -2096,9 +2101,24 @@ ul { } } -$footer-link-color: $brand-primary !default; +// Footer link colour was added to allow the colour of footer links to be changed, +// but really in bootstrap we want the colour of links on .bg-inverse to be changed +// rather than being specific to the footer. This is kept for backwards compatibility. +$footer-link-color: $bg-inverse-link-color !default; #page-footer a { color: $footer-link-color; + text-decoration: underline; + .icon { + color: $footer-link-color; + } +} + +.bg-inverse a { + color: $bg-inverse-link-color; + text-decoration: underline; + .icon { + color: $bg-inverse-link-color; + } } .sitelink { diff --git a/theme/boost/upgrade.txt b/theme/boost/upgrade.txt new file mode 100644 index 00000000000..e4f48a8848b --- /dev/null +++ b/theme/boost/upgrade.txt @@ -0,0 +1,7 @@ +This file describes API changes in /theme/boost +information provided here is intended especially for theme designers. + +=== 3.4 === +* For improved accessibility, the footer links for boost have been changed to use $bg-inverse-link-color (defaults to white) and + now have an underline text-decoration. To override the link colour simply set $bg-inverse-link-color in your preset file or + theme scss.