From 158b9d58e6d8c41d2cff2baea662f01d5fea40e4 Mon Sep 17 00:00:00 2001
From: Evgeny Arshinov <earshinov@gmail.com>
Date: Mon, 3 Sep 2018 15:58:59 +0300
Subject: [PATCH 1/3] Clickable step indicators + HTML code rework

Follows the path made in the layout prototype:
https://github.com/earshinov/angular-archwizard-layout-proto/
---
 ...d-navigation-bar.component.horizontal.less | 262 +++++++++--------
 .../wizard-navigation-bar.component.html      |  15 +-
 ...ard-navigation-bar.component.vertical.less | 269 ++++++++++--------
 3 files changed, 298 insertions(+), 248 deletions(-)

diff --git a/src/components/wizard-navigation-bar.component.horizontal.less b/src/components/wizard-navigation-bar.component.horizontal.less
index aa3e9ae9..5a899887 100644
--- a/src/components/wizard-navigation-bar.component.horizontal.less
+++ b/src/components/wizard-navigation-bar.component.horizontal.less
@@ -46,33 +46,62 @@ aw-wizard-navigation-bar.horizontal {
     left: calc(50% ~'-' @dot-width / 2);
     width: @dot-width;
     height: @dot-height;
-    content: '';
     text-align: center;
     vertical-align: middle;
     line-height: @dot-height - 2 * @dot-border-width;
     transition: 0.25s;
     border-radius: 100%;
   }
+  .state-circle-hover(@dot-width, @dot-height, @dot-border-width) {
+  }
+  .state-circle-nohover(@dot-width, @dot-height, @dot-border-width) {
+  }
 
   .state-circle-with-border(@dot-border-width, @circle-color) {
     border-width: @dot-border-width;
     border-style: solid;
     border-color: @circle-color;
   }
+  .state-circle-with-border-hover(@dot-border-width, @circle-color) {
+    border-color: darken(@circle-color, 10%);
+  }
+  .state-circle-with-border-nohover(@dot-border-width, @circle-color) {
+    border-color: @circle-color;
+  }
 
   .state-circle-with-border-and-content(@dot-border-width, @circle-color) {
     .state-circle-with-border(@dot-border-width, @circle-color);
     color: @circle-color;
   }
+  .state-circle-with-border-and-content-hover(@dot-border-width, @circle-color) {
+    .state-circle-with-border-hover(@dot-border-width, @circle-color);
+    color: darken(@circle-color, 10%);
+  }
+  .state-circle-with-border-and-content-nohover(@dot-border-width, @circle-color) {
+    .state-circle-with-border-nohover(@dot-border-width, @circle-color);
+    color: @circle-color;
+  }
 
   .state-circle-with-background(@circle-color) {
     background-color: @circle-color;
   }
+  .state-circle-with-background-hover(@circle-color) {
+    background-color: darken(@circle-color, 5%);
+  }
+  .state-circle-with-background-nohover(@circle-color) {
+    background-color: @circle-color;
+  }
 
   .state-circle-with-background-and-content(@circle-color) {
     .state-circle-with-background(@circle-color);
     color: black;
   }
+  .state-circle-with-background-and-content-hover(@circle-color) {
+    .state-circle-with-background-hover(@circle-color);
+  }
+  .state-circle-with-background-and-content-nohover(@circle-color) {
+    .state-circle-with-background-nohover(@circle-color);
+  }
 
   &.small {
     ul.steps-indicator {
@@ -83,32 +112,29 @@ aw-wizard-navigation-bar.horizontal {
           .line(@small-dot-width, @small-dot-height, @wz-color-default);
         }
 
-        &:after {
+        .step-indicator {
           .state-circle(@small-dot-width, @small-dot-height, 0);
           .state-circle-with-background(@wz-color-default);
         }
-      }
 
-      // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover {
-        color: @wz-color-current;
+        a:hover .step-indicator {
+          .state-circle-hover(@small-dot-width, @small-dot-height, 0);
+          .state-circle-with-background-hover(@wz-color-default);
+        }
       }
 
-      li.current:after {
-        .state-circle-with-background(@wz-color-current);
-      }
+      li.current .step-indicator { .state-circle-with-background(@wz-color-current); }
+      li.done .step-indicator { .state-circle-with-background(@wz-color-done); }
+      li.optional .step-indicator { .state-circle-with-background(@wz-color-optional); }
+      li.editing .step-indicator { .state-circle-with-background(@wz-color-editing); }
 
-      li.done:after {
-        .state-circle-with-background(@wz-color-done);
-      }
+      li.current a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-current); }
+      li.done a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-done); }
+      li.optional a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-optional); }
+      li.editing a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-editing); }
 
-      li.optional:after {
-        .state-circle-with-background(@wz-color-optional);
-      }
-
-      li.editing:after {
-        .state-circle-with-background(@wz-color-editing);
-      }
+      // default steps shouldn't change when hovered, because they aren't clickable
+      li.default a:hover .step-indicator { .state-circle-with-background-nohover(@wz-color-current); }
     }
   }
 
@@ -121,32 +147,29 @@ aw-wizard-navigation-bar.horizontal {
           .line(@big-dot-width, @big-dot-height, @wz-color-default);
         }
 
-        &:after {
+        .step-indicator {
           .state-circle(@big-dot-width, @big-dot-height, 0);
           .state-circle-with-background(@wz-color-default);
         }
-      }
-
-      // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover {
-        color: @wz-color-current;
-      }
 
-      li.current:after {
-        .state-circle-with-background(@wz-color-current);
+        a:hover .step-indicator {
+          .state-circle-hover(@big-dot-width, @big-dot-height, 0);
+          .state-circle-with-background-hover(@wz-color-default);
+        }
       }
 
-      li.done:after {
-        .state-circle-with-background(@wz-color-done);
-      }
+      li.current .step-indicator { .state-circle-with-background(@wz-color-current); }
+      li.done .step-indicator { .state-circle-with-background(@wz-color-done); }
+      li.optional .step-indicator { .state-circle-with-background(@wz-color-optional); }
+      li.editing .step-indicator { .state-circle-with-background(@wz-color-editing); }
 
-      li.optional:after {
-        .state-circle-with-background(@wz-color-optional);
-      }
+      li.current a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-current); }
+      li.done a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-done); }
+      li.optional a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-optional); }
+      li.editing a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-editing); }
 
