Files
notifications-admin/app/assets/stylesheets/local/_typography.scss
Tom Byers 61afbe7a8f Add styles for destructive links
This colour is used in a few places so worth
making into its own block and classes.

Note: this establishes a
`app/assets/stylesheets/local` folder for any Sass
files whose names clash with files from vendored
libraries.

`_typography.scss` already exists in GOV.UK
Elements Sass.

This will no longer be needed when GOV.UK Elements
is gone and GOV.UK Frontend is at version 3, where
all its folders are in a `govuk` folder.
2020-02-25 10:52:02 +00:00

63 lines
1.3 KiB
SCSS

@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;
}