mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-05 15:48:25 -04:00
32 lines
1.3 KiB
SCSS
32 lines
1.3 KiB
SCSS
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
|
|
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
|
|
//
|
|
// See the following for details of the update:
|
|
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
|
|
// - https://design-system.service.gov.uk/get-started/focus-states/
|
|
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
|
|
//
|
|
// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
|
|
// and edited in https://github.com/alphagov/govuk-frontend/pull/1455
|
|
//
|
|
/// Focusable with box-shadow
|
|
///
|
|
/// Removes the visible outline and replace with box-shadow and background colour.
|
|
/// Used for interactive text-based elements.
|
|
|
|
@mixin govuk-focusable-text-link {
|
|
&:focus {
|
|
// 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.
|
|
|
|
outline: $govuk-focus-width solid transparent;
|
|
color: $govuk-focus-text-colour;
|
|
background-color: $govuk-focus-colour;
|
|
box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
|
|
// When link is focussed, hide the default underline since the
|
|
// box shadow adds the "underline"
|
|
text-decoration: none;
|
|
}
|
|
}
|