From 301480a7324336d7fcf1b64dc5951c33dc4725d0 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 11 Nov 2021 13:49:24 +0000 Subject: [PATCH] Make SVG icon in alert mock up inline Making the icon an inline SVG lets it inherit colours from the page styles. This helps in forced colour modes, like Windows high contrast mode, where it will match the colour of the text next to it, whatever it is set to. Making it inline requires some changes to the CSS to allow its position to match that of the current background image. This also sets `forced-color-adjust` to `auto` on the `` element, which tells the browser it can control its colours in forced colour modes. This is required because the browsers that support forced colour mode set it to `none` for the `` element by default. --- .../stylesheets/components/broadcast-message.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/components/broadcast-message.scss b/app/assets/stylesheets/components/broadcast-message.scss index 672ce5207..71bfd20f7 100644 --- a/app/assets/stylesheets/components/broadcast-message.scss +++ b/app/assets/stylesheets/components/broadcast-message.scss @@ -21,19 +21,23 @@ position: absolute; top: -1px; 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) 15px; 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'); + background: $grey-1; color: $white; - background-size: 22px; - background-repeat: no-repeat; - background-position: govuk-spacing(3) 11px; border-top-right-radius: 5px; border-top-left-radius: 5px; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); + + &__icon { + padding-right: 6px; + // user agents set this to 'none' by default for svgs so set as 'auto' to allow + // colours to be overridden in forced-color modes like Windows high contrast mode + forced-color-adjust: auto; + } } }