Simplify HTML class for budget header

There were some issues using `.budget.expanded`, like a link having that
class which would force us to a `:not(.button)` selector or similar,
making the CSS more complex.

app/assets/stylesheets/layout.scss

@@ -2155,7 +2155,7 @@ table {
     }
   }
 
-  + .budget.expanded,
+  + .budget-header,
   + .jumbo {
     margin-top: 0;
   }

app/assets/stylesheets/participation.scss

@@ -1136,51 +1136,48 @@
 // 06. Budgets
 // -----------
 
-.expanded {
+.budget-header {
+  background: $budget;
+  margin-top: -$line-height;
 
-  &.budget {
+  h1,
-    background: $budget;
+  h2,
-    margin-top: -$line-height;
+  p,
+  a,
+  .back,
+  .icon-angle-left,
+  .description {
+    color: #fff;
+  }
 
-    h1,
+  a {
-    h2,
+    text-decoration: underline;
-    p,
+  }
-    a,
+
-    .back,
+  .callout {
-    .icon-angle-left,
+
-    .description {
+    &.primary a {
-      color: #fff;
+      color: $link;
     }
+  }
 
-    a {
+  .button {
-      text-decoration: underline;
+    background: #fff;
-    }
+    color: $budget;
+    text-decoration: none;
+  }
 
-    .callout {
+  .confirmed {
+    font-size: rem-calc(24);
+    font-weight: bold;
+  }
 
-      &.primary a {
+  .info {
-        color: $link;
+    background: #6a2a72;
-      }
-    }
 
-    .button {
+    p {
-      background: #fff;
+      margin-bottom: 0;
-      color: $budget;
+      text-transform: uppercase;
-      text-decoration: none;
-    }
-
-    .confirmed {
-      font-size: rem-calc(24);
-      font-weight: bold;
-    }
-
-    .info {
-      background: #6a2a72;
-
-      p {
-        margin-bottom: 0;
-        text-transform: uppercase;
-      }
     }
   }
 }

app/views/budgets/ballot/_ballot.html.erb

@@ -1,4 +1,4 @@
-<div class="expanded budget no-margin-top padding">
+<div class="budget-header no-margin-top padding">
   <div class="row">
     <%= back_link_to @ballot_referer %>
 

app/views/budgets/groups/show.html.erb

@@ -2,7 +2,7 @@
   <%= render "shared/canonical", href: budget_group_url(filter: @current_filter) %>
 <% end %>
 
-<div class="expanded budget no-margin-top">
+<div class="budget-header no-margin-top">
   <div class="row">
     <div class="small-12 medium-9 column padding">
       <%= back_link_to budgets_path %>

app/views/budgets/index.html.erb

@@ -7,7 +7,7 @@
 <% end %>
 
 <% if current_budget.present? %>
-  <div id="budget_heading" class="expanded budget">
+  <div class="budget-header">
     <div class="row" data-equalizer data-equalizer-on="medium">
       <div class="small-12 medium-9 column padding" data-equalizer-watch>
 
@@ -121,7 +121,7 @@
     <% end %>
   </div>
 <% else %>
-  <div class="expanded budget no-margin-top margin-bottom">
+  <div class="budget-header no-margin-top margin-bottom">
     <div class="row">
       <div class="small-12 medium-9 column padding">
           <h1><%= t("budgets.index.title") %></h1>

app/views/budgets/show.html.erb

@@ -2,7 +2,7 @@
   <%= render "shared/canonical", href: budget_url(@budget, filter: @current_filter) %>
 <% end %>
 
-<div class="expanded budget no-margin-top">
+<div class="budget-header no-margin-top">
   <div class="row" data-equalizer data-equalizer-on="medium">
     <div class="small-12 medium-9 column padding" data-equalizer-watch>
       <%= back_link_to budgets_path %>

spec/system/budgets/budgets_spec.rb

@@ -38,7 +38,7 @@ describe "Budgets" do
 
       visit budgets_path
 
-      within("#budget_heading") do
+      within(".budget-header") do
         expect(page).to have_content(budget.name)
         expect(page).to have_content(budget.description)
         expect(page).to have_link("Help with participatory budgets")
@@ -51,7 +51,7 @@ describe "Budgets" do
       budget.update!(phase: "publishing_prices")
       visit budgets_path
 
-      within("#budget_heading") do
+      within(".budget-header") do
         expect(page).to have_content("Publishing projects prices")
       end