-      li.editing:after {
-        .state-circle-with-background(@wz-color-editing);
-      }
+      // default steps shouldn't change when hovered, because they aren't clickable
+      li.default a:hover .step-indicator { .state-circle-with-background-nohover(@wz-color-current); }
     }
   }
 
@@ -159,32 +182,29 @@ aw-wizard-navigation-bar.horizontal {
           .line(@big-dot-width, @big-dot-height, @wz-color-default);
         }
 
-        &:after {
+        .step-indicator {
           .state-circle(@big-dot-width, @big-dot-height, @dot-border-width);
           .state-circle-with-border(@dot-border-width, @wz-color-default);
         }
-      }
 
-      // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover {
-        color: @wz-color-current;
+        a:hover .step-indicator {
+          .state-circle-hover(@big-dot-width, @big-dot-height, @dot-border-width);
+          .state-circle-with-border-hover(@dot-border-width, @wz-color-default);
+        }
       }
 
-      li.current:after {
-        .state-circle-with-border(@dot-border-width, @wz-color-current);
-      }
+      li.current .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-current); }
+      li.done .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-done); }
+      li.optional .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-optional); }
+      li.editing .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-editing); }
 
-      li.done:after {
-        .state-circle-with-border(@dot-border-width, @wz-color-done);
-      }
+      li.current a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-current); }
+      li.done a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-done); }
+      li.optional a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-optional); }
+      li.editing a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-editing); }
 
-      li.optional:after {
-        .state-circle-with-border(@dot-border-width, @wz-color-optional);
-      }
-
-      li.editing:after {
-        .state-circle-with-border(@dot-border-width, @wz-color-editing);
-      }
+      // default steps shouldn't change when hovered, because they aren't clickable
+      li.default a:hover .step-indicator { .state-circle-with-border-nohover(@dot-border-width, @wz-color-current); }
     }
   }
 
@@ -197,34 +217,33 @@ aw-wizard-navigation-bar.horizontal {
           .line(@big-dot-width, @big-dot-height, @wz-color-default);
         }
 
-        &:after {
+        .step-indicator {
           .state-circle(@big-dot-width, @big-dot-height, 0);
           .state-circle-with-background-and-content(@wz-color-default);
 
-          content: attr(step-symbol);
+          &:before {
+            content: attr(step-symbol);
+          }
         }
-      }
 
-      // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover {
-        color: @wz-color-current;
-      }
-
-      li.current:after {
-        .state-circle-with-background-and-content(@wz-color-current);
+        a:hover .step-indicator {
+          .state-circle-hover(@big-dot-width, @big-dot-height, 0);
+          .state-circle-with-background-and-content-hover(@wz-color-default);
+        }
       }
 
-      li.done:after {
-        .state-circle-with-background-and-content(@wz-color-done);
-      }
+      li.current .step-indicator { .state-circle-with-background-and-content(@wz-color-current); }
+      li.done .step-indicator { .state-circle-with-background-and-content(@wz-color-done); }
+      li.optional .step-indicator { .state-circle-with-background-and-content(@wz-color-optional); }
+      li.editing .step-indicator { .state-circle-with-background-and-content(@wz-color-editing); }
 
-      li.optional:after {
-        .state-circle-with-background-and-content(@wz-color-optional);
-      }
+      li.current a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-current); }
+      li.done a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-done); }
+      li.optional a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-optional); }
+      li.editing a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-editing); }
 
-      li.editing:after {
-        .state-circle-with-background-and-content(@wz-color-editing);
-      }
+      // default steps shouldn't change when hovered, because they aren't clickable
+      li.default a:hover .step-indicator { .state-circle-with-background-and-content-nohover(@wz-color-current); }
     }
   }
 
@@ -237,34 +256,33 @@ aw-wizard-navigation-bar.horizontal {
           .line(@big-dot-width, @big-dot-height, @wz-color-default);
         }
 
-        &:after {
+        .step-indicator {
           .state-circle(@big-dot-width, @big-dot-height, @dot-border-width);
           .state-circle-with-border-and-content(@dot-border-width, @wz-color-default);
 
-          content: attr(step-symbol);
+          &:before {
+            content: attr(step-symbol);
+          }
         }
-      }
-
-      // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover {
-        color: @wz-color-current;
-      }
 
-      li.current:after {
-        .state-circle-with-border-and-content(@dot-border-width, @wz-color-current);
+        a:hover .step-indicator {
+          .state-circle-hover(@big-dot-width, @big-dot-height, @dot-border-width);
+          .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-default);
+        }
       }
 
-      li.done:after {
-        .state-circle-with-border-and-content(@dot-border-width, @wz-color-done);
-      }
+      li.current .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-current); }
+      li.done .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-done); }
+      li.optional .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-optional); }
+      li.editing .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-editing); }
 
-      li.optional:after {
-        .state-circle-with-border-and-content(@dot-border-width, @wz-color-optional);
-      }
+      li.current a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-current); }
+      li.done a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-done); }
+      li.optional a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-optional); }
+      li.editing a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-editing); }
 
-      li.editing:after {
-        .state-circle-with-border-and-content(@dot-border-width, @wz-color-editing);
-      }
+      // default steps shouldn't change when hovered, because they aren't clickable
+      li.default a:hover .step-indicator { .state-circle-with-border-and-content-nohover(@dot-border-width, @wz-color-current); }
     }
   }
 
@@ -273,9 +291,6 @@ aw-wizard-navigation-bar.horizontal {
     flex-direction: row;
     justify-content: center;
 
-    right: 0;
-    bottom: 0;
-    left: 0;
     margin: 0;
     width: 100%;
     list-style: none;
@@ -337,29 +352,41 @@ aw-wizard-navigation-bar.horizontal {
     li {
       position: relative;
       margin: 0;
-      padding: @text-padding-bottom 0 0 0;
+      padding: 0;
       pointer-events: none;
+      text-align: center;
 
-      div {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        a {
-          color: @wz-color-current;
-          line-height: @text-height;
-          font-size: @text-height;
-          text-decoration: none;
-          text-transform: uppercase;
-          text-align: center;
-          font-weight: bold;
-          transition: 0.25s;
-          cursor: pointer;
-
-          &:hover {
-            color: darken(@wz-color-current, 20%);
-          }
-        }
+      a {
+        cursor: pointer;
+      }
+
+      .label {
+        display: inline-block;
+        padding-top: @text-padding-bottom;
+        color: @wz-color-current;
+        line-height: @text-height;
+        font-size: @text-height;
+        text-decoration: none;
+        text-transform: uppercase;
+        text-align: center;
+        font-weight: bold;
+        transition: 0.25s;
+      }
+    }
+
+    li a:hover .label {
+      color: darken(@wz-color-current, 20%);
+    }
+
+    // default steps shouldn't change when hovered, because they aren't clickable
+    li.default {
+
+      a {
+        cursor: auto;
+      }
+
+      .label {
+        color: @wz-color-current;
       }
     }
 
@@ -368,4 +395,3 @@ aw-wizard-navigation-bar.horizontal {
     }
   }
 }
-
diff --git a/src/components/wizard-navigation-bar.component.html b/src/components/wizard-navigation-bar.component.html
index c78422ce..3b716416 100644
--- a/src/components/wizard-navigation-bar.component.html
+++ b/src/components/wizard-navigation-bar.component.html
@@ -1,9 +1,5 @@
 <ul class="steps-indicator steps-{{numberOfWizardSteps}}">
   <li *ngFor="let step of wizardSteps"
-      [attr.step-symbol]="step.navigationSymbol.symbol"
-      [ngStyle]="{
-        'font-family': step.navigationSymbol.fontFamily
-      }"
       [ngClass]="{
         default: isDefault(step),
         current: isCurrent(step),
