Groups and headings CRUD from budget view

Before, users needed to navigate to the list of groups in order to
add, edit or delete a group.

Also, they need to navigate to the list of groups first, and then to
the list of headings for that group in order to add, edit or delete a
heading.

Now, it's possible to do all these actions for any group or heading
from the participatory budget view to bring simplicity and to reduce
the number of clicks from a user perspective.

Co-Authored-By: Javi Martín <javim@elretirao.net>

app/assets/stylesheets/admin/budgets/groups_and_headings.scss

@@ -0,0 +1,92 @@
+.admin .groups-and-headings {
+  $gap: rem-calc(map-get($grid-column-gutter, medium));
+
+  > section + section {
+    margin-top: $line-height * 1.5;
+  }
+
+  > section {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  h4 {
+    margin-#{$global-right}: $gap;
+  }
+
+  dl,
+  .callout {
+    width: 100%;
+  }
+
+  dt,
+  dd {
+    display: inline;
+  }
+
+  dt {
+    font-weight: normal;
+  }
+
+  dd {
+    font-weight: bold;
+  }
+
+  th:last-child {
+    text-align: $global-right;
+  }
+
+  .table-actions {
+    justify-content: flex-end;
+  }
+
+  .groups-actions {
+    @include flex-with-gap($gap);
+    align-items: flex-start;
+    flex: 1;
+    margin-bottom: $line-height / 2;
+
+    .edit-link,
+    .destroy-link {
+      @include icon-on-top;
+    }
+
+    .edit-link {
+      @include has-fa-icon(edit, regular);
+    }
+
+    .destroy-link {
+      @include has-fa-icon(trash-alt, regular);
+      color: darken($alert-color, 5%);
+    }
+
+    .new-link {
+      @include hollow-button;
+      flex-shrink: 0;
+    }
+
+    > :nth-last-child(2) {
+      margin-#{$global-right}: $gap;
+    }
+
+    > :last-child {
+      margin-#{$global-left}: auto;
+    }
+
+    button {
+      cursor: pointer;
+    }
+  }
+
+  .new-link {
+    @include has-fa-icon(plus-square, solid);
+
+    &::before {
+      margin-#{$global-right}: $font-icon-margin;
+    }
+  }
+
+  > .new-link {
+    @include regular-button;
+  }
+}

app/assets/stylesheets/admin/budgets/show.scss

@@ -9,4 +9,8 @@
       }
     }
   }
+
+  h4 {
+    @include header-font-size(h3);
+  }
 }