mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-24 01:49:15 -04:00
44402e0949
We use a hack to extend the focus style of single links in template list items (those not part of a path of links). This extended the 'focus box' downwards so it covered the hint text below the link by the height of the link (which is block-level). Problems happen if the link wraps to multiple lines. The hint is always on one line so the focus looks over-extended. These changes guard against those problems by using the line-height instead of the block-height. They include adding a Sass function to reference the line-heights in GOVUK Frontend's Sass API: https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-typography-scale
97 lines
2.5 KiB
SCSS
97 lines
2.5 KiB
SCSS
// Gives access to the Sass variables used in the GOVUK Frontend typographic styles
|
|
// See: https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-typography-scale
|
|
@function get-govuk-typography-style($size, $breakpoint, $property) {
|
|
$size-map: map-get($govuk-typography-scale, $size);
|
|
$breakpoint-map: map-get($size-map, $breakpoint);
|
|
|
|
@if not map-has-key($breakpoint-map, $property) {
|
|
@error "Unknown property #{$property} - expected a property from the typography scale for #{$size}.";
|
|
}
|
|
|
|
@return map-get($breakpoint-map, $property);
|
|
}
|
|
|
|
// 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%
|
|
);
|
|
|
|
.govuk-input--width-6 {
|
|
max-width: 14ex;
|
|
}
|
|
|
|
// extensions to govuk-input to allow numbering by label
|
|
.govuk-input--numbered {
|
|
padding-left: 1.84em;
|
|
|
|
@include media(desktop) {
|
|
@include inline-block;
|
|
}
|
|
}
|
|
|
|
.govuk-input--numbered__label {
|
|
float: left;
|
|
width: 1.6em;
|
|
margin: 8px -1.6em 0 0;
|
|
position: relative;
|
|
left: 10px;
|
|
color: $govuk-secondary-text-colour;
|
|
font-weight: bold;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.govuk-input--numbered__label--error {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
|
|
@include govuk-media-query(desktop) {
|
|
bottom: 7px;
|
|
}
|
|
}
|