Files
notifications-admin/app/assets/stylesheets/govuk-frontend/extensions.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

38 lines
1.1 KiB
SCSS

// Extends footer column styles to allow 4 columns
@include mq ($from: desktop) {
.govuk-footer__list--columns-4 {
// TODO: Move support for legacy properties to something like Post-CSS's auto-prefixer
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
// 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;
}