Add minimum border thickness to chevrons

alphagov · Nov 29, 2022 · ab937f4 · ab937f4
1 parent 253d487
commit ab937f4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/govuk/components/back-link/_index.scss b/src/govuk/components/back-link/_index.scss
@@ -1,19 +1,19 @@
 @include govuk-exports("govuk/component/back-link") {
   // Component font-size on the Frontend (used for calculations)
-  $font-scale-size: 16;
-  $font-size: $font-scale-size * 1px;
+  $font-size: 16;
 
   // Size of chevron (excluding border)
   $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  $chevron-border-width: govuk-em(1px, $font-size);
+  $chevron-border-min-width: 1px;
+  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
   $chevron-border-colour: $govuk-secondary-text-colour;
 
   .govuk-back-link {
-    @include govuk-typography-responsive($size: $font-scale-size);
+    @include govuk-typography-responsive($size: $font-size);
     @include govuk-link-common;
     @include govuk-link-style-text;
 
@@ -56,9 +56,13 @@
     transform: rotate(225deg);
 
     border: solid;
-    border-width: $chevron-border-width $chevron-border-width 0 0;
+    border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
     border-color: $chevron-border-colour;
 
+    @supports (border-width: unquote("max(0px)")) {
+      border-width: unquote("max(#{$chevron-border-min-width}, #{$chevron-border-width}) max(#{$chevron-border-min-width}, #{$chevron-border-width})") 0 0;
+    }
+
     // Fall back to a less than sign for IE8
     @include govuk-if-ie8 {
       content: "\003c"; // Less than sign (<)

diff --git a/src/govuk/components/breadcrumbs/_index.scss b/src/govuk/components/breadcrumbs/_index.scss
@@ -1,13 +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;
+  $font-size: 16;
 
   // Size of chevron (excluding border)
   $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  $chevron-border-width: govuk-em(1px, $font-size);
+  $chevron-border-min-width: 1px;
+  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
   $chevron-border-colour: $govuk-secondary-text-colour;
@@ -19,7 +19,7 @@
   $chevron-altitude-calculated: govuk-em(5.655px, $font-size);
 
   .govuk-breadcrumbs {
-    @include govuk-font($size: $font-scale-size);
+    @include govuk-font($size: $font-size);
     @include govuk-text-colour;
 
     margin-top: govuk-spacing(3);
@@ -78,9 +78,13 @@
       transform: rotate(45deg);
 
       border: solid;
-      border-width: $chevron-border-width $chevron-border-width 0 0;
+      border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
       border-color: $chevron-border-colour;
 
+      @supports (border-width: unquote("max(0px)")) {
+        border-width: unquote("max(#{$chevron-border-min-width}, #{$chevron-border-width}) max(#{$chevron-border-min-width}, #{$chevron-border-width})") 0 0;
+      }
+
       // Fall back to a greater than sign for IE8
       @include govuk-if-ie8 {
         content: "\003e"; // Greater than sign (>)