Merge pull request #2750 from alphagov/embiggen-all-the-things

Embiggen all the things

app/assets/stylesheets/components/navigation.scss

@@ -23,6 +23,10 @@
       right: 0;
       padding: 13px 0 9px 15px;
 
+      &:hover {
+        color: $link-hover-colour;
+      }
+
       &:focus {
         outline: none;
         border-bottom: 4px solid $yellow;

app/assets/stylesheets/components/table.scss

@@ -212,8 +212,49 @@
 }
 
 .table-field-right-aligned {
+
   @extend %table-field;
   text-align: right;
+
+  a {
+
+    display: block;
+    position: relative;
+
+    &:before {
+      content: "";
+      display: block;
+
+      position: absolute;
+
+      top: -$gutter-half;
+      right: 0;
+      bottom: -$gutter-half + 4px;
+      left: -$gutter-half;
+
+      background: transparent;
+    }
+
+    &:hover {
+      color: $link-hover-colour;
+    }
+
+    &:active,
+    &:focus {
+
+      color: $black;
+
+      &:before {
+        border-color: $yellow;
+        border-style: solid;
+        border-width: 15px 3px 15px 15px;
+        right: -3px;
+      }
+
+    }
+
+  }
+
 }
 
 

app/assets/stylesheets/components/tick-cross.scss

@@ -57,10 +57,48 @@
     }
 
     &-edit-link {
+
       text-align: right;
       position: absolute;
       top: -25px;
       right: -135px;
+
+      a {
+
+        &:before {
+          content: "";
+          display: block;
+
+          position: absolute;
+
+          top: -$gutter-half - 1;
+          right: 0;
+          bottom: -$gutter-half;
+          left: -$gutter-half;
+
+          background: transparent;
+        }
+
+        &:hover {
+          color: $link-hover-colour;
+        }
+
+        &:active,
+        &:focus {
+
+          color: $black;
+
+          &:before {
+            border-color: $yellow;
+            border-style: solid;
+            border-width: 15px 3px 15px 15px;
+            right: -3px;
+          }
+
+        }
+
+      }
+
     }
 
     &-hint {

app/templates/views/user-profile.html

@@ -10,6 +10,7 @@
 
   <h1 class="heading-large">Your profile</h1>
 
+  <div class="body-copy-table">
     {% call mapping_table(
       caption='Your profile',
       field_headings=['Label', 'Value', 'Action'],
@@ -45,5 +46,6 @@
       {% endcall %}
 
     {% endcall %}
+  </div>
 
 {% endblock %}