Merge pull request #3713 from alphagov/fix-fix-for-template-list-focus-styles

Fix how template list item focus extends
This commit is contained in:
Tom Byers
2020-11-17 11:23:43 +00:00
committed by GitHub
2 changed files with 23 additions and 2 deletions

View File

@@ -1,3 +1,6 @@
$app-body-text-line-height-default: get-govuk-typography-style($size: 19, $breakpoint: null, $property: "line-height");
$app-body-text-line-height-tablet: get-govuk-typography-style($size: 19, $breakpoint: tablet, $property: "line-height");
@mixin separator {
display: inline-block;
vertical-align: top;
@@ -95,9 +98,14 @@ a {
content: '';
position: absolute;
left: 0px;
bottom: -100%; /* extend link by 100% of vertical size so it covers the hint/meta */
bottom: -1 * $app-body-text-line-height-default; /* extend link by line height of hint/meta so it covers it */
width: 100%;
height: 100%;
height: $app-body-text-line-height-default;
@include govuk-media-query($from: tablet) {
bottom: -1 * $app-body-text-line-height-tablet;
height: $app-body-text-line-height-tablet;
}
}
&:active,

View File

@@ -1,3 +1,16 @@
// 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 {