@@ -12,11 +8,14 @@
         optional: isOptional(step),
         navigable: isNavigable(step)
   }">
-    <div>
-      <a [awGoToStep]="step">
+    <a [awGoToStep]="step">
+      <div class="label">
         <ng-container *ngIf="step.stepTitleTemplate" [ngTemplateOutlet]="step.stepTitleTemplate.templateRef"></ng-container>
         <ng-container *ngIf="!step.stepTitleTemplate">{{step.stepTitle}}</ng-container>
-      </a>
-    </div>
+      </div>
+      <div class="step-indicator"
+        [attr.step-symbol]="step.navigationSymbol.symbol"
+        [ngStyle]="{ 'font-family': step.navigationSymbol.fontFamily }"></div>
+    </a>
   </li>
 </ul>
diff --git a/src/components/wizard-navigation-bar.component.vertical.less b/src/components/wizard-navigation-bar.component.vertical.less
index ebc8d169..f951de02 100644
--- a/src/components/wizard-navigation-bar.component.vertical.less
+++ b/src/components/wizard-navigation-bar.component.vertical.less
@@ -54,7 +54,6 @@ aw-wizard-navigation-bar.vertical {
     left: -(@dot-baseline-distance + @dot-width);
     width: @dot-width;
     height: @dot-height;
-    content: '';
     text-align: center;
     vertical-align: middle;
     line-height: @dot-height - 2 * @dot-border-width;
@@ -62,25 +61,56 @@ aw-wizard-navigation-bar.vertical {
     border-radius: 100%;
   }
 
+  .state-circle-hover(@dot-width, @dot-height, @dot-border-width) {
+  }
+  .state-circle-nohover(@dot-width, @dot-height, @dot-border-width) {
+  }
+
   .state-circle-with-border(@dot-border-width, @circle-color) {
     border-width: @dot-border-width;
     border-style: solid;
     border-color: @circle-color;
   }
+  .state-circle-with-border-hover(@dot-border-width, @circle-color) {
+    border-color: darken(@circle-color, 10%);
+  }
+  .state-circle-with-border-nohover(@dot-border-width, @circle-color) {
+    border-color: @circle-color;
+  }
 
   .state-circle-with-border-and-content(@dot-border-width, @circle-color) {
     .state-circle-with-border(@dot-border-width, @circle-color);
     color: @circle-color;
   }
+  .state-circle-with-border-and-content-hover(@dot-border-width, @circle-color) {
+    .state-circle-with-border-hover(@dot-border-width, @circle-color);
+    color: darken(@circle-color, 10%);
+  }
+  .state-circle-with-border-and-content-nohover(@dot-border-width, @circle-color) {
+    .state-circle-with-border-nohover(@dot-border-width, @circle-color);
+    color: @circle-color;
+  }
 
   .state-circle-with-background(@circle-color) {
     background-color: @circle-color;
   }
+  .state-circle-with-background-hover(@circle-color) {
+    background-color: darken(@circle-color, 5%);
+  }
+  .state-circle-with-background-nohover(@circle-color) {
+    background-color: @circle-color;
+  }
 
   .state-circle-with-background-and-content(@circle-color) {
     .state-circle-with-background(@circle-color);
     color: black;
   }
+  .state-circle-with-background-and-content-hover(@circle-color) {
+    .state-circle-with-background-hover(@circle-color);
+  }
+  .state-circle-with-background-and-content-nohover(@circle-color) {
+    .state-circle-with-background-nohover(@circle-color);
+  }
 
   &.small {
     ul.steps-indicator {
@@ -91,36 +121,33 @@ aw-wizard-navigation-bar.vertical {
           .line(@small-dot-width, @small-dot-height, @wz-color-default);
         }
 
-        &:after {
+        .step-indicator {
           .state-circle(@small-dot-width, @small-dot-height, 0);
           .state-circle-with-background(@wz-color-default);
         }
 
+        a:hover .step-indicator {
+          .state-circle-hover(@small-dot-width, @small-dot-height, 0);
+          .state-circle-with-background-hover(@wz-color-default);
+        }
+
         div {
           min-height: @small-dot-height;
         }
       }
 
-      // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover {
-        color: @wz-color-current;
-      }
-
-      li.current:after {
-        .state-circle-with-background(@wz-color-current);
-      }
+      li.current .step-indicator { .state-circle-with-background(@wz-color-current); }
+      li.done .step-indicator { .state-circle-with-background(@wz-color-done); }
+      li.optional .step-indicator { .state-circle-with-background(@wz-color-optional); }
+      li.editing .step-indicator { .state-circle-with-background(@wz-color-editing); }
 
-      li.done:after {
-        .state-circle-with-background(@wz-color-done);
-      }
+      li.current a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-current); }
+      li.done a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-done); }
+      li.optional a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-optional); }
+      li.editing a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-editing); }
 
-      li.optional:after {
-        .state-circle-with-background(@wz-color-optional);
-      }
-
-      li.editing:after {
-        .state-circle-with-background(@wz-color-editing);
-      }
+      // default steps shouldn't change when hovered, because they aren't clickable
+      li.default a:hover .step-indicator { .state-circle-with-background-nohover(@wz-color-current); }
     }
   }
 
@@ -133,36 +160,33 @@ aw-wizard-navigation-bar.vertical {
           .line(@big-dot-width, @big-dot-height, @wz-color-default);
         }
 
