@patternfly/patternfly 6.0.0-alpha.83 → 6.0.0-alpha.85

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 (42) hide show
  1. package/components/Accordion/accordion.css +1 -1
  2. package/components/Accordion/accordion.scss +1 -1
  3. package/components/Breadcrumb/breadcrumb.css +9 -1
  4. package/components/Breadcrumb/breadcrumb.scss +10 -3
  5. package/components/Button/button.css +22 -22
  6. package/components/Button/button.scss +22 -22
  7. package/components/DataList/data-list.css +1 -1
  8. package/components/DataList/data-list.scss +1 -1
  9. package/components/Form/form.css +3 -7
  10. package/components/Form/form.scss +3 -7
  11. package/components/FormControl/form-control.css +3 -3
  12. package/components/FormControl/form-control.scss +3 -3
  13. package/components/Login/login.css +2 -24
  14. package/components/Login/login.scss +2 -29
  15. package/components/Menu/menu.css +388 -419
  16. package/components/Menu/menu.scss +369 -529
  17. package/components/NotificationBadge/notification-badge.css +4 -4
  18. package/components/NotificationBadge/notification-badge.scss +4 -4
  19. package/components/Pagination/pagination.css +1 -1
  20. package/components/Pagination/pagination.scss +1 -1
  21. package/components/Table/table-grid.css +3 -3
  22. package/components/Table/table-grid.scss +3 -3
  23. package/components/Table/table-tree-view.css +5 -5
  24. package/components/Table/table-tree-view.scss +1 -1
  25. package/components/Table/table.css +8 -8
  26. package/components/Table/table.scss +8 -8
  27. package/components/Tabs/tabs.css +1 -1
  28. package/components/Tabs/tabs.scss +1 -1
  29. package/docs/components/LogViewer/examples/LogViewer.md +110 -110
  30. package/docs/components/Login/examples/Login.md +150 -100
  31. package/docs/components/Menu/examples/Menu.css +7 -11
  32. package/docs/components/Menu/examples/Menu.md +637 -944
  33. package/docs/components/Nav/examples/Navigation.md +113 -140
  34. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  35. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +10 -10
  36. package/docs/demos/Toolbar/examples/Toolbar.md +10 -10
  37. package/package.json +1 -1
  38. package/patternfly-no-globals.css +570 -503
  39. package/patternfly-theme-dark-unversioned.css +570 -503
  40. package/patternfly.css +570 -503
  41. package/patternfly.min.css +1 -1
  42. package/patternfly.min.css.map +1 -1
@@ -100,89 +100,99 @@ wrapperTag: div
100
100
  <footer class="pf-v5-c-login__main-footer">
101
101
  <ul class="pf-v5-c-login__main-footer-links" role="list">
102
102
  <li class="pf-v5-c-login__main-footer-links-item">
103
- <a
104
- href="#"
105
- class="pf-v5-c-login__main-footer-links-item-link"
103
+ <button
104
+ class="pf-v5-c-button pf-m-plain"
105
+ type="button"
106
106
  aria-label="Log in with Google"
107
107
  >
108
108
  <svg
109
109
  aria-hidden="true"
110
110
  xmlns="http://www.w3.org/2000/svg"
111
+ fill="currentColor"
111
112
  viewBox="0 0 488 512"
113
+ class="pf-v5-svg"
112
114
  >
113
115
  <path
114
116
  d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
115
117
  />
116
118
  </svg>
117
- </a>
119
+ </button>
118
120
  </li>
119
121
  <li class="pf-v5-c-login__main-footer-links-item">
120
- <a
121
- href="#"
122
- class="pf-v5-c-login__main-footer-links-item-link"
122
+ <button
123
+ class="pf-v5-c-button pf-m-plain"
124
+ type="button"
123
125
  aria-label="Log in with Github"
124
126
  >
125
127
  <svg
126
128
  aria-hidden="true"
127
129
  xmlns="http://www.w3.org/2000/svg"
130
+ fill="currentColor"
128
131
  viewBox="0 0 496 512"
132
+ class="pf-v5-svg"
129
133
  >
130
134
  <path
