1 files changed, 69 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.less b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.less
new file mode 100644
index 0000000000..8b777923a0
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.less
@@ -0,0 +1,69 @@
+@circle-radius: 18px;
+@gap: 70px;
+@gap-width: 2px;
+@valid-width: 2px;
+
+ul.sdc-wizard-step {
+    padding: 0;
+    margin: 0;
+
+    li.step {
+        position: relative;
+        list-style: none;
+
+        .step-wrapper {
+            line-height: @circle-radius*2;
+            height: @circle-radius*2;
+            margin-bottom: @gap;
+
+            button.step-index {
+                ._w-sdc-wizard-step-btn(@circle-radius);
+                z-index: 99;
+                display: inline-block;
+
+                &.valid {
+                    display: inline-block;
+                }
+
+            }
+
+            span.step-name {
+                .b_7;
+                line-height: @circle-radius;
+                display: inline-block;
+                word-wrap: break-word;
+                width: calc(~"100%" - @circle-radius*2 + 4);
+                vertical-align: middle;
+                padding-left: 10px;
+                white-space: normal;
+
+                &.selected {
+                    .a_7;
+                    font-weight: bold;
+                }
+
+                &.disabled {
+                    border: none;
+                    background-color: transparent;
+                }
+
+            }
+        }
+
+        .step-seperator {
+            border-right: @gap-width solid @color_n;
+            height: @gap + @circle-radius*2;
+            position: absolute;
+            top: @circle-radius*2-@circle-radius;
+            left: @circle-radius - @gap-width/2;
+        }
+
+    }
+
+    li.step:last-child {
+        .step-seperator {
+            display: none;
+        }
+    }
+
+}