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

Make SVG icon in alert mock up inline

Browse Source 
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 `<svg>` 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
`<svg>` element by default.
This commit is contained in:
Tom Byers
2021-11-11 13:49:24 +00:00
parent 159e4c0bcb
commit 301480a732
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}
}
}