@patternfly/patternfly 6.0.0-alpha.38 → 6.0.0-alpha.39

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.
Files changed (36) hide show
  1. package/components/Divider/divider.css +97 -177
  2. package/components/Divider/divider.scss +60 -79
  3. package/components/Masthead/masthead.css +267 -435
  4. package/components/Masthead/masthead.scss +118 -233
  5. package/docs/components/Divider/examples/Divider.css +3 -1
  6. package/docs/components/Divider/examples/Divider.md +4 -5
  7. package/docs/components/Masthead/examples/masthead.md +441 -16
  8. package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
  9. package/docs/demos/Alert/examples/Alert.md +120 -126
  10. package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
  11. package/docs/demos/Banner/examples/Banner.md +79 -80
  12. package/docs/demos/CardView/examples/CardView.md +40 -42
  13. package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
  14. package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
  15. package/docs/demos/DataList/examples/DataList.md +160 -279
  16. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
  17. package/docs/demos/Drawer/examples/Drawer.md +200 -210
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
  19. package/docs/demos/Masthead/examples/Masthead.md +143 -224
  20. package/docs/demos/Modal/examples/Modal.md +240 -252
  21. package/docs/demos/Nav/examples/Nav.md +320 -336
  22. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
  23. package/docs/demos/Page/examples/Page.md +360 -378
  24. package/docs/demos/Page/examples/Penta.md +8 -15
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
  26. package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
  27. package/docs/demos/Table/examples/Table.md +617 -647
  28. package/docs/demos/Tabs/examples/Tabs.md +240 -252
  29. package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
  30. package/docs/demos/Wizard/examples/Wizard.md +360 -378
  31. package/package.json +1 -1
  32. package/patternfly-no-globals.css +363 -611
  33. package/patternfly-theme-dark-unversioned.css +363 -611
  34. package/patternfly.css +363 -611
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -24,20 +24,16 @@ section: components
24
24
  </button>
25
25
  </span>
26
26
  <div class="pf-v5-c-masthead__main">
27
- <a
28
- class="pf-v5-c-masthead__brand"
29
- href="#"
30
- style="--pf-v5-c-brand--Height: 36px;"
31
- >
32
- <svg height="36px" viewBox="0 0 679 158" role="img">
33
- <title>Patternfly logo</title>
27
+ <a class="pf-v5-c-masthead__brand" href="#">
28
+ <svg height="40px" viewBox="0 0 679 158">
29
+ <title>PF-HorizontalLogo-Color</title>
34
30
  <defs>
35
31
  <linearGradient
36
32
  x1="68%"
37
33
  y1="2.25860997e-13%"
38
34
  x2="32%"
39
35
  y2="100%"
40
- id="linearGradient-1"
36
+ id="linearGradient-modal-basic-example-masthead"
41
37
  >
42
38
  <stop stop-color="#2B9AF3" offset="0%" />
43
39
  <stop
@@ -47,13 +43,7 @@ section: components
47
43
  />
48
44
  </linearGradient>
49
45
  </defs>
50
- <g
51
- id="PF-HorizontalLogo-Color"
52
- stroke="none"
53
- stroke-width="1"
54
- fill="none"
55
- fill-rule="evenodd"
56
- >
46
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
57
47
  <g
58
48
  transform="translate(206.000000, 45.750000)"
59
49
  fill="var(--pf-t--global--text--color--regular)"
@@ -88,19 +78,18 @@ section: components
88
78
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
89
79
  />
90
80
  </g>
91
- <g id="Logo" transform="translate(0.000000, 0.000000)">
81
+ <g transform="translate(0.000000, 0.000000)">
92
82
  <path
93
83
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
94
- id="Rectangle-Copy-17"
95
- fill="var(--pf-t--global--color--brand--200)"
84
+ fill="#0066CC"
96
85
  />
97
86
  <path
98
87
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
99
- fill="url(#linearGradient-1)"
88
+ fill="url(#linearGradient-modal-basic-example-masthead)"
100
89
  />
101
90
  <path
