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

Update comments about high contrast styles

Browse Source 
To address the points in this comment on the
associated pull request:

04de4ed865 (diff-6c10fd1eff57bed9c68dbad652255da627ac922a2f8aabf7b17a02a5dff9d099)
This commit is contained in:
Tom Byers
2021-08-25 20:39:26 +01:00
parent f70dcc8329
commit 8827b8802e
1 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/assets/stylesheets/map.scss
View File

@@ -10,9 +10,10 @@ $govuk-focus-colour: #FFDD00;
$zoom-button-colour: govuk-colour("white"); $zoom-button-colour: govuk-colour("white");
$zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%); $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
// The focus style is a 2-colour outline, made to match the GOVUK text input focus style. // The focus style is a 2-colour outline, made to match the GOVUK text input focus style, using
// When colours are overridden, for example when users have a dark mode, box-shadows disappear, // box-shadow. When colours are overridden, for example when users have Windows high contrast mode
// so the outline which is left as a single colour (defined by the OS, to replace 'transparent'). // on, box-shadows disappear, so the outline which is left as a single colour (defined by the OS,
// to replace 'transparent').
// //
// Leaflet adds focus styles with JS, through inline styles. Because of their higher precedence // Leaflet adds focus styles with JS, through inline styles. Because of their higher precedence
// we need to mark our overrides with !important. // we need to mark our overrides with !important.
@@ -83,9 +84,10 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
// Styles that apply if focused with or without the :hover or :active state // Styles that apply if focused with or without the :hover or :active state
&:focus { &:focus {
// When colours are overridden, for example when users have a dark mode, // Button focus is shown by a change in background colour.
// backgrounds and box-shadows disappear, so we need to ensure there's a // When colours are overridden, for example when users have Windows high
// outline so it can be set to a visible colour by the OS. // contrast mode on, backgrounds disappear, so we need to ensure there's a
// visible outline so it can be set to a colour by the OS.
border: solid 2px $govuk-focus-colour; border: solid 2px $govuk-focus-colour;
box-sizing: border-box; // make sure height includes the border box-sizing: border-box; // make sure height includes the border
line-height: 26px; // subtract the border from the height (normally 30px) line-height: 26px; // subtract the border from the height (normally 30px)
@@ -151,9 +153,10 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
.leaflet-control-attribution { .leaflet-control-attribution {
& a { & a {
&:focus { &:focus {
// When colours are overridden, for example when users have a dark mode, // Link focus is shown by a change in background colour.
// backgrounds and box-shadows disappear, so we need to ensure there's a // When colours are overridden, for example when users have Windows high
// transparent outline which will be set to a visible colour. // contrast mode on, backgrounds disappear, so we need to ensure there's a
// visible outline so it can be set to a colour by the OS.
outline: $govuk-focus-width solid transparent !important; // sass-lint:disable-line no-important outline: $govuk-focus-width solid transparent !important; // sass-lint:disable-line no-important
color: $govuk-focus-text-colour; color: $govuk-focus-text-colour;
background: $govuk-focus-colour; background: $govuk-focus-colour;