mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-14 02:09:44 -04:00
a85f7fa2c1
We had 7 classes in _grids.scss named `.column-...` which were being used to give a certain column width. These worked by using `@include grid column()`, which is now deprecated. `.column-whole` and `.column-three-quarters` can be removed and replaced with `govuk-grid-column-full` and `govuk-grid-column-three-quarters` respectively. The other column classes don't have a direct replacment in GOV.UK Frontend. To get round this, we overwrite the `$govuk-grid-width` SASS map in `extensions.scss` to add in extra widths, then use this with the `govuk-grid-column` mixin to create new classes in for our custom widths in `_grids.scss`
51 lines
1.4 KiB
SCSS
51 lines
1.4 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;
|
|
}
|
|
$govuk-grid-widths: (
|
|
one-eighth: 12.5%,
|
|
one-sixth: 16.6666%,
|
|
one-quarter: 25%,
|
|
one-third: 33.3333%,
|
|
one-half: 50%,
|
|
five-eighths: 62.5%,
|
|
two-thirds: 66.6666%,
|
|
three-quarters: 75%,
|
|
five-sixths: 83.3333%,
|
|
seven-eighths: 87.5%,
|
|
full: 100%
|
|
);
|