131
135
  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
132
136
  />
133
137
  </svg>
134
- </a>
138
+ </button>
135
139
  </li>
136
140
  <li class="pf-v5-c-login__main-footer-links-item">
137
- <a
138
- href="#"
139
- class="pf-v5-c-login__main-footer-links-item-link"
141
+ <button
142
+ class="pf-v5-c-button pf-m-plain"
143
+ type="button"
140
144
  aria-label="Log in with Dropbox"
141
145
  >
142
146
  <svg
143
147
  aria-hidden="true"
144
148
  xmlns="http://www.w3.org/2000/svg"
149
+ fill="currentColor"
145
150
  viewBox="0 0 528 512"
151
+ class="pf-v5-svg"
146
152
  >
147
153
  <path
148
154
  d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
149
155
  />
150
156
  </svg>
151
- </a>
157
+ </button>
152
158
  </li>
153
159
  <li class="pf-v5-c-login__main-footer-links-item">
154
- <a
155
- href="#"
156
- class="pf-v5-c-login__main-footer-links-item-link"
160
+ <button
161
+ class="pf-v5-c-button pf-m-plain"
162
+ type="button"
157
163
  aria-label="Log in with Facebook"
158
164
  >
159
165
  <svg
160
166
  aria-hidden="true"
161
167
  xmlns="http://www.w3.org/2000/svg"
168
+ fill="currentColor"
162
169
  viewBox="0 0 448 512"
170
+ class="pf-v5-svg"
163
171
  >
164
172
  <path
165
173
  d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
166
174
  />
167
175
  </svg>
168
- </a>
176
+ </button>
169
177
  </li>
170
178
  <li class="pf-v5-c-login__main-footer-links-item">
171
- <a
172
- href="#"
173
- class="pf-v5-c-login__main-footer-links-item-link"
179
+ <button
180
+ class="pf-v5-c-button pf-m-plain"
181
+ type="button"
174
182
  aria-label="Log in with Gitlab"
175
183
  >
176
184
  <svg
177
185
  aria-hidden="true"
178
186
  xmlns="http://www.w3.org/2000/svg"
187
+ fill="currentColor"
179
188
  viewBox="0 0 512 512"
189
+ class="pf-v5-svg"
180
190
  >
181
191
  <path
182
192
  d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"
183
193
  />
184
194
  </svg>
185
- </a>
195
+ </button>
186
196
  </li>
187
197
  </ul>
188
198
  <div class="pf-v5-c-login__main-footer-band">
@@ -327,89 +337,99 @@ wrapperTag: div
327
337
  <footer class="pf-v5-c-login__main-footer">
328
338
  <ul class="pf-v5-c-login__main-footer-links" role="list">
329
339
  <li class="pf-v5-c-login__main-footer-links-item">
330
- <a
331
- href="#"
332
- class="pf-v5-c-login__main-footer-links-item-link"
340
+ <button
341
+ class="pf-v5-c-button pf-m-plain"
342
+ type="button"
333
343
  aria-label="Log in with Google"
334
344
  >
335
345
  <svg
336
346
  aria-hidden="true"
337
347
  xmlns="http://www.w3.org/2000/svg"
348
+ fill="currentColor"
338
349
  viewBox="0 0 488 512"
350
+ class="pf-v5-svg"
339
351
  >
340
352
  <path
341
353
  d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
342
354
  />
343
355
  </svg>
344
- </a>
356
+ </button>
345
357
  </li>
346
358
  <li class="pf-v5-c-login__main-footer-links-item">
347
- <a
348
- href="#"
349
- class="pf-v5-c-login__main-footer-links-item-link"
359
+ <button
360
+ class="pf-v5-c-button pf-m-plain"
361
+ type="button"
350
362
  aria-label="Log in with Github"
351
363
  >
352
364
  <svg
353
365
  aria-hidden="true"
354
366
  xmlns="http://www.w3.org/2000/svg"
367
+ fill="currentColor"
355
368
  viewBox="0 0 496 512"
369
+ class="pf-v5-svg"
356
370
  >
357
371
  <path
358
372
  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
359
373
  />
360
374
  </svg>
