Add final version

Author: Rafael Staib

JSteps.v11.suo

@@ -142,7 +142,7 @@
     background: #eee;
     display: block;
     margin: 0.5em;
-    min-height: 30em;
+    min-height: 35em;
     overflow: hidden;
     position: relative;
     width: auto;
@@ -156,8 +156,8 @@
 {
     display: inline;
     float: left;
-    margin: 0 0 0.5em 2.5%;
-    width: 67.5%;
+    margin: 0 2.5% 0.5em 2.5%;
+    width: 65%;
 }
 
 .wizard > .content > .body
@@ -188,22 +188,33 @@
 
 .wizard > .content > .body input
 {
+    display: block;
     border: 1px solid #ccc;
 }
 
+.wizard > .content > .body input[type="checkbox"]
+{
+    display: inline-block;
+}
+
 .wizard > .content > .body input.error
 {
     background: rgb(251, 227, 228);
     border: 1px solid #fbc2c4;
     color: #8a1f11;
 }
 
+.wizard > .content > .body label
+{
+    display: inline-block;
+    margin-bottom: 0.5em;
+}
+
 .wizard > .content > .body label.error
 {
     color: #8a1f11;
     display: inline-block;
-    margin: 0 0 1em 1.5em;
-    vertical-align: middle;
+    margin-left: 1.5em;
 }
 
 .wizard > .actions
@@ -218,6 +229,8 @@
 {
     display: inline;
     float: right;
+    margin: 0 2.5%;
+    width: 95%;
 }
 
 .wizard > .actions > ul
@@ -231,6 +244,11 @@
     margin: 0 0.5em;
 }
 
+.wizard.vertical > .actions > ul > li
+{
+    margin: 0 0 0 1em;
+}
+
 .wizard > .actions a,
 .wizard > .actions a:hover,
 .wizard > .actions a:active
@@ -272,7 +290,7 @@
 {
     position: relative;
     display: block;
-    width: 600px;
+    width: 100%;
 }
 
 .tabcontrol > .steps > ul
@@ -285,33 +303,42 @@
 
 .tabcontrol > .steps > ul > li
 {
-    background: #edecec;
-    border: 1px solid #bbb;
     float: left;
-    margin: 5px -1px 0 0;
+    margin: 5px 2px 0 0;
+    padding: 1px;
+
+    -webkit-border-top-left-radius: 5px;
+    -webkit-border-top-right-radius: 5px;
+    -moz-border-radius-topleft: 5px;
+    -moz-border-radius-topright: 5px;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
 }
 
 .tabcontrol > .steps > ul > li:hover
 {
-    background: #fff;
+    background: #edecec;
+    border: 1px solid #bbb;
+    padding: 0;
 }
 
 .tabcontrol > .steps > ul > li.current
 {
     background: #fff;
+    border: 1px solid #bbb;
     border-bottom: 0 none;
-    padding-bottom: 1px;
+    padding: 0 0 1px 0;
     margin-top: 0;
 }
 
 .tabcontrol > .steps > ul > li > a
 {
+    color: #5f5f5f;
     display: inline-block;
-    font: 1em/1em Arial, Verdana, sans-serif;
     border: 0 none;
     margin: 0;
     padding: 10px 30px;
-    color: #5f5f5f;
+    text-decoration: none;
 }
 
 .tabcontrol > .steps > ul > li > a:hover
@@ -328,8 +355,8 @@
 {
     position: relative;
     display: inline-block;
-    width: 600px;
-    height: 300px;
+    width: 100%;
+    height: 35em;
     overflow: hidden;
     border-top: 1px solid #bbb;
     padding-top: 20px;
@@ -339,9 +366,9 @@
 {
     float: left;
     position: absolute;
-    width: 580px;
-    height: 280px;
-    padding: 10px;
+    width: 95%;
+    height: 95%;
+    padding: 2.5%;
 }
 
 .tabcontrol > .content > .body ul

JSteps/Content/examples.css

@@ -19,7 +19,7 @@ public async Task<ActionResult> AsyncContent()
         {
             await Task.Delay(2000);
 
-            return Json(new { title = "Async", content = "Async Result " + DateTime.UtcNow.ToString() });
+            return Content("<p>To test async loading again press \"Next\" and then go back to the first step.</p><p>I deactivated content cache for this demo so that you can try it again and again.</p>");
         }
 
         public ActionResult EmbeddedContent()