diff --git a/app/assets/stylesheets/govuk-frontend/extensions.scss b/app/assets/stylesheets/govuk-frontend/extensions.scss index 0d4b693fa..dfb5d7ae7 100644 --- a/app/assets/stylesheets/govuk-frontend/extensions.scss +++ b/app/assets/stylesheets/govuk-frontend/extensions.scss @@ -8,3 +8,30 @@ } } +// Extends govuk-link to create a class of link that causes a destructive action +// Based on styles of link in: +// https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/helpers/_links.scss +// +// Note: all destructive actions must have a confirmation step these links navigate to +@mixin govuk-link-style-destructive-no-visited-state { + &:link, + &:visited { + color: $govuk-error-colour; + } + + &:hover { + color: govuk-tint($govuk-error-colour, 25%); + } + + // When focussed, the text colour needs to be darker to ensure that colour + // contrast is still acceptable against the focus colour + // Activated links are usually focused so this applies to them as well + &:active, + &:focus { + color: $govuk-focus-text-colour; + } +} + +.govuk-link--destructive { + @include govuk-link-style-destructive-no-visited-state; +} diff --git a/app/assets/stylesheets/local/_typography.scss b/app/assets/stylesheets/local/_typography.scss new file mode 100644 index 000000000..401562515 --- /dev/null +++ b/app/assets/stylesheets/local/_typography.scss @@ -0,0 +1,62 @@ +@import 'settings/all'; +@import 'helpers/all'; + +@mixin destructive-link-style-default { + &:link { + color: $govuk-error-colour; + } + + &:visited { + color: $govuk-link-visited-colour; + } + + &:hover { + color: govuk-tint( $govuk-error-colour, 25% ); + } + + &:active { + color: $govuk-link-active-colour; + } + + // When focussed, the text colour needs to be darker to ensure that colour + // contrast is still acceptable + &:focus { + color: $govuk-focus-text-colour; + } +} + +@mixin destructive-link-style-no-visited-state { + &:link { + color: $govuk-error-colour; + } + + &:visited { + color: $govuk-error-colour; + } + + &:hover { + color: govuk-tint( $govuk-error-colour, 25% ); + } + + &:active { + color: $govuk-link-active-colour; + } + + // When focussed, the text colour needs to be darker to ensure that colour + // contrast is still acceptable + &:focus { + color: $govuk-focus-text-colour; + } +} + +// mimics styles for govuk-link: +// https://github.com/alphagov/govuk-frontend/blob/063cd8e2470b62b824c6e50ca66342ac7a95d2d8/package/core/_links.scss#L7 +.destructive-link { + @include govuk-link-common; + @include destructive-link-style-default; + @include govuk-link-print-friendly; +} + +.destructive-link--no-visited-state { + @include destructive-link-style-no-visited-state; +} diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index cec02421b..bff09e95e 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -36,6 +36,7 @@ $path: '/static/images/'; @import './govuk-frontend/all'; // Specific to this application +@import 'local/typography'; @import 'grids'; @import 'components/cookie-message'; @import 'components/site-footer';