@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
@@ -25,20 +25,16 @@ wrapperTag: div
25
25
  </button>
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
- <a
29
- class="pf-v5-c-masthead__brand"
30
- href="#"
31
- style="--pf-v5-c-brand--Height: 36px;"
32
- >
33
- <svg height="36px" viewBox="0 0 679 158" role="img">
34
- <title>Patternfly logo</title>
28
+ <a class="pf-v5-c-masthead__brand" href="#">
29
+ <svg height="40px" viewBox="0 0 679 158">
30
+ <title>PF-HorizontalLogo-Color</title>
35
31
  <defs>
36
32
  <linearGradient
37
33
  x1="68%"
38
34
  y1="2.25860997e-13%"
39
35
  x2="32%"
40
36
  y2="100%"
41
- id="linearGradient-1"
37
+ id="linearGradient-drawer-collapsed-example-masthead"
42
38
  >
43
39
  <stop stop-color="#2B9AF3" offset="0%" />
44
40
  <stop
@@ -48,13 +44,7 @@ wrapperTag: div
48
44
  />
49
45
  </linearGradient>
50
46
  </defs>
51
- <g
52
- id="PF-HorizontalLogo-Color"
53
- stroke="none"
54
- stroke-width="1"
55
- fill="none"
56
- fill-rule="evenodd"
57
- >
47
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
58
48
  <g
59
49
  transform="translate(206.000000, 45.750000)"
60
50
  fill="var(--pf-t--global--text--color--regular)"
@@ -89,19 +79,18 @@ wrapperTag: div
89
79
  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"
90
80
  />
91
81
  </g>
92
- <g id="Logo" transform="translate(0.000000, 0.000000)">
82
+ <g transform="translate(0.000000, 0.000000)">
93
83
  <path
94
84
  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"
95
- id="Rectangle-Copy-17"
96
- fill="var(--pf-t--global--color--brand--200)"
85
+ fill="#0066CC"
97
86
  />
98
87
  <path
99
88
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
100
- fill="url(#linearGradient-1)"
89
+ fill="url(#linearGradient-drawer-collapsed-example-masthead)"
101
90
  />
102
91
  <path
103
92
  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"
104
- fill="url(#linearGradient-1)"
93
+ fill="url(#linearGradient-drawer-collapsed-example-masthead)"
105
94
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
106
95
  />
107
96
  </g>
@@ -116,8 +105,38 @@ wrapperTag: div
116
105
  >
117
106
  <div class="pf-v5-c-toolbar__content">
118
107
  <div class="pf-v5-c-toolbar__content-section">
108
+ <div class="pf-v5-c-toolbar__item">
109
+ <button
110
+ class="pf-v5-c-menu-toggle"
111
+ type="button"
112
+ aria-expanded="false"
113
+ >
114
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
115
+ <span class="pf-v5-c-menu-toggle__controls">
116
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
117
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
118
+ </span>
119
+ </span>
120
+ </button>
121
+ </div>
122
+
123
+ <div class="pf-v5-c-toolbar__item">
124
+ <button
125
+ class="pf-v5-c-menu-toggle"
126
+ type="button"
127
+ aria-expanded="false"
128
+ >
129
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
130
+ <span class="pf-v5-c-menu-toggle__controls">
131
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
132
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
133
+ </span>
134
+ </span>
135
+ </button>
136
+ </div>
137
+
119
138
  <div
120
- 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"
139
+ 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"
121
140
  >
122
141
  <div
123
142
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -164,27 +183,6 @@ wrapperTag: div
164
183
  </button>
165
184
  </div>
166
185
  </div>
167
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
168
- <button
169
- class="pf-v5-c-menu-toggle pf-m-full-height"
170
- type="button"
171
- aria-expanded="false"
172
- >
173
- <span class="pf-v5-c-menu-toggle__icon">
174
- <img
175
- class="pf-v5-c-avatar"
176
- alt="Avatar image"
177
- src="/assets/images/img_avatar-light.svg"
178
- />
179
- </span>
180
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
181
- <span class="pf-v5-c-menu-toggle__controls">
182
- <span class="pf-v5-c-menu-toggle__toggle-icon">
183
- <i class="fas fa-angle-down" aria-hidden="true"></i>
184
- </span>
185
- </span>
186
- </button>
187
- </div>
188
186
  </div>
189
187
  </div>
190
188
  </div>
@@ -545,20 +543,16 @@ wrapperTag: div
545
543
  </button>
