Add multiple ‘edit’ links for letter templates

Letter templates have (or will have) multiple different editable
regions. I think that the most intuitive way for this to work is to have
- an edit link for each of these areas
- positioned next to the thing to be edited

Again, this isn’t fully hooked up, but since no-one is using letters
live yet this is a good way of getting research feedback and pointing
towards where we want the feature to go.

Uses percentages for the positioning so that the alignment is maintained
on mobile.

app/assets/stylesheets/components/sms-message.scss

@@ -2,9 +2,9 @@
 .sms-message-wrapper {
 
   width: 100%;
-  max-width: 410px;
+  max-width: 450px;
   box-sizing: border-box;
-  padding: $gutter-half;
+  padding: $gutter-half $gutter-half $gutter-half $gutter-half;
   background: $panel-colour;
   border: 1px solid $panel-colour;
   border-radius: 5px;

app/assets/stylesheets/main.scss

@@ -66,6 +66,7 @@ $path: '/static/images/';
 @import 'views/users';
 @import 'views/api';
 @import 'views/product-page';
+@import 'views/template';
 
 // TODO: break this up
 @import 'app';

app/assets/stylesheets/views/template.scss

@@ -0,0 +1,41 @@
+.template-container {
+  position: relative;
+}
+
+%edit-template-link,
+.edit-template-link {
+
+  @include core-19;
+  position: absolute;
+  background: $link-colour;
+  color: $white;
+  padding: 10px $gutter-half;
+  z-index: 10000;
+
+  &:link, &:visited {
+    color: $white;
+  }
+
+  &:hover {
+    color: $light-blue-25;
+  }
+
+}
+
+.edit-template-link-letter-contact {
+  @extend %edit-template-link;
+  right: -25px;
+  top: 13.3%; // align to top of contact block
+}
+
+.edit-template-link-letter-address {
+  @extend %edit-template-link;
+  top: 16.5%; // align bottom edge to bottom of address
+  left: -5px;
+}
+
+.edit-template-link-letter-body {
+  @extend %edit-template-link;
+  top: 33.3%; // aligns to top of subject
+  left: -5px;
+}