Merge pull request #1861 from alphagov/box-sizing-checkboxes

Fix the display of checkboxes when border-box box sizing is applied globally

CHANGELOG.md

@@ -21,6 +21,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests:
 - [#1838: Correctly camel case SVG attributes in the header and footer](https://github.com/alphagov/govuk-frontend/pull/1838)
 - [#1842: Preserve the state of conditional reveals when navigating 'back' in the browser](https://github.com/alphagov/govuk-frontend/pull/1842)
 - [#1855: Hint component can render block-level elements as valid HTML](https://github.com/alphagov/govuk-frontend/pull/1855)
+- [#1861: Fix the display of checkboxes when border-box box sizing is applied globally](https://github.com/alphagov/govuk-frontend/pull/1861)
 
 ## 3.7.0 (Feature release)
 

src/govuk/components/checkboxes/_index.scss

@@ -91,16 +91,17 @@
   // rotated 45 degrees
   .govuk-checkboxes__label::after {
     content: "";
+    box-sizing: border-box;
 
     position: absolute;
     top: 11px;
     left: 9px;
-    width: 18px;
-    height: 7px;
+    width: 23px;
+    height: 12px;
 
     transform: rotate(-45deg);
     border: solid;
-    border-width: 0 0 $govuk-border-width $govuk-border-width;
+    border-width: 0 0 5px 5px;
     // Fix bug in IE11 caused by transform rotate (-45deg).
     // See: alphagov/govuk_elements/issues/518
     border-top-color: transparent;
@@ -233,8 +234,8 @@
     .govuk-checkboxes__label::after {
       top: 15px;
       left: 6px;
-      width: 9px;
-      height: 3.5px;
+      width: 12px;
+      height: 6.5px;
       border-width: 0 0 3px 3px;
     }