546
544
  </span>
547
545
  <div class="pf-v5-c-masthead__main">
548
- <a
549
- class="pf-v5-c-masthead__brand"
550
- href="#"
551
- style="--pf-v5-c-brand--Height: 36px;"
552
- >
553
- <svg height="36px" viewBox="0 0 679 158" role="img">
554
- <title>Patternfly logo</title>
546
+ <a class="pf-v5-c-masthead__brand" href="#">
547
+ <svg height="40px" viewBox="0 0 679 158">
548
+ <title>PF-HorizontalLogo-Color</title>
555
549
  <defs>
556
550
  <linearGradient
557
551
  x1="68%"
558
552
  y1="2.25860997e-13%"
559
553
  x2="32%"
560
554
  y2="100%"
561
- id="linearGradient-1"
555
+ id="linearGradient-drawer-expanded-example-masthead"
562
556
  >
563
557
  <stop stop-color="#2B9AF3" offset="0%" />
564
558
  <stop
@@ -568,13 +562,7 @@ wrapperTag: div
568
562
  />
569
563
  </linearGradient>
570
564
  </defs>
571
- <g
572
- id="PF-HorizontalLogo-Color"
573
- stroke="none"
574
- stroke-width="1"
575
- fill="none"
576
- fill-rule="evenodd"
577
- >
565
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
578
566
  <g
579
567
  transform="translate(206.000000, 45.750000)"
580
568
  fill="var(--pf-t--global--text--color--regular)"
@@ -609,19 +597,18 @@ wrapperTag: div
609
597
  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"
610
598
  />
611
599
  </g>
612
- <g id="Logo" transform="translate(0.000000, 0.000000)">
600
+ <g transform="translate(0.000000, 0.000000)">
613
601
  <path
614
602
  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"
615
- id="Rectangle-Copy-17"
616
- fill="var(--pf-t--global--color--brand--200)"
603
+ fill="#0066CC"
617
604
  />
618
605
  <path
619
606
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
620
- fill="url(#linearGradient-1)"
607
+ fill="url(#linearGradient-drawer-expanded-example-masthead)"
621
608
  />
622
609
  <path
623
610
  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"
624
- fill="url(#linearGradient-1)"
611
+ fill="url(#linearGradient-drawer-expanded-example-masthead)"
625
612
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
626
613
  />
627
614
  </g>
@@ -636,8 +623,38 @@ wrapperTag: div
636
623
  >
637
624
  <div class="pf-v5-c-toolbar__content">
638
625
  <div class="pf-v5-c-toolbar__content-section">
626
+ <div class="pf-v5-c-toolbar__item">
627
+ <button
628
+ class="pf-v5-c-menu-toggle"
629
+ type="button"
630
+ aria-expanded="false"
631
+ >
632
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
633
+ <span class="pf-v5-c-menu-toggle__controls">
634
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
635
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
636
+ </span>
637
+ </span>
638
+ </button>
639
+ </div>
640
+
641
+ <div class="pf-v5-c-toolbar__item">
642
+ <button
643
+ class="pf-v5-c-menu-toggle"
644
+ type="button"
645
+ aria-expanded="false"
646
+ >
647
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
648
+ <span class="pf-v5-c-menu-toggle__controls">
649
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
650
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
651
+ </span>
652
+ </span>
653
+ </button>
654
+ </div>
655
+
639
656
  <div
640
- 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"
657
+ 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"
641
658
  >
642
659
  <div
643
660
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -684,27 +701,6 @@ wrapperTag: div
684
701
  </button>
685
702
  </div>
686
703
  </div>
687
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
688
- <button
689
- class="pf-v5-c-menu-toggle pf-m-full-height"
690
- type="button"
691
- aria-expanded="false"
692
- >
693
- <span class="pf-v5-c-menu-toggle__icon">
694
- <img
695
- class="pf-v5-c-avatar"
696
- alt="Avatar image"
697
- src="/assets/images/img_avatar-light.svg"
698
- />
699
- </span>
700
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
701
- <span class="pf-v5-c-menu-toggle__controls">
702
- <span class="pf-v5-c-menu-toggle__toggle-icon">
703
- <i class="fas fa-angle-down" aria-hidden="true"></i>
704
- </span>
705
- </span>
706
- </button>
707
- </div>
708
704
  </div>
709
705
  </div>
710
706
  </div>
@@ -876,20 +872,16 @@ wrapperTag: div
876
872
  </button>
877
873
  </span>
