Merge pull request #491 from alphagov/remove-em-from-inputs

Define size of inputs etc in pixels rather than em
alphagov · Feb 8, 2018 · baf0bd9 · baf0bd9
2 parents 051c2dd + 5f4d20c
commit baf0bd9
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 20 deletions.
diff --git a/src/components/checkboxes/_checkboxes.scss b/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;

diff --git a/src/components/details/_details.scss b/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 {

diff --git a/src/components/input/_input.scss b/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");
 

diff --git a/src/components/radios/_radios.scss b/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;

diff --git a/src/components/select/_select.scss b/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