-        &:after {
+        .step-indicator {
           .state-circle(@big-dot-width, @big-dot-height, 0);
           .state-circle-with-background(@wz-color-default);
         }
 
+        a:hover .step-indicator {
+          .state-circle-hover(@big-dot-width, @big-dot-height, 0);
+          .state-circle-with-background-hover(@wz-color-default);
+        }
+
         div {
           min-height: @big-dot-height;
         }
       }
 
-      // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover {
-        color: @wz-color-current;
-      }
-
-      li.current:after {
-        .state-circle-with-background(@wz-color-current);
-      }
+      li.current .step-indicator { .state-circle-with-background(@wz-color-current); }
+      li.done .step-indicator { .state-circle-with-background(@wz-color-done); }
+      li.optional .step-indicator { .state-circle-with-background(@wz-color-optional); }
+      li.editing .step-indicator { .state-circle-with-background(@wz-color-editing); }
 
-      li.done:after {
-        .state-circle-with-background(@wz-color-done);
-      }
+      li.current a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-current); }
+      li.done a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-done); }
+      li.optional a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-optional); }
+      li.editing a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-editing); }
 
-      li.optional:after {
-        .state-circle-with-background(@wz-color-optional);
-      }
-
-      li.editing:after {
-        .state-circle-with-background(@wz-color-editing);
-      }
+      // default steps shouldn't change when hovered, because they aren't clickable
+      li.default a:hover .step-indicator { .state-circle-with-background-nohover(@wz-color-current); }
     }
   }
 
@@ -175,36 +199,33 @@ aw-wizard-navigation-bar.vertical {
           .line(@big-dot-width, @big-dot-height, @wz-color-default);
         }
 
-        &:after {
+        .step-indicator {
           .state-circle(@big-dot-width, @big-dot-height, @dot-border-width);
           .state-circle-with-border(@dot-border-width, @wz-color-default);
         }
 
+        a:hover .step-indicator {
+          .state-circle-hover(@big-dot-width, @big-dot-height, @dot-border-width);
+          .state-circle-with-border-hover(@dot-border-width, @wz-color-default);
+        }
+
         div {
           min-height: @big-dot-height + 2 * @dot-border-width;
         }
       }
 
-      // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover {
-        color: @wz-color-current;
-      }
-
-      li.current:after {
-        .state-circle-with-border(@dot-border-width, @wz-color-current);
-      }
-
-      li.done:after {
-        .state-circle-with-border(@dot-border-width, @wz-color-done);
-      }
+      li.current .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-current); }
+      li.done .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-done); }
+      li.optional .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-optional); }
+      li.editing .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-editing); }
 
-      li.optional:after {
-        .state-circle-with-border(@dot-border-width, @wz-color-optional);
-      }
+      li.current a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-current); }
+      li.done a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-done); }
+      li.optional a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-optional); }
+      li.editing a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-editing); }
 
-      li.editing:after {
-        .state-circle-with-border(@dot-border-width, @wz-color-editing);
-      }
+      // default steps shouldn't change when hovered, because they aren't clickable
+      li.default a:hover .step-indicator { .state-circle-with-border-nohover(@dot-border-width, @wz-color-current); }
     }
   }
 
@@ -217,11 +238,18 @@ aw-wizard-navigation-bar.vertical {
           .line(@big-dot-width, @big-dot-height, @wz-color-default);
         }
 
-        &:after {
+        .step-indicator {
           .state-circle(@big-dot-width, @big-dot-height, 0);
           .state-circle-with-background-and-content(@wz-color-default);
 
-          content: attr(step-symbol);
+          &:before {
+            content: attr(step-symbol);
+          }
+        }
+
+        a:hover .step-indicator {
+          .state-circle-hover(@big-dot-width, @big-dot-height, 0);
+          .state-circle-with-background-and-content-hover(@wz-color-default);
         }
 
         div {
@@ -229,26 +257,18 @@ aw-wizard-navigation-bar.vertical {
         }
       }
 
-      // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover {
-        color: @wz-color-current;
-      }
-
-      li.current:after {
-        .state-circle-with-background-and-content(@wz-color-current);
-      }
-
-      li.done:after {
-        .state-circle-with-background-and-content(@wz-color-done);
-      }
+      li.current .step-indicator { .state-circle-with-background-and-content(@wz-color-current); }
+      li.done .step-indicator { .state-circle-with-background-and-content(@wz-color-done); }
+      li.optional .step-indicator { .state-circle-with-background-and-content(@wz-color-optional); }
+      li.editing .step-indicator { .state-circle-with-background-and-content(@wz-color-editing); }
 
-      li.optional:after {
-        .state-circle-with-background-and-content(@wz-color-optional);
-      }
+      li.current a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-current); }
+      li.done a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-done); }
+      li.optional a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-optional); }
+      li.editing a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-editing); }
 
-      li.editing:after {
-        .state-circle-with-background-and-content(@wz-color-editing);
-      }
+      // default steps shouldn't change when hovered, because they aren't clickable
+      li.default a:hover .step-indicator { .state-circle-with-background-and-content-nohover(@wz-color-current); }
     }
   }
 
@@ -261,11 +281,18 @@ aw-wizard-navigation-bar.vertical {
           .line(@big-dot-width, @big-dot-height, @wz-color-default);
         }
 
-        &:after {
+        .step-indicator {
           .state-circle(@big-dot-width, @big-dot-height, @dot-border-width);
           .state-circle-with-border-and-content(@dot-border-width, @wz-color-default);
 
-          content: attr(step-symbol);
+          &:before {
+            content: attr(step-symbol);
+          }
+        }
+
+        a:hover .step-indicator {
+          .state-circle-hover(@big-dot-width, @big-dot-height, @dot-border-width);
+          .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-default);
         }
 
         div {
@@ -273,26 +300,18 @@ aw-wizard-navigation-bar.vertical {
         }
       }
 
-      // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover {
-        color: @wz-color-current;
-      }
+      li.current .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-current); }
+      li.done .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-done); }
+      li.optional .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-optional); }
+      li.editing .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-editing); }
 
-      li.current:after {
-        .state-circle-with-border-and-content(@dot-border-width, @wz-color-current);
-      }
+      li.current a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-current); }
+      li.done a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-done); }
+      li.optional a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-optional); }
+      li.editing a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-editing); }
 