878
874
  <div class="pf-v5-c-masthead__main">
879
- <a
880
- class="pf-v5-c-masthead__brand"
881
- href="#"
882
- style="--pf-v5-c-brand--Height: 36px;"
883
- >
884
- <svg height="36px" viewBox="0 0 679 158" role="img">
885
- <title>Patternfly logo</title>
875
+ <a class="pf-v5-c-masthead__brand" href="#">
876
+ <svg height="40px" viewBox="0 0 679 158">
877
+ <title>PF-HorizontalLogo-Color</title>
886
878
  <defs>
887
879
  <linearGradient
888
880
  x1="68%"
889
881
  y1="2.25860997e-13%"
890
882
  x2="32%"
891
883
  y2="100%"
892
- id="linearGradient-1"
884
+ id="linearGradient-drawer-expanded-bottom-example-masthead"
893
885
  >
894
886
  <stop stop-color="#2B9AF3" offset="0%" />
895
887
  <stop
@@ -899,13 +891,7 @@ wrapperTag: div
899
891
  />
900
892
  </linearGradient>
901
893
  </defs>
902
- <g
903
- id="PF-HorizontalLogo-Color"
904
- stroke="none"
905
- stroke-width="1"
906
- fill="none"
907
- fill-rule="evenodd"
908
- >
894
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
909
895
  <g
910
896
  transform="translate(206.000000, 45.750000)"
911
897
  fill="var(--pf-t--global--text--color--regular)"
@@ -940,19 +926,18 @@ wrapperTag: div
940
926
  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"
941
927
  />
942
928
  </g>
943
- <g id="Logo" transform="translate(0.000000, 0.000000)">
929
+ <g transform="translate(0.000000, 0.000000)">
944
930
  <path
945
931
  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"
946
- id="Rectangle-Copy-17"
947
- fill="var(--pf-t--global--color--brand--200)"
932
+ fill="#0066CC"
948
933
  />
949
934
  <path
950
935
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
951
- fill="url(#linearGradient-1)"
936
+ fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
952
937
  />
953
938
  <path
954
939
  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"
955
- fill="url(#linearGradient-1)"
940
+ fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
956
941
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
957
942
  />
958
943
  </g>
@@ -967,8 +952,38 @@ wrapperTag: div
967
952
  >
968
953
  <div class="pf-v5-c-toolbar__content">
969
954
  <div class="pf-v5-c-toolbar__content-section">
955
+ <div class="pf-v5-c-toolbar__item">
956
+ <button
957
+ class="pf-v5-c-menu-toggle"
958
+ type="button"
959
+ aria-expanded="false"
960
+ >
961
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
962
+ <span class="pf-v5-c-menu-toggle__controls">
963
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
964
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
965
+ </span>
966
+ </span>
967
+ </button>
968
+ </div>
969
+
970
+ <div class="pf-v5-c-toolbar__item">
971
+ <button
972
+ class="pf-v5-c-menu-toggle"
973
+ type="button"
974
+ aria-expanded="false"
975
+ >
976
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
977
+ <span class="pf-v5-c-menu-toggle__controls">
978
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
979
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
980
+ </span>
981
+ </span>
982
+ </button>
983
+ </div>
984
+
970
985
  <div
971
- 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"
986
+ 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"
972
987
  >
973
988
  <div
974
989
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1015,27 +1030,6 @@ wrapperTag: div
1015
1030
  </button>
1016
1031
  </div>
1017
1032
  </div>
1018
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1019
- <button
1020
- class="pf-v5-c-menu-toggle pf-m-full-height"
1021
- type="button"
1022
- aria-expanded="false"
1023
- >
1024
- <span class="pf-v5-c-menu-toggle__icon">
1025
- <img
1026
- class="pf-v5-c-avatar"
1027
- alt="Avatar image"
1028
- src="/assets/images/img_avatar-light.svg"
1029
- />
1030
- </span>
1031
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1032
- <span class="pf-v5-c-menu-toggle__controls">
1033
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1034
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1035
- </span>
1036
- </span>
1037
- </button>
1038
- </div>
1039
1033
  </div>
1040
1034
  </div>
1041
1035
  </div>
@@ -1207,20 +1201,16 @@ wrapperTag: div
1207
1201
  </button>
1208
1202
  </span>
1209
1203
  <div class="pf-v5-c-masthead__main">
