From d915beef892dd533061ce726079723420e8d72cd Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Tue, 19 Oct 2021 15:14:04 +0100 Subject: [PATCH] Show alert mock up in high contrast mode 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. --- app/assets/stylesheets/components/broadcast-message.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/components/broadcast-message.scss b/app/assets/stylesheets/components/broadcast-message.scss index d9e51f85f..672ce5207 100644 --- a/app/assets/stylesheets/components/broadcast-message.scss +++ b/app/assets/stylesheets/components/broadcast-message.scss @@ -6,6 +6,7 @@ max-width: 464px; box-sizing: border-box; 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; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05); border-radius: 5px; @@ -18,10 +19,11 @@ &-heading { display: block; position: absolute; - top: 0; - left: 0; + top: -1px; + left: -1px; 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; font-weight: bold; background: $grey-1 file-url('exclamation.svg');