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

Add some styling to broadcast messages

Browse Source 
This is borrowed from an earlier prototype, and is meant to be temporary
– something better than just plain text.

Text in generated content isn’t always announced by screen readers, so
we should definitely move away from that once we understand what text
will be shown on the phone and where it comes from.
This commit is contained in:
Chris Hill-Scott
2020-07-08 17:24:08 +01:00
parent ea1c9f4059
commit 0cf3124f73
4 changed files with 61 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/stylesheets/components/broadcast-message.scss Normal file
View File

@@ -0,0 +1,33 @@
.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);
background: $panel-colour;
border: 2px solid $black;
border-radius: 5px;
white-space: normal;
margin: govuk-spacing(2) 0 govuk-spacing(4) 0;
clear: both;
word-wrap: break-word;
&:before {
content: "Emergency alert";
display: block;
border-bottom: 2px solid $black;
position: absolute;
top: govuk-spacing(2);
left: 0;
padding: 2px govuk-spacing(3) govuk-spacing(2) 45px;
width: 100%;
box-sizing: border-box;
font-weight: bold;
background: file-url('exclamation.svg');
background-size: 20px;
background-repeat: no-repeat;
background-position: govuk-spacing(3) 3px;
}
}

1
app/assets/stylesheets/main.scss
View File

@@ -71,6 +71,7 @@ $path: '/static/images/';
@import 'components/task-list';
@import 'components/loading-indicator';
@import 'components/area-list';
@import 'components/broadcast-message';
@import 'views/dashboard';
@import 'views/users';