mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-08 08:28:15 -04:00
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.
This commit is contained in:
62
app/assets/stylesheets/local/_typography.scss
Normal file
62
app/assets/stylesheets/local/_typography.scss
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user