init wizard component

shyoon05 · Jan 26, 2014 · b27853c · b27853c
1 parent a8d4ff9
commit b27853c
Show file tree

Hide file tree

Showing 20 changed files with 715 additions and 39 deletions.
diff --git a/compress/compressor.js b/compress/compressor.js
@@ -44,6 +44,7 @@ var modules = [
     module_path+'metro-scroll.js',
     module_path+'metro-stepper.js',
     module_path+'metro-pull.js',
+    module_path+'metro-wizard.js',
     module_path+'metro-initiator.js',
 ];
 

diff --git a/css/metro-bootstrap.css b/css/metro-bootstrap.css
@@ -7972,6 +7972,130 @@ a {
   clear: both;
   height: 0;
 }
+.metro .wizard .steps {
+  margin: 10px 0;
+  padding: 20px;
+  border: 1px #eeeeee solid;
+  position: relative;
+}
+.metro .wizard .steps .step {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+.metro .wizard .steps .step:first-child {
+  display: block;
+}
+.metro .wizard .actions .group-right {
+  float: right;
+}
+.metro .wizard .actions .group-left {
+  float: left;
+}
+.metro .wizard .actions button {
+  padding: 4px 12px;
+  text-align: center;
+  vertical-align: middle !important;
+  background-color: #d9d9d9;
+  border: 1px transparent solid;
+  color: #222222;
+  border-radius: 0;
+  cursor: pointer;
+  display: inline-block;
+  outline: none;
+  font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 16px;
+  margin-right: 2px;
+}
+.metro .wizard .actions button.default {
+  background-color: #008287;
+  color: #fff;
+}
+.metro .wizard .actions button:focus {
+  outline: 0;
+  border: 1px #353535 dotted;
+}
+.metro .wizard .actions button:disabled,
+.metro .wizard .actions button.disabled {
+  background-color: #eaeaea !important;
+  color: #bebebe !important;
+  cursor: not-allowed !important;
+}
+.metro .wizard .actions button * {
+  color: inherit;
+}
+.metro .wizard .actions button *:hover {
+  color: inherit;
+}
+.metro .wizard .actions button.primary {
+  background-color: #16499a !important;
+  color: #ffffff !important;
+}
+.metro .wizard .actions button.info {
+  background-color: #4390df !important;
+  color: #ffffff !important;
+}
+.metro .wizard .actions button.success {
+  background-color: #60a917 !important;
+  color: #ffffff !important;
+}
+.metro .wizard .actions button.warning {
+  background-color: #fa6800 !important;
+  color: #ffffff !important;
+}
+.metro .wizard .actions button.danger {
+  background-color: #9a1616 !important;
+  color: #ffffff !important;
+}
+.metro .wizard .actions button.inverse {
+  background-color: #1d1d1d !important;
+  color: #ffffff !important;
+}
+.metro .wizard .actions button.link {
+  background-color: transparent !important;
+  color: #2e92cf !important;
+}
+.metro .wizard .actions button.link:hover {
+  text-decoration: underline;
+}
+.metro .wizard .actions button.link:disabled,
+.metro .wizard .actions button.link.disabled {
+  background-color: transparent !important;
+  color: #bebebe !important;
+  cursor: not-allowed !important;
+}
+.metro .wizard .actions button.link [class*="icon-"] {
+  text-decoration: none !important;
+}
+.metro .wizard .actions button:active {
+  background-color: #1d1d1d !important;
+  color: #ffffff !important;
+  border-color: transparent;
+}
+.metro .wizard .actions button.large {
+  padding: 11px 19px;
+  font-size: 17.5px;
+}
+.metro .wizard .actions button.small {
+  padding: 2px 10px;
+  font-size: 11.9px;
+}
+.metro .wizard .actions button.mini {
+  padding: 0px 6px;
+  font-size: 10.5px;
+}
+.metro .wizard .actions button:last-child {
+  margin-right: 0;
+}
+.metro .wizard .actions button.btn-finish {
+  background-color: #60a917;
+  color: #ffffff;
+}
+.metro .wizard .actions button:disabled {
+  background-color: #6f6f6f !important;
+}
 @font-face {
   font-family: 'iconFont';
   src: url('../fonts/iconFont.eot');

diff --git a/docs/css/metro-bootstrap.css b/docs/css/metro-bootstrap.css
@@ -7972,6 +7972,130 @@ a {
   clear: both;
   height: 0;
 }
+.metro .wizard .steps {
+  margin: 10px 0;
+  padding: 20px;
+  border: 1px #eeeeee solid;
+  position: relative;
+}
+.metro .wizard .steps .step {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+.metro .wizard .steps .step:first-child {
+  display: block;
+}
+.metro .wizard .actions .group-right {
+  float: right;
+}
+.metro .wizard .actions .group-left {
+  float: left;
+}
+.metro .wizard .actions button {
+  padding: 4px 12px;
+  text-align: center;
+  vertical-align: middle !important;
+  background-color: #d9d9d9;
+  border: 1px transparent solid;
+  color: #222222;
+  border-radius: 0;
+  cursor: pointer;
+  display: inline-block;
+  outline: none;
+  font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 16px;
+  margin-right: 2px;
+}
+.metro .wizard .actions button.default {
+  background-color: #008287;
+  color: #fff;
+}
+.metro .wizard .actions button:focus {
+  outline: 0;
+  border: 1px #353535 dotted;
+}
+.metro .wizard .actions button:disabled,
+.metro .wizard .actions button.disabled {
+  background-color: #eaeaea !important;
+  color: #bebebe !important;
+  cursor: not-allowed !important;
+}
+.metro .wizard .actions button * {
+  color: inherit;
+}
+.metro .wizard .actions button *:hover {
+  color: inherit;
+}
+.metro .wizard .actions button.primary {
+  background-color: #16499a !important;
+  color: #ffffff !important;
+}
+.metro .wizard .actions button.info {
+  background-color: #4390df !important;
+  color: #ffffff !important;
+}
+.metro .wizard .actions button.success {
+  background-color: #60a917 !important;
+  color: #ffffff !important;
+}
+.metro .wizard .actions button.warning {
+  background-color: #fa6800 !important;
+  color: #ffffff !important;
+}
+.metro .wizard .actions button.danger {
+  background-color: #9a1616 !important;
+  color: #ffffff !important;
+}
+.metro .wizard .actions button.inverse {
+  background-color: #1d1d1d !important;
+  color: #ffffff !important;
+}
+.metro .wizard .actions button.link {
+  background-color: transparent !important;
+  color: #2e92cf !important;
+}
+.metro .wizard .actions button.link:hover {
+  text-decoration: underline;
+}
+.metro .wizard .actions button.link:disabled,
+.metro .wizard .actions button.link.disabled {
+  background-color: transparent !important;
+  color: #bebebe !important;
+  cursor: not-allowed !important;
+}
+.metro .wizard .actions button.link [class*="icon-"] {
+  text-decoration: none !important;
+}
+.metro .wizard .actions button:active {
+  background-color: #1d1d1d !important;
+  color: #ffffff !important;
+  border-color: transparent;
+}
+.metro .wizard .actions button.large {
+  padding: 11px 19px;
+  font-size: 17.5px;
+}
+.metro .wizard .actions button.small {
+  padding: 2px 10px;
+  font-size: 11.9px;
+}
+.metro .wizard .actions button.mini {
+  padding: 0px 6px;
+  font-size: 10.5px;
+}
+.metro .wizard .actions button:last-child {
+  margin-right: 0;
+}
+.metro .wizard .actions button.btn-finish {
+  background-color: #60a917;
+  color: #ffffff;
+}
+.metro .wizard .actions button:disabled {
+  background-color: #6f6f6f !important;
+}
 @font-face {
   font-family: 'iconFont';
   src: url('../fonts/iconFont.eot');

diff --git a/docs/header.html b/docs/header.html
@@ -44,6 +44,7 @@
                             <li><a href="accordion.html">Accordion</a></li>
                             <li><a href="buttons.html#_set">Button Set</a></li>
                             <li><a href="buttons.html#_breadcrumbs">Breadcrumbs</a></li>
+                            <li><a href="wizard.html">Wizard</a></li>
                         </ul>
                     </li>
                     <li>