Reinstate missing margin before reporting form email input

`.form-box--logged-in-name` has no preceding heading, which meant the
grey box background was colliding with whatever content happened to go
before it.

We add some margin, and while we’re at it, remove the extra margin-top
on first-child labels (unnecessary, since .form-boxes have their own
padding) and tidy up the syntax of the .form-box rule set.

Fixes #1418.

1 files changed, 24 insertions, 10 deletions

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index f81d969ab..0a333773b 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -313,29 +313,43 @@ label{
   margin: 0 -1em 0.25em;
   background: #eee;
   padding: 1em;
-  > input[type=text], input[type=email] {
-    margin-bottom:1em;
+
+  & > input[type=text],
+  & > input[type=email] {
+    margin-bottom: 1em;
+  }
+
+  & > label:first-child {
+    margin-top: 0;
   }
+
   .title {
-    font-size:1.25em;
-    margin:0.5em 0;
+    font-size: 1.25em;
+    margin: 0.5em 0;
   }
+
   h2 {
     margin: 0 0 0.5em;
   }
+
   h5 {
-    margin:0 0 1em;
-    font: {
-      size:1.125em;
-      weight:normal;
-    }
+    margin: 0 0 1em;
+    font-size: 1.125em;
+    font-weight: normal;
+
     strong {
-      font-size:2em;
+      font-size: 2em;
       margin-#{$right}: 0.25em;
     }
   }
 }
 
+// When the user is logged in, we show a shorter form-box,
+// without a heading before it. So add some space before.
+#form-box--logged-in-name {
+  margin-top: 1.25em;
+}
+
 // Prevent grey displaying oddly by giving it a width, and stop odd left margin issue
 .ie7 .form-box {
     width: 100%;