-      li.done:after {
-        .state-circle-with-border-and-content(@dot-border-width, @wz-color-done);
-      }
-
-      li.optional:after {
-        .state-circle-with-border-and-content(@dot-border-width, @wz-color-optional);
-      }
-
-      li.editing:after {
-        .state-circle-with-border-and-content(@dot-border-width, @wz-color-editing);
-      }
+      // default steps shouldn't change when hovered, because they aren't clickable
+      li.default a:hover .step-indicator { .state-circle-with-border-and-content-nohover(@dot-border-width, @wz-color-current); }
     }
   }
 
@@ -320,27 +339,36 @@ aw-wizard-navigation-bar.vertical {
         padding-bottom: @distance-between-steps;
       }
 
-      div {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        a {
-          color: @wz-color-current;
-          margin-left: @text-margin-left;
-          line-height: @text-height;
-          font-size: @text-height;
-          text-decoration: none;
-          text-transform: uppercase;
-          text-align: left;
-          font-weight: bold;
-          transition: 0.25s;
-          cursor: pointer;
-
-          &:hover {
-            color: darken(@wz-color-current, 20%);
-          }
-        }
+      a {
+        cursor: pointer;
+      }
+
+      .label {
+        margin-left: @text-margin-left;
+        color: @wz-color-current;
+        line-height: @text-height;
+        font-size: @text-height;
+        text-decoration: none;
+        text-transform: uppercase;
+        text-align: left;
+        font-weight: bold;
+        transition: 0.25s;
+      }
+    }
+
+    li a:hover .label {
+      color: darken(@wz-color-current, 20%);
+    }
+
+    // default steps shouldn't change when hovered, because they aren't clickable
+    li.default {
+
+      a {
+        cursor: auto;
+      }
+
+      .label {
+        color: @wz-color-current;
       }
     }
 
@@ -349,6 +377,3 @@ aw-wizard-navigation-bar.vertical {
     }
   }
 }
-
-
-

From e2fcbc244ae35488292107a3298231201bc33916 Mon Sep 17 00:00:00 2001
From: Evgeny Arshinov <earshinov@gmail.com>
Date: Mon, 3 Sep 2018 19:13:28 +0300
Subject: [PATCH 2/3] Embed navigation symbol directly into HTML

---
 .../wizard-navigation-bar.component.horizontal.less       | 8 --------
 src/components/wizard-navigation-bar.component.html       | 4 +---
 .../wizard-navigation-bar.component.vertical.less         | 8 --------
 3 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/src/components/wizard-navigation-bar.component.horizontal.less b/src/components/wizard-navigation-bar.component.horizontal.less
index 5a899887..8cf9dde6 100644
--- a/src/components/wizard-navigation-bar.component.horizontal.less
+++ b/src/components/wizard-navigation-bar.component.horizontal.less
@@ -220,10 +220,6 @@ aw-wizard-navigation-bar.horizontal {
         .step-indicator {
           .state-circle(@big-dot-width, @big-dot-height, 0);
           .state-circle-with-background-and-content(@wz-color-default);
-
-          &:before {
-            content: attr(step-symbol);
-          }
         }
 
         a:hover .step-indicator {
@@ -259,10 +255,6 @@ aw-wizard-navigation-bar.horizontal {
         .step-indicator {
           .state-circle(@big-dot-width, @big-dot-height, @dot-border-width);
           .state-circle-with-border-and-content(@dot-border-width, @wz-color-default);
-
-          &:before {
-            content: attr(step-symbol);
-          }
         }
 
         a:hover .step-indicator {
diff --git a/src/components/wizard-navigation-bar.component.html b/src/components/wizard-navigation-bar.component.html
index 3b716416..dbda8892 100644
--- a/src/components/wizard-navigation-bar.component.html
+++ b/src/components/wizard-navigation-bar.component.html
@@ -13,9 +13,7 @@
         <ng-container *ngIf="step.stepTitleTemplate" [ngTemplateOutlet]="step.stepTitleTemplate.templateRef"></ng-container>
         <ng-container *ngIf="!step.stepTitleTemplate">{{step.stepTitle}}</ng-container>
       </div>
-      <div class="step-indicator"
-        [attr.step-symbol]="step.navigationSymbol.symbol"
-        [ngStyle]="{ 'font-family': step.navigationSymbol.fontFamily }"></div>
+      <div class="step-indicator" [ngStyle]="{ 'font-family': step.navigationSymbol.fontFamily }">{{step.navigationSymbol.symbol}}</div>
     </a>
   </li>
 </ul>
diff --git a/src/components/wizard-navigation-bar.component.vertical.less b/src/components/wizard-navigation-bar.component.vertical.less
index f951de02..4e132982 100644
--- a/src/components/wizard-navigation-bar.component.vertical.less
+++ b/src/components/wizard-navigation-bar.component.vertical.less
@@ -241,10 +241,6 @@ aw-wizard-navigation-bar.vertical {
         .step-indicator {
           .state-circle(@big-dot-width, @big-dot-height, 0);
           .state-circle-with-background-and-content(@wz-color-default);
-
-          &:before {
-            content: attr(step-symbol);
-          }
         }
 
         a:hover .step-indicator {
@@ -284,10 +280,6 @@ aw-wizard-navigation-bar.vertical {
         .step-indicator {
           .state-circle(@big-dot-width, @big-dot-height, @dot-border-width);
           .state-circle-with-border-and-content(@dot-border-width, @wz-color-default);
-
-          &:before {
-            content: attr(step-symbol);
-          }
         }
 
         a:hover .step-indicator {

From 16faaad50b4a3ea41e8bf219cecfba4e74298cfb Mon Sep 17 00:00:00 2001
From: Evgeny Arshinov <earshinov@gmail.com>
Date: Tue, 4 Sep 2018 22:13:12 +0300
Subject: [PATCH 3/3] Coding style fixes

---
 ...d-navigation-bar.component.horizontal.less | 217 ++++++++++++------
 ...ard-navigation-bar.component.vertical.less | 215 +++++++++++------
 2 files changed, 301 insertions(+), 131 deletions(-)

diff --git a/src/components/wizard-navigation-bar.component.horizontal.less b/src/components/wizard-navigation-bar.component.horizontal.less
index 8cf9dde6..aca38815 100644
--- a/src/components/wizard-navigation-bar.component.horizontal.less
+++ b/src/components/wizard-navigation-bar.component.horizontal.less
@@ -52,10 +52,8 @@ aw-wizard-navigation-bar.horizontal {
     transition: 0.25s;
     border-radius: 100%;
   }
-  .state-circle-hover(@dot-width, @dot-height, @dot-border-width) {
-  }
-  .state-circle-nohover(@dot-width, @dot-height, @dot-border-width) {
-  }
+  .state-circle-hover(@dot-width, @dot-height, @dot-border-width) { }
+  .state-circle-nohover(@dot-width, @dot-height, @dot-border-width) { }
 
   .state-circle-with-border(@dot-border-width, @circle-color) {
     border-width: @dot-border-width;
@@ -123,18 +121,36 @@ aw-wizard-navigation-bar.horizontal {
         }
       }
 
-      li.current .step-indicator { .state-circle-with-background(@wz-color-current); }
-      li.done .step-indicator { .state-circle-with-background(@wz-color-done); }
-      li.optional .step-indicator { .state-circle-with-background(@wz-color-optional); }
-      li.editing .step-indicator { .state-circle-with-background(@wz-color-editing); }
+      li.current .step-indicator {
+        .state-circle-with-background(@wz-color-current);
+      }
+      li.done .step-indicator {
+        .state-circle-with-background(@wz-color-done);
+      }
+      li.optional .step-indicator {
+        .state-circle-with-background(@wz-color-optional);
+      }
+      li.editing .step-indicator {
+        .state-circle-with-background(@wz-color-editing);
+      }
 
-      li.current a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-current); }
-      li.done a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-done); }
-      li.optional a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-optional); }
-      li.editing a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-editing); }
+      li.current a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-current);
+      }
+      li.done a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-done);
+      }
+      li.optional a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-optional);
+      }
+      li.editing a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-editing);
+      }
 
       // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover .step-indicator { .state-circle-with-background-nohover(@wz-color-current); }
