Rework css to use class based selectors

alphagov · Dec 4, 2018 · 3fdc23e · 3fdc23e
1 parent 39ce984
commit 3fdc23e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/app/assets/stylesheets/helpers/_header.scss b/app/assets/stylesheets/helpers/_header.scss
@@ -347,11 +347,11 @@
   display: none;
 }
 
-#global-bar {
-  margin-bottom: 15px;
-  padding: 15px 0;
+.global-bar {
   background-color: $light-blue-25;
   display: none;
+  margin-bottom: 15px;
+  padding: 15px 0;
 
   .show-global-bar & {
     display: block;
@@ -372,14 +372,15 @@
   }
 
   .global-bar-message {
-    margin-top: 0;
     margin-bottom: 0;
+    margin-top: 0;
 
     @include media(tablet) {
       max-width: 66.67%;
     }
 
-    strong {
+    .global-bar-title {
+      display: block;
       font-weight: 700;
       margin-right: 10px;
     }

diff --git a/app/views/notifications/_global_bar.html.erb b/app/views/notifications/_global_bar.html.erb
@@ -3,7 +3,7 @@
   title = "The title"
   information = "Some information about something"
   link_href = "https://www.gov.uk/"
-  link_text = "More information"
+  link_text = %Q(More information<span class="visually-hidden"> about this</span>).html_safe
 -%>
 <% if show_global_bar %>
   <% content_for :head do %>
@@ -12,10 +12,10 @@
     <!--<![endif]-->
   <% end %>
   <!--[if gt IE 7]><!-->
-  <div id="global-bar" data-module="global-bar" class="dont-print">
+  <div id="global-bar" class="global-bar" data-module="global-bar" class="dont-print">
     <div class="global-bar-message-container">
     <p class="global-bar-message">
-      <strong><%= title %></strong>
+      <span class="global-bar-title"><%= title %></span>
       <%= information %>
       <%= link_to(link_text, link_href, rel: "external noreferrer") %>
     </p>