@patternfly/patternfly 4.206.1 → 4.207.0
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 +41 -0
- package/components/Button/button.css +20 -0
- package/components/Button/button.scss +23 -0
- package/components/Button/themes/dark/button.scss +1 -0
- package/components/Check/check.css +9 -0
- package/components/Check/check.scss +11 -0
- package/components/ContextSelector/context-selector.css +6 -0
- package/components/ContextSelector/context-selector.scss +7 -1
- package/components/Dropdown/dropdown.css +6 -0
- package/components/Dropdown/dropdown.scss +7 -0
- package/components/ExpandableSection/expandable-section.css +18 -1
- package/components/ExpandableSection/expandable-section.scss +25 -1
- package/components/InputGroup/input-group.css +3 -0
- package/components/InputGroup/input-group.scss +4 -0
- package/components/Masthead/masthead.css +6 -3
- package/components/Masthead/masthead.scss +4 -0
- package/components/Menu/menu.css +0 -4
- package/components/Menu/menu.scss +0 -4
- package/components/Page/page.css +50 -0
- package/components/Page/page.scss +20 -6
- package/components/Select/select.css +6 -0
- package/components/Select/select.scss +7 -0
- package/components/Wizard/themes/dark/wizard.scss +2 -2
- package/components/Wizard/wizard.css +2 -2
- package/docs/components/Avatar/examples/Avatar.md +10 -10
- package/docs/components/Button/examples/Button.md +19 -0
- package/docs/components/Card/examples/Card.css +3 -3
- package/docs/components/Check/examples/Check.md +33 -12
- package/docs/components/CodeBlock/examples/CodeBlock.md +8 -6
- package/docs/components/Dropdown/examples/Dropdown.md +2 -1
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +51 -13
- package/docs/components/InputGroup/examples/InputGroup.md +1 -0
- package/docs/components/Masthead/examples/masthead.md +5 -6
- package/docs/components/MenuToggle/examples/MenuToggle.md +6 -6
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +38 -0
- package/docs/demos/AboutModal/examples/AboutModal.md +1 -1
- package/docs/demos/Alert/examples/Alert.md +3 -3
- package/docs/demos/BackToTop/examples/BackToTop.md +1 -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 +3 -3
- package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
- package/docs/demos/DataList/examples/DataList.md +4 -4
- package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -3
- package/docs/demos/Drawer/examples/Drawer.md +5 -5
- package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -6
- package/docs/demos/Masthead/examples/Masthead.md +388 -2
- package/docs/demos/Modal/examples/Modal.md +6 -6
- 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 +8 -8
- 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 +14 -14
- 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 +8 -8
- package/package.json +1 -1
- package/patternfly-no-reset.css +126 -10
- package/patternfly.css +126 -10
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -760,8 +760,8 @@ wrapperTag: div
|
|
|
760
760
|
<span class="pf-c-dropdown__toggle-image">
|
|
761
761
|
<img
|
|
762
762
|
class="pf-c-avatar"
|
|
763
|
-
src="/assets/images/img_avatar.svg"
|
|
764
763
|
alt="Avatar image"
|
|
764
|
+
src="/assets/images/img_avatar-light.svg"
|
|
765
765
|
/>
|
|
766
766
|
</span>
|
|
767
767
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -1871,8 +1871,8 @@ wrapperTag: div
|
|
|
1871
1871
|
<span class="pf-c-dropdown__toggle-image">
|
|
1872
1872
|
<img
|
|
1873
1873
|
class="pf-c-avatar"
|
|
1874
|
-
src="/assets/images/img_avatar.svg"
|
|
1875
1874
|
alt="Avatar image"
|
|
1875
|
+
src="/assets/images/img_avatar-light.svg"
|
|
1876
1876
|
/>
|
|
1877
1877
|
</span>
|
|
1878
1878
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -2808,8 +2808,8 @@ wrapperTag: div
|
|
|
2808
2808
|
<span class="pf-c-dropdown__toggle-image">
|
|
2809
2809
|
<img
|
|
2810
2810
|
class="pf-c-avatar"
|
|
2811
|
-
src="/assets/images/img_avatar.svg"
|
|
2812
2811
|
alt="Avatar image"
|
|
2812
|
+
src="/assets/images/img_avatar-light.svg"
|
|
2813
2813
|
/>
|
|
2814
2814
|
</span>
|
|
2815
2815
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -3745,8 +3745,8 @@ wrapperTag: div
|
|
|
3745
3745
|
<span class="pf-c-dropdown__toggle-image">
|
|
3746
3746
|
<img
|
|
3747
3747
|
class="pf-c-avatar"
|
|
3748
|
-
src="/assets/images/img_avatar.svg"
|
|
3749
3748
|
alt="Avatar image"
|
|
3749
|
+
src="/assets/images/img_avatar-light.svg"
|
|
3750
3750
|
/>
|
|
3751
3751
|
</span>
|
|
3752
3752
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -4695,8 +4695,8 @@ wrapperTag: div
|
|
|
4695
4695
|
<span class="pf-c-dropdown__toggle-image">
|
|
4696
4696
|
<img
|
|
4697
4697
|
class="pf-c-avatar"
|
|
4698
|
-
src="/assets/images/img_avatar.svg"
|
|
4699
4698
|
alt="Avatar image"
|
|
4699
|
+
src="/assets/images/img_avatar-light.svg"
|
|
4700
4700
|
/>
|
|
4701
4701
|
</span>
|
|
4702
4702
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -762,8 +762,8 @@ section: components
|
|
|
762
762
|
<span class="pf-c-dropdown__toggle-image">
|
|
763
763
|
<img
|
|
764
764
|
class="pf-c-avatar"
|
|
765
|
-
src="/assets/images/img_avatar.svg"
|
|
766
765
|
alt="Avatar image"
|
|
766
|
+
src="/assets/images/img_avatar-light.svg"
|
|
767
767
|
/>
|
|
768
768
|
</span>
|
|
769
769
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -1757,8 +1757,8 @@ section: components
|
|
|
1757
1757
|
<span class="pf-c-dropdown__toggle-image">
|
|
1758
1758
|
<img
|
|
1759
1759
|
class="pf-c-avatar"
|
|
1760
|
-
src="/assets/images/img_avatar.svg"
|
|
1761
1760
|
alt="Avatar image"
|
|
1761
|
+
src="/assets/images/img_avatar-light.svg"
|
|
1762
1762
|
/>
|
|
1763
1763
|
</span>
|
|
1764
1764
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -2752,8 +2752,8 @@ section: components
|
|
|
2752
2752
|
<span class="pf-c-dropdown__toggle-image">
|
|
2753
2753
|
<img
|
|
2754
2754
|
class="pf-c-avatar"
|
|
2755
|
-
src="/assets/images/img_avatar.svg"
|
|
2756
2755
|
alt="Avatar image"
|
|
2756
|
+
src="/assets/images/img_avatar-light.svg"
|
|
2757
2757
|
/>
|
|
2758
2758
|
</span>
|
|
2759
2759
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -3744,8 +3744,8 @@ section: components
|
|
|
3744
3744
|
<span class="pf-c-dropdown__toggle-image">
|
|
3745
3745
|
<img
|
|
3746
3746
|
class="pf-c-avatar"
|
|
3747
|
-
src="/assets/images/img_avatar.svg"
|
|
3748
3747
|
alt="Avatar image"
|
|
3748
|
+
src="/assets/images/img_avatar-light.svg"
|
|
3749
3749
|
/>
|
|
3750
3750
|
</span>
|
|
3751
3751
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -4688,8 +4688,8 @@ section: components
|
|
|
4688
4688
|
<span class="pf-c-dropdown__toggle-image">
|
|
4689
4689
|
<img
|
|
4690
4690
|
class="pf-c-avatar"
|
|
4691
|
-
src="/assets/images/img_avatar.svg"
|
|
4692
4691
|
alt="Avatar image"
|
|
4692
|
+
src="/assets/images/img_avatar-light.svg"
|
|
4693
4693
|
/>
|
|
4694
4694
|
</span>
|
|
4695
4695
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -5638,8 +5638,8 @@ section: components
|
|
|
5638
5638
|
<span class="pf-c-dropdown__toggle-image">
|
|
5639
5639
|
<img
|
|
5640
5640
|
class="pf-c-avatar"
|
|
5641
|
-
src="/assets/images/img_avatar.svg"
|
|
5642
5641
|
alt="Avatar image"
|
|
5642
|
+
src="/assets/images/img_avatar-light.svg"
|
|
5643
5643
|
/>
|
|
5644
5644
|
</span>
|
|
5645
5645
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -1289,6 +1289,392 @@ wrapperTag: div
|
|
|
1289
1289
|
|
|
1290
1290
|
```
|
|
1291
1291
|
|
|
1292
|
+
### With expandable search, collapsed
|
|
1293
|
+
|
|
1294
|
+
```html isFullscreen
|
|
1295
|
+
<div class="pf-c-page" id="masthead-expandable-search-example">
|
|
1296
|
+
<a
|
|
1297
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
1298
|
+
href="#main-content-masthead-expandable-search-example"
|
|
1299
|
+
>Skip to content</a>
|
|
1300
|
+
<header
|
|
1301
|
+
class="pf-c-masthead"
|
|
1302
|
+
id="masthead-expandable-search-example-masthead"
|
|
1303
|
+
>
|
|
1304
|
+
<span class="pf-c-masthead__toggle">
|
|
1305
|
+
<button
|
|
1306
|
+
class="pf-c-button pf-m-plain"
|
|
1307
|
+
type="button"
|
|
1308
|
+
aria-label="Global navigation"
|
|
1309
|
+
>
|
|
1310
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1311
|
+
</button>
|
|
1312
|
+
</span>
|
|
1313
|
+
<div class="pf-c-masthead__main">
|
|
1314
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
1315
|
+
<picture
|
|
1316
|
+
class="pf-c-brand pf-m-picture"
|
|
1317
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
1318
|
+
>
|
|
1319
|
+
<source
|
|
1320
|
+
media="(min-width: 768px)"
|
|
1321
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
1322
|
+
/>
|
|
1323
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
1324
|
+
<img
|
|
1325
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
1326
|
+
alt="Fallback patternFly default logo"
|
|
1327
|
+
/>
|
|
1328
|
+
</picture>
|
|
1329
|
+
</a>
|
|
1330
|
+
</div>
|
|
1331
|
+
<div class="pf-c-masthead__content">
|
|
1332
|
+
<div
|
|
1333
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1334
|
+
id="masthead-expandable-search-example-masthead-toolbar"
|
|
1335
|
+
>
|
|
1336
|
+
<div class="pf-c-toolbar__content">
|
|
1337
|
+
<div class="pf-c-toolbar__content-section">
|
|
1338
|
+
<div class="pf-c-toolbar__group pf-m-align-right">
|
|
1339
|
+
<div class="pf-c-toolbar__item">
|
|
1340
|
+
<div class="pf-c-input-group pf-m-plain">
|
|
1341
|
+
<button
|
|
1342
|
+
class="pf-c-button pf-m-plain"
|
|
1343
|
+
type="button"
|
|
1344
|
+
aria-label="Open search"
|
|
1345
|
+
>
|
|
1346
|
+
<i class="fas fa-fw fa-search" aria-hidden="true"></i>
|
|
1347
|
+
</button>
|
|
1348
|
+
</div>
|
|
1349
|
+
</div>
|
|
1350
|
+
</div>
|
|
1351
|
+
</div>
|
|
1352
|
+
</div>
|
|
1353
|
+
</div>
|
|
1354
|
+
</div>
|
|
1355
|
+
</header>
|
|
1356
|
+
<div class="pf-c-page__sidebar">
|
|
1357
|
+
<div class="pf-c-page__sidebar-body">
|
|
1358
|
+
<nav
|
|
1359
|
+
class="pf-c-nav"
|
|
1360
|
+
id="masthead-expandable-search-example-primary-nav"
|
|
1361
|
+
aria-label="Global"
|
|
1362
|
+
>
|
|
1363
|
+
<ul class="pf-c-nav__list">
|
|
1364
|
+
<li class="pf-c-nav__item">
|
|
1365
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
1366
|
+
</li>
|
|
1367
|
+
<li class="pf-c-nav__item">
|
|
1368
|
+
<a
|
|
1369
|
+
href="#"
|
|
1370
|
+
class="pf-c-nav__link pf-m-current"
|
|
1371
|
+
aria-current="page"
|
|
1372
|
+
>Policy</a>
|
|
1373
|
+
</li>
|
|
1374
|
+
<li class="pf-c-nav__item">
|
|
1375
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
1376
|
+
</li>
|
|
1377
|
+
<li class="pf-c-nav__item">
|
|
1378
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
1379
|
+
</li>
|
|
1380
|
+
<li class="pf-c-nav__item">
|
|
1381
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
1382
|
+
</li>
|
|
1383
|
+
</ul>
|
|
1384
|
+
</nav>
|
|
1385
|
+
</div>
|
|
1386
|
+
</div>
|
|
1387
|
+
<main
|
|
1388
|
+
class="pf-c-page__main"
|
|
1389
|
+
tabindex="-1"
|
|
1390
|
+
id="main-content-masthead-expandable-search-example"
|
|
1391
|
+
>
|
|
1392
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1393
|
+
<div class="pf-c-page__main-body">
|
|
1394
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
1395
|
+
<ol class="pf-c-breadcrumb__list">
|
|
1396
|
+
<li class="pf-c-breadcrumb__item">
|
|
1397
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
1398
|
+
</li>
|
|
1399
|
+
<li class="pf-c-breadcrumb__item">
|
|
1400
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1401
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1402
|
+
</span>
|
|
1403
|
+
|
|
1404
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1405
|
+
</li>
|
|
1406
|
+
<li class="pf-c-breadcrumb__item">
|
|
1407
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1408
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1409
|
+
</span>
|
|
1410
|
+
|
|
1411
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1412
|
+
</li>
|
|
1413
|
+
<li class="pf-c-breadcrumb__item">
|
|
1414
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1415
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1416
|
+
</span>
|
|
1417
|
+
|
|
1418
|
+
<a
|
|
1419
|
+
href="#"
|
|
1420
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
1421
|
+
aria-current="page"
|
|
1422
|
+
>Section landing</a>
|
|
1423
|
+
</li>
|
|
1424
|
+
</ol>
|
|
1425
|
+
</nav>
|
|
1426
|
+
</div>
|
|
1427
|
+
</section>
|
|
1428
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
1429
|
+
<div class="pf-c-page__main-body">
|
|
1430
|
+
<div class="pf-c-content">
|
|
1431
|
+
<h1>Main title</h1>
|
|
1432
|
+
<p>This is a full page demo.</p>
|
|
1433
|
+
</div>
|
|
1434
|
+
</div>
|
|
1435
|
+
</section>
|
|
1436
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
1437
|
+
<div class="pf-c-page__main-body">
|
|
1438
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
1439
|
+
<div class="pf-c-card">
|
|
1440
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1441
|
+
</div>
|
|
1442
|
+
<div class="pf-c-card">
|
|
1443
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1444
|
+
</div>
|
|
1445
|
+
<div class="pf-c-card">
|
|
1446
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1447
|
+
</div>
|
|
1448
|
+
<div class="pf-c-card">
|
|
1449
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1450
|
+
</div>
|
|
1451
|
+
<div class="pf-c-card">
|
|
1452
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1453
|
+
</div>
|
|
1454
|
+
<div class="pf-c-card">
|
|
1455
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1456
|
+
</div>
|
|
1457
|
+
<div class="pf-c-card">
|
|
1458
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1459
|
+
</div>
|
|
1460
|
+
<div class="pf-c-card">
|
|
1461
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1462
|
+
</div>
|
|
1463
|
+
<div class="pf-c-card">
|
|
1464
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1465
|
+
</div>
|
|
1466
|
+
<div class="pf-c-card">
|
|
1467
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1468
|
+
</div>
|
|
1469
|
+
</div>
|
|
1470
|
+
</div>
|
|
1471
|
+
</section>
|
|
1472
|
+
</main>
|
|
1473
|
+
</div>
|
|
1474
|
+
|
|
1475
|
+
```
|
|
1476
|
+
|
|
1477
|
+
### With expandable search, expanded
|
|
1478
|
+
|
|
1479
|
+
```html isFullscreen
|
|
1480
|
+
<div class="pf-c-page" id="masthead-expandable-search-expanded-example">
|
|
1481
|
+
<a
|
|
1482
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
1483
|
+
href="#main-content-masthead-expandable-search-expanded-example"
|
|
1484
|
+
>Skip to content</a>
|
|
1485
|
+
<header
|
|
1486
|
+
class="pf-c-masthead"
|
|
1487
|
+
id="masthead-expandable-search-expanded-example-masthead"
|
|
1488
|
+
>
|
|
1489
|
+
<span class="pf-c-masthead__toggle">
|
|
1490
|
+
<button
|
|
1491
|
+
class="pf-c-button pf-m-plain"
|
|
1492
|
+
type="button"
|
|
1493
|
+
aria-label="Global navigation"
|
|
1494
|
+
>
|
|
1495
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1496
|
+
</button>
|
|
1497
|
+
</span>
|
|
1498
|
+
<div class="pf-c-masthead__main">
|
|
1499
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
1500
|
+
<picture
|
|
1501
|
+
class="pf-c-brand pf-m-picture"
|
|
1502
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
1503
|
+
>
|
|
1504
|
+
<source
|
|
1505
|
+
media="(min-width: 768px)"
|
|
1506
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
1507
|
+
/>
|
|
1508
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
1509
|
+
<img
|
|
1510
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
1511
|
+
alt="Fallback patternFly default logo"
|
|
1512
|
+
/>
|
|
1513
|
+
</picture>
|
|
1514
|
+
</a>
|
|
1515
|
+
</div>
|
|
1516
|
+
<div class="pf-c-masthead__content">
|
|
1517
|
+
<div
|
|
1518
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1519
|
+
id="masthead-expandable-search-expanded-example-masthead-toolbar"
|
|
1520
|
+
>
|
|
1521
|
+
<div class="pf-c-toolbar__content">
|
|
1522
|
+
<div class="pf-c-toolbar__content-section">
|
|
1523
|
+
<div class="pf-c-toolbar__group pf-m-align-right">
|
|
1524
|
+
<div class="pf-c-toolbar__item">
|
|
1525
|
+
<div class="pf-c-input-group pf-m-plain">
|
|
1526
|
+
<div class="pf-c-text-input-group">
|
|
1527
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
1528
|
+
<span class="pf-c-text-input-group__text">
|
|
1529
|
+
<span class="pf-c-text-input-group__icon">
|
|
1530
|
+
<i class="fas fa-fw fa-search"></i>
|
|
1531
|
+
</span>
|
|
1532
|
+
<input
|
|
1533
|
+
class="pf-c-text-input-group__text-input"
|
|
1534
|
+
type="text"
|
|
1535
|
+
value
|
|
1536
|
+
aria-label="Type to filter"
|
|
1537
|
+
placeholder="Search"
|
|
1538
|
+
/>
|
|
1539
|
+
</span>
|
|
1540
|
+
</div>
|
|
1541
|
+
</div>
|
|
1542
|
+
<button
|
|
1543
|
+
class="pf-c-button pf-m-plain"
|
|
1544
|
+
type="button"
|
|
1545
|
+
aria-label="Close"
|
|
1546
|
+
>
|
|
1547
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1548
|
+
</button>
|
|
1549
|
+
</div>
|
|
1550
|
+
</div>
|
|
1551
|
+
</div>
|
|
1552
|
+
</div>
|
|
1553
|
+
</div>
|
|
1554
|
+
</div>
|
|
1555
|
+
</div>
|
|
1556
|
+
</header>
|
|
1557
|
+
<div class="pf-c-page__sidebar">
|
|
1558
|
+
<div class="pf-c-page__sidebar-body">
|
|
1559
|
+
<nav
|
|
1560
|
+
class="pf-c-nav"
|
|
1561
|
+
id="masthead-expandable-search-expanded-example-primary-nav"
|
|
1562
|
+
aria-label="Global"
|
|
1563
|
+
>
|
|
1564
|
+
<ul class="pf-c-nav__list">
|
|
1565
|
+
<li class="pf-c-nav__item">
|
|
1566
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
1567
|
+
</li>
|
|
1568
|
+
<li class="pf-c-nav__item">
|
|
1569
|
+
<a
|
|
1570
|
+
href="#"
|
|
1571
|
+
class="pf-c-nav__link pf-m-current"
|
|
1572
|
+
aria-current="page"
|
|
1573
|
+
>Policy</a>
|
|
1574
|
+
</li>
|
|
1575
|
+
<li class="pf-c-nav__item">
|
|
1576
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
1577
|
+
</li>
|
|
1578
|
+
<li class="pf-c-nav__item">
|
|
1579
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
1580
|
+
</li>
|
|
1581
|
+
<li class="pf-c-nav__item">
|
|
1582
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
1583
|
+
</li>
|
|
1584
|
+
</ul>
|
|
1585
|
+
</nav>
|
|
1586
|
+
</div>
|
|
1587
|
+
</div>
|
|
1588
|
+
<main
|
|
1589
|
+
class="pf-c-page__main"
|
|
1590
|
+
tabindex="-1"
|
|
1591
|
+
id="main-content-masthead-expandable-search-expanded-example"
|
|
1592
|
+
>
|
|
1593
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1594
|
+
<div class="pf-c-page__main-body">
|
|
1595
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
1596
|
+
<ol class="pf-c-breadcrumb__list">
|
|
1597
|
+
<li class="pf-c-breadcrumb__item">
|
|
1598
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
1599
|
+
</li>
|
|
1600
|
+
<li class="pf-c-breadcrumb__item">
|
|
1601
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1602
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1603
|
+
</span>
|
|
1604
|
+
|
|
1605
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1606
|
+
</li>
|
|
1607
|
+
<li class="pf-c-breadcrumb__item">
|
|
1608
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1609
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1610
|
+
</span>
|
|
1611
|
+
|
|
1612
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1613
|
+
</li>
|
|
1614
|
+
<li class="pf-c-breadcrumb__item">
|
|
1615
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1616
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1617
|
+
</span>
|
|
1618
|
+
|
|
1619
|
+
<a
|
|
1620
|
+
href="#"
|
|
1621
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
1622
|
+
aria-current="page"
|
|
1623
|
+
>Section landing</a>
|
|
1624
|
+
</li>
|
|
1625
|
+
</ol>
|
|
1626
|
+
</nav>
|
|
1627
|
+
</div>
|
|
1628
|
+
</section>
|
|
1629
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
1630
|
+
<div class="pf-c-page__main-body">
|
|
1631
|
+
<div class="pf-c-content">
|
|
1632
|
+
<h1>Main title</h1>
|
|
1633
|
+
<p>This is a full page demo.</p>
|
|
1634
|
+
</div>
|
|
1635
|
+
</div>
|
|
1636
|
+
</section>
|
|
1637
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
1638
|
+
<div class="pf-c-page__main-body">
|
|
1639
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
1640
|
+
<div class="pf-c-card">
|
|
1641
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1642
|
+
</div>
|
|
1643
|
+
<div class="pf-c-card">
|
|
1644
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1645
|
+
</div>
|
|
1646
|
+
<div class="pf-c-card">
|
|
1647
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1648
|
+
</div>
|
|
1649
|
+
<div class="pf-c-card">
|
|
1650
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1651
|
+
</div>
|
|
1652
|
+
<div class="pf-c-card">
|
|
1653
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1654
|
+
</div>
|
|
1655
|
+
<div class="pf-c-card">
|
|
1656
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1657
|
+
</div>
|
|
1658
|
+
<div class="pf-c-card">
|
|
1659
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1660
|
+
</div>
|
|
1661
|
+
<div class="pf-c-card">
|
|
1662
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1663
|
+
</div>
|
|
1664
|
+
<div class="pf-c-card">
|
|
1665
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1666
|
+
</div>
|
|
1667
|
+
<div class="pf-c-card">
|
|
1668
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1669
|
+
</div>
|
|
1670
|
+
</div>
|
|
1671
|
+
</div>
|
|
1672
|
+
</section>
|
|
1673
|
+
</main>
|
|
1674
|
+
</div>
|
|
1675
|
+
|
|
1676
|
+
```
|
|
1677
|
+
|
|
1292
1678
|
### Advanced integration with menu options
|
|
1293
1679
|
|
|
1294
1680
|
```html isFullscreen
|
|
@@ -2048,8 +2434,8 @@ wrapperTag: div
|
|
|
2048
2434
|
<span class="pf-c-dropdown__toggle-image">
|
|
2049
2435
|
<img
|
|
2050
2436
|
class="pf-c-avatar"
|
|
2051
|
-
src="/assets/images/img_avatar.svg"
|
|
2052
2437
|
alt="Avatar image"
|
|
2438
|
+
src="/assets/images/img_avatar-light.svg"
|
|
2053
2439
|
/>
|
|
2054
2440
|
</span>
|
|
2055
2441
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -3006,8 +3392,8 @@ wrapperTag: div
|
|
|
3006
3392
|
<span class="pf-c-dropdown__toggle-image">
|
|
3007
3393
|
<img
|
|
3008
3394
|
class="pf-c-avatar"
|
|
3009
|
-
src="/assets/images/img_avatar.svg"
|
|
3010
3395
|
alt="Avatar image"
|
|
3396
|
+
src="/assets/images/img_avatar-light.svg"
|
|
3011
3397
|
/>
|
|
3012
3398
|
</span>
|
|
3013
3399
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -759,8 +759,8 @@ section: components
|
|
|
759
759
|
<span class="pf-c-dropdown__toggle-image">
|
|
760
760
|
<img
|
|
761
761
|
class="pf-c-avatar"
|
|
762
|
-
src="/assets/images/img_avatar.svg"
|
|
763
762
|
alt="Avatar image"
|
|
763
|
+
src="/assets/images/img_avatar-light.svg"
|
|
764
764
|
/>
|
|
765
765
|
</span>
|
|
766
766
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -1717,8 +1717,8 @@ section: components
|
|
|
1717
1717
|
<span class="pf-c-dropdown__toggle-image">
|
|
1718
1718
|
<img
|
|
1719
1719
|
class="pf-c-avatar"
|
|
1720
|
-
src="/assets/images/img_avatar.svg"
|
|
1721
1720
|
alt="Avatar image"
|
|
1721
|
+
src="/assets/images/img_avatar-light.svg"
|
|
1722
1722
|
/>
|
|
1723
1723
|
</span>
|
|
1724
1724
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -2684,8 +2684,8 @@ section: components
|
|
|
2684
2684
|
<span class="pf-c-dropdown__toggle-image">
|
|
2685
2685
|
<img
|
|
2686
2686
|
class="pf-c-avatar"
|
|
2687
|
-
src="/assets/images/img_avatar.svg"
|
|
2688
2687
|
alt="Avatar image"
|
|
2688
|
+
src="/assets/images/img_avatar-light.svg"
|
|
2689
2689
|
/>
|
|
2690
2690
|
</span>
|
|
2691
2691
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -3641,8 +3641,8 @@ section: components
|
|
|
3641
3641
|
<span class="pf-c-dropdown__toggle-image">
|
|
3642
3642
|
<img
|
|
3643
3643
|
class="pf-c-avatar"
|
|
3644
|
-
src="/assets/images/img_avatar.svg"
|
|
3645
3644
|
alt="Avatar image"
|
|
3645
|
+
src="/assets/images/img_avatar-light.svg"
|
|
3646
3646
|
/>
|
|
3647
3647
|
</span>
|
|
3648
3648
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -4598,8 +4598,8 @@ section: components
|
|
|
4598
4598
|
<span class="pf-c-dropdown__toggle-image">
|
|
4599
4599
|
<img
|
|
4600
4600
|
class="pf-c-avatar"
|
|
4601
|
-
src="/assets/images/img_avatar.svg"
|
|
4602
4601
|
alt="Avatar image"
|
|
4602
|
+
src="/assets/images/img_avatar-light.svg"
|
|
4603
4603
|
/>
|
|
4604
4604
|
</span>
|
|
4605
4605
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -5555,8 +5555,8 @@ section: components
|
|
|
5555
5555
|
<span class="pf-c-dropdown__toggle-image">
|
|
5556
5556
|
<img
|
|
5557
5557
|
class="pf-c-avatar"
|
|
5558
|
-
src="/assets/images/img_avatar.svg"
|
|
5559
5558
|
alt="Avatar image"
|
|
5559
|
+
src="/assets/images/img_avatar-light.svg"
|
|
5560
5560
|
/>
|
|
5561
5561
|
</span>
|
|
5562
5562
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -759,8 +759,8 @@ section: components
|
|
|
759
759
|
<span class="pf-c-dropdown__toggle-image">
|
|
760
760
|
<img
|
|
761
761
|
class="pf-c-avatar"
|
|
762
|
-
src="/assets/images/img_avatar.svg"
|
|
763
762
|
alt="Avatar image"
|
|
763
|
+
src="/assets/images/img_avatar-light.svg"
|
|
764
764
|
/>
|
|
765
765
|
</span>
|
|
766
766
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -1681,8 +1681,8 @@ section: components
|
|
|
1681
1681
|
<span class="pf-c-dropdown__toggle-image">
|
|
1682
1682
|
<img
|
|
1683
1683
|
class="pf-c-avatar"
|
|
1684
|
-
src="/assets/images/img_avatar.svg"
|
|
1685
1684
|
alt="Avatar image"
|
|
1685
|
+
src="/assets/images/img_avatar-light.svg"
|
|
1686
1686
|
/>
|
|
1687
1687
|
</span>
|
|
1688
1688
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -2721,8 +2721,8 @@ section: components
|
|
|
2721
2721
|
<span class="pf-c-dropdown__toggle-image">
|
|
2722
2722
|
<img
|
|
2723
2723
|
class="pf-c-avatar"
|
|
2724
|
-
src="/assets/images/img_avatar.svg"
|
|
2725
2724
|
alt="Avatar image"
|
|
2725
|
+
src="/assets/images/img_avatar-light.svg"
|
|
2726
2726
|
/>
|
|
2727
2727
|
</span>
|
|
2728
2728
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -3612,8 +3612,8 @@ section: components
|
|
|
3612
3612
|
<span class="pf-c-dropdown__toggle-image">
|
|
3613
3613
|
<img
|
|
3614
3614
|
class="pf-c-avatar"
|
|
3615
|
-
src="/assets/images/img_avatar.svg"
|
|
3616
3615
|
alt="Avatar image"
|
|
3616
|
+
src="/assets/images/img_avatar-light.svg"
|
|
3617
3617
|
/>
|
|
3618
3618
|
</span>
|
|
3619
3619
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -4711,8 +4711,8 @@ section: components
|
|
|
4711
4711
|
<span class="pf-c-dropdown__toggle-image">
|
|
4712
4712
|
<img
|
|
4713
4713
|
class="pf-c-avatar"
|
|
4714
|
-
src="/assets/images/img_avatar.svg"
|
|
4715
4714
|
alt="Avatar image"
|
|
4715
|
+
src="/assets/images/img_avatar-light.svg"
|
|
4716
4716
|
/>
|
|
4717
4717
|
</span>
|
|
4718
4718
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -5642,8 +5642,8 @@ section: components
|
|
|
5642
5642
|
<span class="pf-c-dropdown__toggle-image">
|
|
5643
5643
|
<img
|
|
5644
5644
|
class="pf-c-avatar"
|
|
5645
|
-
src="/assets/images/img_avatar.svg"
|
|
5646
5645
|
alt="Avatar image"
|
|
5646
|
+
src="/assets/images/img_avatar-light.svg"
|
|
5647
5647
|
/>
|
|
5648
5648
|
</span>
|
|
5649
5649
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -6686,8 +6686,8 @@ section: components
|
|
|
6686
6686
|
<span class="pf-c-dropdown__toggle-image">
|
|
6687
6687
|
<img
|
|
6688
6688
|
class="pf-c-avatar"
|
|
6689
|
-
src="/assets/images/img_avatar.svg"
|
|
6690
6689
|
alt="Avatar image"
|
|
6690
|
+
src="/assets/images/img_avatar-light.svg"
|
|
6691
6691
|
/>
|
|
6692
6692
|
</span>
|
|
6693
6693
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -7628,8 +7628,8 @@ section: components
|
|
|
7628
7628
|
<span class="pf-c-dropdown__toggle-image">
|
|
7629
7629
|
<img
|
|
7630
7630
|
class="pf-c-avatar"
|
|
7631
|
-
src="/assets/images/img_avatar.svg"
|
|
7632
7631
|
alt="Avatar image"
|
|
7632
|
+
src="/assets/images/img_avatar-light.svg"
|
|
7633
7633
|
/>
|
|
7634
7634
|
</span>
|
|
7635
7635
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|