Extract placeholder selector for budget header

This way it'll be easier to reuse its main properties.

app/assets/stylesheets/mixins/budgets.scss

@@ -0,0 +1,26 @@
+@import "mixins/buttons";
+@import "mixins/layouts";
+
+%budget-header {
+  @extend %brand-background;
+  @include full-width-background;
+
+  h1 {
+    font-size: rem-calc(60);
+    padding: $line-height * 2 0 $line-height;
+  }
+
+  h1,
+  h2,
+  p,
+  a,
+  .back,
+  .icon-angle-left,
+  .description {
+    color: inherit;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+}

app/assets/stylesheets/mixins/buttons.scss

@@ -1,3 +1,5 @@
+@import "mixins/colors";
+
 @mixin base-button {
   font-size: $base-font-size;
 

app/assets/stylesheets/participation.scss

@@ -1095,8 +1095,8 @@
 // -----------
 
 .budget-header {
-  @extend %brand-background;
+  @extend %budget-header;
-  @include full-width-background;
+
   margin-top: -$line-height;
   min-height: $line-height * 25;
   padding-bottom: $line-height;
@@ -1122,25 +1122,6 @@
     }
   }
 
-  h1 {
-    font-size: rem-calc(60);
-    padding: $line-height * 2 0 $line-height;
-  }
-
-  h1,
-  h2,
-  p,
-  a,
-  .back,
-  .icon-angle-left,
-  .description {
-    color: inherit;
-  }
-
-  a {
-    text-decoration: underline;
-  }
-
   .confirmed {
     font-size: rem-calc(24);
     font-weight: bold;