+      li.default a:hover .step-indicator {
+        .state-circle-with-background-nohover(@wz-color-current);
+      }
     }
   }
 
@@ -158,18 +174,36 @@ aw-wizard-navigation-bar.horizontal {
         }
       }
 
-      li.current .step-indicator { .state-circle-with-background(@wz-color-current); }
-      li.done .step-indicator { .state-circle-with-background(@wz-color-done); }
-      li.optional .step-indicator { .state-circle-with-background(@wz-color-optional); }
-      li.editing .step-indicator { .state-circle-with-background(@wz-color-editing); }
+      li.current .step-indicator {
+        .state-circle-with-background(@wz-color-current);
+      }
+      li.done .step-indicator {
+        .state-circle-with-background(@wz-color-done);
+      }
+      li.optional .step-indicator {
+        .state-circle-with-background(@wz-color-optional);
+      }
+      li.editing .step-indicator {
+        .state-circle-with-background(@wz-color-editing);
+      }
 
-      li.current a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-current); }
-      li.done a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-done); }
-      li.optional a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-optional); }
-      li.editing a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-editing); }
+      li.current a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-current);
+      }
+      li.done a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-done);
+      }
+      li.optional a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-optional);
+      }
+      li.editing a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-editing);
+      }
 
       // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover .step-indicator { .state-circle-with-background-nohover(@wz-color-current); }
+      li.default a:hover .step-indicator {
+        .state-circle-with-background-nohover(@wz-color-current);
+      }
     }
   }
 
@@ -193,18 +227,36 @@ aw-wizard-navigation-bar.horizontal {
         }
       }
 
-      li.current .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-current); }
-      li.done .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-done); }
-      li.optional .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-optional); }
-      li.editing .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-editing); }
+      li.current .step-indicator {
+        .state-circle-with-border(@dot-border-width, @wz-color-current);
+      }
+      li.done .step-indicator {
+        .state-circle-with-border(@dot-border-width, @wz-color-done);
+      }
+      li.optional .step-indicator {
+        .state-circle-with-border(@dot-border-width, @wz-color-optional);
+      }
+      li.editing .step-indicator {
+        .state-circle-with-border(@dot-border-width, @wz-color-editing);
+      }
 
-      li.current a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-current); }
-      li.done a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-done); }
-      li.optional a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-optional); }
-      li.editing a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-editing); }
+      li.current a:hover .step-indicator {
+        .state-circle-with-border-hover(@dot-border-width, @wz-color-current);
+      }
+      li.done a:hover .step-indicator {
+        .state-circle-with-border-hover(@dot-border-width, @wz-color-done);
+      }
+      li.optional a:hover .step-indicator {
+        .state-circle-with-border-hover(@dot-border-width, @wz-color-optional);
+      }
+      li.editing a:hover .step-indicator {
+        .state-circle-with-border-hover(@dot-border-width, @wz-color-editing);
+      }
 
       // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover .step-indicator { .state-circle-with-border-nohover(@dot-border-width, @wz-color-current); }
+      li.default a:hover .step-indicator {
+        .state-circle-with-border-nohover(@dot-border-width, @wz-color-current);
+      }
     }
   }
 
@@ -228,18 +280,36 @@ aw-wizard-navigation-bar.horizontal {
         }
       }
 
-      li.current .step-indicator { .state-circle-with-background-and-content(@wz-color-current); }
-      li.done .step-indicator { .state-circle-with-background-and-content(@wz-color-done); }
-      li.optional .step-indicator { .state-circle-with-background-and-content(@wz-color-optional); }
-      li.editing .step-indicator { .state-circle-with-background-and-content(@wz-color-editing); }
+      li.current .step-indicator {
+        .state-circle-with-background-and-content(@wz-color-current);
+      }
+      li.done .step-indicator {
+        .state-circle-with-background-and-content(@wz-color-done);
+      }
+      li.optional .step-indicator {
+        .state-circle-with-background-and-content(@wz-color-optional);
+      }
+      li.editing .step-indicator {
+        .state-circle-with-background-and-content(@wz-color-editing);
+      }
 
-      li.current a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-current); }
-      li.done a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-done); }
-      li.optional a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-optional); }
-      li.editing a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-editing); }
+      li.current a:hover .step-indicator {
+        .state-circle-with-background-and-content-hover(@wz-color-current);
+      }
+      li.done a:hover .step-indicator {
+        .state-circle-with-background-and-content-hover(@wz-color-done);
+      }
+      li.optional a:hover .step-indicator {
+        .state-circle-with-background-and-content-hover(@wz-color-optional);
+      }
+      li.editing a:hover .step-indicator {
+        .state-circle-with-background-and-content-hover(@wz-color-editing);
+      }
 
       // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover .step-indicator { .state-circle-with-background-and-content-nohover(@wz-color-current); }
