darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-02 17:48:50 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
48499f0c00eb68b10ebf383fc6c3b3245bfe3521
notifications-admin/app/assets/stylesheets/components/broadcast-message.scss

38 lines
986 B
SCSS
Raw Normal View History

Replace generated content with proper heading Brings in https://github.com/alphagov/notifications-utils/pull/797 but adapts the CSS so nothing changes visually
2020-10-06 10:09:25 +01:00
.broadcast-message {
Add some styling to broadcast messages 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.
2020-07-08 17:24:08 +01:00
Replace generated content with proper heading Brings in https://github.com/alphagov/notifications-utils/pull/797 but adapts the CSS so nothing changes visually
2020-10-06 10:09:25 +01:00
&-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;
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;
}
Add some styling to broadcast messages 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.
2020-07-08 17:24:08 +01:00
Replace generated content with proper heading Brings in https://github.com/alphagov/notifications-utils/pull/797 but adapts the CSS so nothing changes visually
2020-10-06 10:09:25 +01:00
&-heading {
Add some styling to broadcast messages 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.
2020-07-08 17:24:08 +01:00
display: block;
position: absolute;
Restyle the broadcast message preview The preview of the broadcast message, with the 2px thick black lines no longer matched the style of the area labels, which have moved to just having a tinted background. This commit restyles the broadcast message preview (including the exclamation mark icon) to use shading only to differentiate the message from the rest of the page. This should make the page fit together more cohesively, and feel less busy.
2020-10-02 13:49:44 +01:00
top: 0;
Add some styling to broadcast messages 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.
2020-07-08 17:24:08 +01:00
left: 0;
Restyle the broadcast message preview The preview of the broadcast message, with the 2px thick black lines no longer matched the style of the area labels, which have moved to just having a tinted background. This commit restyles the broadcast message preview (including the exclamation mark icon) to use shading only to differentiate the message from the rest of the page. This should make the page fit together more cohesively, and feel less busy.
2020-10-02 13:49:44 +01:00
padding: govuk-spacing(2) + 1px govuk-spacing(3) (govuk-spacing(2) - 1px) 46px;
Add some styling to broadcast messages 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.
2020-07-08 17:24:08 +01:00
width: 100%;
box-sizing: border-box;
font-weight: bold;
Restyle the broadcast message preview The preview of the broadcast message, with the 2px thick black lines no longer matched the style of the area labels, which have moved to just having a tinted background. This commit restyles the broadcast message preview (including the exclamation mark icon) to use shading only to differentiate the message from the rest of the page. This should make the page fit together more cohesively, and feel less busy.
2020-10-02 13:49:44 +01:00
background: $grey-1 file-url('exclamation.svg');
color: $white;
background-size: 22px;
Add some styling to broadcast messages 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.
2020-07-08 17:24:08 +01:00
background-repeat: no-repeat;
Restyle the broadcast message preview The preview of the broadcast message, with the 2px thick black lines no longer matched the style of the area labels, which have moved to just having a tinted background. This commit restyles the broadcast message preview (including the exclamation mark icon) to use shading only to differentiate the message from the rest of the page. This should make the page fit together more cohesively, and feel less busy.
2020-10-02 13:49:44 +01:00
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);
Add some styling to broadcast messages 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.
2020-07-08 17:24:08 +01:00
}
}
Reference in New Issue Copy Permalink