Demo improvements

bin/copy-dependencies

@@ -0,0 +1,9 @@
+# JS
+cp node_modules/jquery/dist/jquery.min.js demo/js
+cp node_modules/validaty/lib/jquery.validaty.js demo/js
+cp node_modules/validaty/lib/jquery.validaty.validators.js demo/js
+cp lib/jquery.stepy.js demo/js
+
+# CSS
+cp lib/jquery.stepy.css demo/css
+cp node_modules/validaty/lib/jquery.validaty.css demo/css

demo/css/common.css

@@ -4,9 +4,9 @@ a:hover { color: #48A5D4 }
 
 body { background-color: #E7E7E7; font: normal 10px/1.6 'Helvetica Neue', 'Lucida Grande', Helvetica, Arial, sans-serif }
 
-footer { font-size: 1.3em; margin: 0 auto; overflow: auto; padding-bottom: 15px; padding-top: 10px; text-align: center; width: 1100px }
+footer { font-size: 1.3em; margin: 0 auto; overflow: auto; padding-bottom: 15px; padding-top: 10px; text-align: center; width: 100% }
 
-h2 { border-bottom: 1px solid #DEDEDE; clear: right; color: #444; font-size: 2.6em; letter-spacing: .5px; line-height: 1.3em; padding-bottom: 3px }
+h2 { background-color: #dedede; border-left: 5px solid; clear: right; color: #444; font-size: 2.6em; letter-spacing: .5px; line-height: 1; margin: 40px 0 0; padding: 20px 0 20px 10px }
 h2 a { color: #444 }
 
 h3 { color: #777; font-size: 1.8em; letter-spacing: .4px; margin-bottom: 0 }
@@ -34,7 +34,9 @@ pre { background-color: #F8F8F8; border: 1px solid #EAEAEA; border-radius: 3px;
 
 .function p { color: #444; font-size: 1.2em; letter-spacing: .4px; margin-left: 3px; margin-top: -8px; text-align: left }
 
-.demo { margin-bottom: 10px }
+.demo { max-width: 700px; margin: 0 auto 20px auto }
+.demo:after,
+.demo form:after { content: ' '; clear: both; display: block }
 
 .highlight { clear: both }
 

demo/css/jquery.stepy.css

@@ -0,0 +1,15 @@
+.stepy-step {
+  display: none;
+}
+
+.stepy-step.stepy-active {
+  display: block;
+}
+
+.stepy-back, .stepy-next, .stepy-finish {
+  visibility: hidden;
+}
+
+.stepy-back.stepy-active, .stepy-next.stepy-active, .stepy-finish.stepy-active {
+  visibility: visible;
+}

demo/css/jquery.validaty.css

@@ -0,0 +1,59 @@
+@charset "utf-8";
+
+.validaty-balloon {
+  cursor: help;
+  opacity: 0;
+  position: absolute;
+}
+
+.validaty-balloon div {
+  border-right: 15px solid transparent;
+  border-top: 10px solid #444;
+  margin-left: 10px;
+  opacity: .8;
+  width: 0;
+}
+
+.validaty-balloon li {
+  color: white;
+  font-size: 1.2em;
+  font-weight: bold;
+  letter-spacing: .5px;
+  line-height: 1.6em;
+}
+
+.validaty-balloon ul {
+  background-color: #444;
+  border-radius: 5px;
+  list-style: none;
+  margin: 0;
+  opacity: .8;
+  padding: 4px 10px;
+}
+
+.validaty .invalid {
+  border: 1px solid #c00;
+}
+
+.validaty-message {
+  cursor: help;
+  opacity: 0
+}
+
+.validaty-message li {
+  color: #c00;
+  font-size: 1.1em;
+  line-height: 1.3em;
+  letter-spacing: .5px
+}
+
+.validaty-message ul {
+  opacity: .8;
+  list-style: none;
+  margin: 0;
+  padding: 4px 10px
+}
+
+.validaty .valid {
+  border: 1px solid #0c0;
+}

demo/css/stepy.demo.css

@@ -1,17 +1,19 @@
-.stepy-header { list-style: none; padding: 0; width: 724px }
+.stepy-header { list-style: none; padding: 0; width: 100% }
+  .stepy-header:after { content: ' '; display: block; clear: both }
   .stepy-header li { cursor: pointer; float: left; padding: 10px }
     .stepy-header li.stepy-error { background: url('../demo/img/error.png') no-repeat right top }
     .stepy-header li div { color: #ccc; font: bold 2.8em verdana; text-shadow: 1px 1px #f8f8f8 }
     .stepy-header li.stepy-active div { color: #369; cursor: auto }
     .stepy-header li span { color: #ccc; font: 1.4em verdana }
     .stepy-header li.stepy-active span { color: #bbb }
 
-.stepy-step { border: 1px solid #bbb; clear: left; padding: 15px 20px; width: 600px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px }
+.stepy-step { background-color: #f1f0f0; border: 1px solid #bbb; clear: left; padding: 15px 30px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin-bottom: 20px;  }
+
   .stepy-step label { color: #222; display: block; font: bold 1.5em arial; letter-spacing: .7px; margin: 10px 0 3px 1px }
 
   .stepy-step input,
   .stepy-step textarea,
-  .stepy-step select { border: 1px solid #999; border-radius: 5px; color: #333; font-size: 1.4em; height: 27px; margin-bottom: 12px; padding: 3px; width: 90% }
+  .stepy-step select { border: 1px solid #999; border-radius: 5px; color: #333; font-size: 1.4em; height: 27px; margin-bottom: 12px; padding: 3px; width: 100% }
 
   .stepy-step select { height: 34px; padding-top: 5px }
 
@@ -26,29 +28,47 @@
   -moz-border-radius: 3px;
   -opera-border-radius: 3px;
   -webkit-border-radius: 3px;
+  background-color: #369;
   border-radius: 3px;
-  border: 1px solid #ccc;
-  color: #7f0055;
+  border: 1px solid #405b75;
+  color: #fff;
   cursor: pointer;
   font: 1.2em verdana;
   padding: 7px 15px 8px;
   text-decoration: none;
+  transition: box-shadow ease-in-out .2s, background-color ease-in-out .2s;
 }
 
-.stepy-back:hover, .stepy-next:hover {
-  border-color: #bbb;
-  color: #b07;
-}
-
-.stepy-finish {
-  background-color: transparent;
+input[type="submit"].stepy-finish {
+  background-color: #369;
   border-radius: 3px !important;
-  border: 1px solid #ccc !important;
+  border: 1px solid #405b75 !important;
+  color: #fff;
+  cursor: pointer;
   float: right;
+  font: 1.2em verdana;
   height: 33px !important;
   width: 80px !important;
 }
 
+.stepy-finish,
+.stepy-back,
+.stepy-next {
+  display: none;
+}
+
+.stepy-active {
+  display: inline-block;
+}
+
+.stepy-finish:hover,
+.stepy-back:hover,
+.stepy-next:hover {
+  color: #fff;
+  box-shadow: 1px 1px 4px 0px rgba(0,0,0,.3);
+  transition: box-shadow ease-in-out .2s, background-color ease-in-out .2s;
+}
+
 .stepy-legend {
   color: #4080bf;
   font: bold 1.8em arial;
@@ -59,3 +79,8 @@
 .stepy-next {
   float: right
 }
+
+.highlight .demo-title {
+  font-size: 13px;
+  padding-top: 20px;
+}