102
91
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
103
- fill="url(#linearGradient-1)"
92
+ fill="url(#linearGradient-modal-basic-example-masthead)"
104
93
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
105
94
  />
106
95
  </g>
@@ -115,8 +104,38 @@ section: components
115
104
  >
116
105
  <div class="pf-v5-c-toolbar__content">
117
106
  <div class="pf-v5-c-toolbar__content-section">
107
+ <div class="pf-v5-c-toolbar__item">
108
+ <button
109
+ class="pf-v5-c-menu-toggle"
110
+ type="button"
111
+ aria-expanded="false"
112
+ >
113
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
114
+ <span class="pf-v5-c-menu-toggle__controls">
115
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
116
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
117
+ </span>
118
+ </span>
119
+ </button>
120
+ </div>
121
+
122
+ <div class="pf-v5-c-toolbar__item">
123
+ <button
124
+ class="pf-v5-c-menu-toggle"
125
+ type="button"
126
+ aria-expanded="false"
127
+ >
128
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
129
+ <span class="pf-v5-c-menu-toggle__controls">
130
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
131
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
132
+ </span>
133
+ </span>
134
+ </button>
135
+ </div>
136
+
118
137
  <div
119
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
138
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
120
139
  >
121
140
  <div
122
141
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -163,27 +182,6 @@ section: components
163
182
  </button>
164
183
  </div>
165
184
  </div>
166
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
167
- <button
168
- class="pf-v5-c-menu-toggle pf-m-full-height"
169
- type="button"
170
- aria-expanded="false"
171
- >
172
- <span class="pf-v5-c-menu-toggle__icon">
173
- <img
174
- class="pf-v5-c-avatar"
175
- alt="Avatar image"
176
- src="/assets/images/img_avatar-light.svg"
177
- />
178
- </span>
179
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
180
- <span class="pf-v5-c-menu-toggle__controls">
181
- <span class="pf-v5-c-menu-toggle__toggle-icon">
182
- <i class="fas fa-angle-down" aria-hidden="true"></i>
183
- </span>
184
- </span>
185
- </button>
186
- </div>
187
185
  </div>
188
186
  </div>
189
187
  </div>
@@ -372,20 +370,16 @@ section: components
372
370
  </button>
373
371
  </span>
374
372
  <div class="pf-v5-c-masthead__main">
375
- <a
376
- class="pf-v5-c-masthead__brand"
377
- href="#"
378
- style="--pf-v5-c-brand--Height: 36px;"
379
- >
380
- <svg height="36px" viewBox="0 0 679 158" role="img">
381
- <title>Patternfly logo</title>
373
+ <a class="pf-v5-c-masthead__brand" href="#">
374
+ <svg height="40px" viewBox="0 0 679 158">
375
+ <title>PF-HorizontalLogo-Color</title>
382
376
  <defs>
383
377
  <linearGradient
384
378
  x1="68%"
385
379
  y1="2.25860997e-13%"
386
380
  x2="32%"
387
381
  y2="100%"
388
- id="linearGradient-1"
382
+ id="linearGradient-modal-scrollable-content-example-masthead"
389
383
  >
390
384
  <stop stop-color="#2B9AF3" offset="0%" />
391
385
  <stop
@@ -395,13 +389,7 @@ section: components
395
389
  />
396
390
  </linearGradient>
397
391
  </defs>
398
- <g
399
- id="PF-HorizontalLogo-Color"
400
- stroke="none"
401
- stroke-width="1"
402
- fill="none"
403
- fill-rule="evenodd"
404
- >
392
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
405
393
  <g
406
394
  transform="translate(206.000000, 45.750000)"
407
395
  fill="var(--pf-t--global--text--color--regular)"
@@ -436,19 +424,18 @@ section: components
436
424
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
437
425
  />
438
426
  </g>
439
- <g id="Logo" transform="translate(0.000000, 0.000000)">
427
+ <g transform="translate(0.000000, 0.000000)">
440
428
  <path
441
429
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
442
- id="Rectangle-Copy-17"
443
- fill="var(--pf-t--global--color--brand--200)"
430
+ fill="#0066CC"
444
431
  />
