diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss index 2aa72a492..e8dab86e3 100644 --- a/app/assets/stylesheets/components/message.scss +++ b/app/assets/stylesheets/components/message.scss @@ -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, diff --git a/app/assets/stylesheets/govuk-frontend/extensions.scss b/app/assets/stylesheets/govuk-frontend/extensions.scss index 9b37b3789..02a4717f0 100644 --- a/app/assets/stylesheets/govuk-frontend/extensions.scss +++ b/app/assets/stylesheets/govuk-frontend/extensions.scss @@ -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 {