@patternfly/patternfly 4.177.0 → 4.179.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/RELEASE-NOTES.md +37 -0
- package/components/AboutModalBox/themes/dark/about-modal-box.css +0 -0
- package/components/AboutModalBox/themes/dark/about-modal-box.scss +9 -0
- package/components/Accordion/themes/dark/accordion.css +0 -0
- package/components/Accordion/themes/dark/accordion.scss +7 -0
- package/components/Alert/themes/dark/alert.css +0 -0
- package/components/Alert/themes/dark/alert.scss +15 -0
- package/components/AppLauncher/themes/dark/app-launcher.css +0 -0
- package/components/AppLauncher/themes/dark/app-launcher.scss +13 -0
- package/components/Badge/themes/dark/badge.css +0 -0
- package/components/Badge/themes/dark/badge.scss +6 -0
- package/components/Banner/themes/dark/banner.css +0 -0
- package/components/Banner/themes/dark/banner.scss +12 -0
- package/components/Breadcrumb/themes/dark/breadcrumb.css +0 -0
- package/components/Breadcrumb/themes/dark/breadcrumb.scss +5 -0
- package/components/Button/themes/dark/button.css +0 -0
- package/components/Button/themes/dark/button.scss +42 -0
- package/components/CalendarMonth/themes/dark/calendar-month.css +0 -0
- package/components/CalendarMonth/themes/dark/calendar-month.scss +29 -0
- package/components/Chip/themes/dark/chip.css +0 -0
- package/components/Chip/themes/dark/chip.scss +7 -0
- package/components/ClipboardCopy/themes/dark/clipboard-copy.css +0 -0
- package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +17 -0
- package/components/CodeEditor/themes/dark/code-editor.css +0 -0
- package/components/CodeEditor/themes/dark/code-editor.scss +7 -0
- package/components/ContextSelector/themes/dark/context-selector.css +0 -0
- package/components/ContextSelector/themes/dark/context-selector.scss +22 -0
- package/components/DataList/themes/dark/data-list.css +0 -0
- package/components/DataList/themes/dark/data-list.scss +8 -0
- package/components/DatePicker/themes/dark/date-picker.css +0 -0
- package/components/DatePicker/themes/dark/date-picker.scss +6 -0
- package/components/Drawer/themes/dark/drawer.css +0 -0
- package/components/Drawer/themes/dark/drawer.scss +11 -0
- package/components/Dropdown/themes/dark/dropdown.css +0 -0
- package/components/Dropdown/themes/dark/dropdown.scss +30 -0
- package/components/Form/themes/dark/form.css +0 -0
- package/components/Form/themes/dark/form.scss +5 -0
- package/components/FormControl/themes/dark/form-control.css +0 -0
- package/components/FormControl/themes/dark/form-control.scss +28 -0
- package/components/HelperText/themes/dark/helper-text.css +0 -0
- package/components/HelperText/themes/dark/helper-text.scss +5 -0
- package/components/Hint/themes/dark/hint.css +0 -0
- package/components/Hint/themes/dark/hint.scss +6 -0
- package/components/InputGroup/themes/dark/input-group.css +0 -0
- package/components/InputGroup/themes/dark/input-group.scss +26 -0
- package/components/Label/themes/dark/label.css +0 -0
- package/components/Label/themes/dark/label.scss +45 -0
- package/components/LogViewer/themes/dark/log-viewer.css +0 -0
- package/components/LogViewer/themes/dark/log-viewer.scss +5 -0
- package/components/Login/themes/dark/login.css +0 -0
- package/components/Login/themes/dark/login.scss +6 -0
- package/components/Masthead/themes/dark/masthead.css +0 -0
- package/components/Masthead/themes/dark/masthead.scss +11 -0
- package/components/Menu/themes/dark/menu.css +0 -0
- package/components/Menu/themes/dark/menu.scss +10 -0
- package/components/MenuToggle/themes/dark/menu-toggle.css +0 -0
- package/components/MenuToggle/themes/dark/menu-toggle.scss +21 -0
- package/components/ModalBox/modal-box.scss +0 -1
- package/components/ModalBox/themes/dark/modal-box.css +0 -0
- package/components/ModalBox/themes/dark/modal-box.scss +5 -0
- package/components/Nav/nav.css +3 -0
- package/components/Nav/nav.scss +4 -0
- package/components/Nav/themes/dark/nav.css +0 -0
- package/components/Nav/themes/dark/nav.scss +42 -0
- package/components/NotificationBadge/themes/dark/notification-badge.css +0 -0
- package/components/NotificationBadge/themes/dark/notification-badge.scss +5 -0
- package/components/NotificationDrawer/themes/dark/notification-drawer.css +0 -0
- package/components/NotificationDrawer/themes/dark/notification-drawer.scss +12 -0
- package/components/OptionsMenu/themes/dark/options-menu.css +0 -0
- package/components/OptionsMenu/themes/dark/options-menu.scss +21 -0
- package/components/Page/themes/dark/page.css +0 -0
- package/components/Page/themes/dark/page.scss +62 -0
- package/components/Pagination/themes/dark/pagination.css +0 -0
- package/components/Pagination/themes/dark/pagination.scss +5 -0
- package/components/Popover/popover.scss +0 -1
- package/components/Popover/themes/dark/popover.css +0 -0
- package/components/Popover/themes/dark/popover.scss +15 -0
- package/components/Progress/progress.scss +0 -1
- package/components/Progress/themes/dark/progress.css +0 -0
- package/components/Progress/themes/dark/progress.scss +7 -0
- package/components/SearchInput/themes/dark/search-input.css +0 -0
- package/components/SearchInput/themes/dark/search-input.scss +14 -0
- package/components/Select/themes/dark/select.css +0 -0
- package/components/Select/themes/dark/select.scss +21 -0
- package/components/SimpleList/themes/dark/simple-list.css +0 -0
- package/components/SimpleList/themes/dark/simple-list.scss +12 -0
- package/components/Skeleton/themes/dark/skeleton.css +0 -0
- package/components/Skeleton/themes/dark/skeleton.scss +8 -0
- package/components/Switch/themes/dark/switch.css +0 -0
- package/components/Switch/themes/dark/switch.scss +8 -0
- package/components/Table/table.css +2 -1
- package/components/Table/table.scss +8 -5
- package/components/Table/themes/dark/table.css +0 -0
- package/components/Table/themes/dark/table.scss +10 -0
- package/components/Tabs/themes/dark/tabs.css +0 -0
- package/components/Tabs/themes/dark/tabs.scss +7 -0
- package/components/Tile/themes/dark/tile.css +0 -0
- package/components/Tile/themes/dark/tile.scss +8 -0
- package/components/ToggleGroup/themes/dark/toggle-group.css +0 -0
- package/components/ToggleGroup/themes/dark/toggle-group.scss +9 -0
- package/components/Tooltip/themes/dark/tooltip.css +0 -0
- package/components/Tooltip/themes/dark/tooltip.scss +6 -0
- package/components/TreeView/themes/dark/tree-view.css +0 -0
- package/components/TreeView/themes/dark/tree-view.scss +6 -0
- package/components/Wizard/themes/dark/wizard.css +0 -0
- package/components/Wizard/themes/dark/wizard.scss +12 -0
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +2 -2
- package/docs/components/Nav/examples/Navigation.css +3 -1
- package/docs/components/Nav/examples/Navigation.md +79 -0
- package/docs/components/Table/examples/Table.md +12 -1
- package/docs/demos/Alert/examples/Alert.md +3 -3
- package/docs/demos/BackToTop/examples/BackToTop.md +201 -1
- package/docs/demos/Banner/examples/Banner.md +2 -2
- package/docs/demos/CardView/examples/CardView.md +1 -1
- package/docs/demos/ContextSelector/examples/ContextSelector.md +1034 -196
- package/docs/demos/DataList/examples/DataList.md +4 -4
- package/docs/demos/Drawer/examples/Drawer.md +3 -3
- package/docs/demos/JumpLinks/examples/JumpLinks.md +4 -4
- package/docs/demos/Masthead/examples/Masthead.md +1643 -1026
- package/docs/demos/Nav/examples/Nav.md +8 -8
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
- package/docs/demos/Page/examples/Page.md +959 -7
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
- package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
- package/docs/demos/Table/examples/Table.md +2962 -64
- package/docs/demos/Tabs/examples/Tabs.md +8 -8
- package/docs/demos/Toolbar/examples/Toolbar.md +1 -1
- package/docs/demos/Wizard/examples/Wizard.md +2 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +5 -1
- package/patternfly-theme-dark.css +628 -0
- package/patternfly-theme-dark.scss +9 -0
- package/patternfly.css +5 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -9,8 +9,9 @@ section: components
|
|
|
9
9
|
<div class="pf-c-page" id="context-selector-in-masthead">
|
|
10
10
|
<a
|
|
11
11
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
12
|
-
href="#context-selector-in-masthead
|
|
12
|
+
href="#main-content-context-selector-in-masthead"
|
|
13
13
|
>Skip to content</a>
|
|
14
|
+
|
|
14
15
|
<header class="pf-c-masthead" id="context-selector-in-masthead-masthead">
|
|
15
16
|
<span class="pf-c-masthead__toggle">
|
|
16
17
|
<button
|
|
@@ -21,7 +22,6 @@ section: components
|
|
|
21
22
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
22
23
|
</button>
|
|
23
24
|
</span>
|
|
24
|
-
|
|
25
25
|
<div class="pf-c-masthead__main">
|
|
26
26
|
<a class="pf-c-masthead__brand" href="#">
|
|
27
27
|
<picture
|
|
@@ -184,8 +184,7 @@ section: components
|
|
|
184
184
|
</div>
|
|
185
185
|
</div>
|
|
186
186
|
</header>
|
|
187
|
-
|
|
188
|
-
<aside class="pf-c-page__sidebar">
|
|
187
|
+
<div class="pf-c-page__sidebar">
|
|
189
188
|
<div class="pf-c-page__sidebar-body">
|
|
190
189
|
<nav
|
|
191
190
|
class="pf-c-nav"
|
|
@@ -193,15 +192,15 @@ section: components
|
|
|
193
192
|
aria-label="Global"
|
|
194
193
|
>
|
|
195
194
|
<ul class="pf-c-nav__list">
|
|
195
|
+
<li class="pf-c-nav__item">
|
|
196
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
197
|
+
</li>
|
|
196
198
|
<li class="pf-c-nav__item">
|
|
197
199
|
<a
|
|
198
200
|
href="#"
|
|
199
201
|
class="pf-c-nav__link pf-m-current"
|
|
200
202
|
aria-current="page"
|
|
201
|
-
>
|
|
202
|
-
</li>
|
|
203
|
-
<li class="pf-c-nav__item">
|
|
204
|
-
<a href="#" class="pf-c-nav__link">Policy</a>
|
|
203
|
+
>Policy</a>
|
|
205
204
|
</li>
|
|
206
205
|
<li class="pf-c-nav__item">
|
|
207
206
|
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
@@ -215,11 +214,11 @@ section: components
|
|
|
215
214
|
</ul>
|
|
216
215
|
</nav>
|
|
217
216
|
</div>
|
|
218
|
-
</
|
|
217
|
+
</div>
|
|
219
218
|
<main
|
|
220
219
|
class="pf-c-page__main"
|
|
221
220
|
tabindex="-1"
|
|
222
|
-
id="context-selector-in-masthead
|
|
221
|
+
id="main-content-context-selector-in-masthead"
|
|
223
222
|
>
|
|
224
223
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
225
224
|
<div class="pf-c-page__main-body">
|
|
@@ -257,7 +256,6 @@ section: components
|
|
|
257
256
|
</nav>
|
|
258
257
|
</div>
|
|
259
258
|
</section>
|
|
260
|
-
|
|
261
259
|
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
262
260
|
<div class="pf-c-page__main-body">
|
|
263
261
|
<div class="pf-c-content">
|
|
@@ -266,7 +264,6 @@ section: components
|
|
|
266
264
|
</div>
|
|
267
265
|
</div>
|
|
268
266
|
</section>
|
|
269
|
-
|
|
270
267
|
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
271
268
|
<div class="pf-c-page__main-body">
|
|
272
269
|
<div class="pf-l-gallery pf-m-gutter">
|
|
@@ -337,7 +334,8 @@ section: components
|
|
|
337
334
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
338
335
|
href="#main-content-context-selector-in-sidebar"
|
|
339
336
|
>Skip to content</a>
|
|
340
|
-
|
|
337
|
+
|
|
338
|
+
<header class="pf-c-masthead">
|
|
341
339
|
<span class="pf-c-masthead__toggle">
|
|
342
340
|
<button
|
|
343
341
|
class="pf-c-button pf-m-plain"
|
|
@@ -366,10 +364,7 @@ section: components
|
|
|
366
364
|
</a>
|
|
367
365
|
</div>
|
|
368
366
|
<div class="pf-c-masthead__content">
|
|
369
|
-
<div
|
|
370
|
-
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
371
|
-
id="context-selector-in-sidebar-masthead-toolbar"
|
|
372
|
-
>
|
|
367
|
+
<div class="pf-c-toolbar pf-m-full-height pf-m-static" id="-toolbar">
|
|
373
368
|
<div class="pf-c-toolbar__content">
|
|
374
369
|
<div class="pf-c-toolbar__content-section">
|
|
375
370
|
<div
|
|
@@ -389,11 +384,154 @@ section: components
|
|
|
389
384
|
<div
|
|
390
385
|
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
391
386
|
>
|
|
387
|
+
<div class="pf-c-toolbar__item">
|
|
388
|
+
<nav
|
|
389
|
+
class="pf-c-app-launcher"
|
|
390
|
+
aria-label="Application launcher"
|
|
391
|
+
id="-icon-group--app-launcher"
|
|
392
|
+
>
|
|
393
|
+
<button
|
|
394
|
+
class="pf-c-app-launcher__toggle"
|
|
395
|
+
type="button"
|
|
396
|
+
id="-button"
|
|
397
|
+
aria-expanded="false"
|
|
398
|
+
aria-label="Application launcher"
|
|
399
|
+
>
|
|
400
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
401
|
+
</button>
|
|
402
|
+
<div
|
|
403
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
404
|
+
hidden
|
|
405
|
+
>
|
|
406
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
407
|
+
<input
|
|
408
|
+
class="pf-c-form-control"
|
|
409
|
+
type="search"
|
|
410
|
+
aria-label="Type to filter"
|
|
411
|
+
placeholder="Filter by name..."
|
|
412
|
+
id="-application-launcher-text-input"
|
|
413
|
+
name="textInput1"
|
|
414
|
+
/>
|
|
415
|
+
</div>
|
|
416
|
+
<section class="pf-c-app-launcher__group">
|
|
417
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
418
|
+
<ul>
|
|
419
|
+
<li
|
|
420
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
421
|
+
>
|
|
422
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
423
|
+
Link 1
|
|
424
|
+
<span
|
|
425
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
426
|
+
>
|
|
427
|
+
<i
|
|
428
|
+
class="fas fa-external-link-alt"
|
|
429
|
+
aria-hidden="true"
|
|
430
|
+
></i>
|
|
431
|
+
</span>
|
|
432
|
+
<span
|
|
433
|
+
class="pf-screen-reader"
|
|
434
|
+
>(opens new window)</span>
|
|
435
|
+
</a>
|
|
436
|
+
<button
|
|
437
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
438
|
+
type="button"
|
|
439
|
+
aria-label="Favorite"
|
|
440
|
+
>
|
|
441
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
442
|
+
</button>
|
|
443
|
+
</li>
|
|
444
|
+
<li
|
|
445
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
446
|
+
>
|
|
447
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
448
|
+
Link 2
|
|
449
|
+
<span
|
|
450
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
451
|
+
>
|
|
452
|
+
<i
|
|
453
|
+
class="fas fa-external-link-alt"
|
|
454
|
+
aria-hidden="true"
|
|
455
|
+
></i>
|
|
456
|
+
</span>
|
|
457
|
+
<span
|
|
458
|
+
class="pf-screen-reader"
|
|
459
|
+
>(opens new window)</span>
|
|
460
|
+
</a>
|
|
461
|
+
<button
|
|
462
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
463
|
+
type="button"
|
|
464
|
+
aria-label="Favorite"
|
|
465
|
+
>
|
|
466
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
467
|
+
</button>
|
|
468
|
+
</li>
|
|
469
|
+
</ul>
|
|
470
|
+
</section>
|
|
471
|
+
<hr class="pf-c-divider" />
|
|
472
|
+
<section class="pf-c-app-launcher__group">
|
|
473
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
474
|
+
<ul>
|
|
475
|
+
<li
|
|
476
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
477
|
+
>
|
|
478
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
479
|
+
Link 1
|
|
480
|
+
<span
|
|
481
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
482
|
+
>
|
|
483
|
+
<i
|
|
484
|
+
class="fas fa-external-link-alt"
|
|
485
|
+
aria-hidden="true"
|
|
486
|
+
></i>
|
|
487
|
+
</span>
|
|
488
|
+
<span
|
|
489
|
+
class="pf-screen-reader"
|
|
490
|
+
>(opens new window)</span>
|
|
491
|
+
</a>
|
|
492
|
+
<button
|
|
493
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
494
|
+
type="button"
|
|
495
|
+
aria-label="Favorite"
|
|
496
|
+
>
|
|
497
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
498
|
+
</button>
|
|
499
|
+
</li>
|
|
500
|
+
<li
|
|
501
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
502
|
+
>
|
|
503
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
504
|
+
Link 2
|
|
505
|
+
<span
|
|
506
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
507
|
+
>
|
|
508
|
+
<i
|
|
509
|
+
class="fas fa-external-link-alt"
|
|
510
|
+
aria-hidden="true"
|
|
511
|
+
></i>
|
|
512
|
+
</span>
|
|
513
|
+
<span
|
|
514
|
+
class="pf-screen-reader"
|
|
515
|
+
>(opens new window)</span>
|
|
516
|
+
</a>
|
|
517
|
+
<button
|
|
518
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
519
|
+
type="button"
|
|
520
|
+
aria-label="Favorite"
|
|
521
|
+
>
|
|
522
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
523
|
+
</button>
|
|
524
|
+
</li>
|
|
525
|
+
</ul>
|
|
526
|
+
</section>
|
|
527
|
+
</div>
|
|
528
|
+
</nav>
|
|
529
|
+
</div>
|
|
392
530
|
<div class="pf-c-toolbar__item">
|
|
393
531
|
<div class="pf-c-dropdown">
|
|
394
532
|
<button
|
|
395
533
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
396
|
-
id="
|
|
534
|
+
id="-settings-button"
|
|
397
535
|
aria-expanded="false"
|
|
398
536
|
type="button"
|
|
399
537
|
aria-label="Settings"
|
|
@@ -402,7 +540,7 @@ section: components
|
|
|
402
540
|
</button>
|
|
403
541
|
<ul
|
|
404
542
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
405
|
-
aria-labelledby="
|
|
543
|
+
aria-labelledby="-settings-button"
|
|
406
544
|
hidden
|
|
407
545
|
>
|
|
408
546
|
<li>
|
|
@@ -424,16 +562,16 @@ section: components
|
|
|
424
562
|
<div class="pf-c-dropdown">
|
|
425
563
|
<button
|
|
426
564
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
427
|
-
id="
|
|
565
|
+
id="-help-button"
|
|
428
566
|
aria-expanded="false"
|
|
429
567
|
type="button"
|
|
430
568
|
aria-label="Help"
|
|
431
569
|
>
|
|
432
|
-
<i class="
|
|
570
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
433
571
|
</button>
|
|
434
572
|
<ul
|
|
435
573
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
436
|
-
aria-labelledby="
|
|
574
|
+
aria-labelledby="-help-button"
|
|
437
575
|
hidden
|
|
438
576
|
>
|
|
439
577
|
<li>
|
|
@@ -722,8 +860,8 @@ section: components
|
|
|
722
860
|
<input
|
|
723
861
|
class="pf-c-form-control pf-m-search"
|
|
724
862
|
type="search"
|
|
725
|
-
id="
|
|
726
|
-
name="
|
|
863
|
+
id="-drilldown-menu-list-3-search-input"
|
|
864
|
+
name="-drilldown-menu-list-3-search-input"
|
|
727
865
|
aria-label="Search"
|
|
728
866
|
/>
|
|
729
867
|
</div>
|
|
@@ -878,7 +1016,7 @@ section: components
|
|
|
878
1016
|
>
|
|
879
1017
|
<button
|
|
880
1018
|
class="pf-c-dropdown__toggle"
|
|
881
|
-
id="
|
|
1019
|
+
id="-profile-button"
|
|
882
1020
|
aria-expanded="false"
|
|
883
1021
|
type="button"
|
|
884
1022
|
>
|
|
@@ -1186,10 +1324,8 @@ section: components
|
|
|
1186
1324
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
1187
1325
|
href="#main-content-context-selector-in-sidebar-expanded"
|
|
1188
1326
|
>Skip to content</a>
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
id="context-selector-in-sidebar-expanded-masthead"
|
|
1192
|
-
>
|
|
1327
|
+
|
|
1328
|
+
<header class="pf-c-masthead">
|
|
1193
1329
|
<span class="pf-c-masthead__toggle">
|
|
1194
1330
|
<button
|
|
1195
1331
|
class="pf-c-button pf-m-plain"
|
|
@@ -1218,10 +1354,7 @@ section: components
|
|
|
1218
1354
|
</a>
|
|
1219
1355
|
</div>
|
|
1220
1356
|
<div class="pf-c-masthead__content">
|
|
1221
|
-
<div
|
|
1222
|
-
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1223
|
-
id="context-selector-in-sidebar-expanded-masthead-toolbar"
|
|
1224
|
-
>
|
|
1357
|
+
<div class="pf-c-toolbar pf-m-full-height pf-m-static" id="-toolbar">
|
|
1225
1358
|
<div class="pf-c-toolbar__content">
|
|
1226
1359
|
<div class="pf-c-toolbar__content-section">
|
|
1227
1360
|
<div
|
|
@@ -1241,11 +1374,154 @@ section: components
|
|
|
1241
1374
|
<div
|
|
1242
1375
|
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1243
1376
|
>
|
|
1377
|
+
<div class="pf-c-toolbar__item">
|
|
1378
|
+
<nav
|
|
1379
|
+
class="pf-c-app-launcher"
|
|
1380
|
+
aria-label="Application launcher"
|
|
1381
|
+
id="-icon-group--app-launcher"
|
|
1382
|
+
>
|
|
1383
|
+
<button
|
|
1384
|
+
class="pf-c-app-launcher__toggle"
|
|
1385
|
+
type="button"
|
|
1386
|
+
id="-button"
|
|
1387
|
+
aria-expanded="false"
|
|
1388
|
+
aria-label="Application launcher"
|
|
1389
|
+
>
|
|
1390
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1391
|
+
</button>
|
|
1392
|
+
<div
|
|
1393
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
1394
|
+
hidden
|
|
1395
|
+
>
|
|
1396
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
1397
|
+
<input
|
|
1398
|
+
class="pf-c-form-control"
|
|
1399
|
+
type="search"
|
|
1400
|
+
aria-label="Type to filter"
|
|
1401
|
+
placeholder="Filter by name..."
|
|
1402
|
+
id="-application-launcher-text-input"
|
|
1403
|
+
name="textInput1"
|
|
1404
|
+
/>
|
|
1405
|
+
</div>
|
|
1406
|
+
<section class="pf-c-app-launcher__group">
|
|
1407
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
1408
|
+
<ul>
|
|
1409
|
+
<li
|
|
1410
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1411
|
+
>
|
|
1412
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1413
|
+
Link 1
|
|
1414
|
+
<span
|
|
1415
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1416
|
+
>
|
|
1417
|
+
<i
|
|
1418
|
+
class="fas fa-external-link-alt"
|
|
1419
|
+
aria-hidden="true"
|
|
1420
|
+
></i>
|
|
1421
|
+
</span>
|
|
1422
|
+
<span
|
|
1423
|
+
class="pf-screen-reader"
|
|
1424
|
+
>(opens new window)</span>
|
|
1425
|
+
</a>
|
|
1426
|
+
<button
|
|
1427
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1428
|
+
type="button"
|
|
1429
|
+
aria-label="Favorite"
|
|
1430
|
+
>
|
|
1431
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1432
|
+
</button>
|
|
1433
|
+
</li>
|
|
1434
|
+
<li
|
|
1435
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1436
|
+
>
|
|
1437
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1438
|
+
Link 2
|
|
1439
|
+
<span
|
|
1440
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1441
|
+
>
|
|
1442
|
+
<i
|
|
1443
|
+
class="fas fa-external-link-alt"
|
|
1444
|
+
aria-hidden="true"
|
|
1445
|
+
></i>
|
|
1446
|
+
</span>
|
|
1447
|
+
<span
|
|
1448
|
+
class="pf-screen-reader"
|
|
1449
|
+
>(opens new window)</span>
|
|
1450
|
+
</a>
|
|
1451
|
+
<button
|
|
1452
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1453
|
+
type="button"
|
|
1454
|
+
aria-label="Favorite"
|
|
1455
|
+
>
|
|
1456
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1457
|
+
</button>
|
|
1458
|
+
</li>
|
|
1459
|
+
</ul>
|
|
1460
|
+
</section>
|
|
1461
|
+
<hr class="pf-c-divider" />
|
|
1462
|
+
<section class="pf-c-app-launcher__group">
|
|
1463
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
1464
|
+
<ul>
|
|
1465
|
+
<li
|
|
1466
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1467
|
+
>
|
|
1468
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1469
|
+
Link 1
|
|
1470
|
+
<span
|
|
1471
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1472
|
+
>
|
|
1473
|
+
<i
|
|
1474
|
+
class="fas fa-external-link-alt"
|
|
1475
|
+
aria-hidden="true"
|
|
1476
|
+
></i>
|
|
1477
|
+
</span>
|
|
1478
|
+
<span
|
|
1479
|
+
class="pf-screen-reader"
|
|
1480
|
+
>(opens new window)</span>
|
|
1481
|
+
</a>
|
|
1482
|
+
<button
|
|
1483
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1484
|
+
type="button"
|
|
1485
|
+
aria-label="Favorite"
|
|
1486
|
+
>
|
|
1487
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1488
|
+
</button>
|
|
1489
|
+
</li>
|
|
1490
|
+
<li
|
|
1491
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1492
|
+
>
|
|
1493
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1494
|
+
Link 2
|
|
1495
|
+
<span
|
|
1496
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1497
|
+
>
|
|
1498
|
+
<i
|
|
1499
|
+
class="fas fa-external-link-alt"
|
|
1500
|
+
aria-hidden="true"
|
|
1501
|
+
></i>
|
|
1502
|
+
</span>
|
|
1503
|
+
<span
|
|
1504
|
+
class="pf-screen-reader"
|
|
1505
|
+
>(opens new window)</span>
|
|
1506
|
+
</a>
|
|
1507
|
+
<button
|
|
1508
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1509
|
+
type="button"
|
|
1510
|
+
aria-label="Favorite"
|
|
1511
|
+
>
|
|
1512
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1513
|
+
</button>
|
|
1514
|
+
</li>
|
|
1515
|
+
</ul>
|
|
1516
|
+
</section>
|
|
1517
|
+
</div>
|
|
1518
|
+
</nav>
|
|
1519
|
+
</div>
|
|
1244
1520
|
<div class="pf-c-toolbar__item">
|
|
1245
1521
|
<div class="pf-c-dropdown">
|
|
1246
1522
|
<button
|
|
1247
1523
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1248
|
-
id="
|
|
1524
|
+
id="-settings-button"
|
|
1249
1525
|
aria-expanded="false"
|
|
1250
1526
|
type="button"
|
|
1251
1527
|
aria-label="Settings"
|
|
@@ -1254,7 +1530,7 @@ section: components
|
|
|
1254
1530
|
</button>
|
|
1255
1531
|
<ul
|
|
1256
1532
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1257
|
-
aria-labelledby="
|
|
1533
|
+
aria-labelledby="-settings-button"
|
|
1258
1534
|
hidden
|
|
1259
1535
|
>
|
|
1260
1536
|
<li>
|
|
@@ -1276,16 +1552,16 @@ section: components
|
|
|
1276
1552
|
<div class="pf-c-dropdown">
|
|
1277
1553
|
<button
|
|
1278
1554
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1279
|
-
id="
|
|
1555
|
+
id="-help-button"
|
|
1280
1556
|
aria-expanded="false"
|
|
1281
1557
|
type="button"
|
|
1282
1558
|
aria-label="Help"
|
|
1283
1559
|
>
|
|
1284
|
-
<i class="
|
|
1560
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1285
1561
|
</button>
|
|
1286
1562
|
<ul
|
|
1287
1563
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1288
|
-
aria-labelledby="
|
|
1564
|
+
aria-labelledby="-help-button"
|
|
1289
1565
|
hidden
|
|
1290
1566
|
>
|
|
1291
1567
|
<li>
|
|
@@ -1574,8 +1850,8 @@ section: components
|
|
|
1574
1850
|
<input
|
|
1575
1851
|
class="pf-c-form-control pf-m-search"
|
|
1576
1852
|
type="search"
|
|
1577
|
-
id="
|
|
1578
|
-
name="
|
|
1853
|
+
id="-drilldown-menu-list-3-search-input"
|
|
1854
|
+
name="-drilldown-menu-list-3-search-input"
|
|
1579
1855
|
aria-label="Search"
|
|
1580
1856
|
/>
|
|
1581
1857
|
</div>
|
|
@@ -1730,7 +2006,7 @@ section: components
|
|
|
1730
2006
|
>
|
|
1731
2007
|
<button
|
|
1732
2008
|
class="pf-c-dropdown__toggle"
|
|
1733
|
-
id="
|
|
2009
|
+
id="-profile-button"
|
|
1734
2010
|
aria-expanded="false"
|
|
1735
2011
|
type="button"
|
|
1736
2012
|
>
|
|
@@ -2034,164 +2310,730 @@ section: components
|
|
|
2034
2310
|
### Context selector in page content
|
|
2035
2311
|
|
|
2036
2312
|
```html isFullscreen
|
|
2037
|
-
<div class="pf-c-page" id="context-selector-in-page-content">
|
|
2313
|
+
<div class="pf-c-page" id="context-selector-in-page-content-demo">
|
|
2038
2314
|
<a
|
|
2039
2315
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
2040
|
-
href="#main-content-context-selector-in-page-content"
|
|
2316
|
+
href="#main-content-context-selector-in-page-content-demo"
|
|
2041
2317
|
>Skip to content</a>
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2318
|
+
|
|
2319
|
+
<header
|
|
2320
|
+
class="pf-c-masthead"
|
|
2321
|
+
id="context-selector-in-page-content-demo-masthead"
|
|
2322
|
+
>
|
|
2323
|
+
<span class="pf-c-masthead__toggle">
|
|
2324
|
+
<button
|
|
2325
|
+
class="pf-c-button pf-m-plain"
|
|
2326
|
+
type="button"
|
|
2327
|
+
aria-label="Global navigation"
|
|
2328
|
+
>
|
|
2329
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2330
|
+
</button>
|
|
2331
|
+
</span>
|
|
2332
|
+
<div class="pf-c-masthead__main">
|
|
2333
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
2334
|
+
<picture
|
|
2335
|
+
class="pf-c-brand pf-m-picture"
|
|
2336
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
2052
2337
|
>
|
|
2053
|
-
<
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2338
|
+
<source
|
|
2339
|
+
media="(min-width: 768px)"
|
|
2340
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
2341
|
+
/>
|
|
2342
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
2343
|
+
<img
|
|
2344
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
2345
|
+
alt="Fallback patternFly default logo"
|
|
2346
|
+
/>
|
|
2347
|
+
</picture>
|
|
2062
2348
|
</a>
|
|
2063
2349
|
</div>
|
|
2064
|
-
<div class="pf-c-
|
|
2065
|
-
<div
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
>
|
|
2074
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2075
|
-
</button>
|
|
2076
|
-
</div>
|
|
2077
|
-
<div
|
|
2078
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
2079
|
-
>
|
|
2080
|
-
<button
|
|
2081
|
-
class="pf-c-button pf-m-plain"
|
|
2082
|
-
type="button"
|
|
2083
|
-
aria-label="Help"
|
|
2084
|
-
>
|
|
2085
|
-
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
2086
|
-
</button>
|
|
2087
|
-
</div>
|
|
2088
|
-
</div>
|
|
2089
|
-
<div class="pf-c-page__header-tools-group">
|
|
2090
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
2091
|
-
<div class="pf-c-dropdown">
|
|
2092
|
-
<button
|
|
2093
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2094
|
-
id="context-selector-in-page-content-dropdown-kebab-1-button"
|
|
2095
|
-
aria-expanded="false"
|
|
2096
|
-
type="button"
|
|
2097
|
-
aria-label="Actions"
|
|
2098
|
-
>
|
|
2099
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2100
|
-
</button>
|
|
2101
|
-
<ul
|
|
2102
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2103
|
-
aria-labelledby="context-selector-in-page-content-dropdown-kebab-1-button"
|
|
2104
|
-
hidden
|
|
2350
|
+
<div class="pf-c-masthead__content">
|
|
2351
|
+
<div
|
|
2352
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
2353
|
+
id="context-selector-in-page-content-demo-masthead-toolbar"
|
|
2354
|
+
>
|
|
2355
|
+
<div class="pf-c-toolbar__content">
|
|
2356
|
+
<div class="pf-c-toolbar__content-section">
|
|
2357
|
+
<div
|
|
2358
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
2105
2359
|
>
|
|
2106
|
-
<
|
|
2107
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
2108
|
-
</li>
|
|
2109
|
-
<li>
|
|
2110
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
2111
|
-
</li>
|
|
2112
|
-
<li>
|
|
2113
|
-
<a
|
|
2114
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
2115
|
-
href="#"
|
|
2116
|
-
aria-disabled="true"
|
|
2117
|
-
tabindex="-1"
|
|
2118
|
-
>Disabled link</a>
|
|
2119
|
-
</li>
|
|
2120
|
-
<li>
|
|
2360
|
+
<div class="pf-c-toolbar__item">
|
|
2121
2361
|
<button
|
|
2122
|
-
class="pf-c-
|
|
2362
|
+
class="pf-c-button pf-m-plain"
|
|
2123
2363
|
type="button"
|
|
2124
|
-
|
|
2125
|
-
>
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
</
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
|
|
2364
|
+
aria-label="Notifications"
|
|
2365
|
+
>
|
|
2366
|
+
<span class="pf-c-notification-badge">
|
|
2367
|
+
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
|
|
2368
|
+
</span>
|
|
2369
|
+
</button>
|
|
2370
|
+
</div>
|
|
2371
|
+
<div
|
|
2372
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
2373
|
+
>
|
|
2374
|
+
<div class="pf-c-toolbar__item">
|
|
2375
|
+
<nav
|
|
2376
|
+
class="pf-c-app-launcher"
|
|
2377
|
+
aria-label="Application launcher"
|
|
2378
|
+
id="context-selector-in-page-content-demo-masthead-icon-group--app-launcher"
|
|
2379
|
+
>
|
|
2380
|
+
<button
|
|
2381
|
+
class="pf-c-app-launcher__toggle"
|
|
2382
|
+
type="button"
|
|
2383
|
+
id="-button"
|
|
2384
|
+
aria-expanded="false"
|
|
2385
|
+
aria-label="Application launcher"
|
|
2386
|
+
>
|
|
2387
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
2388
|
+
</button>
|
|
2389
|
+
<div
|
|
2390
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
2391
|
+
hidden
|
|
2392
|
+
>
|
|
2393
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
2394
|
+
<input
|
|
2395
|
+
class="pf-c-form-control"
|
|
2396
|
+
type="search"
|
|
2397
|
+
aria-label="Type to filter"
|
|
2398
|
+
placeholder="Filter by name..."
|
|
2399
|
+
id="context-selector-in-page-content-demo-masthead-application-launcher-text-input"
|
|
2400
|
+
name="textInput1"
|
|
2401
|
+
/>
|
|
2402
|
+
</div>
|
|
2403
|
+
<section class="pf-c-app-launcher__group">
|
|
2404
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
2405
|
+
<ul>
|
|
2406
|
+
<li
|
|
2407
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
2408
|
+
>
|
|
2409
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2410
|
+
Link 1
|
|
2411
|
+
<span
|
|
2412
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2413
|
+
>
|
|
2414
|
+
<i
|
|
2415
|
+
class="fas fa-external-link-alt"
|
|
2416
|
+
aria-hidden="true"
|
|
2417
|
+
></i>
|
|
2418
|
+
</span>
|
|
2419
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2420
|
+
</a>
|
|
2421
|
+
<button
|
|
2422
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2423
|
+
type="button"
|
|
2424
|
+
aria-label="Favorite"
|
|
2425
|
+
>
|
|
2426
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2427
|
+
</button>
|
|
2428
|
+
</li>
|
|
2429
|
+
<li
|
|
2430
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
2431
|
+
>
|
|
2432
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2433
|
+
Link 2
|
|
2434
|
+
<span
|
|
2435
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2436
|
+
>
|
|
2437
|
+
<i
|
|
2438
|
+
class="fas fa-external-link-alt"
|
|
2439
|
+
aria-hidden="true"
|
|
2440
|
+
></i>
|
|
2441
|
+
</span>
|
|
2442
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2443
|
+
</a>
|
|
2444
|
+
<button
|
|
2445
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2446
|
+
type="button"
|
|
2447
|
+
aria-label="Favorite"
|
|
2448
|
+
>
|
|
2449
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2450
|
+
</button>
|
|
2451
|
+
</li>
|
|
2452
|
+
</ul>
|
|
2453
|
+
</section>
|
|
2454
|
+
<hr class="pf-c-divider" />
|
|
2455
|
+
<section class="pf-c-app-launcher__group">
|
|
2456
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
2457
|
+
<ul>
|
|
2458
|
+
<li
|
|
2459
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
2460
|
+
>
|
|
2461
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2462
|
+
Link 1
|
|
2463
|
+
<span
|
|
2464
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2465
|
+
>
|
|
2466
|
+
<i
|
|
2467
|
+
class="fas fa-external-link-alt"
|
|
2468
|
+
aria-hidden="true"
|
|
2469
|
+
></i>
|
|
2470
|
+
</span>
|
|
2471
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2472
|
+
</a>
|
|
2473
|
+
<button
|
|
2474
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2475
|
+
type="button"
|
|
2476
|
+
aria-label="Favorite"
|
|
2477
|
+
>
|
|
2478
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2479
|
+
</button>
|
|
2480
|
+
</li>
|
|
2481
|
+
<li
|
|
2482
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
2483
|
+
>
|
|
2484
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2485
|
+
Link 2
|
|
2486
|
+
<span
|
|
2487
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2488
|
+
>
|
|
2489
|
+
<i
|
|
2490
|
+
class="fas fa-external-link-alt"
|
|
2491
|
+
aria-hidden="true"
|
|
2492
|
+
></i>
|
|
2493
|
+
</span>
|
|
2494
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2495
|
+
</a>
|
|
2496
|
+
<button
|
|
2497
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2498
|
+
type="button"
|
|
2499
|
+
aria-label="Favorite"
|
|
2500
|
+
>
|
|
2501
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2502
|
+
</button>
|
|
2503
|
+
</li>
|
|
2504
|
+
</ul>
|
|
2505
|
+
</section>
|
|
2506
|
+
</div>
|
|
2507
|
+
</nav>
|
|
2508
|
+
</div>
|
|
2509
|
+
<div class="pf-c-toolbar__item">
|
|
2510
|
+
<div class="pf-c-dropdown">
|
|
2511
|
+
<button
|
|
2512
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2513
|
+
id="context-selector-in-page-content-demo-masthead-settings-button"
|
|
2514
|
+
aria-expanded="false"
|
|
2515
|
+
type="button"
|
|
2516
|
+
aria-label="Settings"
|
|
2517
|
+
>
|
|
2518
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2519
|
+
</button>
|
|
2520
|
+
<ul
|
|
2521
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2522
|
+
aria-labelledby="context-selector-in-page-content-demo-masthead-settings-button"
|
|
2523
|
+
hidden
|
|
2524
|
+
>
|
|
2525
|
+
<li>
|
|
2526
|
+
<button
|
|
2527
|
+
class="pf-c-dropdown__menu-item"
|
|
2528
|
+
type="button"
|
|
2529
|
+
>Settings</button>
|
|
2530
|
+
</li>
|
|
2531
|
+
<li>
|
|
2532
|
+
<button
|
|
2533
|
+
class="pf-c-dropdown__menu-item"
|
|
2534
|
+
type="button"
|
|
2535
|
+
>Use the beta release</button>
|
|
2536
|
+
</li>
|
|
2537
|
+
</ul>
|
|
2538
|
+
</div>
|
|
2539
|
+
</div>
|
|
2540
|
+
<div class="pf-c-toolbar__item">
|
|
2541
|
+
<div class="pf-c-dropdown">
|
|
2542
|
+
<button
|
|
2543
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2544
|
+
id="context-selector-in-page-content-demo-masthead-help-button"
|
|
2545
|
+
aria-expanded="false"
|
|
2546
|
+
type="button"
|
|
2547
|
+
aria-label="Help"
|
|
2548
|
+
>
|
|
2549
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
2550
|
+
</button>
|
|
2551
|
+
<ul
|
|
2552
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2553
|
+
aria-labelledby="context-selector-in-page-content-demo-masthead-help-button"
|
|
2554
|
+
hidden
|
|
2555
|
+
>
|
|
2556
|
+
<li>
|
|
2557
|
+
<button
|
|
2558
|
+
class="pf-c-dropdown__menu-item"
|
|
2559
|
+
type="button"
|
|
2560
|
+
>Support options</button>
|
|
2561
|
+
</li>
|
|
2562
|
+
<li>
|
|
2563
|
+
<button
|
|
2564
|
+
class="pf-c-dropdown__menu-item"
|
|
2565
|
+
type="button"
|
|
2566
|
+
>Open support case</button>
|
|
2567
|
+
</li>
|
|
2568
|
+
<li>
|
|
2569
|
+
<button
|
|
2570
|
+
class="pf-c-dropdown__menu-item"
|
|
2571
|
+
type="button"
|
|
2572
|
+
>API documentation</button>
|
|
2573
|
+
</li>
|
|
2574
|
+
</ul>
|
|
2575
|
+
</div>
|
|
2576
|
+
</div>
|
|
2577
|
+
</div>
|
|
2578
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
2579
|
+
<div class="pf-c-dropdown">
|
|
2580
|
+
<button
|
|
2581
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
2582
|
+
type="button"
|
|
2583
|
+
aria-expanded="false"
|
|
2584
|
+
aria-label="Actions"
|
|
2585
|
+
>
|
|
2586
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2587
|
+
</button>
|
|
2588
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
2589
|
+
<div class="pf-c-menu__content">
|
|
2590
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
2591
|
+
<ul class="pf-c-menu__list">
|
|
2592
|
+
<li class="pf-c-menu__list-item pf-m-disabled">
|
|
2593
|
+
<button
|
|
2594
|
+
class="pf-c-menu__item"
|
|
2595
|
+
type="button"
|
|
2596
|
+
disabled
|
|
2597
|
+
>
|
|
2598
|
+
<span class="pf-c-menu__item-description">
|
|
2599
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
2600
|
+
<div
|
|
2601
|
+
class="pf-u-font-size-md"
|
|
2602
|
+
>mshaksho@redhat.com</div>
|
|
2603
|
+
</span>
|
|
2604
|
+
</button>
|
|
2605
|
+
</li>
|
|
2606
|
+
<li class="pf-c-menu__list-item pf-m-disabled">
|
|
2607
|
+
<button
|
|
2608
|
+
class="pf-c-menu__item"
|
|
2609
|
+
type="button"
|
|
2610
|
+
disabled
|
|
2611
|
+
>
|
|
2612
|
+
<span class="pf-c-menu__item-description">
|
|
2613
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
2614
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
2615
|
+
</span>
|
|
2616
|
+
</button>
|
|
2617
|
+
</li>
|
|
2618
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2619
|
+
<li class="pf-c-menu__list-item">
|
|
2620
|
+
<button class="pf-c-menu__item" type="button">
|
|
2621
|
+
<span class="pf-c-menu__item-main">
|
|
2622
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
2623
|
+
</span>
|
|
2624
|
+
</button>
|
|
2625
|
+
</li>
|
|
2626
|
+
<li class="pf-c-menu__list-item">
|
|
2627
|
+
<button class="pf-c-menu__item" type="button">
|
|
2628
|
+
<span class="pf-c-menu__item-main">
|
|
2629
|
+
<span
|
|
2630
|
+
class="pf-c-menu__item-text"
|
|
2631
|
+
>User management</span>
|
|
2632
|
+
</span>
|
|
2633
|
+
</button>
|
|
2634
|
+
</li>
|
|
2635
|
+
<li class="pf-c-menu__list-item">
|
|
2636
|
+
<button class="pf-c-menu__item" type="button">
|
|
2637
|
+
<span class="pf-c-menu__item-main">
|
|
2638
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
2639
|
+
</span>
|
|
2640
|
+
</button>
|
|
2641
|
+
</li>
|
|
2642
|
+
</ul>
|
|
2643
|
+
</section>
|
|
2644
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
2645
|
+
<section class="pf-c-menu__group">
|
|
2646
|
+
<ul class="pf-c-menu__list">
|
|
2647
|
+
<li class="pf-c-menu__list-item">
|
|
2648
|
+
<button
|
|
2649
|
+
class="pf-c-menu__item"
|
|
2650
|
+
type="button"
|
|
2651
|
+
aria-expanded="false"
|
|
2652
|
+
>
|
|
2653
|
+
<span class="pf-c-menu__item-main">
|
|
2654
|
+
<span class="pf-c-menu__item-icon">
|
|
2655
|
+
<i
|
|
2656
|
+
class="fas fa-fw fa-cog"
|
|
2657
|
+
aria-hidden="true"
|
|
2658
|
+
></i>
|
|
2659
|
+
</span>
|
|
2660
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
2661
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2662
|
+
<i class="fas fa-angle-right"></i>
|
|
2663
|
+
</span>
|
|
2664
|
+
</span>
|
|
2665
|
+
</button>
|
|
2666
|
+
<div class="pf-c-menu" hidden>
|
|
2667
|
+
<div class="pf-c-menu__content">
|
|
2668
|
+
<ul class="pf-c-menu__list">
|
|
2669
|
+
<li
|
|
2670
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
2671
|
+
>
|
|
2672
|
+
<button
|
|
2673
|
+
class="pf-c-menu__item"
|
|
2674
|
+
type="button"
|
|
2675
|
+
>
|
|
2676
|
+
<span class="pf-c-menu__item-main">
|
|
2677
|
+
<span
|
|
2678
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2679
|
+
>
|
|
2680
|
+
<i class="fas fa-angle-left"></i>
|
|
2681
|
+
</span>
|
|
2682
|
+
<span class="pf-c-menu__item-icon">
|
|
2683
|
+
<i
|
|
2684
|
+
class="fas fa-fw fa-cog"
|
|
2685
|
+
aria-hidden="true"
|
|
2686
|
+
></i>
|
|
2687
|
+
</span>
|
|
2688
|
+
<span
|
|
2689
|
+
class="pf-c-menu__item-text"
|
|
2690
|
+
>Settings</span>
|
|
2691
|
+
</span>
|
|
2692
|
+
</button>
|
|
2693
|
+
</li>
|
|
2694
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2695
|
+
<li class="pf-c-menu__list-item">
|
|
2696
|
+
<a class="pf-c-menu__item" href="#">
|
|
2697
|
+
<span class="pf-c-menu__item-main">
|
|
2698
|
+
<span
|
|
2699
|
+
class="pf-c-menu__item-text"
|
|
2700
|
+
>Customer support</span>
|
|
2701
|
+
</span>
|
|
2702
|
+
</a>
|
|
2703
|
+
</li>
|
|
2704
|
+
<li class="pf-c-menu__list-item">
|
|
2705
|
+
<a class="pf-c-menu__item" href="#">
|
|
2706
|
+
<span class="pf-c-menu__item-main">
|
|
2707
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
2708
|
+
</span>
|
|
2709
|
+
</a>
|
|
2710
|
+
</li>
|
|
2711
|
+
</ul>
|
|
2712
|
+
</div>
|
|
2713
|
+
</div>
|
|
2714
|
+
</li>
|
|
2715
|
+
|
|
2716
|
+
<li class="pf-c-menu__list-item">
|
|
2717
|
+
<button
|
|
2718
|
+
class="pf-c-menu__item"
|
|
2719
|
+
type="button"
|
|
2720
|
+
aria-expanded="false"
|
|
2721
|
+
>
|
|
2722
|
+
<span class="pf-c-menu__item-main">
|
|
2723
|
+
<span class="pf-c-menu__item-icon">
|
|
2724
|
+
<i
|
|
2725
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2726
|
+
aria-hidden="true"
|
|
2727
|
+
></i>
|
|
2728
|
+
</span>
|
|
2729
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2730
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2731
|
+
<i class="fas fa-angle-right"></i>
|
|
2732
|
+
</span>
|
|
2733
|
+
</span>
|
|
2734
|
+
</button>
|
|
2735
|
+
<div class="pf-c-menu" hidden>
|
|
2736
|
+
<div class="pf-c-menu__content">
|
|
2737
|
+
<ul class="pf-c-menu__list">
|
|
2738
|
+
<li
|
|
2739
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
2740
|
+
>
|
|
2741
|
+
<button
|
|
2742
|
+
class="pf-c-menu__item"
|
|
2743
|
+
type="button"
|
|
2744
|
+
>
|
|
2745
|
+
<span class="pf-c-menu__item-main">
|
|
2746
|
+
<span
|
|
2747
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2748
|
+
>
|
|
2749
|
+
<i class="fas fa-angle-left"></i>
|
|
2750
|
+
</span>
|
|
2751
|
+
<span class="pf-c-menu__item-icon">
|
|
2752
|
+
<i
|
|
2753
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2754
|
+
aria-hidden="true"
|
|
2755
|
+
></i>
|
|
2756
|
+
</span>
|
|
2757
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2758
|
+
</span>
|
|
2759
|
+
</button>
|
|
2760
|
+
</li>
|
|
2761
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2762
|
+
<li class="pf-c-menu__list-item">
|
|
2763
|
+
<a class="pf-c-menu__item" href="#">
|
|
2764
|
+
<span class="pf-c-menu__item-main">
|
|
2765
|
+
<span
|
|
2766
|
+
class="pf-c-menu__item-text"
|
|
2767
|
+
>Support options</span>
|
|
2768
|
+
</span>
|
|
2769
|
+
</a>
|
|
2770
|
+
</li>
|
|
2771
|
+
<li class="pf-c-menu__list-item">
|
|
2772
|
+
<a class="pf-c-menu__item" href="#">
|
|
2773
|
+
<span class="pf-c-menu__item-main">
|
|
2774
|
+
<span
|
|
2775
|
+
class="pf-c-menu__item-text"
|
|
2776
|
+
>Open support case</span>
|
|
2777
|
+
</span>
|
|
2778
|
+
</a>
|
|
2779
|
+
</li>
|
|
2780
|
+
<li class="pf-c-menu__list-item">
|
|
2781
|
+
<a class="pf-c-menu__item" href="#">
|
|
2782
|
+
<span class="pf-c-menu__item-main">
|
|
2783
|
+
<span
|
|
2784
|
+
class="pf-c-menu__item-text"
|
|
2785
|
+
>API documentation</span>
|
|
2786
|
+
</span>
|
|
2787
|
+
</a>
|
|
2788
|
+
</li>
|
|
2789
|
+
</ul>
|
|
2790
|
+
</div>
|
|
2791
|
+
</div>
|
|
2792
|
+
</li>
|
|
2793
|
+
|
|
2794
|
+
<li class="pf-c-menu__list-item">
|
|
2795
|
+
<button class="pf-c-menu__item" type="button">
|
|
2796
|
+
<span class="pf-c-menu__item-main">
|
|
2797
|
+
<span class="pf-c-menu__item-icon">
|
|
2798
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
2799
|
+
</span>
|
|
2800
|
+
<span
|
|
2801
|
+
class="pf-c-menu__item-text"
|
|
2802
|
+
>Application launcher</span>
|
|
2803
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2804
|
+
<i class="fas fa-angle-right"></i>
|
|
2805
|
+
</span>
|
|
2806
|
+
</span>
|
|
2807
|
+
</button>
|
|
2808
|
+
<div class="pf-c-menu" hidden>
|
|
2809
|
+
<div class="pf-c-menu__header">
|
|
2810
|
+
<button class="pf-c-menu__item" type="button">
|
|
2811
|
+
<span class="pf-c-menu__item-main">
|
|
2812
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2813
|
+
<i class="fas fa-angle-left"></i>
|
|
2814
|
+
</span>
|
|
2815
|
+
<span class="pf-c-menu__item-icon">
|
|
2816
|
+
<i
|
|
2817
|
+
class="fas fa-fw fa-th"
|
|
2818
|
+
aria-hidden="true"
|
|
2819
|
+
></i>
|
|
2820
|
+
</span>
|
|
2821
|
+
<span
|
|
2822
|
+
class="pf-c-menu__item-text"
|
|
2823
|
+
>Application launcher</span>
|
|
2824
|
+
</span>
|
|
2825
|
+
</button>
|
|
2826
|
+
</div>
|
|
2827
|
+
<div class="pf-c-menu__search">
|
|
2828
|
+
<div class="pf-c-menu__search-input">
|
|
2829
|
+
<input
|
|
2830
|
+
class="pf-c-form-control pf-m-search"
|
|
2831
|
+
type="search"
|
|
2832
|
+
id="context-selector-in-page-content-demo-masthead-drilldown-menu-list-3-search-input"
|
|
2833
|
+
name="context-selector-in-page-content-demo-masthead-drilldown-menu-list-3-search-input"
|
|
2834
|
+
aria-label="Search"
|
|
2835
|
+
/>
|
|
2836
|
+
</div>
|
|
2837
|
+
</div>
|
|
2838
|
+
<hr class="pf-c-divider" />
|
|
2839
|
+
<section class="pf-c-menu__group">
|
|
2840
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
2841
|
+
<ul class="pf-c-menu__list">
|
|
2842
|
+
<li class="pf-c-menu__list-item">
|
|
2843
|
+
<a class="pf-c-menu__item" href="#">
|
|
2844
|
+
<span class="pf-c-menu__item-main">
|
|
2845
|
+
<span
|
|
2846
|
+
class="pf-c-menu__item-text"
|
|
2847
|
+
>Link 1</span>
|
|
2848
|
+
</span>
|
|
2849
|
+
</a>
|
|
2850
|
+
<button
|
|
2851
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2852
|
+
type="button"
|
|
2853
|
+
aria-label="Starred"
|
|
2854
|
+
>
|
|
2855
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2856
|
+
<i
|
|
2857
|
+
class="fas fa-star"
|
|
2858
|
+
aria-hidden="true"
|
|
2859
|
+
></i>
|
|
2860
|
+
</span>
|
|
2861
|
+
</button>
|
|
2862
|
+
</li>
|
|
2863
|
+
<li class="pf-c-menu__list-item">
|
|
2864
|
+
<a
|
|
2865
|
+
class="pf-c-menu__item"
|
|
2866
|
+
href="#"
|
|
2867
|
+
target="_blank"
|
|
2868
|
+
>
|
|
2869
|
+
<span class="pf-c-menu__item-main">
|
|
2870
|
+
<span
|
|
2871
|
+
class="pf-c-menu__item-text"
|
|
2872
|
+
>Link 2</span>
|
|
2873
|
+
<span
|
|
2874
|
+
class="pf-c-menu__item-external-icon"
|
|
2875
|
+
>
|
|
2876
|
+
<i
|
|
2877
|
+
class="fas fa-external-link-alt"
|
|
2878
|
+
aria-hidden="true"
|
|
2879
|
+
></i>
|
|
2880
|
+
</span>
|
|
2881
|
+
<span
|
|
2882
|
+
class="pf-screen-reader"
|
|
2883
|
+
>(opens new window)</span>
|
|
2884
|
+
</span>
|
|
2885
|
+
</a>
|
|
2886
|
+
<button
|
|
2887
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2888
|
+
type="button"
|
|
2889
|
+
aria-label="Not starred"
|
|
2890
|
+
>
|
|
2891
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2892
|
+
<i
|
|
2893
|
+
class="fas fa-star"
|
|
2894
|
+
aria-hidden="true"
|
|
2895
|
+
></i>
|
|
2896
|
+
</span>
|
|
2897
|
+
</button>
|
|
2898
|
+
</li>
|
|
2899
|
+
</ul>
|
|
2900
|
+
</section>
|
|
2901
|
+
<hr class="pf-c-divider" />
|
|
2902
|
+
<section class="pf-c-menu__group">
|
|
2903
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
2904
|
+
<ul class="pf-c-menu__list">
|
|
2905
|
+
<li class="pf-c-menu__list-item">
|
|
2906
|
+
<a class="pf-c-menu__item" href="#">
|
|
2907
|
+
<span class="pf-c-menu__item-main">
|
|
2908
|
+
<span
|
|
2909
|
+
class="pf-c-menu__item-text"
|
|
2910
|
+
>Link 1</span>
|
|
2911
|
+
</span>
|
|
2912
|
+
</a>
|
|
2913
|
+
<button
|
|
2914
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2915
|
+
type="button"
|
|
2916
|
+
aria-label="Not starred"
|
|
2917
|
+
>
|
|
2918
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2919
|
+
<i
|
|
2920
|
+
class="fas fa-star"
|
|
2921
|
+
aria-hidden="true"
|
|
2922
|
+
></i>
|
|
2923
|
+
</span>
|
|
2924
|
+
</button>
|
|
2925
|
+
</li>
|
|
2926
|
+
<li class="pf-c-menu__list-item">
|
|
2927
|
+
<a
|
|
2928
|
+
class="pf-c-menu__item"
|
|
2929
|
+
href="#"
|
|
2930
|
+
target="_blank"
|
|
2931
|
+
>
|
|
2932
|
+
<span class="pf-c-menu__item-main">
|
|
2933
|
+
<span
|
|
2934
|
+
class="pf-c-menu__item-text"
|
|
2935
|
+
>Link 2</span>
|
|
2936
|
+
<span
|
|
2937
|
+
class="pf-c-menu__item-external-icon"
|
|
2938
|
+
>
|
|
2939
|
+
<i
|
|
2940
|
+
class="fas fa-external-link-alt"
|
|
2941
|
+
aria-hidden="true"
|
|
2942
|
+
></i>
|
|
2943
|
+
</span>
|
|
2944
|
+
<span
|
|
2945
|
+
class="pf-screen-reader"
|
|
2946
|
+
>(opens new window)</span>
|
|
2947
|
+
</span>
|
|
2948
|
+
</a>
|
|
2949
|
+
<button
|
|
2950
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2951
|
+
type="button"
|
|
2952
|
+
aria-label="Starred"
|
|
2953
|
+
>
|
|
2954
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2955
|
+
<i
|
|
2956
|
+
class="fas fa-star"
|
|
2957
|
+
aria-hidden="true"
|
|
2958
|
+
></i>
|
|
2959
|
+
</span>
|
|
2960
|
+
</button>
|
|
2961
|
+
</li>
|
|
2962
|
+
</ul>
|
|
2963
|
+
</section>
|
|
2964
|
+
</div>
|
|
2965
|
+
</li>
|
|
2966
|
+
</ul>
|
|
2967
|
+
</section>
|
|
2968
|
+
</div>
|
|
2969
|
+
</div>
|
|
2970
|
+
</div>
|
|
2971
|
+
</div>
|
|
2972
|
+
</div>
|
|
2973
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
2974
|
+
<div
|
|
2975
|
+
class="pf-c-dropdown"
|
|
2976
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
2977
|
+
>
|
|
2169
2978
|
<button
|
|
2170
|
-
class="pf-c-
|
|
2979
|
+
class="pf-c-dropdown__toggle"
|
|
2980
|
+
id="context-selector-in-page-content-demo-masthead-profile-button"
|
|
2981
|
+
aria-expanded="false"
|
|
2171
2982
|
type="button"
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2983
|
+
>
|
|
2984
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
2985
|
+
<img
|
|
2986
|
+
class="pf-c-avatar"
|
|
2987
|
+
src="/assets/images/img_avatar.svg"
|
|
2988
|
+
alt="Avatar image"
|
|
2989
|
+
/>
|
|
2990
|
+
</span>
|
|
2991
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
2992
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
2993
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2994
|
+
</span>
|
|
2995
|
+
</button>
|
|
2996
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
2997
|
+
<section class="pf-c-dropdown__group">
|
|
2998
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
2999
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
3000
|
+
<div>123456789</div>
|
|
3001
|
+
</div>
|
|
3002
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
3003
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
3004
|
+
<div>mshaksho@redhat.com</div>
|
|
3005
|
+
</div>
|
|
3006
|
+
</section>
|
|
3007
|
+
<hr class="pf-c-divider" />
|
|
3008
|
+
<section class="pf-c-dropdown__group">
|
|
3009
|
+
<ul>
|
|
3010
|
+
<li>
|
|
3011
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
3012
|
+
</li>
|
|
3013
|
+
<li>
|
|
3014
|
+
<a
|
|
3015
|
+
class="pf-c-dropdown__menu-item"
|
|
3016
|
+
href="#"
|
|
3017
|
+
>User management</a>
|
|
3018
|
+
</li>
|
|
3019
|
+
<li>
|
|
3020
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
3021
|
+
</li>
|
|
3022
|
+
</ul>
|
|
3023
|
+
</section>
|
|
3024
|
+
</div>
|
|
3025
|
+
</div>
|
|
3026
|
+
</div>
|
|
2180
3027
|
</div>
|
|
2181
3028
|
</div>
|
|
2182
3029
|
</div>
|
|
2183
|
-
<img
|
|
2184
|
-
class="pf-c-avatar"
|
|
2185
|
-
src="/assets/images/img_avatar.svg"
|
|
2186
|
-
alt="Avatar image"
|
|
2187
|
-
/>
|
|
2188
3030
|
</div>
|
|
2189
3031
|
</header>
|
|
2190
3032
|
<div class="pf-c-page__sidebar">
|
|
2191
3033
|
<div class="pf-c-page__sidebar-body">
|
|
2192
3034
|
<nav
|
|
2193
3035
|
class="pf-c-nav"
|
|
2194
|
-
id="context-selector-in-page-content-primary-nav"
|
|
3036
|
+
id="context-selector-in-page-content-demo-primary-nav"
|
|
2195
3037
|
aria-label="Global"
|
|
2196
3038
|
>
|
|
2197
3039
|
<ul class="pf-c-nav__list">
|
|
@@ -2221,9 +3063,11 @@ section: components
|
|
|
2221
3063
|
<main
|
|
2222
3064
|
class="pf-c-page__main"
|
|
2223
3065
|
tabindex="-1"
|
|
2224
|
-
id="main-content-context-selector-in-page-content"
|
|
3066
|
+
id="main-content-context-selector-in-page-content-demo"
|
|
2225
3067
|
>
|
|
2226
|
-
<section
|
|
3068
|
+
<section
|
|
3069
|
+
class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
|
|
3070
|
+
>
|
|
2227
3071
|
<div class="pf-c-page__main-body">
|
|
2228
3072
|
<div class="pf-c-toolbar pf-m-inset-none" id="toolbar-simple-example">
|
|
2229
3073
|
<div class="pf-c-toolbar__content">
|
|
@@ -2233,15 +3077,12 @@ section: components
|
|
|
2233
3077
|
class="pf-c-context-selector pf-m-page-insets pf-m-width-auto"
|
|
2234
3078
|
style="--pf-c-context-selector--Width: 270px;"
|
|
2235
3079
|
>
|
|
2236
|
-
<span
|
|
2237
|
-
id="context-selector-in-page-content-context-selector-label"
|
|
2238
|
-
hidden
|
|
2239
|
-
>Selected project:</span>
|
|
3080
|
+
<span id="-context-selector-label" hidden>Selected project:</span>
|
|
2240
3081
|
<button
|
|
2241
3082
|
class="pf-c-context-selector__toggle pf-m-text pf-m-plain"
|
|
2242
3083
|
aria-expanded="false"
|
|
2243
|
-
id="
|
|
2244
|
-
aria-labelledby="
|
|
3084
|
+
id="-context-selector-toggle"
|
|
3085
|
+
aria-labelledby="-context-selector-label -context-selector-toggle"
|
|
2245
3086
|
>
|
|
2246
3087
|
<span
|
|
2247
3088
|
class="pf-c-context-selector__toggle-text"
|
|
@@ -2259,12 +3100,12 @@ section: components
|
|
|
2259
3100
|
placeholder="Search"
|
|
2260
3101
|
id="textInput1"
|
|
2261
3102
|
name="textInput1"
|
|
2262
|
-
aria-labelledby="
|
|
3103
|
+
aria-labelledby="-context-selector-search-button"
|
|
2263
3104
|
/>
|
|
2264
3105
|
<button
|
|
2265
3106
|
class="pf-c-button pf-m-control"
|
|
2266
3107
|
type="button"
|
|
2267
|
-
id="
|
|
3108
|
+
id="-context-selector-search-button"
|
|
2268
3109
|
aria-label="Search menu items"
|
|
2269
3110
|
>
|
|
2270
3111
|
<i class="fas fa-search" aria-hidden="true"></i>
|
|
@@ -2365,18 +3206,15 @@ section: components
|
|
|
2365
3206
|
</div>
|
|
2366
3207
|
<div class="pf-c-toolbar__item">
|
|
2367
3208
|
<div class="pf-c-select">
|
|
2368
|
-
<span
|
|
2369
|
-
id="context-selector-in-page-content-select-label"
|
|
2370
|
-
hidden
|
|
2371
|
-
>Choose one</span>
|
|
3209
|
+
<span id="-select-label" hidden>Choose one</span>
|
|
2372
3210
|
|
|
2373
3211
|
<button
|
|
2374
3212
|
class="pf-c-select__toggle pf-m-plain"
|
|
2375
3213
|
type="button"
|
|
2376
|
-
id="
|
|
3214
|
+
id="-select-toggle"
|
|
2377
3215
|
aria-haspopup="true"
|
|
2378
3216
|
aria-expanded="false"
|
|
2379
|
-
aria-labelledby="
|
|
3217
|
+
aria-labelledby="-select-label -select-toggle"
|
|
2380
3218
|
>
|
|
2381
3219
|
<div class="pf-c-select__toggle-wrapper">
|
|
2382
3220
|
<span class="pf-c-select__toggle-text">All applications</span>
|
|
@@ -2389,7 +3227,7 @@ section: components
|
|
|
2389
3227
|
<ul
|
|
2390
3228
|
class="pf-c-select__menu"
|
|
2391
3229
|
role="listbox"
|
|
2392
|
-
aria-labelledby="
|
|
3230
|
+
aria-labelledby="-select-label"
|
|
2393
3231
|
hidden
|
|
2394
3232
|
>
|
|
2395
3233
|
<li role="presentation">
|