Polished some styles, updated issue 6466

public/app/plugins/panel/gettingstarted/module.html

@@ -8,8 +8,8 @@
     </h6>
     </h6>
     <ul class="progress-tracker">
     <ul class="progress-tracker">
       <li class="progress-step" ng-repeat="step in ctrl.steps" ng-class="step.cssClass">
       <li class="progress-step" ng-repeat="step in ctrl.steps" ng-class="step.cssClass">
-        <span class="progress-marker"><i class="{{step.icon}}"></i></span>
-        <span class="progress-text">{{step.title}}</span>
+        <a class="progress-marker" ng-href="{{step.href}}"><i class="{{step.icon}}"></i></a>
+        <a class="progress-text" ng-href="{{step.href}}">{{step.title}}</a>
         <a class="btn progress-step-cta" ng-href="{{step.href}}">{{step.cta}}</a>
         <a class="btn progress-step-cta" ng-href="{{step.href}}">{{step.cta}}</a>
       </li>
       </li>
     </ul>
     </ul>

public/sass/components/_panel_gettingstarted.scss

@@ -4,13 +4,14 @@ $progress-color-dark:       $panel-bg !default;
 $progress-color:            $panel-bg !default;
 $progress-color:            $panel-bg !default;
 $progress-color-light:      $panel-bg !default;
 $progress-color-light:      $panel-bg !default;
 $progress-color-grey-light: $body-bg !default;
 $progress-color-grey-light: $body-bg !default;
+$progress-color-shadow:     $panel-border !default;
 $progress-color-grey:       $iconContainerBackground !default;
 $progress-color-grey:       $iconContainerBackground !default;
 $progress-color-grey-dark:  $iconContainerBackground !default;
 $progress-color-grey-dark:  $iconContainerBackground !default;
 
 
 // Sizing
 // Sizing
 $marker-size:               60px !default;
 $marker-size:               60px !default;
 $marker-size-half:          ($marker-size / 2);
 $marker-size-half:          ($marker-size / 2);
-$path-height:               4px !default;
+$path-height:               2px !default;
 $path-position:             $marker-size-half - ($path-height / 2);
 $path-position:             $marker-size-half - ($path-height / 2);
 
 
 
 
@@ -62,9 +63,16 @@ $path-position:             $marker-size-half - ($path-height / 2);
     right: - $marker-size-half;
     right: - $marker-size-half;
     width: 100%;
     width: 100%;
     height: $path-height;
     height: $path-height;
+    border-top: 2px solid $progress-color-grey-light;
+    border-bottom: $progress-color-shadow;
     background: $progress-color-grey-light;
     background: $progress-color-grey-light;
   }
   }
 
 
+  &:first-child {
+    &::after {
+      left: 50%;
+    }
+  }
   &:last-child {
   &:last-child {
     &::after {
     &::after {
       right: 50%;
       right: 50%;
@@ -105,10 +113,12 @@ $path-position:             $marker-size-half - ($path-height / 2);
     }
     }
     .progress-text {
     .progress-text {
       text-decoration: line-through;
       text-decoration: line-through;
+      &:hover {
+        color: $text-color-weak;
+      }
     }
     }
-
     &::after {
     &::after {
-      background: $progress-color-grey;
+      background: $progress-color-grey-light;
     }
     }
   }
   }
 }
 }
@@ -136,6 +146,9 @@ $path-position:             $marker-size-half - ($path-height / 2);
   color: $text-color-weak;
   color: $text-color-weak;
   font-size: 35px;
   font-size: 35px;
   vertical-align: sub;
   vertical-align: sub;
+  &:hover {
+    color: $link-hover-color;
+  }
 }
 }
 
 
 // Progress text
 // Progress text
@@ -143,6 +156,10 @@ $path-position:             $marker-size-half - ($path-height / 2);
   display: block;
   display: block;
   overflow: hidden;
   overflow: hidden;
   text-overflow: ellipsis;
   text-overflow: ellipsis;
+  color: $text-muted;
+  &:hover {
+    color: $link-hover-color;
+  }
 }
 }
 
 
 .progress-marker {
 .progress-marker {
@@ -151,6 +168,3 @@ $path-position:             $marker-size-half - ($path-height / 2);
   font-size: 35px;
   font-size: 35px;
   vertical-align: sub;
   vertical-align: sub;
 }
 }
-
-
-