Change budget phases design

Co-authored-by: Javi Martín <javim@elretirao.net>

app/assets/stylesheets/budgets/phases.scss

@@ -1,56 +1,187 @@
 .budget-phases {
-  border-left: 3px solid $budget;
-  margin-left: $line-height / 2;
-  padding: $line-height $line-height / 2;
+  background: $light;
+  border-top: 2px solid $border;
+  padding-bottom: $line-height * 2;
 
-  h3,
-  span,
-  p {
-    padding: 0 $line-height / 4;
+  > * {
+    @include grid-column-gutter;
+    @include grid-row;
   }
 
-  h3 {
-    margin-bottom: 0;
+  h2 {
+    font-size: $base-font-size;
+    text-align: center;
   }
 
-  span {
-    color: $text-medium;
+  .phases-list {
+    counter-reset: phases;
+    display: flex;
+    flex-wrap: wrap;
+
+    .phase-name::before {
+      content: counter(phases);
+      counter-increment: phases;
+      display: block;
+      font-size: rem-calc(36);
+      font-weight: bold;
+      margin-bottom: $line-height / 2;
+    }
+  }
+
+  .phase-title {
+    @include tabs-title;
+    margin: $line-height / 6;
+    margin-left: 0;
+    position: relative;
+    text-align: center;
+
+    @supports(clip-path: polygon(0 0, 50% 50%, 0% 100%)) {
+      $triangle-width: 1em;
+      $item-margin: rem-calc(3);
+
+      margin-left: calc(-1 * (#{$triangle-width} - #{$item-margin}));
+      margin-right: 0;
+      transform: translateX(calc(#{$triangle-width} - #{$item-margin}));
+
+      &,
+      a {
+        clip-path: polygon(calc(100% - #{$triangle-width}) 0, 100% 50%, calc(100% - #{$triangle-width}) 100%, 0 100%, #{$triangle-width} 50%, 0 0);
+      }
+
+      &:first-child {
+        &,
+        a {
+          clip-path: polygon(calc(100% - #{$triangle-width}) 0, 100% 50%, calc(100% - #{$triangle-width}) 100%, 0 100%, 0 0);
+        }
+
+        a {
+          border-bottom-left-radius: rem-calc(6);
+          border-top-left-radius: rem-calc(6);
+        }
+      }
+
+      &:last-child {
+        &,
+        a {
+          clip-path: polygon(100% 0, 100% 100%, 0 100%, #{$triangle-width} 50%, 0 0);
+        }
+
+        a {
+          border-bottom-right-radius: rem-calc(6);
+          border-top-right-radius: rem-calc(6);
+        }
+      }
+    }
+
+    a {
+      background: $white;
+      color: $black;
+      height: 100%;
+      padding: $line-height $line-height * 1.5;
+
+      &:hover {
+        background: #e6e6e6;
+        color: $black;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &[aria-selected="true"],
+      &.is-active {
+        background: $dark;
+        color: $white;
+        font-weight: normal;
+      }
+
+      &[aria-selected="true"]::after,
+      &.is-active::after {
+        content: none;
+      }
+    }
+
+    &.current-phase-tab a {
+      background: $brand;
+      color: $white;
+      padding-top: $line-height / 2;
+
+      &:hover {
+        background: $dark;
+      }
+    }
+  }
+
+  .current-phase-timeline {
     display: block;
     font-size: $small-font-size;
+    font-weight: bold;
     margin-bottom: $line-height / 2;
+    text-transform: uppercase;
   }
 
-  .phase {
-    position: relative;
+  .tabs,
+  .tabs-content {
+    background: none;
+    border: 0;
+  }
 
-    &:not(:first-child) {
-      margin-top: $line-height * 1.5;
+  .tabs-panel {
+    padding: 0;
+
+    h3 {
+      font-size: rem-calc(36);
     }
+  }
 
-    &::before {
-      background-color: #fff;
-      border: 4px solid $budget;
-      border-radius: 100%;
-      content: "";
-      height: 16px;
-      left: -22px;
-      position: absolute;
-      top: 6px;
-      width: 16px;
-      z-index: 99;
-    }
+  .tabs-controls {
+    display: flex;
 
-    &.is-active {
-
-      h3 {
-        background: $budget;
-        color: #fff;
-        display: inline-block;
-      }
+    .budget-prev-phase,
+    .budget-next-phase,
+    .budget-prev-phase-disabled,
+    .budget-next-phase-disabled {
+      background: $brand;
+      border-radius: rem-calc(3);
+      color: $white;
+      display: flex;
+      font-size: rem-calc(36);
+      height: 1em * 4 / 3;
+      width: 1em * 4 / 3;
 
       &::before {
-        background-color: $budget;
+        margin: auto;
       }
+
+      span {
+        @include element-invisible;
+      }
+    }
+
+    > :first-child {
+      margin-right: 0.2em;
+    }
+
+    .budget-prev-phase-disabled,
+    .budget-next-phase-disabled {
+      background: none;
+      color: #acb6b6;
+    }
+
+    .budget-prev-phase,
+    .budget-prev-phase-disabled {
+      @include has-fa-icon(angle-left, solid);
+    }
+
+    .budget-next-phase,
+    .budget-next-phase-disabled {
+      @include has-fa-icon(angle-right, solid);
+    }
+  }
+
+  .budget-phase {
+    @include breakpoint(medium) {
+      width: 50%;
     }
   }
 }

app/assets/stylesheets/participation.scss

@@ -1226,6 +1226,10 @@
   }
 }
 
+.current-phase {
+  color: $brand;
+}
+
 .groups-and-headings {
 
   .heading {