445
432
  <path
446
433
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
447
- fill="url(#linearGradient-1)"
434
+ fill="url(#linearGradient-modal-scrollable-content-example-masthead)"
448
435
  />
449
436
  <path
450
437
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
451
- fill="url(#linearGradient-1)"
438
+ fill="url(#linearGradient-modal-scrollable-content-example-masthead)"
452
439
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
453
440
  />
454
441
  </g>
@@ -463,8 +450,38 @@ section: components
463
450
  >
464
451
  <div class="pf-v5-c-toolbar__content">
465
452
  <div class="pf-v5-c-toolbar__content-section">
453
+ <div class="pf-v5-c-toolbar__item">
454
+ <button
455
+ class="pf-v5-c-menu-toggle"
456
+ type="button"
457
+ aria-expanded="false"
458
+ >
459
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
460
+ <span class="pf-v5-c-menu-toggle__controls">
461
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
462
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
463
+ </span>
464
+ </span>
465
+ </button>
466
+ </div>
467
+
468
+ <div class="pf-v5-c-toolbar__item">
469
+ <button
470
+ class="pf-v5-c-menu-toggle"
471
+ type="button"
472
+ aria-expanded="false"
473
+ >
474
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
475
+ <span class="pf-v5-c-menu-toggle__controls">
476
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
477
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
478
+ </span>
479
+ </span>
480
+ </button>
481
+ </div>
482
+
466
483
  <div
467
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
484
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
468
485
  >
469
486
  <div
470
487
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -511,27 +528,6 @@ section: components
511
528
  </button>
512
529
  </div>
513
530
  </div>
514
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
515
- <button
516
- class="pf-v5-c-menu-toggle pf-m-full-height"
517
- type="button"
518
- aria-expanded="false"
519
- >
520
- <span class="pf-v5-c-menu-toggle__icon">
521
- <img
522
- class="pf-v5-c-avatar"
523
- alt="Avatar image"
524
- src="/assets/images/img_avatar-light.svg"
525
- />
526
- </span>
527
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
528
- <span class="pf-v5-c-menu-toggle__controls">
529
- <span class="pf-v5-c-menu-toggle__toggle-icon">
530
- <i class="fas fa-angle-down" aria-hidden="true"></i>
531
- </span>
532
- </span>
533
- </button>
534
- </div>
535
531
  </div>
536
532
  </div>
537
533
  </div>
@@ -726,20 +722,16 @@ section: components
726
722
  </button>
727
723
  </span>
728
724
  <div class="pf-v5-c-masthead__main">
729
- <a
730
- class="pf-v5-c-masthead__brand"
731
- href="#"
732
- style="--pf-v5-c-brand--Height: 36px;"
733
- >
734
- <svg height="36px" viewBox="0 0 679 158" role="img">
735
- <title>Patternfly logo</title>
725
+ <a class="pf-v5-c-masthead__brand" href="#">
726
+ <svg height="40px" viewBox="0 0 679 158">
727
+ <title>PF-HorizontalLogo-Color</title>
736
728
  <defs>
737
729
  <linearGradient
738
730
  x1="68%"
739
731
  y1="2.25860997e-13%"
740
732
  x2="32%"
741
733
  y2="100%"
742
- id="linearGradient-1"
734
+ id="linearGradient-modal-medium-example-masthead"
743
735
  >
744
736
  <stop stop-color="#2B9AF3" offset="0%" />
745
737
  <stop
@@ -749,13 +741,7 @@ section: components
749
741
  />
750
742
  </linearGradient>
751
743
  </defs>
752
- <g
753
- id="PF-HorizontalLogo-Color"
754
- stroke="none"
755
- stroke-width="1"
756
- fill="none"
757
- fill-rule="evenodd"
758
- >
744
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
759
745
  <g
760
746
  transform="translate(206.000000, 45.750000)"
761
747
  fill="var(--pf-t--global--text--color--regular)"
@@ -790,19 +776,18 @@ section: components
790
776
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
791
777
  />
792
778
  </g>