+      li.default a:hover .step-indicator {
+        .state-circle-with-background-and-content-nohover(@wz-color-current);
+      }
     }
   }
 
@@ -263,18 +333,36 @@ aw-wizard-navigation-bar.horizontal {
         }
       }
 
-      li.current .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-current); }
-      li.done .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-done); }
-      li.optional .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-optional); }
-      li.editing .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-editing); }
+      li.current .step-indicator {
+        .state-circle-with-border-and-content(@dot-border-width, @wz-color-current);
+      }
+      li.done .step-indicator {
+        .state-circle-with-border-and-content(@dot-border-width, @wz-color-done);
+      }
+      li.optional .step-indicator {
+        .state-circle-with-border-and-content(@dot-border-width, @wz-color-optional);
+      }
+      li.editing .step-indicator {
+        .state-circle-with-border-and-content(@dot-border-width, @wz-color-editing);
+      }
 
-      li.current a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-current); }
-      li.done a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-done); }
-      li.optional a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-optional); }
-      li.editing a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-editing); }
+      li.current a:hover .step-indicator {
+        .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-current);
+      }
+      li.done a:hover .step-indicator {
+        .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-done);
+      }
+      li.optional a:hover .step-indicator {
+        .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-optional);
+      }
+      li.editing a:hover .step-indicator {
+        .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-editing);
+      }
 
       // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover .step-indicator { .state-circle-with-border-and-content-nohover(@dot-border-width, @wz-color-current); }
+      li.default a:hover .step-indicator {
+        .state-circle-with-border-and-content-nohover(@dot-border-width, @wz-color-current);
+      }
     }
   }
 
@@ -350,19 +438,19 @@ aw-wizard-navigation-bar.horizontal {
 
       a {
         cursor: pointer;
-      }
 
-      .label {
-        display: inline-block;
-        padding-top: @text-padding-bottom;
-        color: @wz-color-current;
-        line-height: @text-height;
-        font-size: @text-height;
-        text-decoration: none;
-        text-transform: uppercase;
-        text-align: center;
-        font-weight: bold;
-        transition: 0.25s;
+        .label {
+          display: inline-block;
+          padding-top: @text-padding-bottom;
+          color: @wz-color-current;
+          line-height: @text-height;
+          font-size: @text-height;
+          text-decoration: none;
+          text-transform: uppercase;
+          text-align: center;
+          font-weight: bold;
+          transition: 0.25s;
+        }
       }
     }
 
@@ -371,11 +459,8 @@ aw-wizard-navigation-bar.horizontal {
     }
 
     // default steps shouldn't change when hovered, because they aren't clickable
-    li.default {
-
-      a {
-        cursor: auto;
-      }
+    li.default a {
+      cursor: auto;
 
       .label {
         color: @wz-color-current;
diff --git a/src/components/wizard-navigation-bar.component.vertical.less b/src/components/wizard-navigation-bar.component.vertical.less
index 4e132982..01e6fe63 100644
--- a/src/components/wizard-navigation-bar.component.vertical.less
+++ b/src/components/wizard-navigation-bar.component.vertical.less
@@ -61,10 +61,8 @@ aw-wizard-navigation-bar.vertical {
     border-radius: 100%;
   }
 
-  .state-circle-hover(@dot-width, @dot-height, @dot-border-width) {
-  }
-  .state-circle-nohover(@dot-width, @dot-height, @dot-border-width) {
-  }
+  .state-circle-hover(@dot-width, @dot-height, @dot-border-width) { }
+  .state-circle-nohover(@dot-width, @dot-height, @dot-border-width) { }
 
   .state-circle-with-border(@dot-border-width, @circle-color) {
     border-width: @dot-border-width;
@@ -136,18 +134,36 @@ aw-wizard-navigation-bar.vertical {
         }
       }
 
-      li.current .step-indicator { .state-circle-with-background(@wz-color-current); }
-      li.done .step-indicator { .state-circle-with-background(@wz-color-done); }
-      li.optional .step-indicator { .state-circle-with-background(@wz-color-optional); }
-      li.editing .step-indicator { .state-circle-with-background(@wz-color-editing); }
+      li.current .step-indicator {
+        .state-circle-with-background(@wz-color-current);
+      }
+      li.done .step-indicator {
+        .state-circle-with-background(@wz-color-done);
+      }
+      li.optional .step-indicator {
+        .state-circle-with-background(@wz-color-optional);
+      }
+      li.editing .step-indicator {
+        .state-circle-with-background(@wz-color-editing);
+      }
 
-      li.current a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-current); }
-      li.done a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-done); }
-      li.optional a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-optional); }
-      li.editing a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-editing); }
+      li.current a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-current);
+      }
+      li.done a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-done);
+      }
+      li.optional a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-optional);
+      }
+      li.editing a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-editing);
+      }
 
       // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover .step-indicator { .state-circle-with-background-nohover(@wz-color-current); }
+      li.default a:hover .step-indicator {
+        .state-circle-with-background-nohover(@wz-color-current);
+      }
     }
   }
 
@@ -175,18 +191,36 @@ aw-wizard-navigation-bar.vertical {
         }
       }
 
-      li.current .step-indicator { .state-circle-with-background(@wz-color-current); }
-      li.done .step-indicator { .state-circle-with-background(@wz-color-done); }
-      li.optional .step-indicator { .state-circle-with-background(@wz-color-optional); }
-      li.editing .step-indicator { .state-circle-with-background(@wz-color-editing); }
+      li.current .step-indicator {
+        .state-circle-with-background(@wz-color-current);
+      }
+      li.done .step-indicator {
+        .state-circle-with-background(@wz-color-done);
+      }
+      li.optional .step-indicator {
+        .state-circle-with-background(@wz-color-optional);
+      }
+      li.editing .step-indicator {
+        .state-circle-with-background(@wz-color-editing);
+      }
 
-      li.current a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-current); }
-      li.done a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-done); }
-      li.optional a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-optional); }
-      li.editing a:hover .step-indicator { .state-circle-with-background-hover(@wz-color-editing); }
+      li.current a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-current);
+      }
+      li.done a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-done);
+      }
+      li.optional a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-optional);
+      }
+      li.editing a:hover .step-indicator {
+        .state-circle-with-background-hover(@wz-color-editing);
+      }
 
       // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover .step-indicator { .state-circle-with-background-nohover(@wz-color-current); }
+      li.default a:hover .step-indicator {
+        .state-circle-with-background-nohover(@wz-color-current);
+      }
     }
   }
 
