mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-05 22:21:34 -04:00
d915beef89
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.
40 lines
1.2 KiB
SCSS
40 lines
1.2 KiB
SCSS
.broadcast-message {
|
|
|
|
&-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
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;
|
|
white-space: normal;
|
|
margin: govuk-spacing(2) 0 govuk-spacing(4) 0;
|
|
clear: both;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
&-heading {
|
|
display: block;
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
padding: govuk-spacing(2) + 1px govuk-spacing(3) (govuk-spacing(2) - 1px) 46px;
|
|
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');
|
|
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);
|
|
}
|
|
|
|
}
|