793
- <g id="Logo" transform="translate(0.000000, 0.000000)">
779
+ <g transform="translate(0.000000, 0.000000)">
794
780
  <path
795
781
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
796
- id="Rectangle-Copy-17"
797
- fill="var(--pf-t--global--color--brand--200)"
782
+ fill="#0066CC"
798
783
  />
799
784
  <path
800
785
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
801
- fill="url(#linearGradient-1)"
786
+ fill="url(#linearGradient-modal-medium-example-masthead)"
802
787
  />
803
788
  <path
804
789
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
805
- fill="url(#linearGradient-1)"
790
+ fill="url(#linearGradient-modal-medium-example-masthead)"
806
791
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
807
792
  />
808
793
  </g>
@@ -817,8 +802,38 @@ section: components
817
802
  >
818
803
  <div class="pf-v5-c-toolbar__content">
819
804
  <div class="pf-v5-c-toolbar__content-section">
805
+ <div class="pf-v5-c-toolbar__item">
806
+ <button
807
+ class="pf-v5-c-menu-toggle"
808
+ type="button"
809
+ aria-expanded="false"
810
+ >
811
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
812
+ <span class="pf-v5-c-menu-toggle__controls">
813
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
814
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
815
+ </span>
816
+ </span>
817
+ </button>
818
+ </div>
819
+
820
+ <div class="pf-v5-c-toolbar__item">
821
+ <button
822
+ class="pf-v5-c-menu-toggle"
823
+ type="button"
824
+ aria-expanded="false"
825
+ >
826
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
827
+ <span class="pf-v5-c-menu-toggle__controls">
828
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
829
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
830
+ </span>
831
+ </span>
832
+ </button>
833
+ </div>
834
+
820
835
  <div
821
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
836
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
822
837
  >
823
838
  <div
824
839
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -865,27 +880,6 @@ section: components
865
880
  </button>
866
881
  </div>
867
882
  </div>
868
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
869
- <button
870
- class="pf-v5-c-menu-toggle pf-m-full-height"
871
- type="button"
872
- aria-expanded="false"
873
- >
874
- <span class="pf-v5-c-menu-toggle__icon">
875
- <img
876
- class="pf-v5-c-avatar"
877
- alt="Avatar image"
878
- src="/assets/images/img_avatar-light.svg"
879
- />
880
- </span>
881
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
882
- <span class="pf-v5-c-menu-toggle__controls">
883
- <span class="pf-v5-c-menu-toggle__toggle-icon">
884
- <i class="fas fa-angle-down" aria-hidden="true"></i>
885
- </span>
886
- </span>
887
- </button>
888
- </div>
889
883
  </div>
890
884
  </div>
891
885
  </div>
@@ -1070,20 +1064,16 @@ section: components
1070
1064
  </button>
1071
1065
  </span>
1072
1066
  <div class="pf-v5-c-masthead__main">
1073
- <a
1074
- class="pf-v5-c-masthead__brand"
1075
- href="#"
1076
- style="--pf-v5-c-brand--Height: 36px;"
1077
- >
1078
- <svg height="36px" viewBox="0 0 679 158" role="img">
1079
- <title>Patternfly logo</title>
1067
+ <a class="pf-v5-c-masthead__brand" href="#">
1068
+ <svg height="40px" viewBox="0 0 679 158">
1069
+ <title>PF-HorizontalLogo-Color</title>
1080
1070
  <defs>
1081
1071
  <linearGradient
1082
1072
  x1="68%"
1083
1073
  y1="2.25860997e-13%"
1084
1074
  x2="32%"
1085
1075
  y2="100%"
1086
- id="linearGradient-1"
1076
+ id="linearGradient-modal-large-example-masthead"
1087
1077
  >
1088
1078
  <stop stop-color="#2B9AF3" offset="0%" />
1089
1079
  <stop
@@ -1093,13 +1083,7 @@ section: components
1093
1083
  />
1094
1084
  </linearGradient>
1095
1085
  </defs>
