Changes styles to tabs on processes key dates

app/assets/stylesheets/legislation_process.scss

@@ -44,68 +44,98 @@
 // 02. Legislation process navigation
 // ----------------------------------
 
-.legislation-process-categories {
-  position: relative;
+.legislation-process-list {
+  border-bottom: 1px solid $border;
+}
 
-  .legislation-process-list {
-    border-bottom: 1px solid $medium-gray;
-    margin: 0 rem-calc(16) rem-calc(16);
+.key-dates {
+  list-style-type: none;
+  margin: 0 rem-calc(-10);
 
-    ul {
-      list-style: none;
-      margin: 0 auto;
+  @include breakpoint(medium) {
+    margin: 0;
+  }
+
+  li {
+    border: 1px solid $border;
+    display: block;
+    margin: rem-calc(-1) 0;
+    position: relative;
+
+    @include breakpoint(medium) {
+      background: #fafafa;
+      display: inline-block;
+      border-bottom: 0;
+      border-top-left-radius: rem-calc(6);
+      border-top-right-radius: rem-calc(6);
       margin-bottom: 0;
-      padding-left: 0;
+      margin-right: $line-height / 4;
+      margin-top: 0;
+
+      &:hover:not(.is-active) {
+        background: $highlight;
+      }
+
+      &::after {
+        content: '' !important;
+      }
     }
 
-    li {
-      border-bottom: 2px solid transparent;
-      cursor: pointer;
-      display: inline-block;
-      margin-bottom: $line-height;
-      margin-right: $line-height;
-      transition: all 0.4s;
-
-      @include breakpoint(medium) {
-        margin-bottom: 0;
-      }
-
-      &:hover,
-      &:active,
-      &:focus {
-        border-bottom: 2px solid $brand;
-      }
-
-      a,
-      h4 {
-        display: block;
-        color: #6d6d6d;
-        margin-bottom: 0;
-      }
+    &::after {
+      content: '\63';
+      font-family: "icons" !important;
+      font-size: rem-calc(24);
+      pointer-events: none;
+      position: absolute;
+      right: 12px;
+      top: 12px;
     }
 
     a {
-      &:hover,
-      &:active {
+      display: block;
+      padding: $line-height / 4 $line-height / 2;
+
+      @include breakpoint(medium) {
+        display: inline-block;
+      }
+
+      &:hover {
         text-decoration: none;
       }
 
-      p {
+      h4 {
         margin-bottom: 0;
+      }
+    }
+  }
 
-        @include breakpoint(medium) {
-          margin-bottom: rem-calc(16);
-        }
+  span {
+    color: $text-medium;
+    font-size: $small-font-size;
+  }
+
+  .is-active {
+    background: $highlight;
+    position: relative;
+
+    @include breakpoint(medium) {
+      background: none;
+      border: 1px solid $border;
+      border-bottom: 0;
+
+      &::after {
+        border-bottom: 1px solid #fefefe;
+        bottom: -1px;
+        content: '' !important;
+        left: 0;
+        position: absolute;
+        width: 100%;
       }
     }
 
-    .is-active {
-      border-bottom: 2px solid $brand;
-
-      a,
-      h4 {
-        color: $brand;
-      }
+    &::after {
+      content: '\61';
+      color: $link;
     }
   }
 }