361
- </a>
375
+ </button>
362
376
  </li>
363
377
  <li class="pf-v5-c-login__main-footer-links-item">
364
- <a
365
- href="#"
366
- class="pf-v5-c-login__main-footer-links-item-link"
378
+ <button
379
+ class="pf-v5-c-button pf-m-plain"
380
+ type="button"
367
381
  aria-label="Log in with Dropbox"
368
382
  >
369
383
  <svg
370
384
  aria-hidden="true"
371
385
  xmlns="http://www.w3.org/2000/svg"
386
+ fill="currentColor"
372
387
  viewBox="0 0 528 512"
388
+ class="pf-v5-svg"
373
389
  >
374
390
  <path
375
391
  d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
376
392
  />
377
393
  </svg>
378
- </a>
394
+ </button>
379
395
  </li>
380
396
  <li class="pf-v5-c-login__main-footer-links-item">
381
- <a
382
- href="#"
383
- class="pf-v5-c-login__main-footer-links-item-link"
397
+ <button
398
+ class="pf-v5-c-button pf-m-plain"
399
+ type="button"
384
400
  aria-label="Log in with Facebook"
385
401
  >
386
402
  <svg
387
403
  aria-hidden="true"
388
404
  xmlns="http://www.w3.org/2000/svg"
405
+ fill="currentColor"
389
406
  viewBox="0 0 448 512"
407
+ class="pf-v5-svg"
390
408
  >
391
409
  <path
392
410
  d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
393
411
  />
394
412
  </svg>
395
- </a>
413
+ </button>
396
414
  </li>
397
415
  <li class="pf-v5-c-login__main-footer-links-item">
398
- <a
399
- href="#"
400
- class="pf-v5-c-login__main-footer-links-item-link"
416
+ <button
417
+ class="pf-v5-c-button pf-m-plain"
418
+ type="button"
401
419
  aria-label="Log in with Gitlab"
402
420
  >
403
421
  <svg
404
422
  aria-hidden="true"
405
423
  xmlns="http://www.w3.org/2000/svg"
424
+ fill="currentColor"
406
425
  viewBox="0 0 512 512"
426
+ class="pf-v5-svg"
407
427
  >
408
428
  <path
409
429
  d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"
410
430
  />
411
431
  </svg>
412
- </a>
432
+ </button>
413
433
  </li>
414
434
  </ul>
415
435
  <div class="pf-v5-c-login__main-footer-band">
@@ -547,89 +567,99 @@ wrapperTag: div
547
567
  <footer class="pf-v5-c-login__main-footer">
548
568
  <ul class="pf-v5-c-login__main-footer-links" role="list">
549
569
  <li class="pf-v5-c-login__main-footer-links-item">
550
- <a
551
- href="#"
552
- class="pf-v5-c-login__main-footer-links-item-link"
570
+ <button
571
+ class="pf-v5-c-button pf-m-plain"
572
+ type="button"
553
573
  aria-label="Log in with Google"
554
574
  >
555
575
  <svg
556
576
  aria-hidden="true"
557
577
  xmlns="http://www.w3.org/2000/svg"
578
+ fill="currentColor"
558
579
  viewBox="0 0 488 512"
580
+ class="pf-v5-svg"
559
581
  >
560
582
  <path
561
583
  d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
562
584
  />
563
585
  </svg>
564
- </a>
586
+ </button>
565
587
  </li>
566
588
  <li class="pf-v5-c-login__main-footer-links-item">
567
- <a
568
- href="#"
569
- class="pf-v5-c-login__main-footer-links-item-link"
589
+ <button
590
+ class="pf-v5-c-button pf-m-plain"
591
+ type="button"
570
592
  aria-label="Log in with Github"
571
593
  >
572
594
  <svg
573
595
  aria-hidden="true"
574
596
  xmlns="http://www.w3.org/2000/svg"
597
+ fill="currentColor"
575
598
  viewBox="0 0 496 512"
599
+ class="pf-v5-svg"
576
600
  >
577
601
  <path
578
602
  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
579
603
  />
580
604
  </svg>
581
- </a>
605
+ </button>
582
606
  </li>