1096
- <g
1097
- id="PF-HorizontalLogo-Color"
1098
- stroke="none"
1099
- stroke-width="1"
1100
- fill="none"
1101
- fill-rule="evenodd"
1102
- >
1086
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1103
1087
  <g
1104
1088
  transform="translate(206.000000, 45.750000)"
1105
1089
  fill="var(--pf-t--global--text--color--regular)"
@@ -1134,19 +1118,18 @@ section: components
1134
1118
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1135
1119
  />
1136
1120
  </g>
1137
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1121
+ <g transform="translate(0.000000, 0.000000)">
1138
1122
  <path
1139
1123
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1140
- id="Rectangle-Copy-17"
1141
- fill="var(--pf-t--global--color--brand--200)"
1124
+ fill="#0066CC"
1142
1125
  />
1143
1126
  <path
1144
1127
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1145
- fill="url(#linearGradient-1)"
1128
+ fill="url(#linearGradient-modal-large-example-masthead)"
1146
1129
  />
1147
1130
  <path
1148
1131
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1149
- fill="url(#linearGradient-1)"
1132
+ fill="url(#linearGradient-modal-large-example-masthead)"
1150
1133
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1151
1134
  />
1152
1135
  </g>
@@ -1161,8 +1144,38 @@ section: components
1161
1144
  >
1162
1145
  <div class="pf-v5-c-toolbar__content">
1163
1146
  <div class="pf-v5-c-toolbar__content-section">
1147
+ <div class="pf-v5-c-toolbar__item">
1148
+ <button
1149
+ class="pf-v5-c-menu-toggle"
1150
+ type="button"
1151
+ aria-expanded="false"
1152
+ >
1153
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1154
+ <span class="pf-v5-c-menu-toggle__controls">
1155
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1156
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1157
+ </span>
1158
+ </span>
1159
+ </button>
1160
+ </div>
1161
+
1162
+ <div class="pf-v5-c-toolbar__item">
1163
+ <button
1164
+ class="pf-v5-c-menu-toggle"
1165
+ type="button"
1166
+ aria-expanded="false"
1167
+ >
1168
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1169
+ <span class="pf-v5-c-menu-toggle__controls">
1170
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1171
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1172
+ </span>
1173
+ </span>
1174
+ </button>
1175
+ </div>
1176
+
1164
1177
  <div
1165
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1178
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1166
1179
  >
1167
1180
  <div
1168
1181
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1209,27 +1222,6 @@ section: components
1209
1222
  </button>
1210
1223
  </div>
1211
1224
  </div>
1212
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1213
- <button
1214
- class="pf-v5-c-menu-toggle pf-m-full-height"
1215
- type="button"
1216
- aria-expanded="false"
1217
- >
1218
- <span class="pf-v5-c-menu-toggle__icon">
1219
- <img
1220
- class="pf-v5-c-avatar"
1221
- alt="Avatar image"
1222
- src="/assets/images/img_avatar-light.svg"
1223
- />
1224
- </span>
1225
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1226
- <span class="pf-v5-c-menu-toggle__controls">
1227
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1228
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1229
- </span>
1230
- </span>
1231
- </button>
1232
- </div>
1233
1225
  </div>
1234
1226
  </div>
1235
1227
  </div>
@@ -1414,20 +1406,16 @@ section: components
1414
1406
  </button>
1415
1407
  </span>
1416
1408
  <div class="pf-v5-c-masthead__main">
1417
- <a
1418
- class="pf-v5-c-masthead__brand"
1419
- href="#"
1420
- style="--pf-v5-c-brand--Height: 36px;"
1421
- >
1422
- <svg height="36px" viewBox="0 0 679 158" role="img">
1423
- <title>Patternfly logo</title>
1409
+ <a class="pf-v5-c-masthead__brand" href="#">
1410
+ <svg height="40px" viewBox="0 0 679 158">
1411
+ <title>PF-HorizontalLogo-Color</title>
1424
1412
  <defs>
1425
1413
  <linearGradient
1426
1414
  x1="68%"
1427
1415
  y1="2.25860997e-13%"
1428
1416
  x2="32%"
1429
1417
  y2="100%"
