From 94c20e2048102cb8db239e2e3c6d29d92f3d60a3 Mon Sep 17 00:00:00 2001 From: PhilippeVay Date: Thu, 15 Dec 2016 20:10:26 +0100 Subject: [PATCH 1/3] #232 No styling on a:hover if there's no effect --- sass/_config/_variables.scss | 3 ++- sass/library/_base.scss | 12 ++++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/sass/_config/_variables.scss b/sass/_config/_variables.scss index c4c1be2..2a9b439 100644 --- a/sass/_config/_variables.scss +++ b/sass/_config/_variables.scss @@ -26,7 +26,8 @@ $color5 : #6FA939 !default; $base-color: $color1; $link-color: $color3; $base-background : $color2; -$link-hover-color: $color4; +$link-hover-color: $color4; // Make it equal to $link-color if you don't want + // any effect on links when focused/hovered $brand-primary: $color5; diff --git a/sass/library/_base.scss b/sass/library/_base.scss index 6d69419..22bc1eb 100644 --- a/sass/library/_base.scss +++ b/sass/library/_base.scss @@ -30,10 +30,14 @@ body { a { color: $link-color; - &:focus, - &:hover, - &:active { - color: $link-hover-color; + // No styling on focus/hover if there's no effect. Avoids to then have to + // override it countless times. See Issue #232 + @if $link-hover-color != $link-color { + &:focus, + &:hover, + &:active { + color: $link-hover-color; + } } } From d489bd2c861f3d9bbb7c314ebb5b58ea9bd65126 Mon Sep 17 00:00:00 2001 From: PhilippeVay Date: Thu, 15 Dec 2016 21:12:58 +0100 Subject: [PATCH 2/3] No effect either if variable is falsy --- sass/_config/_variables.scss | 2 +- sass/library/_base.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/sass/_config/_variables.scss b/sass/_config/_variables.scss index 2a9b439..0c29b4b 100644 --- a/sass/_config/_variables.scss +++ b/sass/_config/_variables.scss @@ -26,7 +26,7 @@ $color5 : #6FA939 !default; $base-color: $color1; $link-color: $color3; $base-background : $color2; -$link-hover-color: $color4; // Make it equal to $link-color if you don't want +$link-hover-color: $color4; // Make it equal to either $link-color or false if you don't want // any effect on links when focused/hovered $brand-primary: $color5; diff --git a/sass/library/_base.scss b/sass/library/_base.scss index 22bc1eb..cd25ea9 100644 --- a/sass/library/_base.scss +++ b/sass/library/_base.scss @@ -32,7 +32,7 @@ a { // No styling on focus/hover if there's no effect. Avoids to then have to // override it countless times. See Issue #232 - @if $link-hover-color != $link-color { + @if ($link-hover-color != $link-color and $link-hover-color != false) { &:focus, &:hover, &:active { From bd8ed31e5d0131b660003c62d15eb5109777a6c7 Mon Sep 17 00:00:00 2001 From: PhilippeVay Date: Fri, 16 Dec 2016 22:24:37 +0100 Subject: [PATCH 3/3] No effect if variable is null or doesn't exist --- sass/_config/_variables.scss | 5 +++-- sass/library/_base.scss | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/sass/_config/_variables.scss b/sass/_config/_variables.scss index 0c29b4b..1dfbbe3 100644 --- a/sass/_config/_variables.scss +++ b/sass/_config/_variables.scss @@ -26,8 +26,9 @@ $color5 : #6FA939 !default; $base-color: $color1; $link-color: $color3; $base-background : $color2; -$link-hover-color: $color4; // Make it equal to either $link-color or false if you don't want - // any effect on links when focused/hovered +// If you don't want any effect on focused/hovered links, +// comment variable below or make it equal to either $link-color or false or null +$link-hover-color: $color4; $brand-primary: $color5; diff --git a/sass/library/_base.scss b/sass/library/_base.scss index cd25ea9..72e9acc 100644 --- a/sass/library/_base.scss +++ b/sass/library/_base.scss @@ -32,11 +32,12 @@ a { // No styling on focus/hover if there's no effect. Avoids to then have to // override it countless times. See Issue #232 - @if ($link-hover-color != $link-color and $link-hover-color != false) { + @if variable_exists(link-hover-color) and + ( null == index( ($link-color, null, false), $link-hover-color) ) { &:focus, &:hover, &:active { - color: $link-hover-color; + color: $link-hover-color; } } }