@@ -214,18 +248,36 @@ aw-wizard-navigation-bar.vertical {
         }
       }
 
-      li.current .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-current); }
-      li.done .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-done); }
-      li.optional .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-optional); }
-      li.editing .step-indicator { .state-circle-with-border(@dot-border-width, @wz-color-editing); }
+      li.current .step-indicator {
+        .state-circle-with-border(@dot-border-width, @wz-color-current);
+      }
+      li.done .step-indicator {
+        .state-circle-with-border(@dot-border-width, @wz-color-done);
+      }
+      li.optional .step-indicator {
+        .state-circle-with-border(@dot-border-width, @wz-color-optional);
+      }
+      li.editing .step-indicator {
+        .state-circle-with-border(@dot-border-width, @wz-color-editing);
+      }
 
-      li.current a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-current); }
-      li.done a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-done); }
-      li.optional a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-optional); }
-      li.editing a:hover .step-indicator { .state-circle-with-border-hover(@dot-border-width, @wz-color-editing); }
+      li.current a:hover .step-indicator {
+        .state-circle-with-border-hover(@dot-border-width, @wz-color-current);
+      }
+      li.done a:hover .step-indicator {
+        .state-circle-with-border-hover(@dot-border-width, @wz-color-done);
+      }
+      li.optional a:hover .step-indicator {
+        .state-circle-with-border-hover(@dot-border-width, @wz-color-optional);
+      }
+      li.editing a:hover .step-indicator {
+        .state-circle-with-border-hover(@dot-border-width, @wz-color-editing);
+      }
 
       // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover .step-indicator { .state-circle-with-border-nohover(@dot-border-width, @wz-color-current); }
+      li.default a:hover .step-indicator {
+        .state-circle-with-border-nohover(@dot-border-width, @wz-color-current);
+      }
     }
   }
 
@@ -253,18 +305,36 @@ aw-wizard-navigation-bar.vertical {
         }
       }
 
-      li.current .step-indicator { .state-circle-with-background-and-content(@wz-color-current); }
-      li.done .step-indicator { .state-circle-with-background-and-content(@wz-color-done); }
-      li.optional .step-indicator { .state-circle-with-background-and-content(@wz-color-optional); }
-      li.editing .step-indicator { .state-circle-with-background-and-content(@wz-color-editing); }
+      li.current .step-indicator {
+        .state-circle-with-background-and-content(@wz-color-current);
+      }
+      li.done .step-indicator {
+        .state-circle-with-background-and-content(@wz-color-done);
+      }
+      li.optional .step-indicator {
+        .state-circle-with-background-and-content(@wz-color-optional);
+      }
+      li.editing .step-indicator {
+        .state-circle-with-background-and-content(@wz-color-editing);
+      }
 
-      li.current a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-current); }
-      li.done a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-done); }
-      li.optional a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-optional); }
-      li.editing a:hover .step-indicator { .state-circle-with-background-and-content-hover(@wz-color-editing); }
+      li.current a:hover .step-indicator {
+        .state-circle-with-background-and-content-hover(@wz-color-current);
+      }
+      li.done a:hover .step-indicator {
+        .state-circle-with-background-and-content-hover(@wz-color-done);
+      }
+      li.optional a:hover .step-indicator {
+        .state-circle-with-background-and-content-hover(@wz-color-optional);
+      }
+      li.editing a:hover .step-indicator {
+        .state-circle-with-background-and-content-hover(@wz-color-editing);
+      }
 
       // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover .step-indicator { .state-circle-with-background-and-content-nohover(@wz-color-current); }
+      li.default a:hover .step-indicator {
+        .state-circle-with-background-and-content-nohover(@wz-color-current);
+      }
     }
   }
 
@@ -292,18 +362,36 @@ aw-wizard-navigation-bar.vertical {
         }
       }
 
-      li.current .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-current); }
-      li.done .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-done); }
-      li.optional .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-optional); }
-      li.editing .step-indicator { .state-circle-with-border-and-content(@dot-border-width, @wz-color-editing); }
+      li.current .step-indicator {
+        .state-circle-with-border-and-content(@dot-border-width, @wz-color-current);
+      }
+      li.done .step-indicator {
+        .state-circle-with-border-and-content(@dot-border-width, @wz-color-done);
+      }
+      li.optional .step-indicator {
+        .state-circle-with-border-and-content(@dot-border-width, @wz-color-optional);
+      }
+      li.editing .step-indicator {
+        .state-circle-with-border-and-content(@dot-border-width, @wz-color-editing);
+      }
 
-      li.current a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-current); }
-      li.done a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-done); }
-      li.optional a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-optional); }
-      li.editing a:hover .step-indicator { .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-editing); }
+      li.current a:hover .step-indicator {
+        .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-current);
+      }
+      li.done a:hover .step-indicator {
+        .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-done);
+      }
+      li.optional a:hover .step-indicator {
+        .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-optional);
+      }
+      li.editing a:hover .step-indicator {
+        .state-circle-with-border-and-content-hover(@dot-border-width, @wz-color-editing);
+      }
 
       // default steps shouldn't change when hovered, because they aren't clickable
-      li.default a:hover .step-indicator { .state-circle-with-border-and-content-nohover(@dot-border-width, @wz-color-current); }
+      li.default a:hover .step-indicator {
+        .state-circle-with-border-and-content-nohover(@dot-border-width, @wz-color-current);
+      }
     }
   }
 
@@ -333,18 +421,18 @@ aw-wizard-navigation-bar.vertical {
 
       a {
         cursor: pointer;
-      }
 
-      .label {
-        margin-left: @text-margin-left;
-        color: @wz-color-current;
-        line-height: @text-height;
-        font-size: @text-height;
-        text-decoration: none;
-        text-transform: uppercase;
-        text-align: left;
-        font-weight: bold;
-        transition: 0.25s;
+        .label {
+          margin-left: @text-margin-left;
+          color: @wz-color-current;
+          line-height: @text-height;
+          font-size: @text-height;
+          text-decoration: none;
+          text-transform: uppercase;
+          text-align: left;
+          font-weight: bold;
+          transition: 0.25s;
+        }
       }
     }
 
@@ -353,11 +441,8 @@ aw-wizard-navigation-bar.vertical {
     }
 
     // default steps shouldn't change when hovered, because they aren't clickable
-    li.default {
-
-      a {
-        cursor: auto;
-      }
+    li.default a {
+      cursor: auto;
 
       .label {
         color: @wz-color-current;