darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-08 18:34:24 -04:00
Code Issues Packages Projects Releases Wiki Activity

Give link-buttons an outline in high contrast

Browse Source 
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.
This commit is contained in:
Tom Byers
2021-10-28 12:13:29 +01:00
parent d915beef89
commit 58d80f5097
1 changed files with 2 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/stylesheets/components/pill.scss
View File

@@ -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,