Define size of inputs etc in pixels rather than em

Remove the calls to the `em` function from Frontend, so that all measurements
are defined in pixels. The `em` conversions were originally added in an attempt
to make form elements line up. However, they cause problems when you try to use
Frontend in an application that defines font sizes, especially when those font
sizes are nested.

This also removes the em() call from `govuk-c-details` as the above problems
apply to this component too. For now, `govuk-c-table` still calls `em` - I'll
find out from Anika if there's any particular reason tables in Elements used
them.

src/components/checkboxes/_checkboxes.scss

@@ -8,7 +8,7 @@
     position: relative;
 
     margin-bottom: $govuk-spacing-scale-2;
-    padding: 0 0 0 em(40px, 19px);
+    padding: 0 0 0 40px;
 
     clear: left;
   }
@@ -39,7 +39,7 @@
 
   .govuk-c-checkboxes__label {
     display: block;
-    padding: em(8px, 19px) em($govuk-spacing-scale-3, 19px) em($govuk-spacing-scale-1, 19px);
+    padding: 8px $govuk-spacing-scale-3 $govuk-spacing-scale-1;
     cursor: pointer;
     // remove 300ms pause on mobile
     -ms-touch-action: manipulation;
@@ -52,8 +52,8 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: em(40px, 19px);
-    height: em(40px, 19px);
+    width: 40px;
+    height: 40px;
     border: $govuk-border-width-form-element solid $govuk-text-colour;
     background: transparent;
 
@@ -64,10 +64,10 @@
     content: "";
 
     position: absolute;
-    top: em(11px, 19px);
-    left: em(9px, 19px);
-    width: em(18px, 19px);
-    height: em(7px, 19px);
+    top: 11px;
+    left: 9px;
+    width: 18px;
+    height: 7px;
 
     transform: rotate(-45deg);
     border: solid;

src/components/details/_details.scss

@@ -75,7 +75,7 @@
 
   .govuk-c-details__text p {
     margin-top: 0;
-    margin-bottom: em($govuk-spacing-scale-4, 19px);
+    margin-bottom: $govuk-spacing-scale-4;
   }
 
   .govuk-c-details__text p:last-child {

src/components/input/_input.scss

@@ -9,7 +9,7 @@
 
     box-sizing: border-box;
     width: 100%;
-    height: em(40px, 19px);
+    height: 40px;
     margin-top: 0;
     @include govuk-responsive-margin($govuk-spacing-responsive-6, "bottom");
 

src/components/radios/_radios.scss

@@ -9,7 +9,7 @@
     position: relative;
 
     margin-bottom: $govuk-spacing-scale-2;
-    padding: 0 0 0 em($govuk-spacing-scale-7, 19px);
+    padding: 0 0 0 $govuk-spacing-scale-7;
 
     clear: left;
   }
@@ -32,8 +32,8 @@
     top: 0;
     left: 0;
 
-    width: em($govuk-spacing-scale-7, 19px);
-    height: em($govuk-spacing-scale-7, 19px);
+    width: $govuk-spacing-scale-7;
+    height: $govuk-spacing-scale-7;
 
     cursor: pointer;
 
@@ -46,7 +46,7 @@
 
   .govuk-c-radios__label {
     display: block;
-    padding: em(8px, 19px) em($govuk-spacing-scale-3, 19px) em($govuk-spacing-scale-1, 19px);
+    padding: 8px $govuk-spacing-scale-3 $govuk-spacing-scale-1;
     cursor: pointer;
     // remove 300ms pause on mobile
     -ms-touch-action: manipulation;
@@ -60,8 +60,8 @@
     top: 0;
     left: 0;
 
-    width: em($govuk-spacing-scale-7, 19px);
-    height: em($govuk-spacing-scale-7, 19px);
+    width: $govuk-spacing-scale-7;
+    height: $govuk-spacing-scale-7;
 
     border: $govuk-border-width-form-element solid;
     border-radius: 50%;
@@ -72,13 +72,13 @@
     content: "";
 
     position: absolute;
-    top: em($govuk-spacing-scale-2, 19px);
-    left: em($govuk-spacing-scale-2, 19px);
+    top: $govuk-spacing-scale-2;
+    left: $govuk-spacing-scale-2;
 
     width: 0;
     height: 0;
 
-    border: em($govuk-spacing-scale-2, 19px) solid;
+    border: $govuk-spacing-scale-2 solid;
     border-radius: 50%;
     opacity: 0;
     background: currentColor;

src/components/select/_select.scss

@@ -12,7 +12,7 @@
 
     box-sizing: border-box; // should this be global?
     width: 100%;
-    height: em(40px, 19px);
+    height: 40px;
     @include govuk-responsive-margin($govuk-spacing-responsive-6, "bottom");
 
     padding: $govuk-spacing-scale-1; // was 5px 4px 4px - size of it should be adjusted to match other form elements