new appeal progress pattern

styles/sass/welshgov/_application.scss

@@ -40,6 +40,7 @@ h2,
 h3,
 h4,
 h5,
+.app-step-nav__circle-background,
 a {
     font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
 }
@@ -770,6 +771,82 @@ textarea,
     margin-bottom: 0px;
 }
 
+
+.at-nav {
+    .sectionCompleteTick {
+        display:inline-block;
+        width: 16px;
+        height:16px;
+        background: $darkgrey;
+        border-radius:50%;
+        -ms-transform: rotate(45deg); /* IE 9 */
+        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
+        transform: rotate(45deg);
+        margin-left: -20px;
+        margin-right: 5px;
+    }
+    
+    .sectionCompleteTick:before{
+        content: "";
+        position: absolute;
+        width: 3px;
+        height: 9px;
+        background-color: #fff;
+        left: 8px;
+        top: 3px;
+    }
+    
+    .sectionCompleteTick:after{
+        content: "";
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background-color: #fff;
+        left: 5px;
+        top: 9px;
+    }
+
+
+
+.app-step-nav__step {
+    position: relative;
+    padding-left: 45px;
+    list-style: none;
+}
+*, .govuk-body, .govuk-body-xs, .govuk-body-s, .govuk-body-m, .govuk-footer, .govuk-heading-xl, .govuk-heading-l, .govuk-heading-m, .govuk-heading-s, .govuk-header-l, .govuk-header-m, .govuk-header__link, .govuk-footer__link, .govuk-link, .govuk-button, .govuk-label, .govuk-select, .govuk-radios__item, .govuk-breadcrumbs__link, .govuk-fieldset__legend--s, .govuk-input, .govuk-textarea, .govuk-panel, .govuk-panel__title, .govuk-warning-text__text, .govuk-hint, .app-cookie-banner, .govuk-error-message.govuk-form-group--error, h1, h2, h3, h4, h5, a {
+    font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
+}
+user agent stylesheet
+li {
+    display: list-item;
+    text-align: -webkit-match-parent;
+}
+user agent stylesheet
+ol {
+    list-style-type: decimal;
+}
+.app-step-nav__step--active:last-child:before, .app-step-nav__step--active .app-step-nav__circle--number, .app-step-nav__step--active:after, .app-step-nav__step--active .app-step-nav__help:after 
+{
+    border-color: $lightgrey !important;
+}
+    .app-step-nav__circle--number{
+        border-color: $lightgrey !important;
+    }
+    .app-step-nav__circle-background{
+        color:$lightgrey;
+    }
+    .sectionComplete{
+        .app-step-nav__circle {
+            background-color: $lightgrey;
+        }
+
+        .app-step-nav__circle-background{
+            color:$white;
+            text-shadow: none;
+        }
+    }
+}
+
 .form-inline-label {
     .inlineFieldset {
         display: flex;
@@ -864,6 +941,7 @@ textarea,
     }
 }
 
+
 .progress-save{
     padding: 10px 15px !important;
     font-size: 16px;