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

Add new focus style to buttons

Browse Source 
Updates based on the changes in:

https://github.com/alphagov/govuk-frontend/pull/1315
This commit is contained in:
Tom Byers
2020-09-11 19:21:32 +01:00
parent 0c9229bfad
commit 2b6d07d358
1 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/assets/stylesheets/govuk-frontend/focus/components.scss
View File

@@ -54,3 +54,31 @@
.govuk-details__summary:before {
top: 0;
}
// Updates to buttons
.govuk-button {
&:focus {
border-color: $govuk-focus-colour;
// When colours are overridden, for example when users have a dark mode,
// backgrounds and box-shadows disappear, so we need to ensure there's a
// transparent outline which will be set to a visible colour.
// Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
@include govuk-not-ie8 {
outline: $govuk-focus-width solid transparent;
outline-offset: 0;
}
// Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
@include govuk-if-ie8 {
color: $govuk-text-colour;
background-color: $govuk-focus-colour;
}
box-shadow: inset 0 0 0 1px $govuk-focus-colour;
}
&:focus:not(:active):not(:hover) {
border-color: $govuk-focus-colour;
color: $govuk-text-colour;
background-color: $govuk-focus-colour;
box-shadow: 0 2px 0 $govuk-focus-text-colour;
}
}