@patternfly/patternfly 4.200.0 → 4.201.1
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.
- package/components/AboutModalBox/about-modal-box.css +3 -0
- package/components/Banner/banner.css +3 -0
- package/components/Card/card.css +2 -1
- package/components/Card/themes/dark/card.scss +2 -1
- package/components/LogViewer/log-viewer.css +3 -0
- package/components/Login/login.css +4 -0
- package/components/Masthead/masthead.css +3 -0
- package/components/Page/page.css +5 -0
- package/components/ProgressStepper/progress-stepper.css +416 -69
- package/components/ProgressStepper/progress-stepper.scss +211 -80
- package/components/Wizard/wizard.css +5 -1
- package/components/Wizard/wizard.scss +3 -1
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +328 -2
- package/docs/components/Wizard/examples/Wizard.md +59 -57
- package/docs/demos/Wizard/examples/Wizard.md +2581 -275
- package/package.json +1 -1
- package/patternfly-no-reset.css +726 -71
- package/patternfly.css +726 -71
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/themes/dark/placeholders.scss +4 -0
|
@@ -8,7 +8,6 @@ cssPrefix: pf-c-progress-stepper
|
|
|
8
8
|
### Basic
|
|
9
9
|
|
|
10
10
|
```html
|
|
11
|
-
<!-- progress-stepper--IsVertical="true" progress-stepper--IsCenter="true" progress-stepper--IsCompact="true" -->
|
|
12
11
|
<ol class="pf-c-progress-stepper">
|
|
13
12
|
<li
|
|
14
13
|
class="pf-c-progress-stepper__step pf-m-success"
|
|
@@ -105,6 +104,60 @@ cssPrefix: pf-c-progress-stepper
|
|
|
105
104
|
|
|
106
105
|
```
|
|
107
106
|
|
|
107
|
+
### Vertical, horizontal responsive
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<ol class="pf-c-progress-stepper pf-m-vertical-on-lg pf-m-horizontal-on-2xl">
|
|
111
|
+
<li
|
|
112
|
+
class="pf-c-progress-stepper__step pf-m-success"
|
|
113
|
+
aria-label="completed step,"
|
|
114
|
+
>
|
|
115
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
116
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
117
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
118
|
+
</span>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
121
|
+
<div class="pf-c-progress-stepper__step-title">First step</div>
|
|
122
|
+
<div
|
|
123
|
+
class="pf-c-progress-stepper__step-description"
|
|
124
|
+
>This is the first thing to happen</div>
|
|
125
|
+
</div>
|
|
126
|
+
</li>
|
|
127
|
+
<li
|
|
128
|
+
class="pf-c-progress-stepper__step pf-m-current pf-m-info"
|
|
129
|
+
aria-label="current step,in process step,"
|
|
130
|
+
>
|
|
131
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
132
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
133
|
+
<i class="pficon pf-icon-resources-full" aria-hidden="true"></i>
|
|
134
|
+
</span>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
137
|
+
<div class="pf-c-progress-stepper__step-title">Second step</div>
|
|
138
|
+
<div
|
|
139
|
+
class="pf-c-progress-stepper__step-description"
|
|
140
|
+
>This is the second thing to happen</div>
|
|
141
|
+
</div>
|
|
142
|
+
</li>
|
|
143
|
+
<li
|
|
144
|
+
class="pf-c-progress-stepper__step pf-m-pending"
|
|
145
|
+
aria-label="pending step,"
|
|
146
|
+
>
|
|
147
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
148
|
+
<span class="pf-c-progress-stepper__step-icon"></span>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
151
|
+
<div class="pf-c-progress-stepper__step-title">Third step</div>
|
|
152
|
+
<div
|
|
153
|
+
class="pf-c-progress-stepper__step-description"
|
|
154
|
+
>This is the last thing to happen</div>
|
|
155
|
+
</div>
|
|
156
|
+
</li>
|
|
157
|
+
</ol>
|
|
158
|
+
|
|
159
|
+
```
|
|
160
|
+
|
|
108
161
|
### Center aligned with descriptions
|
|
109
162
|
|
|
110
163
|
```html
|
|
@@ -159,6 +212,60 @@ cssPrefix: pf-c-progress-stepper
|
|
|
159
212
|
|
|
160
213
|
```
|
|
161
214
|
|
|
215
|
+
### Center aligned, vertical
|
|
216
|
+
|
|
217
|
+
```html
|
|
218
|
+
<ol class="pf-c-progress-stepper pf-m-center pf-m-vertical">
|
|
219
|
+
<li
|
|
220
|
+
class="pf-c-progress-stepper__step pf-m-success"
|
|
221
|
+
aria-label="completed step,"
|
|
222
|
+
>
|
|
223
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
224
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
225
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
226
|
+
</span>
|
|
227
|
+
</div>
|
|
228
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
229
|
+
<div class="pf-c-progress-stepper__step-title">First step</div>
|
|
230
|
+
<div
|
|
231
|
+
class="pf-c-progress-stepper__step-description"
|
|
232
|
+
>This is the first thing to happen</div>
|
|
233
|
+
</div>
|
|
234
|
+
</li>
|
|
235
|
+
<li
|
|
236
|
+
class="pf-c-progress-stepper__step pf-m-current pf-m-info"
|
|
237
|
+
aria-label="current step,in process step,"
|
|
238
|
+
>
|
|
239
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
240
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
241
|
+
<i class="pficon pf-icon-resources-full" aria-hidden="true"></i>
|
|
242
|
+
</span>
|
|
243
|
+
</div>
|
|
244
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
245
|
+
<div class="pf-c-progress-stepper__step-title">Second step</div>
|
|
246
|
+
<div
|
|
247
|
+
class="pf-c-progress-stepper__step-description"
|
|
248
|
+
>This is the second thing to happen</div>
|
|
249
|
+
</div>
|
|
250
|
+
</li>
|
|
251
|
+
<li
|
|
252
|
+
class="pf-c-progress-stepper__step pf-m-pending"
|
|
253
|
+
aria-label="pending step,"
|
|
254
|
+
>
|
|
255
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
256
|
+
<span class="pf-c-progress-stepper__step-icon"></span>
|
|
257
|
+
</div>
|
|
258
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
259
|
+
<div class="pf-c-progress-stepper__step-title">Third step</div>
|
|
260
|
+
<div
|
|
261
|
+
class="pf-c-progress-stepper__step-description"
|
|
262
|
+
>This is the last thing to happen</div>
|
|
263
|
+
</div>
|
|
264
|
+
</li>
|
|
265
|
+
</ol>
|
|
266
|
+
|
|
267
|
+
```
|
|
268
|
+
|
|
162
269
|
### Vertical with descriptions
|
|
163
270
|
|
|
164
271
|
```html
|
|
@@ -267,6 +374,224 @@ cssPrefix: pf-c-progress-stepper
|
|
|
267
374
|
|
|
268
375
|
```
|
|
269
376
|
|
|
377
|
+
### Compact, vertical
|
|
378
|
+
|
|
379
|
+
```html
|
|
380
|
+
<ol class="pf-c-progress-stepper pf-m-vertical pf-m-compact">
|
|
381
|
+
<li
|
|
382
|
+
class="pf-c-progress-stepper__step pf-m-success"
|
|
383
|
+
aria-label="completed step,"
|
|
384
|
+
>
|
|
385
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
386
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
387
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
388
|
+
</span>
|
|
389
|
+
</div>
|
|
390
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
391
|
+
<div class="pf-c-progress-stepper__step-title">First step</div>
|
|
392
|
+
<div
|
|
393
|
+
class="pf-c-progress-stepper__step-description"
|
|
394
|
+
>This is the first thing to happen</div>
|
|
395
|
+
</div>
|
|
396
|
+
</li>
|
|
397
|
+
<li
|
|
398
|
+
class="pf-c-progress-stepper__step pf-m-current pf-m-info"
|
|
399
|
+
aria-label="current step,in process step,"
|
|
400
|
+
>
|
|
401
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
402
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
403
|
+
<i class="pficon pf-icon-resources-full" aria-hidden="true"></i>
|
|
404
|
+
</span>
|
|
405
|
+
</div>
|
|
406
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
407
|
+
<div class="pf-c-progress-stepper__step-title">Second step</div>
|
|
408
|
+
<div
|
|
409
|
+
class="pf-c-progress-stepper__step-description"
|
|
410
|
+
>This is the second thing to happen</div>
|
|
411
|
+
</div>
|
|
412
|
+
</li>
|
|
413
|
+
<li
|
|
414
|
+
class="pf-c-progress-stepper__step pf-m-pending"
|
|
415
|
+
aria-label="pending step,"
|
|
416
|
+
>
|
|
417
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
418
|
+
<span class="pf-c-progress-stepper__step-icon"></span>
|
|
419
|
+
</div>
|
|
420
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
421
|
+
<div class="pf-c-progress-stepper__step-title">Third step</div>
|
|
422
|
+
<div
|
|
423
|
+
class="pf-c-progress-stepper__step-description"
|
|
424
|
+
>This is the last thing to happen</div>
|
|
425
|
+
</div>
|
|
426
|
+
</li>
|
|
427
|
+
</ol>
|
|
428
|
+
|
|
429
|
+
```
|
|
430
|
+
|
|
431
|
+
### Compact, vertical responsive
|
|
432
|
+
|
|
433
|
+
```html
|
|
434
|
+
<ol
|
|
435
|
+
class="pf-c-progress-stepper pf-m-vertical-on-lg pf-m-horizontal-on-xl pf-m-compact"
|
|
436
|
+
>
|
|
437
|
+
<li
|
|
438
|
+
class="pf-c-progress-stepper__step pf-m-success"
|
|
439
|
+
aria-label="completed step,"
|
|
440
|
+
>
|
|
441
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
442
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
443
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
444
|
+
</span>
|
|
445
|
+
</div>
|
|
446
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
447
|
+
<div class="pf-c-progress-stepper__step-title">First step</div>
|
|
448
|
+
<div
|
|
449
|
+
class="pf-c-progress-stepper__step-description"
|
|
450
|
+
>This is the first thing to happen</div>
|
|
451
|
+
</div>
|
|
452
|
+
</li>
|
|
453
|
+
<li
|
|
454
|
+
class="pf-c-progress-stepper__step pf-m-current pf-m-info"
|
|
455
|
+
aria-label="current step,in process step,"
|
|
456
|
+
>
|
|
457
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
458
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
459
|
+
<i class="pficon pf-icon-resources-full" aria-hidden="true"></i>
|
|
460
|
+
</span>
|
|
461
|
+
</div>
|
|
462
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
463
|
+
<div class="pf-c-progress-stepper__step-title">Second step</div>
|
|
464
|
+
<div
|
|
465
|
+
class="pf-c-progress-stepper__step-description"
|
|
466
|
+
>This is the second thing to happen</div>
|
|
467
|
+
</div>
|
|
468
|
+
</li>
|
|
469
|
+
<li
|
|
470
|
+
class="pf-c-progress-stepper__step pf-m-pending"
|
|
471
|
+
aria-label="pending step,"
|
|
472
|
+
>
|
|
473
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
474
|
+
<span class="pf-c-progress-stepper__step-icon"></span>
|
|
475
|
+
</div>
|
|
476
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
477
|
+
<div class="pf-c-progress-stepper__step-title">Third step</div>
|
|
478
|
+
<div
|
|
479
|
+
class="pf-c-progress-stepper__step-description"
|
|
480
|
+
>This is the last thing to happen</div>
|
|
481
|
+
</div>
|
|
482
|
+
</li>
|
|
483
|
+
</ol>
|
|
484
|
+
|
|
485
|
+
```
|
|
486
|
+
|
|
487
|
+
### Compact, vertical, centered
|
|
488
|
+
|
|
489
|
+
```html
|
|
490
|
+
<ol class="pf-c-progress-stepper pf-m-center pf-m-vertical pf-m-compact">
|
|
491
|
+
<li
|
|
492
|
+
class="pf-c-progress-stepper__step pf-m-success"
|
|
493
|
+
aria-label="completed step,"
|
|
494
|
+
>
|
|
495
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
496
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
497
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
498
|
+
</span>
|
|
499
|
+
</div>
|
|
500
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
501
|
+
<div class="pf-c-progress-stepper__step-title">First step</div>
|
|
502
|
+
<div
|
|
503
|
+
class="pf-c-progress-stepper__step-description"
|
|
504
|
+
>This is the first thing to happen</div>
|
|
505
|
+
</div>
|
|
506
|
+
</li>
|
|
507
|
+
<li
|
|
508
|
+
class="pf-c-progress-stepper__step pf-m-current pf-m-info"
|
|
509
|
+
aria-label="current step,in process step,"
|
|
510
|
+
>
|
|
511
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
512
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
513
|
+
<i class="pficon pf-icon-resources-full" aria-hidden="true"></i>
|
|
514
|
+
</span>
|
|
515
|
+
</div>
|
|
516
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
517
|
+
<div class="pf-c-progress-stepper__step-title">Second step</div>
|
|
518
|
+
<div
|
|
519
|
+
class="pf-c-progress-stepper__step-description"
|
|
520
|
+
>This is the second thing to happen</div>
|
|
521
|
+
</div>
|
|
522
|
+
</li>
|
|
523
|
+
<li
|
|
524
|
+
class="pf-c-progress-stepper__step pf-m-pending"
|
|
525
|
+
aria-label="pending step,"
|
|
526
|
+
>
|
|
527
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
528
|
+
<span class="pf-c-progress-stepper__step-icon"></span>
|
|
529
|
+
</div>
|
|
530
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
531
|
+
<div class="pf-c-progress-stepper__step-title">Third step</div>
|
|
532
|
+
<div
|
|
533
|
+
class="pf-c-progress-stepper__step-description"
|
|
534
|
+
>This is the last thing to happen</div>
|
|
535
|
+
</div>
|
|
536
|
+
</li>
|
|
537
|
+
</ol>
|
|
538
|
+
|
|
539
|
+
```
|
|
540
|
+
|
|
541
|
+
### Compact, centered
|
|
542
|
+
|
|
543
|
+
```html
|
|
544
|
+
<ol class="pf-c-progress-stepper pf-m-center pf-m-compact">
|
|
545
|
+
<li
|
|
546
|
+
class="pf-c-progress-stepper__step pf-m-success"
|
|
547
|
+
aria-label="completed step,"
|
|
548
|
+
>
|
|
549
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
550
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
551
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
552
|
+
</span>
|
|
553
|
+
</div>
|
|
554
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
555
|
+
<div class="pf-c-progress-stepper__step-title">First step</div>
|
|
556
|
+
<div
|
|
557
|
+
class="pf-c-progress-stepper__step-description"
|
|
558
|
+
>This is the first thing to happen</div>
|
|
559
|
+
</div>
|
|
560
|
+
</li>
|
|
561
|
+
<li
|
|
562
|
+
class="pf-c-progress-stepper__step pf-m-current pf-m-info"
|
|
563
|
+
aria-label="current step,in process step,"
|
|
564
|
+
>
|
|
565
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
566
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
567
|
+
<i class="pficon pf-icon-resources-full" aria-hidden="true"></i>
|
|
568
|
+
</span>
|
|
569
|
+
</div>
|
|
570
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
571
|
+
<div class="pf-c-progress-stepper__step-title">Second step</div>
|
|
572
|
+
<div
|
|
573
|
+
class="pf-c-progress-stepper__step-description"
|
|
574
|
+
>This is the second thing to happen</div>
|
|
575
|
+
</div>
|
|
576
|
+
</li>
|
|
577
|
+
<li
|
|
578
|
+
class="pf-c-progress-stepper__step pf-m-pending"
|
|
579
|
+
aria-label="pending step,"
|
|
580
|
+
>
|
|
581
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
582
|
+
<span class="pf-c-progress-stepper__step-icon"></span>
|
|
583
|
+
</div>
|
|
584
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
585
|
+
<div class="pf-c-progress-stepper__step-title">Third step</div>
|
|
586
|
+
<div
|
|
587
|
+
class="pf-c-progress-stepper__step-description"
|
|
588
|
+
>This is the last thing to happen</div>
|
|
589
|
+
</div>
|
|
590
|
+
</li>
|
|
591
|
+
</ol>
|
|
592
|
+
|
|
593
|
+
```
|
|
594
|
+
|
|
270
595
|
### Basic with an issue
|
|
271
596
|
|
|
272
597
|
```html
|
|
@@ -552,7 +877,8 @@ Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, and
|
|
|
552
877
|
| `.progress-stepper__step-title` | `<div>`, `<button>` | Contains the title of the step. **Note:** the step title is a `<button>` when it has `.pf-m-help-text` and is used to trigger a popover with help text. |
|
|
553
878
|
| `.progress-stepper__step-description` | `<div>` | Contains the description of the step. |
|
|
554
879
|
| `.pf-m-center` | `.pf-c-progress-stepper` | Modifies to center each step. |
|
|
555
|
-
| `.pf-m-vertical`
|
|
880
|
+
| `.pf-m-vertical{-on-[breakpoint]}` | `.pf-c-progress-stepper` | Modifies progress stepper vertical layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
881
|
+
| `.pf-m-horizontal{-on-[breakpoint]}` | `.pf-c-progress-stepper` | Modifies progress stepper horizontal layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
556
882
|
| `.pf-m-compact` | `.pf-c-progress-stepper` | Modifies for compact styling. |
|
|
557
883
|
| `.pf-m-success` | `.pf-c-progress-stepper__step` | Modifies for success styling. |
|
|
558
884
|
| `.pf-m-warning` | `.pf-c-progress-stepper__step` | Modifies for warning styling. |
|
|
@@ -497,45 +497,47 @@ wrapperTag: div
|
|
|
497
497
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
498
498
|
</span>
|
|
499
499
|
</button>
|
|
500
|
-
<div class="pf-c-
|
|
501
|
-
<div class="pf-c-
|
|
502
|
-
<
|
|
503
|
-
<
|
|
504
|
-
<
|
|
505
|
-
<
|
|
500
|
+
<div class="pf-c-wizard__outer-wrap">
|
|
501
|
+
<div class="pf-c-wizard__inner-wrap">
|
|
502
|
+
<nav class="pf-c-wizard__nav" aria-label="Steps">
|
|
503
|
+
<ol class="pf-c-wizard__nav-list">
|
|
504
|
+
<li class="pf-c-wizard__nav-item">
|
|
505
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
506
|
+
</li>
|
|
507
|
+
<li class="pf-c-wizard__nav-item">
|
|
508
|
+
<button class="pf-c-wizard__nav-link pf-m-current">Configuration</button>
|
|
509
|
+
<ol class="pf-c-wizard__nav-list">
|
|
510
|
+
<li class="pf-c-wizard__nav-item">
|
|
511
|
+
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
512
|
+
</li>
|
|
513
|
+
<li class="pf-c-wizard__nav-item">
|
|
514
|
+
<button
|
|
515
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
516
|
+
aria-current="page"
|
|
517
|
+
>Substep B</button>
|
|
518
|
+
</li>
|
|
519
|
+
<li class="pf-c-wizard__nav-item">
|
|
520
|
+
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
521
|
+
</li>
|
|
522
|
+
</ol>
|
|
523
|
+
</li>
|
|
524
|
+
<li class="pf-c-wizard__nav-item">
|
|
525
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
526
|
+
</li>
|
|
527
|
+
<li class="pf-c-wizard__nav-item">
|
|
528
|
+
<button class="pf-c-wizard__nav-link" disabled>Review</button>
|
|
529
|
+
</li>
|
|
530
|
+
</ol>
|
|
531
|
+
</nav>
|
|
532
|
+
<main class="pf-c-wizard__main" tabindex="0">
|
|
533
|
+
<div class="pf-c-drawer pf-m-expanded pf-m-inline">
|
|
534
|
+
<div class="pf-c-drawer__main">
|
|
535
|
+
<div class="pf-c-drawer__content">
|
|
506
536
|
<div class="pf-c-wizard__main-body">
|
|
507
|
-
<
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
</li>
|
|
512
|
-
<li class="pf-c-wizard__nav-item">
|
|
513
|
-
<button
|
|
514
|
-
class="pf-c-wizard__nav-link pf-m-current"
|
|
515
|
-
>Configuration</button>
|
|
516
|
-
<ol class="pf-c-wizard__nav-list">
|
|
517
|
-
<li class="pf-c-wizard__nav-item">
|
|
518
|
-
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
519
|
-
</li>
|
|
520
|
-
<li class="pf-c-wizard__nav-item">
|
|
521
|
-
<button
|
|
522
|
-
class="pf-c-wizard__nav-link pf-m-current"
|
|
523
|
-
aria-current="page"
|
|
524
|
-
>Substep B</button>
|
|
525
|
-
</li>
|
|
526
|
-
<li class="pf-c-wizard__nav-item">
|
|
527
|
-
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
528
|
-
</li>
|
|
529
|
-
</ol>
|
|
530
|
-
</li>
|
|
531
|
-
<li class="pf-c-wizard__nav-item">
|
|
532
|
-
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
533
|
-
</li>
|
|
534
|
-
<li class="pf-c-wizard__nav-item">
|
|
535
|
-
<button class="pf-c-wizard__nav-link" disabled>Review</button>
|
|
536
|
-
</li>
|
|
537
|
-
</ol>
|
|
538
|
-
</nav>
|
|
537
|
+
<button
|
|
538
|
+
class="pf-c-button pf-u-hidden pf-m-link pf-m-inline pf-u-float-right pf-u-ml-md"
|
|
539
|
+
type="button"
|
|
540
|
+
>Open drawer</button>
|
|
539
541
|
<form novalidate class="pf-c-form">
|
|
540
542
|
<div class="pf-c-form__group">
|
|
541
543
|
<div class="pf-c-form__group-label">
|
|
@@ -700,7 +702,24 @@ wrapperTag: div
|
|
|
700
702
|
</div>
|
|
701
703
|
</form>
|
|
702
704
|
</div>
|
|
703
|
-
</
|
|
705
|
+
</div>
|
|
706
|
+
<div class="pf-c-drawer__panel pf-m-light-200 pf-m-width-33">
|
|
707
|
+
<div class="pf-c-drawer__body">
|
|
708
|
+
<div class="pf-c-drawer__head">
|
|
709
|
+
<div class="pf-c-drawer__actions">
|
|
710
|
+
<div class="pf-c-drawer__close">
|
|
711
|
+
<button
|
|
712
|
+
class="pf-c-button pf-m-plain"
|
|
713
|
+
type="button"
|
|
714
|
+
aria-label="Close drawer panel"
|
|
715
|
+
>
|
|
716
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
717
|
+
</button>
|
|
718
|
+
</div>
|
|
719
|
+
</div>drawer-panel
|
|
720
|
+
</div>
|
|
721
|
+
</div>
|
|
722
|
+
</div>
|
|
704
723
|
</div>
|
|
705
724
|
<footer class="pf-c-wizard__footer">
|
|
706
725
|
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
@@ -710,24 +729,7 @@ wrapperTag: div
|
|
|
710
729
|
</div>
|
|
711
730
|
</footer>
|
|
712
731
|
</div>
|
|
713
|
-
</
|
|
714
|
-
<div class="pf-c-drawer__panel pf-m-light-200">
|
|
715
|
-
<div class="pf-c-drawer__body">
|
|
716
|
-
<div class="pf-c-drawer__head">
|
|
717
|
-
<div class="pf-c-drawer__actions">
|
|
718
|
-
<div class="pf-c-drawer__close">
|
|
719
|
-
<button
|
|
720
|
-
class="pf-c-button pf-m-plain"
|
|
721
|
-
type="button"
|
|
722
|
-
aria-label="Close drawer panel"
|
|
723
|
-
>
|
|
724
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
725
|
-
</button>
|
|
726
|
-
</div>
|
|
727
|
-
</div>drawer-panel
|
|
728
|
-
</div>
|
|
729
|
-
</div>
|
|
730
|
-
</div>
|
|
732
|
+
</main>
|
|
731
733
|
</div>
|
|
732
734
|
</div>
|
|
733
735
|
</div>
|