Adds styles for budgets

app/assets/stylesheets/participation.scss

@@ -1041,3 +1041,221 @@
   }
 }
 
+.jumbo-budget {
+  background: $budget;
+  border-bottom: 1px solid $budget;
+
+  &.budget-heading {
+    min-height: $line-height*10;
+  }
+
+  h1 {
+    margin-bottom: 0;
+  }
+
+  h1, h2, .back, .icon-angle-left, p, a {
+    color: white;
+  }
+
+  &.welcome {
+    background: $budget image-url('spending_proposals_bg.jpg');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    .spending-proposal-timeline {
+      padding-top: $line-height;
+
+      ul li {
+        margin-right: $line-height;
+        padding-top: $line-height/2;
+
+        .icon-calendar {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.progress-votes {
+  position: relative;
+
+  .progress {
+    background: #212033;
+    clear: both;
+  }
+
+  .progress-meter {
+    background: #fdcb10;
+    border-radius: 0;
+    -webkit-transition: width 2s;
+    transition: width 2s;
+  }
+
+  .spent-amount-progress,
+  .spent-amount-meter {
+    background: none !important;
+  }
+
+  .spent-amount-text {
+    color: white;
+    font-size: $base-font-size;
+    font-weight: normal;
+    position: absolute;
+    right: 0;
+    text-align: right;
+    top: 16px;
+    width: 100%;
+
+    &:before {
+      color: #a5a1ff;
+      content: "\57";
+      font-family: 'icons';
+      font-size: $small-font-size;
+      position: absolute;
+      right: -6px;
+      top: -17px;
+    }
+  }
+
+  .total-amount {
+    color: white;
+    font-size: rem-calc(18);
+    font-weight: bold;
+    float: right;
+  }
+
+  .amount-available {
+    display: block;
+    text-align: right;
+
+    span {
+      font-size: rem-calc(24);
+      font-weight: bold;
+    }
+  }
+}
+
+.big-number {
+  color: $budget;
+  font-size: rem-calc(60);
+  line-height: rem-calc(120);
+
+  @include breakpoint(large) {
+    font-size: rem-calc(90);
+    line-height: rem-calc(240);
+  }
+}
+
+.ballot {
+
+  h2, h3 {
+    font-weight: normal;
+
+    span {
+      color: $budget;
+      font-weight: bold;
+    }
+  }
+
+  h3.subtitle {
+    border-bottom: 3px solid $budget;
+
+    span {
+      font-size: $base-font-size;
+      font-weight: normal;
+    }
+  }
+
+  .amount-spent {
+    background: $success-bg;
+    color: $success-color;
+    font-weight: normal;
+    padding: $line-height/2;
+
+    span {
+      font-size: rem-calc(24);
+      font-weight: bold;
+    }
+  }
+}
+
+ul.ballot-list {
+  list-style: none;
+  margin-left: 0;
+
+  li {
+    background: #f9f9f9;
+    line-height: $line-height;
+    margin-bottom: $line-height/4;
+    padding: $line-height/2;
+    position: relative;
+
+    a {
+      color: $text;
+    }
+
+    span {
+      color: #9f9f9f;
+      display: block;
+      font-style: italic;
+    }
+
+    .remove-investment-project {
+      display: block;
+      height: 0;
+
+      .icon-x {
+        color: #9f9f9f;
+        font-size: rem-calc(24);
+        line-height: $line-height/2;
+        position: absolute;
+        right: 6px;
+        text-decoration: none;
+        top: 6px;
+
+        @include breakpoint(medium) {
+          font-size: $base-font-size;
+        }
+      }
+    }
+
+    &:hover {
+      background: $budget;
+      color: white;
+
+      a, span {
+        color: white;
+        outline: 0;
+        text-decoration: none;
+      }
+
+      .remove-investment-project .icon-x {
+        color: white;
+      }
+    }
+  }
+}
+
+.select-district .active a {
+  background: #f9f9f9;
+  border-radius: rem-calc(3);
+  color: $budget;
+  font-weight: bold;
+  padding: $line-height/4;
+
+  &:after {
+    content: "\56";
+    font-family: "icons";
+    font-size: $small-font-size;
+    font-weight: normal;
+    line-height: $line-height;
+    padding-left: rem-calc(3);
+    vertical-align: baseline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

app/views/budgets/investments/_header.html.erb

@@ -1,6 +1,6 @@
 <% if @filter_heading_name.present? %>
   <section class="no-margin-top margin-bottom">
-    <div class="expanded jumbo-investment-project investment-project-geozone padding">
+    <div class="expanded jumbo-budget budget-heading padding">
 
       <div class="row">
         <div class="small-12 column">
@@ -41,7 +41,7 @@
     </div>
   </section>
 <% else %>
-  <div class="expanded jumbo-investment-project padding no-margin-top margin-bottom">
+  <div class="expanded jumbo-budget padding no-margin-top margin-bottom">
     <div class="row">
       <div class="small-12 column">
         <%= link_to budget_path(@budget), class: "back" do %>

app/views/budgets/show.html.erb

@@ -1,7 +1,11 @@
 <div class="expanded budget no-margin-top padding">
   <div class="row">
     <div class="small-12 medium-9 column">
-      <%= render 'shared/back_link' %>
+      <%= link_to budgets_path do %>
+        <span class="icon-angle-left"></span>
+        <%= t('shared.back') %>
+      <% end %>
+
       <h1><%= @budget.name %></h1>
       <p><%= @budget.description %></p>
     </div>