583
607
  <li class="pf-v5-c-login__main-footer-links-item">
584
- <a
585
- href="#"
586
- class="pf-v5-c-login__main-footer-links-item-link"
608
+ <button
609
+ class="pf-v5-c-button pf-m-plain"
610
+ type="button"
587
611
  aria-label="Log in with Dropbox"
588
612
  >
589
613
  <svg
590
614
  aria-hidden="true"
591
615
  xmlns="http://www.w3.org/2000/svg"
616
+ fill="currentColor"
592
617
  viewBox="0 0 528 512"
618
+ class="pf-v5-svg"
593
619
  >
594
620
  <path
595
621
  d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
596
622
  />
597
623
  </svg>
598
- </a>
624
+ </button>
599
625
  </li>
600
626
  <li class="pf-v5-c-login__main-footer-links-item">
601
- <a
602
- href="#"
603
- class="pf-v5-c-login__main-footer-links-item-link"
627
+ <button
628
+ class="pf-v5-c-button pf-m-plain"
629
+ type="button"
604
630
  aria-label="Log in with Facebook"
605
631
  >
606
632
  <svg
607
633
  aria-hidden="true"
608
634
  xmlns="http://www.w3.org/2000/svg"
635
+ fill="currentColor"
609
636
  viewBox="0 0 448 512"
637
+ class="pf-v5-svg"
610
638
  >
611
639
  <path
612
640
  d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
613
641
  />
614
642
  </svg>
615
- </a>
643
+ </button>
616
644
  </li>
617
645
  <li class="pf-v5-c-login__main-footer-links-item">
618
- <a
619
- href="#"
620
- class="pf-v5-c-login__main-footer-links-item-link"
646
+ <button
647
+ class="pf-v5-c-button pf-m-plain"
648
+ type="button"
621
649
  aria-label="Log in with Gitlab"
622
650
  >
623
651
  <svg
624
652
  aria-hidden="true"
625
653
  xmlns="http://www.w3.org/2000/svg"
654
+ fill="currentColor"
626
655
  viewBox="0 0 512 512"
656
+ class="pf-v5-svg"
627
657
  >
628
658
  <path
629
659
  d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"
630
660
  />
631
661
  </svg>
632
- </a>
662
+ </button>
633
663
  </li>
634
664
  </ul>
635
665
  <div class="pf-v5-c-login__main-footer-band">
@@ -774,89 +804,99 @@ wrapperTag: div
774
804
  <footer class="pf-v5-c-login__main-footer">
775
805
  <ul class="pf-v5-c-login__main-footer-links" role="list">
776
806
  <li class="pf-v5-c-login__main-footer-links-item">
777
- <a
778
- href="#"
779
- class="pf-v5-c-login__main-footer-links-item-link"
807
+ <button
808
+ class="pf-v5-c-button pf-m-plain"
809
+ type="button"
780
810
  aria-label="Log in with Google"
781
811
  >
782
812
  <svg
783
813
  aria-hidden="true"
784
814
  xmlns="http://www.w3.org/2000/svg"
815
+ fill="currentColor"
785
816
  viewBox="0 0 488 512"
817
+ class="pf-v5-svg"
786
818
  >
787
819
  <path
788
820
  d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
789
821
  />
790
822
  </svg>
791
- </a>
823
+ </button>
792
824
  </li>
793
825
  <li class="pf-v5-c-login__main-footer-links-item">
794
- <a
795
- href="#"
796
- class="pf-v5-c-login__main-footer-links-item-link"
826
+ <button
827
+ class="pf-v5-c-button pf-m-plain"
828
+ type="button"
797
829
  aria-label="Log in with Github"
798
830
  >
799
831
  <svg
800
832
  aria-hidden="true"
801
833
  xmlns="http://www.w3.org/2000/svg"
834
+ fill="currentColor"
802
835
  viewBox="0 0 496 512"
836
+ class="pf-v5-svg"
803
837
  >
804
838
  <path
805
839
  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
806
840
  />
807
841
  </svg>
808
- </a>
842
+ </button>
809
843
  </li>
