patternfly-sass 3.12.0 → 3.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.eot +0 -0
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.svg +2 -0
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.ttf +0 -0
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.woff +0 -0
- data/assets/javascripts/patternfly.js +5 -1
- data/assets/javascripts/patternfly.min.js +2 -2
- data/assets/stylesheets/patternfly/_forms.scss +20 -0
- data/assets/stylesheets/patternfly/_icons.scss +6 -0
- data/assets/stylesheets/patternfly/_variables.scss +2 -0
- data/assets/stylesheets/patternfly/_vertical-nav.scss +34 -1
- data/bower.json +1 -1
- data/lib/patternfly-sass/version.rb +2 -2
- data/spec/html/card-view-multi-select.html +3 -2
- data/spec/html/card-view-single-select.html +3 -2
- data/spec/html/dist/css/patternfly-additions.css +42 -1
- data/spec/html/dist/css/patternfly-additions.css.map +1 -1
- data/spec/html/dist/css/patternfly-additions.min.css +1 -1
- data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
- data/spec/html/dist/css/patternfly.css +19 -0
- data/spec/html/dist/css/patternfly.css.map +1 -1
- data/spec/html/dist/css/patternfly.min.css +3 -3
- data/spec/html/dist/css/patternfly.min.css.map +1 -1
- data/spec/html/forms.html +174 -0
- data/spec/html/icons.html +8 -0
- data/spec/html/list-view-compound-expansion.html +3 -3
- data/spec/html/list-view-simple-expansion.html +3 -3
- data/spec/html/list-view.html +3 -3
- data/spec/html/notification-drawer-vertical-nav.html +3 -3
- data/spec/html/toolbar.html +4 -3
- data/spec/html/vertical-navigation-with-badges.html +6 -4
- data/spec/html/vertical-navigation-with-secondary.html +3 -3
- data/spec/html/vertical-navigation-with-tertiary-no-icons.html +4 -4
- data/spec/html/vertical-navigation-with-tertiary-pins.html +4 -4
- data/spec/html/wizard.html +394 -408
- metadata +2 -2
data/spec/html/icons.html
CHANGED
|
@@ -97,6 +97,10 @@
|
|
|
97
97
|
<span class="pficon pficon-delete"></span>
|
|
98
98
|
<span class="icon-class">pficon-delete</span>
|
|
99
99
|
</li>
|
|
100
|
+
<li>
|
|
101
|
+
<span class="pficon pficon-domain"></span>
|
|
102
|
+
<span class="icon-class">pficon-domain</span>
|
|
103
|
+
</li>
|
|
100
104
|
<li>
|
|
101
105
|
<span class="pficon pficon-edit"></span>
|
|
102
106
|
<span class="icon-class">pficon-edit</span>
|
|
@@ -229,6 +233,10 @@
|
|
|
229
233
|
<span class="pficon pficon-server"></span>
|
|
230
234
|
<span class="icon-class">pficon-server</span>
|
|
231
235
|
</li>
|
|
236
|
+
<li>
|
|
237
|
+
<span class="pficon pficon-server-group"></span>
|
|
238
|
+
<span class="icon-class">pficon-server-group</span>
|
|
239
|
+
</li>
|
|
232
240
|
<li>
|
|
233
241
|
<span class="pficon pficon-service"></span>
|
|
234
242
|
<span class="icon-class">pficon-service</span>
|
|
@@ -207,9 +207,9 @@
|
|
|
207
207
|
</div>
|
|
208
208
|
</div>
|
|
209
209
|
<div class="form-group toolbar-pf-view-selector">
|
|
210
|
-
<button class="btn btn-link"><i class="fa fa-th"></i></button>
|
|
211
|
-
<button class="btn btn-link
|
|
212
|
-
<button class="btn btn-link"><i class="fa fa-th-list"></i></button>
|
|
210
|
+
<button class="btn btn-link "><i class="fa fa-th"></i></button>
|
|
211
|
+
<button class="btn btn-link "><i class="fa fa-th-large"></i></button>
|
|
212
|
+
<button class="btn btn-link active"><i class="fa fa-th-list"></i></button>
|
|
213
213
|
</div>
|
|
214
214
|
</div>
|
|
215
215
|
</form>
|
|
@@ -207,9 +207,9 @@
|
|
|
207
207
|
</div>
|
|
208
208
|
</div>
|
|
209
209
|
<div class="form-group toolbar-pf-view-selector">
|
|
210
|
-
<button class="btn btn-link"><i class="fa fa-th"></i></button>
|
|
211
|
-
<button class="btn btn-link
|
|
212
|
-
<button class="btn btn-link"><i class="fa fa-th-list"></i></button>
|
|
210
|
+
<button class="btn btn-link "><i class="fa fa-th"></i></button>
|
|
211
|
+
<button class="btn btn-link "><i class="fa fa-th-large"></i></button>
|
|
212
|
+
<button class="btn btn-link active"><i class="fa fa-th-list"></i></button>
|
|
213
213
|
</div>
|
|
214
214
|
</div>
|
|
215
215
|
</form>
|
data/spec/html/list-view.html
CHANGED
|
@@ -205,9 +205,9 @@
|
|
|
205
205
|
</div>
|
|
206
206
|
</div>
|
|
207
207
|
<div class="form-group toolbar-pf-view-selector">
|
|
208
|
-
<button class="btn btn-link"><i class="fa fa-th"></i></button>
|
|
209
|
-
<button class="btn btn-link
|
|
210
|
-
<button class="btn btn-link"><i class="fa fa-th-list"></i></button>
|
|
208
|
+
<button class="btn btn-link "><i class="fa fa-th"></i></button>
|
|
209
|
+
<button class="btn btn-link "><i class="fa fa-th-large"></i></button>
|
|
210
|
+
<button class="btn btn-link active"><i class="fa fa-th-list"></i></button>
|
|
211
211
|
</div>
|
|
212
212
|
</div>
|
|
213
213
|
</form>
|
|
@@ -824,7 +824,7 @@
|
|
|
824
824
|
</nav> <!--/.navbar-->
|
|
825
825
|
|
|
826
826
|
<div class="nav-pf-vertical
|
|
827
|
-
nav-pf-vertical-with-sub-menus
|
|
827
|
+
nav-pf-vertical-with-sub-menus
|
|
828
828
|
|
|
829
829
|
|
|
830
830
|
|
|
@@ -893,7 +893,7 @@
|
|
|
893
893
|
<ul class="list-group">
|
|
894
894
|
<li class="list-group-item " data-target="#amet-detracto-tertiary">
|
|
895
895
|
<a>
|
|
896
|
-
<span class="list-group-item-value">Detracto</span>
|
|
896
|
+
<span class="list-group-item-value">Detracto Suscipiantur</span>
|
|
897
897
|
|
|
898
898
|
|
|
899
899
|
|
|
@@ -911,7 +911,7 @@
|
|
|
911
911
|
</li>
|
|
912
912
|
<li class="list-group-item " data-target="#amet-corrumpit-tertiary">
|
|
913
913
|
<a>
|
|
914
|
-
<span class="list-group-item-value">Corrumpit</span>
|
|
914
|
+
<span class="list-group-item-value">Corrumpit Cupidatat Proident Deserunt</span>
|
|
915
915
|
|
|
916
916
|
|
|
917
917
|
|
data/spec/html/toolbar.html
CHANGED
|
@@ -206,9 +206,9 @@
|
|
|
206
206
|
</div>
|
|
207
207
|
</div>
|
|
208
208
|
<div class="form-group toolbar-pf-view-selector">
|
|
209
|
-
<button class="btn btn-link"><i class="fa fa-th"></i></button>
|
|
210
|
-
<button class="btn btn-link
|
|
211
|
-
<button class="btn btn-link"><i class="fa fa-th-list"></i></button>
|
|
209
|
+
<button class="btn btn-link active"><i class="fa fa-th"></i></button>
|
|
210
|
+
<button class="btn btn-link "><i class="fa fa-th-large"></i></button>
|
|
211
|
+
<button class="btn btn-link "><i class="fa fa-th-list"></i></button>
|
|
212
212
|
</div>
|
|
213
213
|
</div>
|
|
214
214
|
</form>
|
|
@@ -258,6 +258,7 @@
|
|
|
258
258
|
});
|
|
259
259
|
})(jQuery);
|
|
260
260
|
</script>
|
|
261
|
+
|
|
261
262
|
</div><!-- /container -->
|
|
262
263
|
</body>
|
|
263
264
|
</html>
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
|
|
108
108
|
|
|
109
109
|
<div class="nav-pf-vertical
|
|
110
|
-
nav-pf-vertical-with-sub-menus
|
|
110
|
+
nav-pf-vertical-with-sub-menus
|
|
111
111
|
|
|
112
112
|
|
|
113
113
|
|
|
@@ -322,7 +322,7 @@
|
|
|
322
322
|
<ul class="list-group">
|
|
323
323
|
<li class="list-group-item tertiary-nav-item-pf" data-target="#amet-detracto-tertiary">
|
|
324
324
|
<a>
|
|
325
|
-
<span class="list-group-item-value">Detracto</span>
|
|
325
|
+
<span class="list-group-item-value">Detracto Suscipiantur</span>
|
|
326
326
|
|
|
327
327
|
</a>
|
|
328
328
|
|
|
@@ -416,7 +416,7 @@
|
|
|
416
416
|
</li>
|
|
417
417
|
<li class="list-group-item tertiary-nav-item-pf" data-target="#amet-corrumpit-tertiary">
|
|
418
418
|
<a>
|
|
419
|
-
<span class="list-group-item-value">Corrumpit</span>
|
|
419
|
+
<span class="list-group-item-value">Corrumpit Cupidatat Proident Deserunt</span>
|
|
420
420
|
|
|
421
421
|
</a>
|
|
422
422
|
|
|
@@ -464,10 +464,12 @@
|
|
|
464
464
|
|
|
465
465
|
<li class="list-group-item">
|
|
466
466
|
<a>
|
|
467
|
-
<span class="list-group-item-value">
|
|
467
|
+
<span class="list-group-item-value">Urbanitas Habitant Morbi Tristique</span>
|
|
468
468
|
|
|
469
469
|
<div class="badge-container-pf">
|
|
470
470
|
<span class="badge">5</span>
|
|
471
|
+
<span class="badge">5</span>
|
|
472
|
+
<span class="badge">5</span>
|
|
471
473
|
</div>
|
|
472
474
|
|
|
473
475
|
</a>
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
|
|
108
108
|
|
|
109
109
|
<div class="nav-pf-vertical
|
|
110
|
-
nav-pf-vertical-with-sub-menus
|
|
110
|
+
nav-pf-vertical-with-sub-menus
|
|
111
111
|
|
|
112
112
|
|
|
113
113
|
|
|
@@ -176,7 +176,7 @@
|
|
|
176
176
|
<ul class="list-group">
|
|
177
177
|
<li class="list-group-item " data-target="#amet-detracto-tertiary">
|
|
178
178
|
<a>
|
|
179
|
-
<span class="list-group-item-value">Detracto</span>
|
|
179
|
+
<span class="list-group-item-value">Detracto Suscipiantur</span>
|
|
180
180
|
|
|
181
181
|
|
|
182
182
|
|
|
@@ -194,7 +194,7 @@
|
|
|
194
194
|
</li>
|
|
195
195
|
<li class="list-group-item " data-target="#amet-corrumpit-tertiary">
|
|
196
196
|
<a>
|
|
197
|
-
<span class="list-group-item-value">Corrumpit</span>
|
|
197
|
+
<span class="list-group-item-value">Corrumpit Cupidatat Proident Deserunt</span>
|
|
198
198
|
|
|
199
199
|
|
|
200
200
|
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
|
|
108
108
|
|
|
109
109
|
<div class="nav-pf-vertical
|
|
110
|
-
nav-pf-vertical-with-sub-menus
|
|
110
|
+
nav-pf-vertical-with-sub-menus
|
|
111
111
|
|
|
112
112
|
|
|
113
113
|
hidden-icons-pf
|
|
@@ -265,7 +265,7 @@
|
|
|
265
265
|
<ul class="list-group">
|
|
266
266
|
<li class="list-group-item tertiary-nav-item-pf" data-target="#amet-detracto-tertiary">
|
|
267
267
|
<a>
|
|
268
|
-
<span class="list-group-item-value">Detracto</span>
|
|
268
|
+
<span class="list-group-item-value">Detracto Suscipiantur</span>
|
|
269
269
|
|
|
270
270
|
</a>
|
|
271
271
|
|
|
@@ -335,7 +335,7 @@
|
|
|
335
335
|
</li>
|
|
336
336
|
<li class="list-group-item tertiary-nav-item-pf" data-target="#amet-corrumpit-tertiary">
|
|
337
337
|
<a>
|
|
338
|
-
<span class="list-group-item-value">Corrumpit</span>
|
|
338
|
+
<span class="list-group-item-value">Corrumpit Cupidatat Proident Deserunt</span>
|
|
339
339
|
|
|
340
340
|
</a>
|
|
341
341
|
|
|
@@ -371,7 +371,7 @@
|
|
|
371
371
|
|
|
372
372
|
<li class="list-group-item">
|
|
373
373
|
<a>
|
|
374
|
-
<span class="list-group-item-value">
|
|
374
|
+
<span class="list-group-item-value">Urbanitas Habitant Morbi Tristique</span>
|
|
375
375
|
|
|
376
376
|
</a>
|
|
377
377
|
</li>
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
|
|
108
108
|
|
|
109
109
|
<div class="nav-pf-vertical
|
|
110
|
-
nav-pf-vertical-with-sub-menus
|
|
110
|
+
nav-pf-vertical-with-sub-menus
|
|
111
111
|
|
|
112
112
|
nav-pf-vertical-collapsible-menus
|
|
113
113
|
|
|
@@ -265,7 +265,7 @@
|
|
|
265
265
|
<ul class="list-group">
|
|
266
266
|
<li class="list-group-item tertiary-nav-item-pf" data-target="#amet-detracto-tertiary">
|
|
267
267
|
<a>
|
|
268
|
-
<span class="list-group-item-value">Detracto</span>
|
|
268
|
+
<span class="list-group-item-value">Detracto Suscipiantur</span>
|
|
269
269
|
|
|
270
270
|
</a>
|
|
271
271
|
|
|
@@ -335,7 +335,7 @@
|
|
|
335
335
|
</li>
|
|
336
336
|
<li class="list-group-item tertiary-nav-item-pf" data-target="#amet-corrumpit-tertiary">
|
|
337
337
|
<a>
|
|
338
|
-
<span class="list-group-item-value">Corrumpit</span>
|
|
338
|
+
<span class="list-group-item-value">Corrumpit Cupidatat Proident Deserunt</span>
|
|
339
339
|
|
|
340
340
|
</a>
|
|
341
341
|
|
|
@@ -371,7 +371,7 @@
|
|
|
371
371
|
|
|
372
372
|
<li class="list-group-item">
|
|
373
373
|
<a>
|
|
374
|
-
<span class="list-group-item-value">
|
|
374
|
+
<span class="list-group-item-value">Urbanitas Habitant Morbi Tristique</span>
|
|
375
375
|
|
|
376
376
|
</a>
|
|
377
377
|
</li>
|
data/spec/html/wizard.html
CHANGED
|
@@ -40,447 +40,282 @@
|
|
|
40
40
|
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
|
|
41
41
|
</div>
|
|
42
42
|
<hr>
|
|
43
|
-
|
|
44
43
|
<h2>Complete Wizard</h2>
|
|
45
|
-
<button class="btn btn-default wizard-pf-open" data-target="#complete">Launch wizard</button>
|
|
46
|
-
<div class="
|
|
47
|
-
<div class="modal
|
|
48
|
-
<div class="modal-
|
|
49
|
-
<div class="modal-
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
<div class="
|
|
56
|
-
<
|
|
57
|
-
<
|
|
58
|
-
<
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
</ul>
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
|
-
<div class="wizard-pf-row">
|
|
71
|
-
<div class="wizard-pf-sidebar hidden">
|
|
72
|
-
<ul class="list-group">
|
|
73
|
-
<li class="list-group-item active">
|
|
74
|
-
<a href="#">
|
|
75
|
-
<span class="wizard-pf-substep-number">1A.</span>
|
|
76
|
-
<span class="wizard-pf-substep-title">Details</span>
|
|
77
|
-
</a>
|
|
78
|
-
</li>
|
|
79
|
-
<li class="list-group-item">
|
|
80
|
-
<a href="#">
|
|
81
|
-
<span class="wizard-pf-substep-number">1B.</span>
|
|
82
|
-
<span class="wizard-pf-substep-title">Settings</span>
|
|
83
|
-
</a>
|
|
84
|
-
</li>
|
|
85
|
-
</ul>
|
|
86
|
-
<ul class="list-group hidden">
|
|
87
|
-
<li class="list-group-item">
|
|
88
|
-
<a href="#">
|
|
89
|
-
<span class="wizard-pf-substep-number">2A.</span>
|
|
90
|
-
<span class="wizard-pf-substep-title">Details</span>
|
|
91
|
-
</a>
|
|
92
|
-
</li>
|
|
93
|
-
<li class="list-group-item">
|
|
94
|
-
<a href="#">
|
|
95
|
-
<span class="wizard-pf-substep-number">2B.</span>
|
|
96
|
-
<span class="wizard-pf-substep-title">Settings</span>
|
|
97
|
-
</a>
|
|
98
|
-
</li>
|
|
99
|
-
</ul>
|
|
100
|
-
<ul class="list-group hidden">
|
|
101
|
-
<li class="list-group-item">
|
|
102
|
-
<a>
|
|
103
|
-
<span class="wizard-pf-substep-number">3A.</span>
|
|
104
|
-
<span class="wizard-pf-substep-title">Summary</span>
|
|
105
|
-
</a>
|
|
106
|
-
</li>
|
|
107
|
-
<li class="list-group-item">
|
|
108
|
-
<a>
|
|
109
|
-
<span class="wizard-pf-substep-number">3B.</span>
|
|
110
|
-
<span class="wizard-pf-substep-title">Progress</span>
|
|
111
|
-
</a>
|
|
112
|
-
</li>
|
|
113
|
-
</ul>
|
|
114
|
-
</div> <!-- /.wizard-pf-sidebar -->
|
|
115
|
-
<div class="wizard-pf-main">
|
|
116
|
-
<div class="wizard-pf-loading blank-slate-pf">
|
|
117
|
-
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
|
|
118
|
-
<h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
|
|
119
|
-
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
|
120
|
-
vivamus, lorem sociosqu eget nunc amet. </p>
|
|
121
|
-
</div>
|
|
122
|
-
<div class="wizard-pf-contents hidden">
|
|
123
|
-
<form class="form-horizontal">
|
|
124
|
-
<!-- replacing id with data-id to pass build errors -->
|
|
125
|
-
<div class="form-group required">
|
|
126
|
-
<label class="col-sm-2 control-label" for="textInput-markup">Name</label>
|
|
127
|
-
<div class="col-sm-10">
|
|
128
|
-
<input type="text" data-id="textInput-markup" class="form-control">
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
<div class="form-group">
|
|
132
|
-
<label class="col-sm-2 control-label" for="descriptionInput-markup">Description (Optional)</label>
|
|
133
|
-
<div class="col-sm-10">
|
|
134
|
-
<textarea data-id="descriptionInput-markup" class="form-control" rows="2"></textarea>
|
|
135
|
-
</div>
|
|
136
|
-
</div>
|
|
137
|
-
</form>
|
|
138
|
-
</div>
|
|
139
|
-
<div class="wizard-pf-contents hidden">
|
|
140
|
-
<form class="form-horizontal">
|
|
141
|
-
<div class="form-group required">
|
|
142
|
-
<label class="col-sm-2 control-label" for="lorem">Lorem ipsum</label>
|
|
143
|
-
<div class="col-sm-10">
|
|
144
|
-
<input type="text" id="lorem" class="form-control">
|
|
145
|
-
</div>
|
|
146
|
-
</div>
|
|
147
|
-
<div class="form-group">
|
|
148
|
-
<label class="col-sm-2 control-label" for="dolor">Dolor (Optional)</label>
|
|
149
|
-
<div class="col-sm-10">
|
|
150
|
-
<textarea id="dolor" class="form-control" rows="2"></textarea>
|
|
151
|
-
</div>
|
|
152
|
-
</div>
|
|
153
|
-
</form>
|
|
154
|
-
</div>
|
|
155
|
-
<div class="wizard-pf-contents hidden">
|
|
156
|
-
<form class="form-horizontal">
|
|
157
|
-
<div class="form-group required">
|
|
158
|
-
<label class="col-sm-2 control-label" for="aliquam">Aliquam</label>
|
|
159
|
-
<div class="col-sm-10">
|
|
160
|
-
<input type="text" id="aliquam" class="form-control">
|
|
161
|
-
</div>
|
|
162
|
-
</div>
|
|
163
|
-
<div class="form-group">
|
|
164
|
-
<label class="col-sm-2 control-label" for="fermentum">Fermentum</label>
|
|
165
|
-
<div class="col-sm-10">
|
|
166
|
-
<textarea id="fermentum" class="form-control" rows="2"></textarea>
|
|
167
|
-
</div>
|
|
168
|
-
</div>
|
|
169
|
-
</form>
|
|
170
|
-
</div>
|
|
171
|
-
<div class="wizard-pf-contents hidden">
|
|
172
|
-
<form class="form-horizontal">
|
|
173
|
-
<div class="form-group required">
|
|
174
|
-
<label class="col-sm-2 control-label" for="consectetur">Consectetur</label>
|
|
175
|
-
<div class="col-sm-10">
|
|
176
|
-
<input type="text" id="consectetur" class="form-control">
|
|
177
|
-
</div>
|
|
178
|
-
</div>
|
|
179
|
-
<div class="form-group">
|
|
180
|
-
<label class="col-sm-2 control-label" for="adipiscing">Adipiscing</label>
|
|
181
|
-
<div class="col-sm-10">
|
|
182
|
-
<textarea id="adipiscing" class="form-control" rows="2"></textarea>
|
|
183
|
-
</div>
|
|
184
|
-
</div>
|
|
185
|
-
</form>
|
|
186
|
-
</div>
|
|
187
|
-
<div class="wizard-pf-contents hidden">
|
|
188
|
-
<div class="wizard-pf-review-steps">
|
|
189
|
-
<ul class="list-group">
|
|
190
|
-
<li class="list-group-item">
|
|
191
|
-
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1').toggleClass('collapse');">First Step</a>
|
|
192
|
-
<div id="reviewStep1" class="wizard-pf-review-substeps">
|
|
193
|
-
<ul class="list-group">
|
|
194
|
-
<li class="list-group-item">
|
|
195
|
-
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep1').toggleClass('collapse');">
|
|
196
|
-
<span class="wizard-pf-substep-number">1A.</span>
|
|
197
|
-
<span class="wizard-pf-substep-title">Details</span>
|
|
198
|
-
</a>
|
|
199
|
-
<div id="reviewStep1Substep1" class="wizard-pf-review-content">
|
|
200
|
-
<form class="form">
|
|
201
|
-
<div class="wizard-pf-review-item">
|
|
202
|
-
<span class="wizard-pf-review-item-label">Name:</span>
|
|
203
|
-
<span class="wizard-pf-review-item-value">First Last</span>
|
|
204
|
-
</div>
|
|
205
|
-
<div class="wizard-pf-review-item">
|
|
206
|
-
<span class="wizard-pf-review-item-label">Description:</span>
|
|
207
|
-
<span class="wizard-pf-review-item-value">This is the description</span>
|
|
208
|
-
</div>
|
|
209
|
-
</form>
|
|
210
|
-
</div>
|
|
211
|
-
</li>
|
|
212
|
-
<li class="list-group-item">
|
|
213
|
-
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep2').toggleClass('collapse');">
|
|
214
|
-
<span class="wizard-pf-substep-number">1B.</span>
|
|
215
|
-
<span class="wizard-pf-substep-title">Settings</span>
|
|
216
|
-
</a>
|
|
217
|
-
<div id="reviewStep1Substep2" class="wizard-pf-review-content">
|
|
218
|
-
<form class="form">
|
|
219
|
-
<div class="wizard-pf-review-item">
|
|
220
|
-
<div class="wizard-pf-review-item-field">Setting A</div>
|
|
221
|
-
<div class="wizard-pf-review-item-field">Setting B</div>
|
|
222
|
-
</div>
|
|
223
|
-
</form>
|
|
224
|
-
</div>
|
|
225
|
-
</li>
|
|
226
|
-
</ul>
|
|
227
|
-
</div>
|
|
228
|
-
</li>
|
|
229
|
-
<li class="list-group-item">
|
|
230
|
-
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2').toggleClass('collapse');">Second Step</a>
|
|
231
|
-
<div id="reviewStep2" class="wizard-pf-review-substeps">
|
|
232
|
-
<ul class="list-group">
|
|
233
|
-
<li class="list-group-item">
|
|
234
|
-
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep1').toggleClass('collapse');">
|
|
235
|
-
<span class="wizard-pf-substep-number">2A.</span>
|
|
236
|
-
<span class="wizard-pf-substep-title">Details</span>
|
|
237
|
-
</a>
|
|
238
|
-
<div id="reviewStep2Substep1" class="wizard-pf-review-content">
|
|
239
|
-
<form class="form">
|
|
240
|
-
<div class="wizard-pf-review-item">
|
|
241
|
-
<span class="wizard-pf-review-item-label">Name:</span>
|
|
242
|
-
<span class="wizard-pf-review-item-value">First Last</span>
|
|
243
|
-
</div>
|
|
244
|
-
<div class="wizard-pf-review-item">
|
|
245
|
-
<span class="wizard-pf-review-item-label">Description:</span>
|
|
246
|
-
<span class="wizard-pf-review-item-value">This is the description</span>
|
|
247
|
-
</div>
|
|
248
|
-
</form>
|
|
249
|
-
</div>
|
|
250
|
-
</li>
|
|
251
|
-
<li class="list-group-item">
|
|
252
|
-
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep2').toggleClass('collapse');">
|
|
253
|
-
<span class="wizard-pf-substep-number">2B.</span>
|
|
254
|
-
<span class="wizard-pf-substep-title">Settings</span>
|
|
255
|
-
</a>
|
|
256
|
-
<div id="reviewStep2Substep2" class="wizard-pf-review-content">
|
|
257
|
-
<form class="form">
|
|
258
|
-
<div class="wizard-pf-review-item">
|
|
259
|
-
<div class="wizard-pf-review-item-field">Setting A</div>
|
|
260
|
-
<div class="wizard-pf-review-item-field">Setting B</div>
|
|
261
|
-
</div>
|
|
262
|
-
</form>
|
|
263
|
-
</div>
|
|
264
|
-
</li>
|
|
265
|
-
</ul>
|
|
266
|
-
</div>
|
|
267
|
-
</li>
|
|
268
|
-
</ul>
|
|
269
|
-
</div>
|
|
270
|
-
</div>
|
|
271
|
-
<div class="wizard-pf-contents hidden">
|
|
272
|
-
<div class="wizard-pf-process blank-slate-pf">
|
|
273
|
-
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
|
|
274
|
-
<h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
|
|
275
|
-
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
|
276
|
-
vivamus, lorem sociosqu eget nunc amet. </p>
|
|
277
|
-
</div>
|
|
278
|
-
<div class="wizard-pf-complete blank-slate-pf hidden">
|
|
279
|
-
<div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
|
|
280
|
-
<h3 class="blank-slate-pf-main-action">Deployment was successful</h3>
|
|
281
|
-
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
|
282
|
-
vivamus, lorem sociosqu eget nunc amet. </p>
|
|
283
|
-
<button type="button" class="btn btn-lg btn-primary">
|
|
284
|
-
View Deployment
|
|
285
|
-
</button>
|
|
286
|
-
|
|
287
|
-
</div>
|
|
288
|
-
</div>
|
|
289
|
-
</div><!-- /.wizard-pf-main -->
|
|
290
|
-
</div>
|
|
291
|
-
|
|
292
|
-
</div><!-- /.wizard-pf-body -->
|
|
293
|
-
|
|
294
|
-
<div class="modal-footer wizard-pf-footer">
|
|
295
|
-
<button type="button" class="btn btn-default btn-cancel wizard-pf-cancel wizard-pf-dismiss">Cancel</button>
|
|
296
|
-
<button type="button" class="btn btn-default wizard-pf-back disabled">
|
|
297
|
-
<span class="i fa fa-angle-left"></span>
|
|
298
|
-
Back
|
|
299
|
-
</button>
|
|
300
|
-
<button type="button" class="btn btn-primary wizard-pf-next disabled">
|
|
301
|
-
Next
|
|
302
|
-
<span class="i fa fa-angle-right"></span>
|
|
303
|
-
</button>
|
|
304
|
-
<button type="button" class="btn btn-primary hidden wizard-pf-finish">
|
|
305
|
-
Deploy
|
|
306
|
-
<span class="i fa fa-angle-right"></span>
|
|
307
|
-
</button>
|
|
308
|
-
<button type="button" class="btn btn-primary hidden wizard-pf-close wizard-pf-dismiss">Close</button>
|
|
309
|
-
|
|
310
|
-
</div><!-- /.wizard-pf-footer -->
|
|
311
|
-
|
|
312
|
-
</div><!-- /.modal-content -->
|
|
313
|
-
</div><!-- /.modal-dialog -->
|
|
314
|
-
</div><!-- /.modal -->
|
|
315
|
-
</div><!-- /.example-pf (not for production) -->
|
|
316
|
-
|
|
317
|
-
<h2>Initializing</h2>
|
|
318
|
-
<button class="btn btn-default" data-toggle="modal" data-target="#initializing">Launch wizard showing initialization
|
|
319
|
-
state
|
|
320
|
-
</button>
|
|
321
|
-
<div class="example-pf "><!-- for testing/dev; not for production -->
|
|
322
|
-
<div class="modal" id="initializing" tabindex="-1" role="dialog">
|
|
323
|
-
<div class="modal-dialog modal-lg wizard-pf">
|
|
324
|
-
<div class="modal-content">
|
|
325
|
-
<div class="modal-header">
|
|
326
|
-
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
327
|
-
<span aria-hidden="true">×</span>
|
|
328
|
-
</button>
|
|
329
|
-
<dt class="modal-title">Wizard Title</dt>
|
|
44
|
+
<button class="btn btn-default wizard-pf-open wizard-pf-complete" data-target="#complete">Launch wizard</button>
|
|
45
|
+
<div class="modal" id="complete" tabindex="-1" role="dialog">
|
|
46
|
+
<div class="modal-dialog modal-lg wizard-pf">
|
|
47
|
+
<div class="modal-content">
|
|
48
|
+
<div class="modal-header">
|
|
49
|
+
<button type="button" class="close wizard-pf-dismiss" aria-label="Close"><span
|
|
50
|
+
aria-hidden="true">×</span></button>
|
|
51
|
+
<dt class="modal-title">Wizard Title</dt>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="modal-body wizard-pf-body clearfix">
|
|
54
|
+
<div class="wizard-pf-steps hidden">
|
|
55
|
+
<ul class="wizard-pf-steps-indicator">
|
|
56
|
+
<li class="wizard-pf-step active" data-tabgroup="1">
|
|
57
|
+
<a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
|
|
58
|
+
</li>
|
|
59
|
+
<li class="wizard-pf-step" data-tabgroup="2">
|
|
60
|
+
<a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
|
|
61
|
+
</li>
|
|
62
|
+
<li class="wizard-pf-step" data-tabgroup="3">
|
|
63
|
+
<a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
|
|
64
|
+
</li>
|
|
65
|
+
</ul>
|
|
330
66
|
</div>
|
|
331
|
-
<div class="modal-body wizard-pf-body clearfix">
|
|
332
|
-
<div class="wizard-pf-steps hidden">
|
|
333
|
-
<ul class="wizard-pf-steps-indicator">
|
|
334
|
-
<li>
|
|
335
|
-
<a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
|
|
336
|
-
</li>
|
|
337
|
-
<li>
|
|
338
|
-
<a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
|
|
339
|
-
</li>
|
|
340
|
-
<li>
|
|
341
|
-
<a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
|
|
342
|
-
</li>
|
|
343
|
-
</ul>
|
|
344
|
-
</div>
|
|
345
67
|
|
|
68
|
+
<div class="wizard-pf-row">
|
|
346
69
|
<div class="wizard-pf-sidebar hidden">
|
|
347
70
|
<ul class="list-group">
|
|
348
71
|
<li class="list-group-item active">
|
|
349
|
-
<a>
|
|
72
|
+
<a href="#">
|
|
350
73
|
<span class="wizard-pf-substep-number">1A.</span>
|
|
351
|
-
<span class="wizard-pf-substep-title">
|
|
74
|
+
<span class="wizard-pf-substep-title">Details</span>
|
|
352
75
|
</a>
|
|
353
76
|
</li>
|
|
354
77
|
<li class="list-group-item">
|
|
355
|
-
<a>
|
|
78
|
+
<a href="#">
|
|
356
79
|
<span class="wizard-pf-substep-number">1B.</span>
|
|
357
|
-
<span class="wizard-pf-substep-title">
|
|
80
|
+
<span class="wizard-pf-substep-title">Settings</span>
|
|
81
|
+
</a>
|
|
82
|
+
</li>
|
|
83
|
+
</ul>
|
|
84
|
+
<ul class="list-group hidden">
|
|
85
|
+
<li class="list-group-item">
|
|
86
|
+
<a href="#">
|
|
87
|
+
<span class="wizard-pf-substep-number">2A.</span>
|
|
88
|
+
<span class="wizard-pf-substep-title">Details</span>
|
|
89
|
+
</a>
|
|
90
|
+
</li>
|
|
91
|
+
<li class="list-group-item">
|
|
92
|
+
<a href="#">
|
|
93
|
+
<span class="wizard-pf-substep-number">2B.</span>
|
|
94
|
+
<span class="wizard-pf-substep-title">Settings</span>
|
|
95
|
+
</a>
|
|
96
|
+
</li>
|
|
97
|
+
</ul>
|
|
98
|
+
<ul class="list-group hidden">
|
|
99
|
+
<li class="list-group-item">
|
|
100
|
+
<a>
|
|
101
|
+
<span class="wizard-pf-substep-number">3A.</span>
|
|
102
|
+
<span class="wizard-pf-substep-title">Summary</span>
|
|
358
103
|
</a>
|
|
359
104
|
</li>
|
|
360
105
|
<li class="list-group-item">
|
|
361
106
|
<a>
|
|
362
|
-
<span class="wizard-pf-substep-number">
|
|
363
|
-
<span class="wizard-pf-substep-title">
|
|
107
|
+
<span class="wizard-pf-substep-number">3B.</span>
|
|
108
|
+
<span class="wizard-pf-substep-title">Progress</span>
|
|
364
109
|
</a>
|
|
365
110
|
</li>
|
|
366
111
|
</ul>
|
|
367
|
-
</div
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
<div class="blank-slate-pf">
|
|
112
|
+
</div> <!-- /.wizard-pf-sidebar -->
|
|
113
|
+
<div class="wizard-pf-main">
|
|
114
|
+
<div class="wizard-pf-loading blank-slate-pf">
|
|
371
115
|
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
|
|
372
116
|
<h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
|
|
373
117
|
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
|
374
118
|
vivamus, lorem sociosqu eget nunc amet. </p>
|
|
375
119
|
</div>
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
</
|
|
403
|
-
<div class="
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
<
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
<
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
</
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
120
|
+
<div class="wizard-pf-contents hidden">
|
|
121
|
+
<form class="form-horizontal">
|
|
122
|
+
<!-- replacing id with data-id to pass build errors -->
|
|
123
|
+
<div class="form-group required">
|
|
124
|
+
<label class="col-sm-2 control-label" for="textInput-markup">Name</label>
|
|
125
|
+
<div class="col-sm-10">
|
|
126
|
+
<input type="text" data-id="textInput-markup" class="form-control">
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="form-group">
|
|
130
|
+
<label class="col-sm-2 control-label" for="descriptionInput-markup">Description (Optional)</label>
|
|
131
|
+
<div class="col-sm-10">
|
|
132
|
+
<textarea data-id="descriptionInput-markup" class="form-control" rows="2"></textarea>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
</form>
|
|
136
|
+
</div>
|
|
137
|
+
<div class="wizard-pf-contents hidden">
|
|
138
|
+
<form class="form-horizontal">
|
|
139
|
+
<div class="form-group required">
|
|
140
|
+
<label class="col-sm-2 control-label" for="lorem">Lorem ipsum</label>
|
|
141
|
+
<div class="col-sm-10">
|
|
142
|
+
<input type="text" id="lorem" class="form-control">
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="form-group">
|
|
146
|
+
<label class="col-sm-2 control-label" for="dolor">Dolor (Optional)</label>
|
|
147
|
+
<div class="col-sm-10">
|
|
148
|
+
<textarea id="dolor" class="form-control" rows="2"></textarea>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
</form>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="wizard-pf-contents hidden">
|
|
154
|
+
<form class="form-horizontal">
|
|
155
|
+
<div class="form-group required">
|
|
156
|
+
<label class="col-sm-2 control-label" for="aliquam">Aliquam</label>
|
|
157
|
+
<div class="col-sm-10">
|
|
158
|
+
<input type="text" id="aliquam" class="form-control">
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="form-group">
|
|
162
|
+
<label class="col-sm-2 control-label" for="fermentum">Fermentum</label>
|
|
163
|
+
<div class="col-sm-10">
|
|
164
|
+
<textarea id="fermentum" class="form-control" rows="2"></textarea>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
</form>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="wizard-pf-contents hidden">
|
|
170
|
+
<form class="form-horizontal">
|
|
171
|
+
<div class="form-group required">
|
|
172
|
+
<label class="col-sm-2 control-label" for="consectetur">Consectetur</label>
|
|
173
|
+
<div class="col-sm-10">
|
|
174
|
+
<input type="text" id="consectetur" class="form-control">
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="form-group">
|
|
178
|
+
<label class="col-sm-2 control-label" for="adipiscing">Adipiscing</label>
|
|
179
|
+
<div class="col-sm-10">
|
|
180
|
+
<textarea id="adipiscing" class="form-control" rows="2"></textarea>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</form>
|
|
184
|
+
</div>
|
|
185
|
+
<div class="wizard-pf-contents hidden">
|
|
186
|
+
<div class="wizard-pf-review-steps">
|
|
187
|
+
<ul class="list-group">
|
|
188
|
+
<li class="list-group-item">
|
|
189
|
+
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1').toggleClass('collapse');">First Step</a>
|
|
190
|
+
<div id="reviewStep1" class="wizard-pf-review-substeps">
|
|
191
|
+
<ul class="list-group">
|
|
192
|
+
<li class="list-group-item">
|
|
193
|
+
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep1').toggleClass('collapse');">
|
|
194
|
+
<span class="wizard-pf-substep-number">1A.</span>
|
|
195
|
+
<span class="wizard-pf-substep-title">Details</span>
|
|
196
|
+
</a>
|
|
197
|
+
<div id="reviewStep1Substep1" class="wizard-pf-review-content">
|
|
198
|
+
<form class="form">
|
|
199
|
+
<div class="wizard-pf-review-item">
|
|
200
|
+
<span class="wizard-pf-review-item-label">Name:</span>
|
|
201
|
+
<span class="wizard-pf-review-item-value">First Last</span>
|
|
202
|
+
</div>
|
|
203
|
+
<div class="wizard-pf-review-item">
|
|
204
|
+
<span class="wizard-pf-review-item-label">Description:</span>
|
|
205
|
+
<span class="wizard-pf-review-item-value">This is the description</span>
|
|
206
|
+
</div>
|
|
207
|
+
</form>
|
|
208
|
+
</div>
|
|
209
|
+
</li>
|
|
210
|
+
<li class="list-group-item">
|
|
211
|
+
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep2').toggleClass('collapse');">
|
|
212
|
+
<span class="wizard-pf-substep-number">1B.</span>
|
|
213
|
+
<span class="wizard-pf-substep-title">Settings</span>
|
|
214
|
+
</a>
|
|
215
|
+
<div id="reviewStep1Substep2" class="wizard-pf-review-content">
|
|
216
|
+
<form class="form">
|
|
217
|
+
<div class="wizard-pf-review-item">
|
|
218
|
+
<div class="wizard-pf-review-item-field">Setting A</div>
|
|
219
|
+
<div class="wizard-pf-review-item-field">Setting B</div>
|
|
220
|
+
</div>
|
|
221
|
+
</form>
|
|
222
|
+
</div>
|
|
223
|
+
</li>
|
|
224
|
+
</ul>
|
|
225
|
+
</div>
|
|
226
|
+
</li>
|
|
227
|
+
<li class="list-group-item">
|
|
228
|
+
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2').toggleClass('collapse');">Second Step</a>
|
|
229
|
+
<div id="reviewStep2" class="wizard-pf-review-substeps">
|
|
230
|
+
<ul class="list-group">
|
|
231
|
+
<li class="list-group-item">
|
|
232
|
+
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep1').toggleClass('collapse');">
|
|
233
|
+
<span class="wizard-pf-substep-number">2A.</span>
|
|
234
|
+
<span class="wizard-pf-substep-title">Details</span>
|
|
235
|
+
</a>
|
|
236
|
+
<div id="reviewStep2Substep1" class="wizard-pf-review-content">
|
|
237
|
+
<form class="form">
|
|
238
|
+
<div class="wizard-pf-review-item">
|
|
239
|
+
<span class="wizard-pf-review-item-label">Name:</span>
|
|
240
|
+
<span class="wizard-pf-review-item-value">First Last</span>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="wizard-pf-review-item">
|
|
243
|
+
<span class="wizard-pf-review-item-label">Description:</span>
|
|
244
|
+
<span class="wizard-pf-review-item-value">This is the description</span>
|
|
245
|
+
</div>
|
|
246
|
+
</form>
|
|
247
|
+
</div>
|
|
248
|
+
</li>
|
|
249
|
+
<li class="list-group-item">
|
|
250
|
+
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep2').toggleClass('collapse');">
|
|
251
|
+
<span class="wizard-pf-substep-number">2B.</span>
|
|
252
|
+
<span class="wizard-pf-substep-title">Settings</span>
|
|
253
|
+
</a>
|
|
254
|
+
<div id="reviewStep2Substep2" class="wizard-pf-review-content">
|
|
255
|
+
<form class="form">
|
|
256
|
+
<div class="wizard-pf-review-item">
|
|
257
|
+
<div class="wizard-pf-review-item-field">Setting A</div>
|
|
258
|
+
<div class="wizard-pf-review-item-field">Setting B</div>
|
|
259
|
+
</div>
|
|
260
|
+
</form>
|
|
261
|
+
</div>
|
|
262
|
+
</li>
|
|
263
|
+
</ul>
|
|
264
|
+
</div>
|
|
265
|
+
</li>
|
|
266
|
+
</ul>
|
|
267
|
+
</div>
|
|
268
|
+
</div>
|
|
269
|
+
<div class="wizard-pf-contents hidden">
|
|
270
|
+
<div class="wizard-pf-process blank-slate-pf">
|
|
447
271
|
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
|
|
448
272
|
<h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
|
|
449
273
|
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
|
450
274
|
vivamus, lorem sociosqu eget nunc amet. </p>
|
|
451
275
|
</div>
|
|
276
|
+
<div class="wizard-pf-complete blank-slate-pf hidden">
|
|
277
|
+
<div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
|
|
278
|
+
<h3 class="blank-slate-pf-main-action">Deployment was successful</h3>
|
|
279
|
+
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
|
280
|
+
vivamus, lorem sociosqu eget nunc amet. </p>
|
|
281
|
+
<button type="button" class="btn btn-lg btn-primary">
|
|
282
|
+
View Deployment
|
|
283
|
+
</button>
|
|
452
284
|
|
|
285
|
+
</div>
|
|
453
286
|
</div>
|
|
454
|
-
</div
|
|
455
|
-
</div
|
|
456
|
-
|
|
457
|
-
<!-- TODO: disable buttons -->
|
|
458
|
-
<div class="modal-footer wizard-pf-footer">
|
|
459
|
-
<button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
|
|
460
|
-
<button type="button" class="btn btn-default disabled" data-dismiss="modal">
|
|
461
|
-
<span class="i fa fa-angle-left"></span>
|
|
462
|
-
Back
|
|
463
|
-
</button>
|
|
464
|
-
<button type="button" class="btn btn-primary disabled" data-dismiss="modal">
|
|
465
|
-
Deploy
|
|
466
|
-
<span class="i fa fa-angle-right"></span>
|
|
467
|
-
</button>
|
|
468
|
-
</div><!-- /.wizard-pf-footer -->
|
|
469
|
-
|
|
470
|
-
</div><!-- /.modal-content -->
|
|
471
|
-
</div><!-- /.modal-dialog -->
|
|
472
|
-
</div><!-- /.modal -->
|
|
473
|
-
</div><!-- /.example-pf (not for production) -->
|
|
287
|
+
</div><!-- /.wizard-pf-main -->
|
|
288
|
+
</div>
|
|
474
289
|
|
|
290
|
+
</div><!-- /.wizard-pf-body -->
|
|
291
|
+
|
|
292
|
+
<div class="modal-footer wizard-pf-footer">
|
|
293
|
+
<button type="button" class="btn btn-default btn-cancel wizard-pf-cancel wizard-pf-dismiss">Cancel</button>
|
|
294
|
+
<button type="button" class="btn btn-default wizard-pf-back disabled">
|
|
295
|
+
<span class="i fa fa-angle-left"></span>
|
|
296
|
+
Back
|
|
297
|
+
</button>
|
|
298
|
+
<button type="button" class="btn btn-primary wizard-pf-next disabled">
|
|
299
|
+
Next
|
|
300
|
+
<span class="i fa fa-angle-right"></span>
|
|
301
|
+
</button>
|
|
302
|
+
<button type="button" class="btn btn-primary hidden wizard-pf-finish">
|
|
303
|
+
Deploy
|
|
304
|
+
<span class="i fa fa-angle-right"></span>
|
|
305
|
+
</button>
|
|
306
|
+
<button type="button" class="btn btn-primary hidden wizard-pf-close wizard-pf-dismiss">Close</button>
|
|
307
|
+
|
|
308
|
+
</div><!-- /.wizard-pf-footer -->
|
|
309
|
+
|
|
310
|
+
</div><!-- /.modal-content -->
|
|
311
|
+
</div><!-- /.modal-dialog -->
|
|
312
|
+
</div><!-- /.modal -->
|
|
475
313
|
|
|
476
314
|
<script>
|
|
477
315
|
|
|
478
316
|
$(document).ready(function() {
|
|
479
|
-
//initialize
|
|
480
|
-
var completeWizard = new wizard(".btn
|
|
481
|
-
// the other wizard examples are not listed here -- they are only
|
|
482
|
-
// included to show examples of the loading and process screens
|
|
483
|
-
|
|
317
|
+
//initialize wizard
|
|
318
|
+
var completeWizard = new wizard(".btn.wizard-pf-complete");
|
|
484
319
|
});
|
|
485
320
|
|
|
486
321
|
var wizard = function(id) {
|
|
@@ -758,12 +593,163 @@
|
|
|
758
593
|
}, 3000);
|
|
759
594
|
};
|
|
760
595
|
|
|
761
|
-
|
|
762
|
-
|
|
763
596
|
};
|
|
597
|
+
|
|
764
598
|
</script>
|
|
765
599
|
|
|
600
|
+
<h2>Initializing</h2>
|
|
601
|
+
<button class="btn btn-default" data-toggle="modal" data-target="#initializing">Launch wizard showing initialization
|
|
602
|
+
state
|
|
603
|
+
</button>
|
|
604
|
+
<div class="modal" id="initializing" tabindex="-1" role="dialog">
|
|
605
|
+
<div class="modal-dialog modal-lg wizard-pf">
|
|
606
|
+
<div class="modal-content">
|
|
607
|
+
<div class="modal-header">
|
|
608
|
+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
609
|
+
<span aria-hidden="true">×</span>
|
|
610
|
+
</button>
|
|
611
|
+
<dt class="modal-title">Wizard Title</dt>
|
|
612
|
+
</div>
|
|
613
|
+
<div class="modal-body wizard-pf-body clearfix">
|
|
614
|
+
<div class="wizard-pf-steps hidden">
|
|
615
|
+
<ul class="wizard-pf-steps-indicator">
|
|
616
|
+
<li>
|
|
617
|
+
<a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
|
|
618
|
+
</li>
|
|
619
|
+
<li>
|
|
620
|
+
<a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
|
|
621
|
+
</li>
|
|
622
|
+
<li>
|
|
623
|
+
<a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
|
|
624
|
+
</li>
|
|
625
|
+
</ul>
|
|
626
|
+
</div>
|
|
627
|
+
|
|
628
|
+
<div class="wizard-pf-sidebar hidden">
|
|
629
|
+
<ul class="list-group">
|
|
630
|
+
<li class="list-group-item active">
|
|
631
|
+
<a>
|
|
632
|
+
<span class="wizard-pf-substep-number">1A.</span>
|
|
633
|
+
<span class="wizard-pf-substep-title">General</span>
|
|
634
|
+
</a>
|
|
635
|
+
</li>
|
|
636
|
+
<li class="list-group-item">
|
|
637
|
+
<a>
|
|
638
|
+
<span class="wizard-pf-substep-number">1B.</span>
|
|
639
|
+
<span class="wizard-pf-substep-title">Masters & Nodes</span>
|
|
640
|
+
</a>
|
|
641
|
+
</li>
|
|
642
|
+
<li class="list-group-item">
|
|
643
|
+
<a>
|
|
644
|
+
<span class="wizard-pf-substep-number">1C.</span>
|
|
645
|
+
<span class="wizard-pf-substep-title">CDN Channel</span>
|
|
646
|
+
</a>
|
|
647
|
+
</li>
|
|
648
|
+
</ul>
|
|
649
|
+
</div><!-- /.wizard-pf-sidebar -->
|
|
650
|
+
|
|
651
|
+
<div class="wizard-pf-main" style="margin-left: 0px">
|
|
652
|
+
<div class="blank-slate-pf">
|
|
653
|
+
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
|
|
654
|
+
<h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
|
|
655
|
+
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
|
656
|
+
vivamus, lorem sociosqu eget nunc amet. </p>
|
|
657
|
+
</div>
|
|
766
658
|
|
|
659
|
+
</div>
|
|
660
|
+
|
|
661
|
+
</div><!-- /.wizard-pf-body -->
|
|
662
|
+
|
|
663
|
+
<!-- TODO: disable buttons -->
|
|
664
|
+
<div class="modal-footer wizard-pf-footer">
|
|
665
|
+
<button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
|
|
666
|
+
<button type="button" class="btn btn-default disabled" data-dismiss="modal">
|
|
667
|
+
<span class="i fa fa-angle-left"></span>
|
|
668
|
+
Back
|
|
669
|
+
</button>
|
|
670
|
+
<button type="button" class="btn btn-primary disabled" data-dismiss="modal">
|
|
671
|
+
Next
|
|
672
|
+
<span class="i fa fa-angle-right"></span>
|
|
673
|
+
</button>
|
|
674
|
+
</div><!-- /.wizard-pf-footer -->
|
|
675
|
+
|
|
676
|
+
</div><!-- /.modal-content -->
|
|
677
|
+
</div><!-- /.modal-dialog -->
|
|
678
|
+
</div><!-- /.modal -->
|
|
679
|
+
|
|
680
|
+
<h2>Last Step</h2>
|
|
681
|
+
<button class="btn btn-default" data-toggle="modal" data-target="#done">Launch wizard showing finalizing
|
|
682
|
+
state
|
|
683
|
+
</button>
|
|
684
|
+
<div class="modal" id="done" tabindex="-1" role="dialog">
|
|
685
|
+
<div class="modal-dialog modal-lg wizard-pf">
|
|
686
|
+
<div class="modal-content">
|
|
687
|
+
<div class="modal-header">
|
|
688
|
+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
689
|
+
<span aria-hidden="true">×</span>
|
|
690
|
+
</button>
|
|
691
|
+
<dt class="modal-title">Wizard Title</dt>
|
|
692
|
+
</div>
|
|
693
|
+
<div class="modal-body wizard-pf-body clearfix">
|
|
694
|
+
<div class="wizard-pf-steps">
|
|
695
|
+
<ul class="wizard-pf-steps-indicator">
|
|
696
|
+
<li class="viewed-pf">
|
|
697
|
+
<a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
|
|
698
|
+
</li>
|
|
699
|
+
<li class="viewed-pf">
|
|
700
|
+
<a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
|
|
701
|
+
</li>
|
|
702
|
+
<li class="active">
|
|
703
|
+
<a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
|
|
704
|
+
</li>
|
|
705
|
+
</ul>
|
|
706
|
+
</div>
|
|
707
|
+
<div class="wizard-pf-row">
|
|
708
|
+
<div class="wizard-pf-sidebar">
|
|
709
|
+
<ul class="list-group">
|
|
710
|
+
<li class="list-group-item">
|
|
711
|
+
<a>
|
|
712
|
+
<span class="wizard-pf-substep-number">3A.</span>
|
|
713
|
+
<span class="wizard-pf-substep-title">Summary</span>
|
|
714
|
+
</a>
|
|
715
|
+
</li>
|
|
716
|
+
<li class="list-group-item active">
|
|
717
|
+
<a>
|
|
718
|
+
<span class="wizard-pf-substep-number">3B.</span>
|
|
719
|
+
<span class="wizard-pf-substep-title">Progress</span>
|
|
720
|
+
</a>
|
|
721
|
+
</li>
|
|
722
|
+
</ul>
|
|
723
|
+
</div><!-- /.wizard-pf-sidebar -->
|
|
724
|
+
|
|
725
|
+
<div class="wizard-pf-main">
|
|
726
|
+
<div class="blank-slate-pf">
|
|
727
|
+
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
|
|
728
|
+
<h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
|
|
729
|
+
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
|
730
|
+
vivamus, lorem sociosqu eget nunc amet. </p>
|
|
731
|
+
</div>
|
|
732
|
+
|
|
733
|
+
</div>
|
|
734
|
+
</div>
|
|
735
|
+
</div><!-- /.wizard-pf-body -->
|
|
736
|
+
|
|
737
|
+
<!-- TODO: disable buttons -->
|
|
738
|
+
<div class="modal-footer wizard-pf-footer">
|
|
739
|
+
<button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
|
|
740
|
+
<button type="button" class="btn btn-default disabled" data-dismiss="modal">
|
|
741
|
+
<span class="i fa fa-angle-left"></span>
|
|
742
|
+
Back
|
|
743
|
+
</button>
|
|
744
|
+
<button type="button" class="btn btn-primary disabled" data-dismiss="modal">
|
|
745
|
+
Deploy
|
|
746
|
+
<span class="i fa fa-angle-right"></span>
|
|
747
|
+
</button>
|
|
748
|
+
</div><!-- /.wizard-pf-footer -->
|
|
749
|
+
|
|
750
|
+
</div><!-- /.modal-content -->
|
|
751
|
+
</div><!-- /.modal-dialog -->
|
|
752
|
+
</div><!-- /.modal -->
|
|
767
753
|
</div><!-- /container -->
|
|
768
754
|
</body>
|
|
769
755
|
</html>
|