1210
- <a
1211
- class="pf-v5-c-masthead__brand"
1212
- href="#"
1213
- style="--pf-v5-c-brand--Height: 36px;"
1214
- >
1215
- <svg height="36px" viewBox="0 0 679 158" role="img">
1216
- <title>Patternfly logo</title>
1204
+ <a class="pf-v5-c-masthead__brand" href="#">
1205
+ <svg height="40px" viewBox="0 0 679 158">
1206
+ <title>PF-HorizontalLogo-Color</title>
1217
1207
  <defs>
1218
1208
  <linearGradient
1219
1209
  x1="68%"
1220
1210
  y1="2.25860997e-13%"
1221
1211
  x2="32%"
1222
1212
  y2="100%"
1223
- id="linearGradient-1"
1213
+ id="linearGradient-drawer-jump-links-masthead"
1224
1214
  >
1225
1215
  <stop stop-color="#2B9AF3" offset="0%" />
1226
1216
  <stop
@@ -1230,13 +1220,7 @@ wrapperTag: div
1230
1220
  />
1231
1221
  </linearGradient>
1232
1222
  </defs>
1233
- <g
1234
- id="PF-HorizontalLogo-Color"
1235
- stroke="none"
1236
- stroke-width="1"
1237
- fill="none"
1238
- fill-rule="evenodd"
1239
- >
1223
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1240
1224
  <g
1241
1225
  transform="translate(206.000000, 45.750000)"
1242
1226
  fill="var(--pf-t--global--text--color--regular)"
@@ -1271,19 +1255,18 @@ wrapperTag: div
1271
1255
  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"
1272
1256
  />
1273
1257
  </g>
1274
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1258
+ <g transform="translate(0.000000, 0.000000)">
1275
1259
  <path
1276
1260
  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"
1277
- id="Rectangle-Copy-17"
1278
- fill="var(--pf-t--global--color--brand--200)"
1261
+ fill="#0066CC"
1279
1262
  />
1280
1263
  <path
1281
1264
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1282
- fill="url(#linearGradient-1)"
1265
+ fill="url(#linearGradient-drawer-jump-links-masthead)"
1283
1266
  />
1284
1267
  <path
1285
1268
  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"
1286
- fill="url(#linearGradient-1)"
1269
+ fill="url(#linearGradient-drawer-jump-links-masthead)"
1287
1270
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1288
1271
  />
1289
1272
  </g>
@@ -1298,8 +1281,38 @@ wrapperTag: div
1298
1281
  >
1299
1282
  <div class="pf-v5-c-toolbar__content">
1300
1283
  <div class="pf-v5-c-toolbar__content-section">
1284
+ <div class="pf-v5-c-toolbar__item">
1285
+ <button
1286
+ class="pf-v5-c-menu-toggle"
1287
+ type="button"
1288
+ aria-expanded="false"
1289
+ >
1290
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1291
+ <span class="pf-v5-c-menu-toggle__controls">
1292
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1293
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1294
+ </span>
1295
+ </span>
1296
+ </button>
1297
+ </div>
1298
+
1299
+ <div class="pf-v5-c-toolbar__item">
1300
+ <button
1301
+ class="pf-v5-c-menu-toggle"
1302
+ type="button"
1303
+ aria-expanded="false"
1304
+ >
1305
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1306
+ <span class="pf-v5-c-menu-toggle__controls">
1307
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1308
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1309
+ </span>
1310
+ </span>
1311
+ </button>
1312
+ </div>
1313
+
1301
1314
  <div
1302
- 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"
1315
+ 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"
1303
1316
  >
1304
1317
  <div
1305
1318
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1346,27 +1359,6 @@ wrapperTag: div
1346
1359
  </button>
1347
1360
  </div>
1348
1361
  </div>
1349
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1350
- <button
1351
- class="pf-v5-c-menu-toggle pf-m-full-height"
1352
- type="button"
1353
- aria-expanded="false"
1354
- >
1355
- <span class="pf-v5-c-menu-toggle__icon">
1356
- <img
1357
- class="pf-v5-c-avatar"
1358
- alt="Avatar image"
1359
- src="/assets/images/img_avatar-light.svg"
1360
- />
1361
- </span>
1362
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1363
- <span class="pf-v5-c-menu-toggle__controls">
1364
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1365
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1366
- </span>
1367
- </span>
1368
- </button>
1369
- </div>
1370
1362
  </div>
1371
1363
  </div>
1372
1364
  </div>
@@ -1556,20 +1548,16 @@ wrapperTag: div
1556
1548
  </button>
