darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-03 23:58:26 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
381bd2cd1cfee56e6f9f48a5be3f92bcc9bc2857
notifications-admin/app/assets/stylesheets/components/broadcast-message.scss

44 lines
1.3 KiB
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);
Show alert mock up in high contrast mode 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.
2021-10-19 15:14:04 +01:00
border: solid 1px transparent; // to show it's area in high contrast mode
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
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;
Show alert mock up in high contrast mode 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.
2021-10-19 15:14:04 +01:00
top: -1px;
left: -1px;
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 `<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.
2021-11-11 13:49:24 +00:00
padding: govuk-spacing(2) + 1px govuk-spacing(3) (govuk-spacing(2) - 1px) 15px;
Show alert mock up in high contrast mode 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.
2021-10-19 15:14:04 +01:00
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)
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
box-sizing: border-box;
font-weight: bold;
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 `<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.
2021-11-11 13:49:24 +00:00
background: $grey-1;
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
color: $white;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
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 `<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.
2021-11-11 13:49:24 +00:00
&__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;
}
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