Mirror changes onto breadcrumbs component chevrons

alphagov · Nov 11, 2022 · 421b0c6 · 421b0c6
1 parent c1bcbb8
commit 421b0c6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/src/govuk/components/back-link/_index.scss b/src/govuk/components/back-link/_index.scss
@@ -7,8 +7,6 @@
   $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  // Awkward syntax hack to ensure we're using the CSS max() function and not
-  // the Sass one. This can be called normally once we're using Sass modules.
   $chevron-border-width: govuk-em(1px, $font-size);
 
   // Colour of chevron

diff --git a/src/govuk/components/breadcrumbs/_index.scss b/src/govuk/components/breadcrumbs/_index.scss
@@ -1,10 +1,13 @@
 @include govuk-exports("govuk/component/breadcrumbs") {
+  // Component font-size on the Frontend (used for calculations)
+  $font-scale-size: 16;
+  $font-size: $font-scale-size * 1px;
 
   // Size of chevron (excluding border)
-  $chevron-size: 7px;
+  $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  $chevron-border-width: 1px;
+  $chevron-border-width: govuk-em(1px, $font-size);
 
   // Colour of chevron
   $chevron-border-colour: $govuk-secondary-text-colour;
@@ -13,10 +16,10 @@
   // of length 8 (7px + 1px border):
   //
   // √(8² + 8²) * 0.5 ≅ 5.655
-  $chevron-altitude-calculated: 5.655px;
+  $chevron-altitude-calculated: govuk-em(5.655px, $font-size);
 
   .govuk-breadcrumbs {
-    @include govuk-font($size: 16);
+    @include govuk-font($size: $font-scale-size);
     @include govuk-text-colour;
 
     margin-top: govuk-spacing(3);
@@ -40,8 +43,8 @@
 
     // Add both margin and padding such that the chevron appears centrally
     // between each breadcrumb item
-    margin-left: govuk-spacing(2);
-    padding-left: govuk-spacing(2) + $chevron-altitude-calculated;
+    margin-left: govuk-em(govuk-spacing(2), $font-size);
+    padding-left: govuk-em(govuk-spacing(2), $font-size) + $chevron-altitude-calculated;
 
     float: left;
 
@@ -55,8 +58,9 @@
       @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, $font-size);
+        top: $offset * -1;
+        bottom: $offset;
       } @else {
         top: 0;
         bottom: 0;
@@ -118,7 +122,7 @@
         }
 
         &:before {
-          top: 6px;
+          top: govuk-em(6px, $font-size);
           margin: 0;
         }
       }