1430
- id="linearGradient-1"
1418
+ id="linearGradient-modal-large-example-masthead"
1431
1419
  >
1432
1420
  <stop stop-color="#2B9AF3" offset="0%" />
1433
1421
  <stop
@@ -1437,13 +1425,7 @@ section: components
1437
1425
  />
1438
1426
  </linearGradient>
1439
1427
  </defs>
1440
- <g
1441
- id="PF-HorizontalLogo-Color"
1442
- stroke="none"
1443
- stroke-width="1"
1444
- fill="none"
1445
- fill-rule="evenodd"
1446
- >
1428
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1447
1429
  <g
1448
1430
  transform="translate(206.000000, 45.750000)"
1449
1431
  fill="var(--pf-t--global--text--color--regular)"
@@ -1478,19 +1460,18 @@ section: components
1478
1460
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1479
1461
  />
1480
1462
  </g>
1481
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1463
+ <g transform="translate(0.000000, 0.000000)">
1482
1464
  <path
1483
1465
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1484
- id="Rectangle-Copy-17"
1485
- fill="var(--pf-t--global--color--brand--200)"
1466
+ fill="#0066CC"
1486
1467
  />
1487
1468
  <path
1488
1469
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1489
- fill="url(#linearGradient-1)"
1470
+ fill="url(#linearGradient-modal-large-example-masthead)"
1490
1471
  />
1491
1472
  <path
1492
1473
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1493
- fill="url(#linearGradient-1)"
1474
+ fill="url(#linearGradient-modal-large-example-masthead)"
1494
1475
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1495
1476
  />
1496
1477
  </g>
@@ -1505,8 +1486,38 @@ section: components
1505
1486
  >
1506
1487
  <div class="pf-v5-c-toolbar__content">
1507
1488
  <div class="pf-v5-c-toolbar__content-section">
1489
+ <div class="pf-v5-c-toolbar__item">
1490
+ <button
1491
+ class="pf-v5-c-menu-toggle"
1492
+ type="button"
1493
+ aria-expanded="false"
1494
+ >
1495
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1496
+ <span class="pf-v5-c-menu-toggle__controls">
1497
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1498
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1499
+ </span>
1500
+ </span>
1501
+ </button>
1502
+ </div>
1503
+
1504
+ <div class="pf-v5-c-toolbar__item">
1505
+ <button
1506
+ class="pf-v5-c-menu-toggle"
1507
+ type="button"
1508
+ aria-expanded="false"
1509
+ >
1510
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1511
+ <span class="pf-v5-c-menu-toggle__controls">
1512
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1513
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1514
+ </span>
1515
+ </span>
1516
+ </button>
1517
+ </div>
1518
+
1508
1519
  <div
1509
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1520
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1510
1521
  >
1511
1522
  <div
1512
1523
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1553,27 +1564,6 @@ section: components
1553
1564
  </button>
1554
1565
  </div>
1555
1566
  </div>
1556
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1557
- <button
1558
- class="pf-v5-c-menu-toggle pf-m-full-height"
1559
- type="button"
1560
- aria-expanded="false"
1561
- >
1562
- <span class="pf-v5-c-menu-toggle__icon">
1563
- <img
1564
- class="pf-v5-c-avatar"
1565
- alt="Avatar image"
1566
- src="/assets/images/img_avatar-light.svg"
1567
- />
1568
- </span>
1569
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1570
- <span class="pf-v5-c-menu-toggle__controls">
1571
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1572
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1573
- </span>
1574
- </span>
1575
- </button>
1576
- </div>
1577
1567
  </div>
1578
1568
  </div>
1579
1569
  </div>
@@ -1758,20 +1748,16 @@ section: components
1758
1748
  </button>
1759
1749
  </span>
1760
1750
  <div class="pf-v5-c-masthead__main">
1761
- <a
1762
- class="pf-v5-c-masthead__brand"
1763
- href="#"
1764
- style="--pf-v5-c-brand--Height: 36px;"
1765
- >
1766
- <svg height="36px" viewBox="0 0 679 158" role="img">
1767
- <title>Patternfly logo</title>
1751
+ <a class="pf-v5-c-masthead__brand" href="#">
1752
+ <svg height="40px" viewBox="0 0 679 158">
1753
+ <title>PF-HorizontalLogo-Color</title>
1768
1754
  <defs>
