@patternfly/patternfly 4.176.1 → 4.177.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/UPGRADE-GUIDE.md +3 -0
- package/components/Avatar/avatar.css +224 -0
- package/components/Avatar/avatar.scss +18 -0
- package/components/CodeEditor/code-editor.css +8 -0
- package/components/CodeEditor/code-editor.scss +11 -1
- package/components/Dropdown/dropdown.css +10 -9
- package/components/Dropdown/dropdown.scss +17 -16
- package/components/Nav/nav.css +11 -0
- package/components/Nav/nav.scss +14 -0
- package/components/Table/table.css +2 -1
- package/components/Table/table.scss +8 -5
- package/docs/components/Avatar/examples/Avatar.md +53 -5
- package/docs/components/Brand/examples/Brand.md +6 -6
- package/docs/components/CodeEditor/examples/CodeEditor.md +71 -10
- package/docs/components/DataList/examples/DataList.md +11 -11
- package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
- package/docs/components/Divider/examples/Divider.md +2 -2
- package/docs/components/Drawer/examples/Drawer.md +27 -27
- package/docs/components/Dropdown/examples/Dropdown.md +2 -2
- package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
- package/docs/components/LogViewer/examples/LogViewer.md +28 -28
- package/docs/components/Masthead/examples/masthead.md +10 -10
- package/docs/components/Menu/examples/Menu.md +45 -44
- package/docs/components/Nav/examples/Navigation.md +23 -44
- package/docs/components/Page/examples/Page.md +4 -4
- package/docs/components/Pagination/examples/Pagination.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.md +14 -14
- package/docs/components/Table/examples/Table.md +20 -9
- package/docs/components/Tabs/examples/Tabs.md +27 -27
- package/docs/components/Toolbar/examples/Toolbar.md +31 -31
- package/docs/demos/Alert/examples/Alert.md +1 -2
- package/docs/demos/BackToTop/examples/BackToTop.md +1 -202
- package/docs/demos/Card/examples/Card.md +42 -14
- package/docs/demos/ContextSelector/examples/ContextSelector.md +1166 -17
- package/docs/demos/Drawer/examples/Drawer.md +3 -3
- package/docs/demos/JumpLinks/examples/JumpLinks.md +4 -8
- package/docs/demos/Masthead/examples/Masthead.md +14 -6
- package/docs/demos/Nav/examples/Nav.md +8 -9
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
- package/docs/demos/Page/examples/Page.md +4004 -989
- package/docs/demos/Table/examples/Table.md +16516 -12176
- package/docs/demos/Tabs/examples/Tabs.md +0 -94
- package/docs/demos/Toolbar/examples/Toolbar.md +1 -2
- package/docs/demos/Wizard/examples/Wizard.md +2 -2
- package/docs/layouts/Flex/examples/Flex.md +1 -1
- package/docs/layouts/Gallery/examples/Gallery.md +2 -2
- package/docs/layouts/Grid/examples/Grid.md +9 -9
- package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
- package/docs/utilities/Alignment/examples/Alignment.md +1 -1
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
- package/docs/utilities/Display/examples/Display.md +1 -1
- package/docs/utilities/Flex/examples/Flex.md +1 -1
- package/docs/utilities/Float/examples/Float.md +1 -1
- package/docs/utilities/Sizing/examples/Sizing.md +12 -0
- package/docs/utilities/Spacing/examples/Spacing.md +1 -1
- package/docs/utilities/Text/examples/Text.md +1 -1
- package/package.json +1 -1
- package/patternfly-no-reset.css +255 -10
- package/patternfly.css +255 -10
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -262,7 +262,7 @@ section: components
|
|
|
262
262
|
<div class="pf-c-page__main-body">
|
|
263
263
|
<div class="pf-c-content">
|
|
264
264
|
<h1>Main title</h1>
|
|
265
|
-
<p>This is a
|
|
265
|
+
<p>This is a full page demo.</p>
|
|
266
266
|
</div>
|
|
267
267
|
</div>
|
|
268
268
|
</section>
|
|
@@ -349,14 +349,589 @@ section: components
|
|
|
349
349
|
</span>
|
|
350
350
|
<div class="pf-c-masthead__main">
|
|
351
351
|
<a class="pf-c-masthead__brand" href="#">
|
|
352
|
-
<
|
|
353
|
-
class="pf-c-brand"
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
352
|
+
<picture
|
|
353
|
+
class="pf-c-brand pf-m-picture"
|
|
354
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
355
|
+
>
|
|
356
|
+
<source
|
|
357
|
+
media="(min-width: 768px)"
|
|
358
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
359
|
+
/>
|
|
360
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
361
|
+
<img
|
|
362
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
363
|
+
alt="Fallback patternFly default logo"
|
|
364
|
+
/>
|
|
365
|
+
</picture>
|
|
357
366
|
</a>
|
|
358
367
|
</div>
|
|
359
|
-
<div class="pf-c-masthead__content">
|
|
368
|
+
<div class="pf-c-masthead__content">
|
|
369
|
+
<div
|
|
370
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
371
|
+
id="context-selector-in-sidebar-masthead-toolbar"
|
|
372
|
+
>
|
|
373
|
+
<div class="pf-c-toolbar__content">
|
|
374
|
+
<div class="pf-c-toolbar__content-section">
|
|
375
|
+
<div
|
|
376
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
377
|
+
>
|
|
378
|
+
<div class="pf-c-toolbar__item">
|
|
379
|
+
<button
|
|
380
|
+
class="pf-c-button pf-m-plain"
|
|
381
|
+
type="button"
|
|
382
|
+
aria-label="Notifications"
|
|
383
|
+
>
|
|
384
|
+
<span class="pf-c-notification-badge">
|
|
385
|
+
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
|
|
386
|
+
</span>
|
|
387
|
+
</button>
|
|
388
|
+
</div>
|
|
389
|
+
<div
|
|
390
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
391
|
+
>
|
|
392
|
+
<div class="pf-c-toolbar__item">
|
|
393
|
+
<div class="pf-c-dropdown">
|
|
394
|
+
<button
|
|
395
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
396
|
+
id="context-selector-in-sidebar-masthead-settings-button"
|
|
397
|
+
aria-expanded="false"
|
|
398
|
+
type="button"
|
|
399
|
+
aria-label="Settings"
|
|
400
|
+
>
|
|
401
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
402
|
+
</button>
|
|
403
|
+
<ul
|
|
404
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
405
|
+
aria-labelledby="context-selector-in-sidebar-masthead-settings-button"
|
|
406
|
+
hidden
|
|
407
|
+
>
|
|
408
|
+
<li>
|
|
409
|
+
<button
|
|
410
|
+
class="pf-c-dropdown__menu-item"
|
|
411
|
+
type="button"
|
|
412
|
+
>Settings</button>
|
|
413
|
+
</li>
|
|
414
|
+
<li>
|
|
415
|
+
<button
|
|
416
|
+
class="pf-c-dropdown__menu-item"
|
|
417
|
+
type="button"
|
|
418
|
+
>Use the beta release</button>
|
|
419
|
+
</li>
|
|
420
|
+
</ul>
|
|
421
|
+
</div>
|
|
422
|
+
</div>
|
|
423
|
+
<div class="pf-c-toolbar__item">
|
|
424
|
+
<div class="pf-c-dropdown">
|
|
425
|
+
<button
|
|
426
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
427
|
+
id="context-selector-in-sidebar-masthead-help-button"
|
|
428
|
+
aria-expanded="false"
|
|
429
|
+
type="button"
|
|
430
|
+
aria-label="Help"
|
|
431
|
+
>
|
|
432
|
+
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
433
|
+
</button>
|
|
434
|
+
<ul
|
|
435
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
436
|
+
aria-labelledby="context-selector-in-sidebar-masthead-help-button"
|
|
437
|
+
hidden
|
|
438
|
+
>
|
|
439
|
+
<li>
|
|
440
|
+
<button
|
|
441
|
+
class="pf-c-dropdown__menu-item"
|
|
442
|
+
type="button"
|
|
443
|
+
>Support options</button>
|
|
444
|
+
</li>
|
|
445
|
+
<li>
|
|
446
|
+
<button
|
|
447
|
+
class="pf-c-dropdown__menu-item"
|
|
448
|
+
type="button"
|
|
449
|
+
>Open support case</button>
|
|
450
|
+
</li>
|
|
451
|
+
<li>
|
|
452
|
+
<button
|
|
453
|
+
class="pf-c-dropdown__menu-item"
|
|
454
|
+
type="button"
|
|
455
|
+
>API documentation</button>
|
|
456
|
+
</li>
|
|
457
|
+
</ul>
|
|
458
|
+
</div>
|
|
459
|
+
</div>
|
|
460
|
+
</div>
|
|
461
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
462
|
+
<div class="pf-c-dropdown">
|
|
463
|
+
<button
|
|
464
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
465
|
+
type="button"
|
|
466
|
+
aria-expanded="false"
|
|
467
|
+
aria-label="Actions"
|
|
468
|
+
>
|
|
469
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
470
|
+
</button>
|
|
471
|
+
<div
|
|
472
|
+
class="pf-c-menu pf-m-drilldown pf-m-align-right"
|
|
473
|
+
hidden
|
|
474
|
+
>
|
|
475
|
+
<div class="pf-c-menu__content">
|
|
476
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
477
|
+
<ul class="pf-c-menu__list">
|
|
478
|
+
<li class="pf-c-menu__list-item pf-m-disabled">
|
|
479
|
+
<button
|
|
480
|
+
class="pf-c-menu__item"
|
|
481
|
+
type="button"
|
|
482
|
+
disabled
|
|
483
|
+
>
|
|
484
|
+
<span class="pf-c-menu__item-description">
|
|
485
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
486
|
+
<div
|
|
487
|
+
class="pf-u-font-size-md"
|
|
488
|
+
>mshaksho@redhat.com</div>
|
|
489
|
+
</span>
|
|
490
|
+
</button>
|
|
491
|
+
</li>
|
|
492
|
+
<li class="pf-c-menu__list-item pf-m-disabled">
|
|
493
|
+
<button
|
|
494
|
+
class="pf-c-menu__item"
|
|
495
|
+
type="button"
|
|
496
|
+
disabled
|
|
497
|
+
>
|
|
498
|
+
<span class="pf-c-menu__item-description">
|
|
499
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
500
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
501
|
+
</span>
|
|
502
|
+
</button>
|
|
503
|
+
</li>
|
|
504
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
505
|
+
<li class="pf-c-menu__list-item">
|
|
506
|
+
<button class="pf-c-menu__item" type="button">
|
|
507
|
+
<span class="pf-c-menu__item-main">
|
|
508
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
509
|
+
</span>
|
|
510
|
+
</button>
|
|
511
|
+
</li>
|
|
512
|
+
<li class="pf-c-menu__list-item">
|
|
513
|
+
<button class="pf-c-menu__item" type="button">
|
|
514
|
+
<span class="pf-c-menu__item-main">
|
|
515
|
+
<span
|
|
516
|
+
class="pf-c-menu__item-text"
|
|
517
|
+
>User management</span>
|
|
518
|
+
</span>
|
|
519
|
+
</button>
|
|
520
|
+
</li>
|
|
521
|
+
<li class="pf-c-menu__list-item">
|
|
522
|
+
<button class="pf-c-menu__item" type="button">
|
|
523
|
+
<span class="pf-c-menu__item-main">
|
|
524
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
525
|
+
</span>
|
|
526
|
+
</button>
|
|
527
|
+
</li>
|
|
528
|
+
</ul>
|
|
529
|
+
</section>
|
|
530
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
531
|
+
<section class="pf-c-menu__group">
|
|
532
|
+
<ul class="pf-c-menu__list">
|
|
533
|
+
<li class="pf-c-menu__list-item">
|
|
534
|
+
<button
|
|
535
|
+
class="pf-c-menu__item"
|
|
536
|
+
type="button"
|
|
537
|
+
aria-expanded="false"
|
|
538
|
+
>
|
|
539
|
+
<span class="pf-c-menu__item-main">
|
|
540
|
+
<span class="pf-c-menu__item-icon">
|
|
541
|
+
<i
|
|
542
|
+
class="fas fa-fw fa-cog"
|
|
543
|
+
aria-hidden="true"
|
|
544
|
+
></i>
|
|
545
|
+
</span>
|
|
546
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
547
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
548
|
+
<i class="fas fa-angle-right"></i>
|
|
549
|
+
</span>
|
|
550
|
+
</span>
|
|
551
|
+
</button>
|
|
552
|
+
<div class="pf-c-menu" hidden>
|
|
553
|
+
<div class="pf-c-menu__content">
|
|
554
|
+
<ul class="pf-c-menu__list">
|
|
555
|
+
<li
|
|
556
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
557
|
+
>
|
|
558
|
+
<button
|
|
559
|
+
class="pf-c-menu__item"
|
|
560
|
+
type="button"
|
|
561
|
+
>
|
|
562
|
+
<span class="pf-c-menu__item-main">
|
|
563
|
+
<span
|
|
564
|
+
class="pf-c-menu__item-toggle-icon"
|
|
565
|
+
>
|
|
566
|
+
<i class="fas fa-angle-left"></i>
|
|
567
|
+
</span>
|
|
568
|
+
<span class="pf-c-menu__item-icon">
|
|
569
|
+
<i
|
|
570
|
+
class="fas fa-fw fa-cog"
|
|
571
|
+
aria-hidden="true"
|
|
572
|
+
></i>
|
|
573
|
+
</span>
|
|
574
|
+
<span
|
|
575
|
+
class="pf-c-menu__item-text"
|
|
576
|
+
>Settings</span>
|
|
577
|
+
</span>
|
|
578
|
+
</button>
|
|
579
|
+
</li>
|
|
580
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
581
|
+
<li class="pf-c-menu__list-item">
|
|
582
|
+
<a class="pf-c-menu__item" href="#">
|
|
583
|
+
<span class="pf-c-menu__item-main">
|
|
584
|
+
<span
|
|
585
|
+
class="pf-c-menu__item-text"
|
|
586
|
+
>Customer support</span>
|
|
587
|
+
</span>
|
|
588
|
+
</a>
|
|
589
|
+
</li>
|
|
590
|
+
<li class="pf-c-menu__list-item">
|
|
591
|
+
<a class="pf-c-menu__item" href="#">
|
|
592
|
+
<span class="pf-c-menu__item-main">
|
|
593
|
+
<span
|
|
594
|
+
class="pf-c-menu__item-text"
|
|
595
|
+
>About</span>
|
|
596
|
+
</span>
|
|
597
|
+
</a>
|
|
598
|
+
</li>
|
|
599
|
+
</ul>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
</li>
|
|
603
|
+
|
|
604
|
+
<li class="pf-c-menu__list-item">
|
|
605
|
+
<button
|
|
606
|
+
class="pf-c-menu__item"
|
|
607
|
+
type="button"
|
|
608
|
+
aria-expanded="false"
|
|
609
|
+
>
|
|
610
|
+
<span class="pf-c-menu__item-main">
|
|
611
|
+
<span class="pf-c-menu__item-icon">
|
|
612
|
+
<i
|
|
613
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
614
|
+
aria-hidden="true"
|
|
615
|
+
></i>
|
|
616
|
+
</span>
|
|
617
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
618
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
619
|
+
<i class="fas fa-angle-right"></i>
|
|
620
|
+
</span>
|
|
621
|
+
</span>
|
|
622
|
+
</button>
|
|
623
|
+
<div class="pf-c-menu" hidden>
|
|
624
|
+
<div class="pf-c-menu__content">
|
|
625
|
+
<ul class="pf-c-menu__list">
|
|
626
|
+
<li
|
|
627
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
628
|
+
>
|
|
629
|
+
<button
|
|
630
|
+
class="pf-c-menu__item"
|
|
631
|
+
type="button"
|
|
632
|
+
>
|
|
633
|
+
<span class="pf-c-menu__item-main">
|
|
634
|
+
<span
|
|
635
|
+
class="pf-c-menu__item-toggle-icon"
|
|
636
|
+
>
|
|
637
|
+
<i class="fas fa-angle-left"></i>
|
|
638
|
+
</span>
|
|
639
|
+
<span class="pf-c-menu__item-icon">
|
|
640
|
+
<i
|
|
641
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
642
|
+
aria-hidden="true"
|
|
643
|
+
></i>
|
|
644
|
+
</span>
|
|
645
|
+
<span
|
|
646
|
+
class="pf-c-menu__item-text"
|
|
647
|
+
>Help</span>
|
|
648
|
+
</span>
|
|
649
|
+
</button>
|
|
650
|
+
</li>
|
|
651
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
652
|
+
<li class="pf-c-menu__list-item">
|
|
653
|
+
<a class="pf-c-menu__item" href="#">
|
|
654
|
+
<span class="pf-c-menu__item-main">
|
|
655
|
+
<span
|
|
656
|
+
class="pf-c-menu__item-text"
|
|
657
|
+
>Support options</span>
|
|
658
|
+
</span>
|
|
659
|
+
</a>
|
|
660
|
+
</li>
|
|
661
|
+
<li class="pf-c-menu__list-item">
|
|
662
|
+
<a class="pf-c-menu__item" href="#">
|
|
663
|
+
<span class="pf-c-menu__item-main">
|
|
664
|
+
<span
|
|
665
|
+
class="pf-c-menu__item-text"
|
|
666
|
+
>Open support case</span>
|
|
667
|
+
</span>
|
|
668
|
+
</a>
|
|
669
|
+
</li>
|
|
670
|
+
<li class="pf-c-menu__list-item">
|
|
671
|
+
<a class="pf-c-menu__item" href="#">
|
|
672
|
+
<span class="pf-c-menu__item-main">
|
|
673
|
+
<span
|
|
674
|
+
class="pf-c-menu__item-text"
|
|
675
|
+
>API documentation</span>
|
|
676
|
+
</span>
|
|
677
|
+
</a>
|
|
678
|
+
</li>
|
|
679
|
+
</ul>
|
|
680
|
+
</div>
|
|
681
|
+
</div>
|
|
682
|
+
</li>
|
|
683
|
+
|
|
684
|
+
<li class="pf-c-menu__list-item">
|
|
685
|
+
<button class="pf-c-menu__item" type="button">
|
|
686
|
+
<span class="pf-c-menu__item-main">
|
|
687
|
+
<span class="pf-c-menu__item-icon">
|
|
688
|
+
<i
|
|
689
|
+
class="fas fa-fw fa-th"
|
|
690
|
+
aria-hidden="true"
|
|
691
|
+
></i>
|
|
692
|
+
</span>
|
|
693
|
+
<span
|
|
694
|
+
class="pf-c-menu__item-text"
|
|
695
|
+
>Application launcher</span>
|
|
696
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
697
|
+
<i class="fas fa-angle-right"></i>
|
|
698
|
+
</span>
|
|
699
|
+
</span>
|
|
700
|
+
</button>
|
|
701
|
+
<div class="pf-c-menu" hidden>
|
|
702
|
+
<div class="pf-c-menu__header">
|
|
703
|
+
<button class="pf-c-menu__item" type="button">
|
|
704
|
+
<span class="pf-c-menu__item-main">
|
|
705
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
706
|
+
<i class="fas fa-angle-left"></i>
|
|
707
|
+
</span>
|
|
708
|
+
<span class="pf-c-menu__item-icon">
|
|
709
|
+
<i
|
|
710
|
+
class="fas fa-fw fa-th"
|
|
711
|
+
aria-hidden="true"
|
|
712
|
+
></i>
|
|
713
|
+
</span>
|
|
714
|
+
<span
|
|
715
|
+
class="pf-c-menu__item-text"
|
|
716
|
+
>Application launcher</span>
|
|
717
|
+
</span>
|
|
718
|
+
</button>
|
|
719
|
+
</div>
|
|
720
|
+
<div class="pf-c-menu__search">
|
|
721
|
+
<div class="pf-c-menu__search-input">
|
|
722
|
+
<input
|
|
723
|
+
class="pf-c-form-control pf-m-search"
|
|
724
|
+
type="search"
|
|
725
|
+
id="context-selector-in-sidebar-masthead-drilldown-menu-list-3-search-input"
|
|
726
|
+
name="context-selector-in-sidebar-masthead-drilldown-menu-list-3-search-input"
|
|
727
|
+
aria-label="Search"
|
|
728
|
+
/>
|
|
729
|
+
</div>
|
|
730
|
+
</div>
|
|
731
|
+
<hr class="pf-c-divider" />
|
|
732
|
+
<section class="pf-c-menu__group">
|
|
733
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
734
|
+
<ul class="pf-c-menu__list">
|
|
735
|
+
<li class="pf-c-menu__list-item">
|
|
736
|
+
<a class="pf-c-menu__item" href="#">
|
|
737
|
+
<span class="pf-c-menu__item-main">
|
|
738
|
+
<span
|
|
739
|
+
class="pf-c-menu__item-text"
|
|
740
|
+
>Link 1</span>
|
|
741
|
+
</span>
|
|
742
|
+
</a>
|
|
743
|
+
<button
|
|
744
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
745
|
+
type="button"
|
|
746
|
+
aria-label="Starred"
|
|
747
|
+
>
|
|
748
|
+
<span
|
|
749
|
+
class="pf-c-menu__item-action-icon"
|
|
750
|
+
>
|
|
751
|
+
<i
|
|
752
|
+
class="fas fa-star"
|
|
753
|
+
aria-hidden="true"
|
|
754
|
+
></i>
|
|
755
|
+
</span>
|
|
756
|
+
</button>
|
|
757
|
+
</li>
|
|
758
|
+
<li class="pf-c-menu__list-item">
|
|
759
|
+
<a
|
|
760
|
+
class="pf-c-menu__item"
|
|
761
|
+
href="#"
|
|
762
|
+
target="_blank"
|
|
763
|
+
>
|
|
764
|
+
<span class="pf-c-menu__item-main">
|
|
765
|
+
<span
|
|
766
|
+
class="pf-c-menu__item-text"
|
|
767
|
+
>Link 2</span>
|
|
768
|
+
<span
|
|
769
|
+
class="pf-c-menu__item-external-icon"
|
|
770
|
+
>
|
|
771
|
+
<i
|
|
772
|
+
class="fas fa-external-link-alt"
|
|
773
|
+
aria-hidden="true"
|
|
774
|
+
></i>
|
|
775
|
+
</span>
|
|
776
|
+
<span
|
|
777
|
+
class="pf-screen-reader"
|
|
778
|
+
>(opens new window)</span>
|
|
779
|
+
</span>
|
|
780
|
+
</a>
|
|
781
|
+
<button
|
|
782
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
783
|
+
type="button"
|
|
784
|
+
aria-label="Not starred"
|
|
785
|
+
>
|
|
786
|
+
<span
|
|
787
|
+
class="pf-c-menu__item-action-icon"
|
|
788
|
+
>
|
|
789
|
+
<i
|
|
790
|
+
class="fas fa-star"
|
|
791
|
+
aria-hidden="true"
|
|
792
|
+
></i>
|
|
793
|
+
</span>
|
|
794
|
+
</button>
|
|
795
|
+
</li>
|
|
796
|
+
</ul>
|
|
797
|
+
</section>
|
|
798
|
+
<hr class="pf-c-divider" />
|
|
799
|
+
<section class="pf-c-menu__group">
|
|
800
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
801
|
+
<ul class="pf-c-menu__list">
|
|
802
|
+
<li class="pf-c-menu__list-item">
|
|
803
|
+
<a class="pf-c-menu__item" href="#">
|
|
804
|
+
<span class="pf-c-menu__item-main">
|
|
805
|
+
<span
|
|
806
|
+
class="pf-c-menu__item-text"
|
|
807
|
+
>Link 1</span>
|
|
808
|
+
</span>
|
|
809
|
+
</a>
|
|
810
|
+
<button
|
|
811
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
812
|
+
type="button"
|
|
813
|
+
aria-label="Not starred"
|
|
814
|
+
>
|
|
815
|
+
<span
|
|
816
|
+
class="pf-c-menu__item-action-icon"
|
|
817
|
+
>
|
|
818
|
+
<i
|
|
819
|
+
class="fas fa-star"
|
|
820
|
+
aria-hidden="true"
|
|
821
|
+
></i>
|
|
822
|
+
</span>
|
|
823
|
+
</button>
|
|
824
|
+
</li>
|
|
825
|
+
<li class="pf-c-menu__list-item">
|
|
826
|
+
<a
|
|
827
|
+
class="pf-c-menu__item"
|
|
828
|
+
href="#"
|
|
829
|
+
target="_blank"
|
|
830
|
+
>
|
|
831
|
+
<span class="pf-c-menu__item-main">
|
|
832
|
+
<span
|
|
833
|
+
class="pf-c-menu__item-text"
|
|
834
|
+
>Link 2</span>
|
|
835
|
+
<span
|
|
836
|
+
class="pf-c-menu__item-external-icon"
|
|
837
|
+
>
|
|
838
|
+
<i
|
|
839
|
+
class="fas fa-external-link-alt"
|
|
840
|
+
aria-hidden="true"
|
|
841
|
+
></i>
|
|
842
|
+
</span>
|
|
843
|
+
<span
|
|
844
|
+
class="pf-screen-reader"
|
|
845
|
+
>(opens new window)</span>
|
|
846
|
+
</span>
|
|
847
|
+
</a>
|
|
848
|
+
<button
|
|
849
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
850
|
+
type="button"
|
|
851
|
+
aria-label="Starred"
|
|
852
|
+
>
|
|
853
|
+
<span
|
|
854
|
+
class="pf-c-menu__item-action-icon"
|
|
855
|
+
>
|
|
856
|
+
<i
|
|
857
|
+
class="fas fa-star"
|
|
858
|
+
aria-hidden="true"
|
|
859
|
+
></i>
|
|
860
|
+
</span>
|
|
861
|
+
</button>
|
|
862
|
+
</li>
|
|
863
|
+
</ul>
|
|
864
|
+
</section>
|
|
865
|
+
</div>
|
|
866
|
+
</li>
|
|
867
|
+
</ul>
|
|
868
|
+
</section>
|
|
869
|
+
</div>
|
|
870
|
+
</div>
|
|
871
|
+
</div>
|
|
872
|
+
</div>
|
|
873
|
+
</div>
|
|
874
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
875
|
+
<div
|
|
876
|
+
class="pf-c-dropdown"
|
|
877
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
878
|
+
>
|
|
879
|
+
<button
|
|
880
|
+
class="pf-c-dropdown__toggle"
|
|
881
|
+
id="context-selector-in-sidebar-masthead-profile-button"
|
|
882
|
+
aria-expanded="false"
|
|
883
|
+
type="button"
|
|
884
|
+
>
|
|
885
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
886
|
+
<img
|
|
887
|
+
class="pf-c-avatar"
|
|
888
|
+
src="/assets/images/img_avatar.svg"
|
|
889
|
+
alt="Avatar image"
|
|
890
|
+
/>
|
|
891
|
+
</span>
|
|
892
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
893
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
894
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
895
|
+
</span>
|
|
896
|
+
</button>
|
|
897
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
898
|
+
<section class="pf-c-dropdown__group">
|
|
899
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
900
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
901
|
+
<div>123456789</div>
|
|
902
|
+
</div>
|
|
903
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
904
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
905
|
+
<div>mshaksho@redhat.com</div>
|
|
906
|
+
</div>
|
|
907
|
+
</section>
|
|
908
|
+
<hr class="pf-c-divider" />
|
|
909
|
+
<section class="pf-c-dropdown__group">
|
|
910
|
+
<ul>
|
|
911
|
+
<li>
|
|
912
|
+
<a
|
|
913
|
+
class="pf-c-dropdown__menu-item"
|
|
914
|
+
href="#"
|
|
915
|
+
>My profile</a>
|
|
916
|
+
</li>
|
|
917
|
+
<li>
|
|
918
|
+
<a
|
|
919
|
+
class="pf-c-dropdown__menu-item"
|
|
920
|
+
href="#"
|
|
921
|
+
>User management</a>
|
|
922
|
+
</li>
|
|
923
|
+
<li>
|
|
924
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
925
|
+
</li>
|
|
926
|
+
</ul>
|
|
927
|
+
</section>
|
|
928
|
+
</div>
|
|
929
|
+
</div>
|
|
930
|
+
</div>
|
|
931
|
+
</div>
|
|
932
|
+
</div>
|
|
933
|
+
</div>
|
|
934
|
+
</div>
|
|
360
935
|
</header>
|
|
361
936
|
</header>
|
|
362
937
|
<div class="pf-c-page__sidebar">
|
|
@@ -528,7 +1103,7 @@ section: components
|
|
|
528
1103
|
<div class="pf-c-page__main-body">
|
|
529
1104
|
<div class="pf-c-content">
|
|
530
1105
|
<h1>Main title</h1>
|
|
531
|
-
<p>This is a
|
|
1106
|
+
<p>This is a full page demo.</p>
|
|
532
1107
|
</div>
|
|
533
1108
|
</div>
|
|
534
1109
|
</section>
|
|
@@ -626,14 +1201,589 @@ section: components
|
|
|
626
1201
|
</span>
|
|
627
1202
|
<div class="pf-c-masthead__main">
|
|
628
1203
|
<a class="pf-c-masthead__brand" href="#">
|
|
629
|
-
<
|
|
630
|
-
class="pf-c-brand"
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
1204
|
+
<picture
|
|
1205
|
+
class="pf-c-brand pf-m-picture"
|
|
1206
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
1207
|
+
>
|
|
1208
|
+
<source
|
|
1209
|
+
media="(min-width: 768px)"
|
|
1210
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
1211
|
+
/>
|
|
1212
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
1213
|
+
<img
|
|
1214
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
1215
|
+
alt="Fallback patternFly default logo"
|
|
1216
|
+
/>
|
|
1217
|
+
</picture>
|
|
634
1218
|
</a>
|
|
635
1219
|
</div>
|
|
636
|
-
<div class="pf-c-masthead__content">
|
|
1220
|
+
<div class="pf-c-masthead__content">
|
|
1221
|
+
<div
|
|
1222
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1223
|
+
id="context-selector-in-sidebar-expanded-masthead-toolbar"
|
|
1224
|
+
>
|
|
1225
|
+
<div class="pf-c-toolbar__content">
|
|
1226
|
+
<div class="pf-c-toolbar__content-section">
|
|
1227
|
+
<div
|
|
1228
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
1229
|
+
>
|
|
1230
|
+
<div class="pf-c-toolbar__item">
|
|
1231
|
+
<button
|
|
1232
|
+
class="pf-c-button pf-m-plain"
|
|
1233
|
+
type="button"
|
|
1234
|
+
aria-label="Notifications"
|
|
1235
|
+
>
|
|
1236
|
+
<span class="pf-c-notification-badge">
|
|
1237
|
+
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
|
|
1238
|
+
</span>
|
|
1239
|
+
</button>
|
|
1240
|
+
</div>
|
|
1241
|
+
<div
|
|
1242
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1243
|
+
>
|
|
1244
|
+
<div class="pf-c-toolbar__item">
|
|
1245
|
+
<div class="pf-c-dropdown">
|
|
1246
|
+
<button
|
|
1247
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1248
|
+
id="context-selector-in-sidebar-expanded-masthead-settings-button"
|
|
1249
|
+
aria-expanded="false"
|
|
1250
|
+
type="button"
|
|
1251
|
+
aria-label="Settings"
|
|
1252
|
+
>
|
|
1253
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1254
|
+
</button>
|
|
1255
|
+
<ul
|
|
1256
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1257
|
+
aria-labelledby="context-selector-in-sidebar-expanded-masthead-settings-button"
|
|
1258
|
+
hidden
|
|
1259
|
+
>
|
|
1260
|
+
<li>
|
|
1261
|
+
<button
|
|
1262
|
+
class="pf-c-dropdown__menu-item"
|
|
1263
|
+
type="button"
|
|
1264
|
+
>Settings</button>
|
|
1265
|
+
</li>
|
|
1266
|
+
<li>
|
|
1267
|
+
<button
|
|
1268
|
+
class="pf-c-dropdown__menu-item"
|
|
1269
|
+
type="button"
|
|
1270
|
+
>Use the beta release</button>
|
|
1271
|
+
</li>
|
|
1272
|
+
</ul>
|
|
1273
|
+
</div>
|
|
1274
|
+
</div>
|
|
1275
|
+
<div class="pf-c-toolbar__item">
|
|
1276
|
+
<div class="pf-c-dropdown">
|
|
1277
|
+
<button
|
|
1278
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1279
|
+
id="context-selector-in-sidebar-expanded-masthead-help-button"
|
|
1280
|
+
aria-expanded="false"
|
|
1281
|
+
type="button"
|
|
1282
|
+
aria-label="Help"
|
|
1283
|
+
>
|
|
1284
|
+
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
1285
|
+
</button>
|
|
1286
|
+
<ul
|
|
1287
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1288
|
+
aria-labelledby="context-selector-in-sidebar-expanded-masthead-help-button"
|
|
1289
|
+
hidden
|
|
1290
|
+
>
|
|
1291
|
+
<li>
|
|
1292
|
+
<button
|
|
1293
|
+
class="pf-c-dropdown__menu-item"
|
|
1294
|
+
type="button"
|
|
1295
|
+
>Support options</button>
|
|
1296
|
+
</li>
|
|
1297
|
+
<li>
|
|
1298
|
+
<button
|
|
1299
|
+
class="pf-c-dropdown__menu-item"
|
|
1300
|
+
type="button"
|
|
1301
|
+
>Open support case</button>
|
|
1302
|
+
</li>
|
|
1303
|
+
<li>
|
|
1304
|
+
<button
|
|
1305
|
+
class="pf-c-dropdown__menu-item"
|
|
1306
|
+
type="button"
|
|
1307
|
+
>API documentation</button>
|
|
1308
|
+
</li>
|
|
1309
|
+
</ul>
|
|
1310
|
+
</div>
|
|
1311
|
+
</div>
|
|
1312
|
+
</div>
|
|
1313
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
1314
|
+
<div class="pf-c-dropdown">
|
|
1315
|
+
<button
|
|
1316
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
1317
|
+
type="button"
|
|
1318
|
+
aria-expanded="false"
|
|
1319
|
+
aria-label="Actions"
|
|
1320
|
+
>
|
|
1321
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1322
|
+
</button>
|
|
1323
|
+
<div
|
|
1324
|
+
class="pf-c-menu pf-m-drilldown pf-m-align-right"
|
|
1325
|
+
hidden
|
|
1326
|
+
>
|
|
1327
|
+
<div class="pf-c-menu__content">
|
|
1328
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
1329
|
+
<ul class="pf-c-menu__list">
|
|
1330
|
+
<li class="pf-c-menu__list-item pf-m-disabled">
|
|
1331
|
+
<button
|
|
1332
|
+
class="pf-c-menu__item"
|
|
1333
|
+
type="button"
|
|
1334
|
+
disabled
|
|
1335
|
+
>
|
|
1336
|
+
<span class="pf-c-menu__item-description">
|
|
1337
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1338
|
+
<div
|
|
1339
|
+
class="pf-u-font-size-md"
|
|
1340
|
+
>mshaksho@redhat.com</div>
|
|
1341
|
+
</span>
|
|
1342
|
+
</button>
|
|
1343
|
+
</li>
|
|
1344
|
+
<li class="pf-c-menu__list-item pf-m-disabled">
|
|
1345
|
+
<button
|
|
1346
|
+
class="pf-c-menu__item"
|
|
1347
|
+
type="button"
|
|
1348
|
+
disabled
|
|
1349
|
+
>
|
|
1350
|
+
<span class="pf-c-menu__item-description">
|
|
1351
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1352
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
1353
|
+
</span>
|
|
1354
|
+
</button>
|
|
1355
|
+
</li>
|
|
1356
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1357
|
+
<li class="pf-c-menu__list-item">
|
|
1358
|
+
<button class="pf-c-menu__item" type="button">
|
|
1359
|
+
<span class="pf-c-menu__item-main">
|
|
1360
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
1361
|
+
</span>
|
|
1362
|
+
</button>
|
|
1363
|
+
</li>
|
|
1364
|
+
<li class="pf-c-menu__list-item">
|
|
1365
|
+
<button class="pf-c-menu__item" type="button">
|
|
1366
|
+
<span class="pf-c-menu__item-main">
|
|
1367
|
+
<span
|
|
1368
|
+
class="pf-c-menu__item-text"
|
|
1369
|
+
>User management</span>
|
|
1370
|
+
</span>
|
|
1371
|
+
</button>
|
|
1372
|
+
</li>
|
|
1373
|
+
<li class="pf-c-menu__list-item">
|
|
1374
|
+
<button class="pf-c-menu__item" type="button">
|
|
1375
|
+
<span class="pf-c-menu__item-main">
|
|
1376
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
1377
|
+
</span>
|
|
1378
|
+
</button>
|
|
1379
|
+
</li>
|
|
1380
|
+
</ul>
|
|
1381
|
+
</section>
|
|
1382
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
1383
|
+
<section class="pf-c-menu__group">
|
|
1384
|
+
<ul class="pf-c-menu__list">
|
|
1385
|
+
<li class="pf-c-menu__list-item">
|
|
1386
|
+
<button
|
|
1387
|
+
class="pf-c-menu__item"
|
|
1388
|
+
type="button"
|
|
1389
|
+
aria-expanded="false"
|
|
1390
|
+
>
|
|
1391
|
+
<span class="pf-c-menu__item-main">
|
|
1392
|
+
<span class="pf-c-menu__item-icon">
|
|
1393
|
+
<i
|
|
1394
|
+
class="fas fa-fw fa-cog"
|
|
1395
|
+
aria-hidden="true"
|
|
1396
|
+
></i>
|
|
1397
|
+
</span>
|
|
1398
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
1399
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1400
|
+
<i class="fas fa-angle-right"></i>
|
|
1401
|
+
</span>
|
|
1402
|
+
</span>
|
|
1403
|
+
</button>
|
|
1404
|
+
<div class="pf-c-menu" hidden>
|
|
1405
|
+
<div class="pf-c-menu__content">
|
|
1406
|
+
<ul class="pf-c-menu__list">
|
|
1407
|
+
<li
|
|
1408
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1409
|
+
>
|
|
1410
|
+
<button
|
|
1411
|
+
class="pf-c-menu__item"
|
|
1412
|
+
type="button"
|
|
1413
|
+
>
|
|
1414
|
+
<span class="pf-c-menu__item-main">
|
|
1415
|
+
<span
|
|
1416
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1417
|
+
>
|
|
1418
|
+
<i class="fas fa-angle-left"></i>
|
|
1419
|
+
</span>
|
|
1420
|
+
<span class="pf-c-menu__item-icon">
|
|
1421
|
+
<i
|
|
1422
|
+
class="fas fa-fw fa-cog"
|
|
1423
|
+
aria-hidden="true"
|
|
1424
|
+
></i>
|
|
1425
|
+
</span>
|
|
1426
|
+
<span
|
|
1427
|
+
class="pf-c-menu__item-text"
|
|
1428
|
+
>Settings</span>
|
|
1429
|
+
</span>
|
|
1430
|
+
</button>
|
|
1431
|
+
</li>
|
|
1432
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1433
|
+
<li class="pf-c-menu__list-item">
|
|
1434
|
+
<a class="pf-c-menu__item" href="#">
|
|
1435
|
+
<span class="pf-c-menu__item-main">
|
|
1436
|
+
<span
|
|
1437
|
+
class="pf-c-menu__item-text"
|
|
1438
|
+
>Customer support</span>
|
|
1439
|
+
</span>
|
|
1440
|
+
</a>
|
|
1441
|
+
</li>
|
|
1442
|
+
<li class="pf-c-menu__list-item">
|
|
1443
|
+
<a class="pf-c-menu__item" href="#">
|
|
1444
|
+
<span class="pf-c-menu__item-main">
|
|
1445
|
+
<span
|
|
1446
|
+
class="pf-c-menu__item-text"
|
|
1447
|
+
>About</span>
|
|
1448
|
+
</span>
|
|
1449
|
+
</a>
|
|
1450
|
+
</li>
|
|
1451
|
+
</ul>
|
|
1452
|
+
</div>
|
|
1453
|
+
</div>
|
|
1454
|
+
</li>
|
|
1455
|
+
|
|
1456
|
+
<li class="pf-c-menu__list-item">
|
|
1457
|
+
<button
|
|
1458
|
+
class="pf-c-menu__item"
|
|
1459
|
+
type="button"
|
|
1460
|
+
aria-expanded="false"
|
|
1461
|
+
>
|
|
1462
|
+
<span class="pf-c-menu__item-main">
|
|
1463
|
+
<span class="pf-c-menu__item-icon">
|
|
1464
|
+
<i
|
|
1465
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1466
|
+
aria-hidden="true"
|
|
1467
|
+
></i>
|
|
1468
|
+
</span>
|
|
1469
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1470
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1471
|
+
<i class="fas fa-angle-right"></i>
|
|
1472
|
+
</span>
|
|
1473
|
+
</span>
|
|
1474
|
+
</button>
|
|
1475
|
+
<div class="pf-c-menu" hidden>
|
|
1476
|
+
<div class="pf-c-menu__content">
|
|
1477
|
+
<ul class="pf-c-menu__list">
|
|
1478
|
+
<li
|
|
1479
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1480
|
+
>
|
|
1481
|
+
<button
|
|
1482
|
+
class="pf-c-menu__item"
|
|
1483
|
+
type="button"
|
|
1484
|
+
>
|
|
1485
|
+
<span class="pf-c-menu__item-main">
|
|
1486
|
+
<span
|
|
1487
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1488
|
+
>
|
|
1489
|
+
<i class="fas fa-angle-left"></i>
|
|
1490
|
+
</span>
|
|
1491
|
+
<span class="pf-c-menu__item-icon">
|
|
1492
|
+
<i
|
|
1493
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1494
|
+
aria-hidden="true"
|
|
1495
|
+
></i>
|
|
1496
|
+
</span>
|
|
1497
|
+
<span
|
|
1498
|
+
class="pf-c-menu__item-text"
|
|
1499
|
+
>Help</span>
|
|
1500
|
+
</span>
|
|
1501
|
+
</button>
|
|
1502
|
+
</li>
|
|
1503
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1504
|
+
<li class="pf-c-menu__list-item">
|
|
1505
|
+
<a class="pf-c-menu__item" href="#">
|
|
1506
|
+
<span class="pf-c-menu__item-main">
|
|
1507
|
+
<span
|
|
1508
|
+
class="pf-c-menu__item-text"
|
|
1509
|
+
>Support options</span>
|
|
1510
|
+
</span>
|
|
1511
|
+
</a>
|
|
1512
|
+
</li>
|
|
1513
|
+
<li class="pf-c-menu__list-item">
|
|
1514
|
+
<a class="pf-c-menu__item" href="#">
|
|
1515
|
+
<span class="pf-c-menu__item-main">
|
|
1516
|
+
<span
|
|
1517
|
+
class="pf-c-menu__item-text"
|
|
1518
|
+
>Open support case</span>
|
|
1519
|
+
</span>
|
|
1520
|
+
</a>
|
|
1521
|
+
</li>
|
|
1522
|
+
<li class="pf-c-menu__list-item">
|
|
1523
|
+
<a class="pf-c-menu__item" href="#">
|
|
1524
|
+
<span class="pf-c-menu__item-main">
|
|
1525
|
+
<span
|
|
1526
|
+
class="pf-c-menu__item-text"
|
|
1527
|
+
>API documentation</span>
|
|
1528
|
+
</span>
|
|
1529
|
+
</a>
|
|
1530
|
+
</li>
|
|
1531
|
+
</ul>
|
|
1532
|
+
</div>
|
|
1533
|
+
</div>
|
|
1534
|
+
</li>
|
|
1535
|
+
|
|
1536
|
+
<li class="pf-c-menu__list-item">
|
|
1537
|
+
<button class="pf-c-menu__item" type="button">
|
|
1538
|
+
<span class="pf-c-menu__item-main">
|
|
1539
|
+
<span class="pf-c-menu__item-icon">
|
|
1540
|
+
<i
|
|
1541
|
+
class="fas fa-fw fa-th"
|
|
1542
|
+
aria-hidden="true"
|
|
1543
|
+
></i>
|
|
1544
|
+
</span>
|
|
1545
|
+
<span
|
|
1546
|
+
class="pf-c-menu__item-text"
|
|
1547
|
+
>Application launcher</span>
|
|
1548
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1549
|
+
<i class="fas fa-angle-right"></i>
|
|
1550
|
+
</span>
|
|
1551
|
+
</span>
|
|
1552
|
+
</button>
|
|
1553
|
+
<div class="pf-c-menu" hidden>
|
|
1554
|
+
<div class="pf-c-menu__header">
|
|
1555
|
+
<button class="pf-c-menu__item" type="button">
|
|
1556
|
+
<span class="pf-c-menu__item-main">
|
|
1557
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1558
|
+
<i class="fas fa-angle-left"></i>
|
|
1559
|
+
</span>
|
|
1560
|
+
<span class="pf-c-menu__item-icon">
|
|
1561
|
+
<i
|
|
1562
|
+
class="fas fa-fw fa-th"
|
|
1563
|
+
aria-hidden="true"
|
|
1564
|
+
></i>
|
|
1565
|
+
</span>
|
|
1566
|
+
<span
|
|
1567
|
+
class="pf-c-menu__item-text"
|
|
1568
|
+
>Application launcher</span>
|
|
1569
|
+
</span>
|
|
1570
|
+
</button>
|
|
1571
|
+
</div>
|
|
1572
|
+
<div class="pf-c-menu__search">
|
|
1573
|
+
<div class="pf-c-menu__search-input">
|
|
1574
|
+
<input
|
|
1575
|
+
class="pf-c-form-control pf-m-search"
|
|
1576
|
+
type="search"
|
|
1577
|
+
id="context-selector-in-sidebar-expanded-masthead-drilldown-menu-list-3-search-input"
|
|
1578
|
+
name="context-selector-in-sidebar-expanded-masthead-drilldown-menu-list-3-search-input"
|
|
1579
|
+
aria-label="Search"
|
|
1580
|
+
/>
|
|
1581
|
+
</div>
|
|
1582
|
+
</div>
|
|
1583
|
+
<hr class="pf-c-divider" />
|
|
1584
|
+
<section class="pf-c-menu__group">
|
|
1585
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
1586
|
+
<ul class="pf-c-menu__list">
|
|
1587
|
+
<li class="pf-c-menu__list-item">
|
|
1588
|
+
<a class="pf-c-menu__item" href="#">
|
|
1589
|
+
<span class="pf-c-menu__item-main">
|
|
1590
|
+
<span
|
|
1591
|
+
class="pf-c-menu__item-text"
|
|
1592
|
+
>Link 1</span>
|
|
1593
|
+
</span>
|
|
1594
|
+
</a>
|
|
1595
|
+
<button
|
|
1596
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1597
|
+
type="button"
|
|
1598
|
+
aria-label="Starred"
|
|
1599
|
+
>
|
|
1600
|
+
<span
|
|
1601
|
+
class="pf-c-menu__item-action-icon"
|
|
1602
|
+
>
|
|
1603
|
+
<i
|
|
1604
|
+
class="fas fa-star"
|
|
1605
|
+
aria-hidden="true"
|
|
1606
|
+
></i>
|
|
1607
|
+
</span>
|
|
1608
|
+
</button>
|
|
1609
|
+
</li>
|
|
1610
|
+
<li class="pf-c-menu__list-item">
|
|
1611
|
+
<a
|
|
1612
|
+
class="pf-c-menu__item"
|
|
1613
|
+
href="#"
|
|
1614
|
+
target="_blank"
|
|
1615
|
+
>
|
|
1616
|
+
<span class="pf-c-menu__item-main">
|
|
1617
|
+
<span
|
|
1618
|
+
class="pf-c-menu__item-text"
|
|
1619
|
+
>Link 2</span>
|
|
1620
|
+
<span
|
|
1621
|
+
class="pf-c-menu__item-external-icon"
|
|
1622
|
+
>
|
|
1623
|
+
<i
|
|
1624
|
+
class="fas fa-external-link-alt"
|
|
1625
|
+
aria-hidden="true"
|
|
1626
|
+
></i>
|
|
1627
|
+
</span>
|
|
1628
|
+
<span
|
|
1629
|
+
class="pf-screen-reader"
|
|
1630
|
+
>(opens new window)</span>
|
|
1631
|
+
</span>
|
|
1632
|
+
</a>
|
|
1633
|
+
<button
|
|
1634
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1635
|
+
type="button"
|
|
1636
|
+
aria-label="Not starred"
|
|
1637
|
+
>
|
|
1638
|
+
<span
|
|
1639
|
+
class="pf-c-menu__item-action-icon"
|
|
1640
|
+
>
|
|
1641
|
+
<i
|
|
1642
|
+
class="fas fa-star"
|
|
1643
|
+
aria-hidden="true"
|
|
1644
|
+
></i>
|
|
1645
|
+
</span>
|
|
1646
|
+
</button>
|
|
1647
|
+
</li>
|
|
1648
|
+
</ul>
|
|
1649
|
+
</section>
|
|
1650
|
+
<hr class="pf-c-divider" />
|
|
1651
|
+
<section class="pf-c-menu__group">
|
|
1652
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
1653
|
+
<ul class="pf-c-menu__list">
|
|
1654
|
+
<li class="pf-c-menu__list-item">
|
|
1655
|
+
<a class="pf-c-menu__item" href="#">
|
|
1656
|
+
<span class="pf-c-menu__item-main">
|
|
1657
|
+
<span
|
|
1658
|
+
class="pf-c-menu__item-text"
|
|
1659
|
+
>Link 1</span>
|
|
1660
|
+
</span>
|
|
1661
|
+
</a>
|
|
1662
|
+
<button
|
|
1663
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1664
|
+
type="button"
|
|
1665
|
+
aria-label="Not starred"
|
|
1666
|
+
>
|
|
1667
|
+
<span
|
|
1668
|
+
class="pf-c-menu__item-action-icon"
|
|
1669
|
+
>
|
|
1670
|
+
<i
|
|
1671
|
+
class="fas fa-star"
|
|
1672
|
+
aria-hidden="true"
|
|
1673
|
+
></i>
|
|
1674
|
+
</span>
|
|
1675
|
+
</button>
|
|
1676
|
+
</li>
|
|
1677
|
+
<li class="pf-c-menu__list-item">
|
|
1678
|
+
<a
|
|
1679
|
+
class="pf-c-menu__item"
|
|
1680
|
+
href="#"
|
|
1681
|
+
target="_blank"
|
|
1682
|
+
>
|
|
1683
|
+
<span class="pf-c-menu__item-main">
|
|
1684
|
+
<span
|
|
1685
|
+
class="pf-c-menu__item-text"
|
|
1686
|
+
>Link 2</span>
|
|
1687
|
+
<span
|
|
1688
|
+
class="pf-c-menu__item-external-icon"
|
|
1689
|
+
>
|
|
1690
|
+
<i
|
|
1691
|
+
class="fas fa-external-link-alt"
|
|
1692
|
+
aria-hidden="true"
|
|
1693
|
+
></i>
|
|
1694
|
+
</span>
|
|
1695
|
+
<span
|
|
1696
|
+
class="pf-screen-reader"
|
|
1697
|
+
>(opens new window)</span>
|
|
1698
|
+
</span>
|
|
1699
|
+
</a>
|
|
1700
|
+
<button
|
|
1701
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1702
|
+
type="button"
|
|
1703
|
+
aria-label="Starred"
|
|
1704
|
+
>
|
|
1705
|
+
<span
|
|
1706
|
+
class="pf-c-menu__item-action-icon"
|
|
1707
|
+
>
|
|
1708
|
+
<i
|
|
1709
|
+
class="fas fa-star"
|
|
1710
|
+
aria-hidden="true"
|
|
1711
|
+
></i>
|
|
1712
|
+
</span>
|
|
1713
|
+
</button>
|
|
1714
|
+
</li>
|
|
1715
|
+
</ul>
|
|
1716
|
+
</section>
|
|
1717
|
+
</div>
|
|
1718
|
+
</li>
|
|
1719
|
+
</ul>
|
|
1720
|
+
</section>
|
|
1721
|
+
</div>
|
|
1722
|
+
</div>
|
|
1723
|
+
</div>
|
|
1724
|
+
</div>
|
|
1725
|
+
</div>
|
|
1726
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
1727
|
+
<div
|
|
1728
|
+
class="pf-c-dropdown"
|
|
1729
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
1730
|
+
>
|
|
1731
|
+
<button
|
|
1732
|
+
class="pf-c-dropdown__toggle"
|
|
1733
|
+
id="context-selector-in-sidebar-expanded-masthead-profile-button"
|
|
1734
|
+
aria-expanded="false"
|
|
1735
|
+
type="button"
|
|
1736
|
+
>
|
|
1737
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
1738
|
+
<img
|
|
1739
|
+
class="pf-c-avatar"
|
|
1740
|
+
src="/assets/images/img_avatar.svg"
|
|
1741
|
+
alt="Avatar image"
|
|
1742
|
+
/>
|
|
1743
|
+
</span>
|
|
1744
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
1745
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1746
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1747
|
+
</span>
|
|
1748
|
+
</button>
|
|
1749
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
1750
|
+
<section class="pf-c-dropdown__group">
|
|
1751
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1752
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1753
|
+
<div>123456789</div>
|
|
1754
|
+
</div>
|
|
1755
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1756
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1757
|
+
<div>mshaksho@redhat.com</div>
|
|
1758
|
+
</div>
|
|
1759
|
+
</section>
|
|
1760
|
+
<hr class="pf-c-divider" />
|
|
1761
|
+
<section class="pf-c-dropdown__group">
|
|
1762
|
+
<ul>
|
|
1763
|
+
<li>
|
|
1764
|
+
<a
|
|
1765
|
+
class="pf-c-dropdown__menu-item"
|
|
1766
|
+
href="#"
|
|
1767
|
+
>My profile</a>
|
|
1768
|
+
</li>
|
|
1769
|
+
<li>
|
|
1770
|
+
<a
|
|
1771
|
+
class="pf-c-dropdown__menu-item"
|
|
1772
|
+
href="#"
|
|
1773
|
+
>User management</a>
|
|
1774
|
+
</li>
|
|
1775
|
+
<li>
|
|
1776
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
1777
|
+
</li>
|
|
1778
|
+
</ul>
|
|
1779
|
+
</section>
|
|
1780
|
+
</div>
|
|
1781
|
+
</div>
|
|
1782
|
+
</div>
|
|
1783
|
+
</div>
|
|
1784
|
+
</div>
|
|
1785
|
+
</div>
|
|
1786
|
+
</div>
|
|
637
1787
|
</header>
|
|
638
1788
|
</header>
|
|
639
1789
|
<div class="pf-c-page__sidebar">
|
|
@@ -807,7 +1957,7 @@ section: components
|
|
|
807
1957
|
<div class="pf-c-page__main-body">
|
|
808
1958
|
<div class="pf-c-content">
|
|
809
1959
|
<h1>Main title</h1>
|
|
810
|
-
<p>This is a
|
|
1960
|
+
<p>This is a full page demo.</p>
|
|
811
1961
|
</div>
|
|
812
1962
|
</div>
|
|
813
1963
|
</section>
|
|
@@ -911,7 +2061,6 @@ section: components
|
|
|
911
2061
|
/>
|
|
912
2062
|
</a>
|
|
913
2063
|
</div>
|
|
914
|
-
|
|
915
2064
|
<div class="pf-c-page__header-tools">
|
|
916
2065
|
<div class="pf-c-page__header-tools-group">
|
|
917
2066
|
<div
|
|
@@ -1325,7 +2474,7 @@ section: components
|
|
|
1325
2474
|
<div class="pf-c-page__main-body">
|
|
1326
2475
|
<div class="pf-c-content">
|
|
1327
2476
|
<h1>Main title</h1>
|
|
1328
|
-
<p>This is a
|
|
2477
|
+
<p>This is a full page demo.</p>
|
|
1329
2478
|
</div>
|
|
1330
2479
|
</div>
|
|
1331
2480
|
</section>
|