diff --git a/src/govuk/components/back-link/_index.scss b/src/govuk/components/back-link/_index.scss index da04806101..4af9b4e98e 100644 --- a/src/govuk/components/back-link/_index.scss +++ b/src/govuk/components/back-link/_index.scss @@ -1,10 +1,17 @@ @include govuk-exports("govuk/component/back-link") { // Size of chevron (excluding border) - $chevron-size: .4375em; + $chevron-size: govuk-em(7px, $govuk-root-font-size); // Size of chevron border - $chevron-border-width: .0625em; + $chevron-border-min-width: 1px; + // Using #{m}ax is an awkward syntax hack to ensure we're using the CSS max() + // function and not the Sass spec one. This can be called normally once we're + // using Sass modules. + $chevron-border-width: #{m}ax( + #{$chevron-border-min-width}, + #{govuk-em(1px, $govuk-root-font-size)} + ); // Colour of chevron $chevron-border-colour: $govuk-secondary-text-colour; @@ -21,7 +28,7 @@ margin-bottom: govuk-spacing(3); // Allow space for the arrow - padding-left: .875em; + padding-left: govuk-em(14px, $govuk-root-font-size); } // Prepend left pointing chevron @@ -35,14 +42,15 @@ @if $govuk-use-legacy-font { // Begin adjustments for font baseline offset // These should be removed when legacy font support is dropped - top: -1px; - bottom: 1px; + $offset: govuk-em(1px, $govuk-root-font-size); + top: $offset * -1; + bottom: $offset; } @else { top: 0; bottom: 0; } - left: 3px; + left: govuk-em(3px, $govuk-root-font-size); width: $chevron-size; height: $chevron-size; @@ -52,6 +60,7 @@ transform: rotate(225deg); border: solid; + border-width: $chevron-border-min-width $chevron-border-min-width 0 0; border-width: $chevron-border-width $chevron-border-width 0 0; border-color: $chevron-border-colour; @@ -81,15 +90,4 @@ bottom: -14px; left: 0; } - - @if $govuk-use-legacy-font { - // Begin adjustments for font baseline offset - // These should be removed when legacy font support is dropped - .govuk-back-link:before { - $offset: 1px; - - top: $offset * -1; - bottom: $offset; - } - } }