1769
1755
  <linearGradient
1770
1756
  x1="68%"
1771
1757
  y1="2.25860997e-13%"
1772
1758
  x2="32%"
1773
1759
  y2="100%"
1774
- id="linearGradient-1"
1760
+ id="linearGradient-modal-with-form-example-masthead"
1775
1761
  >
1776
1762
  <stop stop-color="#2B9AF3" offset="0%" />
1777
1763
  <stop
@@ -1781,13 +1767,7 @@ section: components
1781
1767
  />
1782
1768
  </linearGradient>
1783
1769
  </defs>
1784
- <g
1785
- id="PF-HorizontalLogo-Color"
1786
- stroke="none"
1787
- stroke-width="1"
1788
- fill="none"
1789
- fill-rule="evenodd"
1790
- >
1770
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1791
1771
  <g
1792
1772
  transform="translate(206.000000, 45.750000)"
1793
1773
  fill="var(--pf-t--global--text--color--regular)"
@@ -1822,19 +1802,18 @@ section: components
1822
1802
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1823
1803
  />
1824
1804
  </g>
1825
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1805
+ <g transform="translate(0.000000, 0.000000)">
1826
1806
  <path
1827
1807
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1828
- id="Rectangle-Copy-17"
1829
- fill="var(--pf-t--global--color--brand--200)"
1808
+ fill="#0066CC"
1830
1809
  />
1831
1810
  <path
1832
1811
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1833
- fill="url(#linearGradient-1)"
1812
+ fill="url(#linearGradient-modal-with-form-example-masthead)"
1834
1813
  />
1835
1814
  <path
1836
1815
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1837
- fill="url(#linearGradient-1)"
1816
+ fill="url(#linearGradient-modal-with-form-example-masthead)"
1838
1817
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1839
1818
  />
1840
1819
  </g>
@@ -1849,8 +1828,38 @@ section: components
1849
1828
  >
1850
1829
  <div class="pf-v5-c-toolbar__content">
1851
1830
  <div class="pf-v5-c-toolbar__content-section">
1831
+ <div class="pf-v5-c-toolbar__item">
1832
+ <button
1833
+ class="pf-v5-c-menu-toggle"
1834
+ type="button"
1835
+ aria-expanded="false"
1836
+ >
1837
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1838
+ <span class="pf-v5-c-menu-toggle__controls">
1839
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1840
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1841
+ </span>
1842
+ </span>
1843
+ </button>
1844
+ </div>
1845
+
1846
+ <div class="pf-v5-c-toolbar__item">
1847
+ <button
1848
+ class="pf-v5-c-menu-toggle"
1849
+ type="button"
1850
+ aria-expanded="false"
1851
+ >
1852
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1853
+ <span class="pf-v5-c-menu-toggle__controls">
1854
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1855
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1856
+ </span>
1857
+ </span>
1858
+ </button>
1859
+ </div>
1860
+
1852
1861
  <div
1853
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1862
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1854
1863
  >
1855
1864
  <div
1856
1865
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1897,27 +1906,6 @@ section: components
1897
1906
  </button>
1898
1907
  </div>
1899
1908
  </div>
1900
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1901
- <button
1902
- class="pf-v5-c-menu-toggle pf-m-full-height"
1903
- type="button"
1904
- aria-expanded="false"
1905
- >
1906
- <span class="pf-v5-c-menu-toggle__icon">
1907
- <img
1908
- class="pf-v5-c-avatar"
1909
- alt="Avatar image"
1910
- src="/assets/images/img_avatar-light.svg"
1911
- />
1912
- </span>
1913
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1914
- <span class="pf-v5-c-menu-toggle__controls">
1915
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1916
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1917
- </span>
1918
- </span>
1919
- </button>
1920
- </div>
1921
1909
  </div>
1922
1910
  </div>
1923
1911
  </div>