From 58d80f5097d7b77cb79646eeb1239afa47f927a6 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 28 Oct 2021 12:13:29 +0100 Subject: [PATCH] Give link-buttons an outline in high contrast The link-buttons we use in our pill component have a blue background which shows the area they occupy by default. In high contrast mode, backgrounds are hidden so the link-button text looks like it is floating because you can't see the edge of their area. These changes use the trick of adding a transparent border. This is hidden by default but displays in high contrast mode to show the edges of the link-button. I've reduced the padding to accommodate the extra space it takes up. --- app/assets/stylesheets/components/pill.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss index e497852de..8ef516b31 100644 --- a/app/assets/stylesheets/components/pill.scss +++ b/app/assets/stylesheets/components/pill.scss @@ -122,7 +122,8 @@ display: block; text-align: left; - padding: 10px govuk-spacing(3); + padding: 9px (govuk-spacing(3) - 1); + border: 1px solid transparent; text-align: center; &:link,