Update emergency banner link styling.

The link will overlap the text if the last line of the text is too long. This causes the link to display as it does on mobile, which is left aligned and block-level. It also changes to a semantic CSS class name. Relevant Trello ticket: https://trello.com/c/cm6VO0q4/341-emergency-publishing-frontend-bugs-medium A follow-up PR will be submitted to alphagov/fabric-scripts to update the class name.
alphagov · Mar 31, 2016 · cda1ec4 · cda1ec4
1 parent c2903a4
commit cda1ec4
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 6 deletions.
diff --git a/app/assets/stylesheets/helpers/_emergency-publishing-notifications.scss b/app/assets/stylesheets/helpers/_emergency-publishing-notifications.scss
@@ -32,14 +32,11 @@
   a {
     color: #fff;
 
-    &.right {
+    &.more-information {
       display: block;
-      padding: 0;
 
       @include media(tablet) {
-        padding: 0 30px 0 0;
-        margin-top: (25 / 19) * -1em;
-        text-align: right;
+        padding: 0 30px;
       }
     }
   }

diff --git a/app/views/notifications/banner.erb.example b/app/views/notifications/banner.erb.example
@@ -10,4 +10,4 @@ notification that you would like to show.
 <p>Your message goes here<br />
 This is the second line of your message!</p>
 
-<a href="#" class="right">More information</a>
+<a href="#" class="more-information">More information</a>