From 89f813230f55e365b4ad03108daf1977aa263a12 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 7 May 2019 15:58:16 +0100 Subject: [PATCH] wip variable stuff --- src/helpers/_focusable.scss | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/helpers/_focusable.scss b/src/helpers/_focusable.scss index b701b8508b..574caafd61 100644 --- a/src/helpers/_focusable.scss +++ b/src/helpers/_focusable.scss @@ -52,9 +52,6 @@ $_padding-bottom: 0; } - $_box-shadow-spread: ($_padding-top + $_padding-bottom) / 2; - $_box-shadow-offset-y: $_box-shadow-spread - $_padding-top; - // When colours are overridden, for example when users have a dark mode, // backgrounds and box-shadows disappear, so we need to ensure there's a // transparent outline which will be set to a visible colour. @@ -85,6 +82,11 @@ // sass-lint:enable indentation } } @else { + $_highlight-spread: ($_padding-top + $_padding-bottom) / 2; + $_highlight-offset-y: $_highlight-spread - $_padding-top; + $_highlight-padding-left-right: ($_padding-left-right - $_highlight-spread); + $_border-offset-y: ($_padding-bottom + $_border-width); + // When colours are overridden, for example when users have a dark mode, // backgrounds and box-shadows disappear, so we need to ensure there's a // transparent outline which will be set to a visible colour. @@ -94,10 +96,10 @@ // Default if or it's inline-block or block // box-shadow // sass-lint:disable indentation - box-shadow: -($_padding-left-right - $_box-shadow-spread) $_box-shadow-offset-y 0 ($_box-shadow-spread) $govuk-focus-colour, - ($_padding-left-right - $_box-shadow-spread) $_box-shadow-offset-y 0 ($_box-shadow-spread) $govuk-focus-colour, - -$_padding-left-right ($_padding-bottom + $_border-width) $_border-color, - $_padding-left-right ($_padding-bottom + $_border-width) $_border-color; + box-shadow: -$_highlight-padding-left-right $_highlight-offset-y 0 $_highlight-spread $govuk-focus-colour, + $_highlight-padding-left-right $_highlight-offset-y 0 $_highlight-spread $govuk-focus-colour, + -$_padding-left-right $_border-offset-y $_border-color, + $_padding-left-right $_border-offset-y $_border-color; // sass-lint:disable indentation } }