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

Show alert mock up in high contrast mode

Browse Source 
The mock up component, shown in all
current/past/rejected alert pages, doesn't show
fully in high contrast modes because it uses its
background colour to show its shape and
backgrounds are hidden in high contrast modes.

This uses a technique from design system which
adds a transparent border to these elements to
show their shapes. This works because borders of
any colour (even transparent) are rendered as the
foreground colour.
This commit is contained in:
Tom Byers
2021-10-19 15:14:04 +01:00
parent ccebae6c75
commit d915beef89
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/stylesheets/components/broadcast-message.scss
View File

@@ -6,6 +6,7 @@
max-width: 464px; max-width: 464px;
box-sizing: border-box; box-sizing: border-box;
padding: govuk-spacing(9) govuk-spacing(3) govuk-spacing(3) govuk-spacing(3); padding: govuk-spacing(9) govuk-spacing(3) govuk-spacing(3) govuk-spacing(3);
border: solid 1px transparent; // to show it's area in high contrast mode
background: $panel-colour; background: $panel-colour;
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05); box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05);
border-radius: 5px; border-radius: 5px;
@@ -18,10 +19,11 @@
&-heading { &-heading {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: -1px;
left: 0; left: -1px;
padding: govuk-spacing(2) + 1px govuk-spacing(3) (govuk-spacing(2) - 1px) 46px; padding: govuk-spacing(2) + 1px govuk-spacing(3) (govuk-spacing(2) - 1px) 46px;
width: 100%; border: solid 1px transparent; // to show it's area in high contrast mode
width: calc(100% + 2px); // grow to overlap wrapper's border (when combined with top and left)
box-sizing: border-box; box-sizing: border-box;
font-weight: bold; font-weight: bold;
background: $grey-1 file-url('exclamation.svg'); background: $grey-1 file-url('exclamation.svg');