Files
notifications-admin/app/assets/stylesheets/govuk-frontend/focus/components.scss
T

57 lines
1.4 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
// Updates to skip-link component
.govuk-skip-link {
@include govuk-typography-common;
@include govuk-focusable-fill;
}
// Updates to header component
.govuk-header__link {
@include govuk-focusable-text-link;
}
.govuk-header__link--homepage {
// Remove any borders that show when focused and hovered.
&:focus {
border-bottom: 0;
}
}
// Updates to back-link component
.govuk-back-link {
@include govuk-focusable-text-link;
// When the back link is focused, hide the bottom link border as the
// focus styles has a bottom border.
&:focus {
border-bottom-color: transparent;
}
}
// Updates to details component
.govuk-details__summary {
&:hover {
color: $govuk-link-hover-colour;
}
@include govuk-focusable-text-link;
}
// Remove the underline when focussed to avoid duplicate borders
.govuk-details__summary:focus .govuk-details__summary-text {
text-decoration: none;
}
.govuk-details__summary:before {
top: 0;
}