From b1cac7a1331def367b08309d2acac58abd206ce3 Mon Sep 17 00:00:00 2001
From: Brian Federle <brian.federle@citrix.com>
Date: Tue, 8 Oct 2013 15:10:14 -0700
Subject: [PATCH] Instance wizard: style progress state

---
 ui/scripts/ui-custom/instanceWizard.js |  6 +++-
 ui/stylesheets/csui/_wizard.scss       | 42 ++++++++++++++++++++------
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/ui/scripts/ui-custom/instanceWizard.js b/ui/scripts/ui-custom/instanceWizard.js
index 2b111f57c62..a88d4c3db37 100644
--- a/ui/scripts/ui-custom/instanceWizard.js
+++ b/ui/scripts/ui-custom/instanceWizard.js
@@ -850,9 +850,13 @@
 
                     // Update progress bar
                     var $targetProgress = $progress.removeClass('active').filter(function() {
-                        return $(this).index() <= targetIndex;
+                        return $(this).index() === targetIndex;
                     }).toggleClass('active');
 
+                    $progress.removeClass('done').filter(function() {
+                        return $(this).index() < $targetProgress.index();
+                    }).toggleClass('done');
+
                     // Update diagram; show/hide as necessary
                     $diagramParts.filter(function() {
                         return $(this).index() <= targetIndex;
diff --git a/ui/stylesheets/csui/_wizard.scss b/ui/stylesheets/csui/_wizard.scss
index 536a421c0aa..3bc74d7ff58 100644
--- a/ui/stylesheets/csui/_wizard.scss
+++ b/ui/stylesheets/csui/_wizard.scss
@@ -24,24 +24,48 @@
     .progress {
         @include span-columns(3);
 
-        border: 1px solid #ccc;
-        border-radius: 6px;
-        box-shadow: inset 0px 0px 20px #ccc;
+        border-right: 1px solid #ccc;
+        box-shadow: 2px -1px 5px #ccc;
 
         ul {
             padding: 5px 0 0 20px;
             li {
                 list-style: none;
                 margin-top: 10px;
-
-                &.active {
-                    font-weight: bold;
-                }
+                color: gray;
 
                 .number {
-                    font-size: 18px;
+                    padding: 0 6px;
+                    border-radius: 100%;
+                    font-size: 14px;
                     margin-right: 10px;
-                    color: lighten(black, 25%);
+                    text-shadow: 0px 0px 1px black;
+                    color: white;
+                    background: #ccc;
+                }
+
+                &.active {
+                    color: black;
+
+                    .number {
+                        @include radial-gradient(circle at 90% 10%, darken(#ccc, 15%), darken(#ccc, 45%));
+                    }
+                }
+
+                &.done {
+                    color: black;
+
+                    &:before {
+                        @include icon($ok);
+
+                        margin: 0 10px 0px 5px;
+                        font-size: 14px;
+                        color: green;
+                    }
+
+                    .number {
+                        display: none;
+                    }
                 }
             }
         }