810
844
  <li class="pf-v5-c-login__main-footer-links-item">
811
- <a
812
- href="#"
813
- class="pf-v5-c-login__main-footer-links-item-link"
845
+ <button
846
+ class="pf-v5-c-button pf-m-plain"
847
+ type="button"
814
848
  aria-label="Log in with Dropbox"
815
849
  >
816
850
  <svg
817
851
  aria-hidden="true"
818
852
  xmlns="http://www.w3.org/2000/svg"
853
+ fill="currentColor"
819
854
  viewBox="0 0 528 512"
855
+ class="pf-v5-svg"
820
856
  >
821
857
  <path
822
858
  d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
823
859
  />
824
860
  </svg>
825
- </a>
861
+ </button>
826
862
  </li>
827
863
  <li class="pf-v5-c-login__main-footer-links-item">
828
- <a
829
- href="#"
830
- class="pf-v5-c-login__main-footer-links-item-link"
864
+ <button
865
+ class="pf-v5-c-button pf-m-plain"
866
+ type="button"
831
867
  aria-label="Log in with Facebook"
832
868
  >
833
869
  <svg
834
870
  aria-hidden="true"
835
871
  xmlns="http://www.w3.org/2000/svg"
872
+ fill="currentColor"
836
873
  viewBox="0 0 448 512"
874
+ class="pf-v5-svg"
837
875
  >
838
876
  <path
839
877
  d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
840
878
  />
841
879
  </svg>
842
- </a>
880
+ </button>
843
881
  </li>
844
882
  <li class="pf-v5-c-login__main-footer-links-item">
845
- <a
846
- href="#"
847
- class="pf-v5-c-login__main-footer-links-item-link"
883
+ <button
884
+ class="pf-v5-c-button pf-m-plain"
885
+ type="button"
848
886
  aria-label="Log in with Gitlab"
849
887
  >
850
888
  <svg
851
889
  aria-hidden="true"
852
890
  xmlns="http://www.w3.org/2000/svg"
891
+ fill="currentColor"
853
892
  viewBox="0 0 512 512"
893
+ class="pf-v5-svg"
854
894
  >
855
895
  <path
856
896
  d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"
857
897
  />
858
898
  </svg>
859
- </a>
899
+ </button>
860
900
  </li>
861
901
  </ul>
862
902
  <div class="pf-v5-c-login__main-footer-band">
@@ -1029,89 +1069,99 @@ wrapperTag: div
1029
1069
  <footer class="pf-v5-c-login__main-footer">
1030
1070
  <ul class="pf-v5-c-login__main-footer-links" role="list">
1031
1071
  <li class="pf-v5-c-login__main-footer-links-item">
1032
- <a
1033
- href="#"
1034
- class="pf-v5-c-login__main-footer-links-item-link"
1072
+ <button
1073
+ class="pf-v5-c-button pf-m-plain"
1074
+ type="button"
1035
1075
  aria-label="Log in with Google"
1036
1076
  >
1037
1077
  <svg
1038
1078
  aria-hidden="true"
1039
1079
  xmlns="http://www.w3.org/2000/svg"
1080
+ fill="currentColor"
1040
1081
  viewBox="0 0 488 512"
1082
+ class="pf-v5-svg"
1041
1083
  >
1042
1084
  <path
1043
1085
  d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
1044
1086
  />
1045
1087
  </svg>
1046
- </a>
1088
+ </button>
1047
1089
  </li>
1048
1090
  <li class="pf-v5-c-login__main-footer-links-item">
1049
- <a
1050
- href="#"
1051
- class="pf-v5-c-login__main-footer-links-item-link"
1091
+ <button
1092
+ class="pf-v5-c-button pf-m-plain"
1093
+ type="button"
1052
1094
  aria-label="Log in with Github"
1053
1095
  >
1054
1096
  <svg
1055
1097
  aria-hidden="true"
1056
1098
  xmlns="http://www.w3.org/2000/svg"
1099
+ fill="currentColor"
1057
1100
  viewBox="0 0 496 512"
1101
+ class="pf-v5-svg"
1058
1102
  >
1059
1103
  <path