1557
1549
  </span>
1558
1550
  <div class="pf-v5-c-masthead__main">
1559
- <a
1560
- class="pf-v5-c-masthead__brand"
1561
- href="#"
1562
- style="--pf-v5-c-brand--Height: 36px;"
1563
- >
1564
- <svg height="36px" viewBox="0 0 679 158" role="img">
1565
- <title>Patternfly logo</title>
1551
+ <a class="pf-v5-c-masthead__brand" href="#">
1552
+ <svg height="40px" viewBox="0 0 679 158">
1553
+ <title>PF-HorizontalLogo-Color</title>
1566
1554
  <defs>
1567
1555
  <linearGradient
1568
1556
  x1="68%"
1569
1557
  y1="2.25860997e-13%"
1570
1558
  x2="32%"
1571
1559
  y2="100%"
1572
- id="linearGradient-1"
1560
+ id="linearGradient-drawer-expanded-jump-links-masthead"
1573
1561
  >
1574
1562
  <stop stop-color="#2B9AF3" offset="0%" />
1575
1563
  <stop
@@ -1579,13 +1567,7 @@ wrapperTag: div
1579
1567
  />
1580
1568
  </linearGradient>
1581
1569
  </defs>
1582
- <g
1583
- id="PF-HorizontalLogo-Color"
1584
- stroke="none"
1585
- stroke-width="1"
1586
- fill="none"
1587
- fill-rule="evenodd"
1588
- >
1570
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1589
1571
  <g
1590
1572
  transform="translate(206.000000, 45.750000)"
1591
1573
  fill="var(--pf-t--global--text--color--regular)"
@@ -1620,19 +1602,18 @@ wrapperTag: div
1620
1602
  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"
1621
1603
  />
1622
1604
  </g>
1623
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1605
+ <g transform="translate(0.000000, 0.000000)">
1624
1606
  <path
1625
1607
  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"
1626
- id="Rectangle-Copy-17"
1627
- fill="var(--pf-t--global--color--brand--200)"
1608
+ fill="#0066CC"
1628
1609
  />
1629
1610
  <path
1630
1611
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1631
- fill="url(#linearGradient-1)"
1612
+ fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
1632
1613
  />
1633
1614
  <path
1634
1615
  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"
1635
- fill="url(#linearGradient-1)"
1616
+ fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
1636
1617
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1637
1618
  />
1638
1619
  </g>
@@ -1647,8 +1628,38 @@ wrapperTag: div
1647
1628
  >
1648
1629
  <div class="pf-v5-c-toolbar__content">
1649
1630
  <div class="pf-v5-c-toolbar__content-section">
1631
+ <div class="pf-v5-c-toolbar__item">
1632
+ <button
1633
+ class="pf-v5-c-menu-toggle"
1634
+ type="button"
1635
+ aria-expanded="false"
1636
+ >
1637
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1638
+ <span class="pf-v5-c-menu-toggle__controls">
1639
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1640
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1641
+ </span>
1642
+ </span>
1643
+ </button>
1644
+ </div>
1645
+
1646
+ <div class="pf-v5-c-toolbar__item">
1647
+ <button
1648
+ class="pf-v5-c-menu-toggle"
1649
+ type="button"
1650
+ aria-expanded="false"
1651
+ >
1652
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1653
+ <span class="pf-v5-c-menu-toggle__controls">
1654
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1655
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1656
+ </span>
1657
+ </span>
1658
+ </button>
1659
+ </div>
1660
+
1650
1661
  <div
1651
- 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"
1662
+ 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"
1652
1663
  >
1653
1664
  <div
1654
1665
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1695,27 +1706,6 @@ wrapperTag: div
1695
1706
  </button>
1696
1707
  </div>
1697
1708
  </div>
1698
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1699
- <button
1700
- class="pf-v5-c-menu-toggle pf-m-full-height"
1701
- type="button"
1702
- aria-expanded="false"
1703
- >
1704
- <span class="pf-v5-c-menu-toggle__icon">
1705
- <img
1706
- class="pf-v5-c-avatar"
1707
- alt="Avatar image"
1708
- src="/assets/images/img_avatar-light.svg"
1709
- />
1710
- </span>
1711
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1712
- <span class="pf-v5-c-menu-toggle__controls">
1713
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1714
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1715
- </span>
1716
- </span>
1717
- </button>
1718
- </div>
1719
1709
  </div>
1720
1710
  </div>
1721
1711
  </div>