From 940d0a417eecce8d0394bfb114966192e8d68242 Mon Sep 17 00:00:00 2001
From: Brian Federle <brian.federle@citrix.com>
Date: Tue, 8 Oct 2013 12:42:28 -0700
Subject: [PATCH] WIP: Multi-wizard styling

---
 ui/stylesheets/_instance-wizard.scss | 18 +++++++
 ui/stylesheets/cloudstack.scss       |  6 +++
 ui/stylesheets/csui/_csui.scss       |  3 +-
 ui/stylesheets/csui/_wizard.scss     | 75 ++++++++++++++++++++++++++++
 4 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 ui/stylesheets/_instance-wizard.scss
 create mode 100644 ui/stylesheets/csui/_wizard.scss

diff --git a/ui/stylesheets/_instance-wizard.scss b/ui/stylesheets/_instance-wizard.scss
new file mode 100644
index 00000000000..62a4e1d574a
--- /dev/null
+++ b/ui/stylesheets/_instance-wizard.scss
@@ -0,0 +1,18 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+.multi-wizard.instance-wizard {
+}
\ No newline at end of file
diff --git a/ui/stylesheets/cloudstack.scss b/ui/stylesheets/cloudstack.scss
index 4bbb714fd00..8a606bf6fbc 100644
--- a/ui/stylesheets/cloudstack.scss
+++ b/ui/stylesheets/cloudstack.scss
@@ -18,6 +18,7 @@
 @import "browser";
 @import "dashboard";
 @import "icons";
+@import "instance-wizard";
 
 html body > .login {
     @include csui-login;
@@ -376,4 +377,9 @@ body {
     .icon {
         background-image: url(../images/sprites.png);
     }
+}
+
+// Wizards
+.multi-wizard {
+    @include csui-wizard;
 }
\ No newline at end of file
diff --git a/ui/stylesheets/csui/_csui.scss b/ui/stylesheets/csui/_csui.scss
index 3121e6c80d8..37a33b61ec7 100644
--- a/ui/stylesheets/csui/_csui.scss
+++ b/ui/stylesheets/csui/_csui.scss
@@ -68,4 +68,5 @@ html, body {
 @import "details";
 @import "toolbar";
 @import "breadcrumbs";
-@import "action";
\ No newline at end of file
+@import "action";
+@import "wizard";
\ No newline at end of file
diff --git a/ui/stylesheets/csui/_wizard.scss b/ui/stylesheets/csui/_wizard.scss
new file mode 100644
index 00000000000..d452813adc3
--- /dev/null
+++ b/ui/stylesheets/csui/_wizard.scss
@@ -0,0 +1,75 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+@mixin csui-wizard {
+    @include row;
+
+    form, .progress {
+        height: 90%;
+    }
+
+    .progress {
+        @include span-columns(3);
+
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        box-shadow: inset 0px 0px 20px #ccc;
+
+        ul {
+            padding: 5px 0 0 20px;
+            li {
+                list-style: none;
+                margin-top: 10px;
+
+                &.active {
+                    font-weight: bold;
+                }
+
+                .number {
+                    font-size: 18px;
+                    margin-right: 10px;
+                    color: lighten(black, 25%);
+                }
+            }
+        }
+    }
+
+    form {
+        @include csui-form;
+        @include span-columns(8);
+    }
+
+    .buttons {
+        @include span-columns(12);
+        @include row;
+
+        margin-top: 15px;
+
+        .button {
+            @include csui-button;
+
+            float: left;
+            margin-right: 10px;
+
+            &.next {
+                @include csui-button-cta;
+
+                float: right;
+                margin-right: 0px;
+            }
+        }
+    }
+}
\ No newline at end of file