1060
1104
  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
1061
1105
  />
1062
1106
  </svg>
1063
- </a>
1107
+ </button>
1064
1108
  </li>
1065
1109
  <li class="pf-v5-c-login__main-footer-links-item">
1066
- <a
1067
- href="#"
1068
- class="pf-v5-c-login__main-footer-links-item-link"
1110
+ <button
1111
+ class="pf-v5-c-button pf-m-plain"
1112
+ type="button"
1069
1113
  aria-label="Log in with Dropbox"
1070
1114
  >
1071
1115
  <svg
1072
1116
  aria-hidden="true"
1073
1117
  xmlns="http://www.w3.org/2000/svg"
1118
+ fill="currentColor"
1074
1119
  viewBox="0 0 528 512"
1120
+ class="pf-v5-svg"
1075
1121
  >
1076
1122
  <path
1077
1123
  d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
1078
1124
  />
1079
1125
  </svg>
1080
- </a>
1126
+ </button>
1081
1127
  </li>
1082
1128
  <li class="pf-v5-c-login__main-footer-links-item">
1083
- <a
1084
- href="#"
1085
- class="pf-v5-c-login__main-footer-links-item-link"
1129
+ <button
1130
+ class="pf-v5-c-button pf-m-plain"
1131
+ type="button"
1086
1132
  aria-label="Log in with Facebook"
1087
1133
  >
1088
1134
  <svg
1089
1135
  aria-hidden="true"
1090
1136
  xmlns="http://www.w3.org/2000/svg"
1137
+ fill="currentColor"
1091
1138
  viewBox="0 0 448 512"
1139
+ class="pf-v5-svg"
1092
1140
  >
1093
1141
  <path
1094
1142
  d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
1095
1143
  />
1096
1144
  </svg>
1097
- </a>
1145
+ </button>
1098
1146
  </li>
1099
1147
  <li class="pf-v5-c-login__main-footer-links-item">
1100
- <a
1101
- href="#"
1102
- class="pf-v5-c-login__main-footer-links-item-link"
1148
+ <button
1149
+ class="pf-v5-c-button pf-m-plain"
1150
+ type="button"
1103
1151
  aria-label="Log in with Gitlab"
1104
1152
  >
1105
1153
  <svg
1106
1154
  aria-hidden="true"
1107
1155
  xmlns="http://www.w3.org/2000/svg"
1156
+ fill="currentColor"
1108
1157
  viewBox="0 0 512 512"
1158
+ class="pf-v5-svg"
1109
1159
  >
1110
1160
  <path
1111
1161
  d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"
1112
1162
  />
1113
1163
  </svg>
1114
- </a>
1164
+ </button>
1115
1165
  </li>
1116
1166
  </ul>
1117
1167
  <div class="pf-v5-c-login__main-footer-band">
@@ -1,19 +1,11 @@
1
1
  [id^="ws-core-c-menu-with-flyout"],
2
2
  [id^="ws-core-c-menu-standard-menu-flyout-child"] {
3
3
  display: flex;
4
- height: 400px;
5
- }
6
-
7
- #ws-core-c-menu-with-flyout-menu-top {
8
- align-items: flex-end;
9
- }
10
-
11
- #ws-core-c-menu-with-flyout-menu-left {
12
- justify-content: flex-end;
4
+ height: 360px;
13
5
  }
14
6
 
7
+ #ws-core-c-menu-with-flyout-menu-left,
15
8
  #ws-core-c-menu-with-flyout-menu-left-top {
16
- align-items: flex-end;
17
9
  justify-content: flex-end;
18
10
  }
19
11
 
@@ -23,4 +15,8 @@
23
15
 
24
16
  :is([id="ws-core-c-menu-drilldown-with-breadcrumbs---level-3"], [id="ws-core-c-menu-drilldown-with-breadcrumbs---level-4"]) .pf-v5-c-breadcrumb__dropdown .pf-v5-c-menu {
25
17
  position: absolute;
26
- }
18
+ }
19
+
20
+ .pf-v5-c-menu__breadcrumb .pf-v5-c-menu {
21
+ z-index: 1;
22
+ }