Add default margins to page nav component

* Nav appears beneath content by default, a top margin makes sense in this case * Add a bottom margin by default, something will always follow it * DRY up some of the styles Margin use case: https://github.com/alphagov/finder-frontend/blob/09dba3aa9b7b4633932b71b 9593302c7d48f30f0/app/assets/stylesheets/finder_frontend.scss#L347
alphagov · Feb 8, 2016 · b68027d · b68027d
1 parent 5a6ed5b
commit b68027d
Showing 1 changed file with 17 additions and 14 deletions.
diff --git a/app/assets/stylesheets/govuk-component/_previous-and-next-navigation.scss b/app/assets/stylesheets/govuk-component/_previous-and-next-navigation.scss
@@ -1,5 +1,7 @@
 .govuk-previous-and-next-navigation {
   display: block;
+  margin-top: $gutter;
+  margin-bottom: $gutter;
 
   ul {
     margin: 0;
@@ -37,30 +39,26 @@
 
     }
 
-    &.next-page {
-      float: right;
-      text-align: right;
+    &.next-page a:before,
+    &.previous-page a:before {
+      margin-top: -4px;
+      display: block;
+      width: 30px;
+      height: 38px;
+      content: " ";
     }
 
     &.next-page a:before {
       background: transparent image-url("govuk-component/arrow-sprite.png") no-repeat -102px -11px;
-      margin: -4px -32px 0 0;
-      display: block;
+      margin-right: -32px;
       float: right;
-      width: 30px;
-      height: 38px;
-      content: " ";
     }
 
     &.previous-page a:before {
       background: transparent image-url("govuk-component/arrow-sprite.png") no-repeat -20px -11px;
-      margin: -4px 0 0 -32px;
-      display: block;
+      margin-left: -32px;
       float: left;
-      width: 30px;
-      height: 38px;
-      content: " ";
-      }
+    }
 
     &.previous-page {
       float: left;
@@ -71,6 +69,11 @@
       padding: 0.75em 0 0.75em 3em;
     }
 
+    &.next-page {
+      float: right;
+      text-align: right;
+    }
+
     &.next-page a {
       padding: 0.75em 3em 0.75em 0;
     }