@patternfly/patternfly 4.176.3 → 4.177.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.
Files changed (49) hide show
  1. package/UPGRADE-GUIDE.md +3 -0
  2. package/components/Avatar/avatar.css +224 -0
  3. package/components/Avatar/avatar.scss +18 -0
  4. package/components/CodeEditor/code-editor.css +8 -0
  5. package/components/CodeEditor/code-editor.scss +11 -1
  6. package/docs/components/Avatar/examples/Avatar.md +53 -5
  7. package/docs/components/Brand/examples/Brand.md +6 -6
  8. package/docs/components/CodeEditor/examples/CodeEditor.md +71 -10
  9. package/docs/components/DataList/examples/DataList.md +11 -11
  10. package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
  11. package/docs/components/Divider/examples/Divider.md +2 -2
  12. package/docs/components/Drawer/examples/Drawer.md +27 -27
  13. package/docs/components/Dropdown/examples/Dropdown.md +2 -2
  14. package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
  15. package/docs/components/LogViewer/examples/LogViewer.md +19 -19
  16. package/docs/components/Masthead/examples/masthead.md +10 -10
  17. package/docs/components/Menu/examples/Menu.md +2 -2
  18. package/docs/components/Page/examples/Page.md +4 -4
  19. package/docs/components/Pagination/examples/Pagination.md +2 -2
  20. package/docs/components/Sidebar/examples/Sidebar.md +14 -14
  21. package/docs/components/Table/examples/Table.md +8 -8
  22. package/docs/components/Tabs/examples/Tabs.md +27 -27
  23. package/docs/components/Toolbar/examples/Toolbar.md +31 -31
  24. package/docs/demos/Alert/examples/Alert.md +358 -52
  25. package/docs/demos/BackToTop/examples/BackToTop.md +304 -5
  26. package/docs/demos/ContextSelector/examples/ContextSelector.md +2199 -45
  27. package/docs/demos/JumpLinks/examples/JumpLinks.md +1221 -80
  28. package/docs/demos/Nav/examples/Nav.md +293 -2
  29. package/docs/demos/Page/examples/Page.md +6098 -161
  30. package/docs/demos/Table/examples/Table.md +21223 -165
  31. package/docs/demos/Tabs/examples/Tabs.md +7304 -697
  32. package/docs/demos/Toolbar/examples/Toolbar.md +1026 -44
  33. package/docs/layouts/Flex/examples/Flex.md +1 -1
  34. package/docs/layouts/Gallery/examples/Gallery.md +2 -2
  35. package/docs/layouts/Grid/examples/Grid.md +9 -9
  36. package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
  37. package/docs/utilities/Alignment/examples/Alignment.md +1 -1
  38. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
  39. package/docs/utilities/Display/examples/Display.md +1 -1
  40. package/docs/utilities/Flex/examples/Flex.md +1 -1
  41. package/docs/utilities/Float/examples/Float.md +1 -1
  42. package/docs/utilities/Sizing/examples/Sizing.md +12 -0
  43. package/docs/utilities/Spacing/examples/Spacing.md +1 -1
  44. package/docs/utilities/Text/examples/Text.md +1 -1
  45. package/package.json +1 -1
  46. package/patternfly-no-reset.css +232 -0
  47. package/patternfly.css +232 -0
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -6416,6 +6416,14 @@ a {
6416
6416
  --pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg);
6417
6417
  --pf-c-avatar--Width: 2.25rem;
6418
6418
  --pf-c-avatar--Height: 2.25rem;
6419
+ --pf-c-avatar--m-sm--Width: 1.5rem;
6420
+ --pf-c-avatar--m-sm--Height: 1.5rem;
6421
+ --pf-c-avatar--m-md--Width: 2.25rem;
6422
+ --pf-c-avatar--m-md--Height: 2.25rem;
6423
+ --pf-c-avatar--m-lg--Width: 4.5rem;
6424
+ --pf-c-avatar--m-lg--Height: 4.5rem;
6425
+ --pf-c-avatar--m-xl--Width: 8rem;
6426
+ --pf-c-avatar--m-xl--Height: 8rem;
6419
6427
  --pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100);
6420
6428
  --pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm);
6421
6429
  --pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700);
@@ -6433,6 +6441,222 @@ a {
6433
6441
  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
6434
6442
  --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-dark--BorderWidth);
6435
6443
  }
6444
+ .pf-c-avatar.pf-m-sm {
6445
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width);
6446
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height);
6447
+ }
6448
+ @media (min-width: 576px) {
6449
+ .pf-c-avatar.pf-m-sm {
6450
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width));
6451
+ }
6452
+ }
6453
+ @media (min-width: 768px) {
6454
+ .pf-c-avatar.pf-m-sm {
6455
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width)));
6456
+ }
6457
+ }
6458
+ @media (min-width: 992px) {
6459
+ .pf-c-avatar.pf-m-sm {
6460
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width))));
6461
+ }
6462
+ }
6463
+ @media (min-width: 1200px) {
6464
+ .pf-c-avatar.pf-m-sm {
6465
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-xl, var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width)))));
6466
+ }
6467
+ }
6468
+ @media (min-width: 1450px) {
6469
+ .pf-c-avatar.pf-m-sm {
6470
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-2xl, var(--pf-c-avatar--m-sm--Width-on-xl, var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width))))));
6471
+ }
6472
+ }
6473
+ @media (min-width: 576px) {
6474
+ .pf-c-avatar.pf-m-sm {
6475
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height));
6476
+ }
6477
+ }
6478
+ @media (min-width: 768px) {
6479
+ .pf-c-avatar.pf-m-sm {
6480
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height)));
6481
+ }
6482
+ }
6483
+ @media (min-width: 992px) {
6484
+ .pf-c-avatar.pf-m-sm {
6485
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height))));
6486
+ }
6487
+ }
6488
+ @media (min-width: 1200px) {
6489
+ .pf-c-avatar.pf-m-sm {
6490
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-xl, var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height)))));
6491
+ }
6492
+ }
6493
+ @media (min-width: 1450px) {
6494
+ .pf-c-avatar.pf-m-sm {
6495
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-2xl, var(--pf-c-avatar--m-sm--Height-on-xl, var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height))))));
6496
+ }
6497
+ }
6498
+ .pf-c-avatar.pf-m-md {
6499
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width);
6500
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height);
6501
+ }
6502
+ @media (min-width: 576px) {
6503
+ .pf-c-avatar.pf-m-md {
6504
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width));
6505
+ }
6506
+ }
6507
+ @media (min-width: 768px) {
6508
+ .pf-c-avatar.pf-m-md {
6509
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width)));
6510
+ }
6511
+ }
6512
+ @media (min-width: 992px) {
6513
+ .pf-c-avatar.pf-m-md {
6514
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width))));
6515
+ }
6516
+ }
6517
+ @media (min-width: 1200px) {
6518
+ .pf-c-avatar.pf-m-md {
6519
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-xl, var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width)))));
6520
+ }
6521
+ }
6522
+ @media (min-width: 1450px) {
6523
+ .pf-c-avatar.pf-m-md {
6524
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-2xl, var(--pf-c-avatar--m-md--Width-on-xl, var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width))))));
6525
+ }
6526
+ }
6527
+ @media (min-width: 576px) {
6528
+ .pf-c-avatar.pf-m-md {
6529
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height));
6530
+ }
6531
+ }
6532
+ @media (min-width: 768px) {
6533
+ .pf-c-avatar.pf-m-md {
6534
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height)));
6535
+ }
6536
+ }
6537
+ @media (min-width: 992px) {
6538
+ .pf-c-avatar.pf-m-md {
6539
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height))));
6540
+ }
6541
+ }
6542
+ @media (min-width: 1200px) {
6543
+ .pf-c-avatar.pf-m-md {
6544
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-xl, var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height)))));
6545
+ }
6546
+ }
6547
+ @media (min-width: 1450px) {
6548
+ .pf-c-avatar.pf-m-md {
6549
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-2xl, var(--pf-c-avatar--m-md--Height-on-xl, var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height))))));
6550
+ }
6551
+ }
6552
+ .pf-c-avatar.pf-m-lg {
6553
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width);
6554
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height);
6555
+ }
6556
+ @media (min-width: 576px) {
6557
+ .pf-c-avatar.pf-m-lg {
6558
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width));
6559
+ }
6560
+ }
6561
+ @media (min-width: 768px) {
6562
+ .pf-c-avatar.pf-m-lg {
6563
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width)));
6564
+ }
6565
+ }
6566
+ @media (min-width: 992px) {
6567
+ .pf-c-avatar.pf-m-lg {
6568
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width))));
6569
+ }
6570
+ }
6571
+ @media (min-width: 1200px) {
6572
+ .pf-c-avatar.pf-m-lg {
6573
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-xl, var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width)))));
6574
+ }
6575
+ }
6576
+ @media (min-width: 1450px) {
6577
+ .pf-c-avatar.pf-m-lg {
6578
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-2xl, var(--pf-c-avatar--m-lg--Width-on-xl, var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width))))));
6579
+ }
6580
+ }
6581
+ @media (min-width: 576px) {
6582
+ .pf-c-avatar.pf-m-lg {
6583
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height));
6584
+ }
6585
+ }
6586
+ @media (min-width: 768px) {
6587
+ .pf-c-avatar.pf-m-lg {
6588
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)));
6589
+ }
6590
+ }
6591
+ @media (min-width: 992px) {
6592
+ .pf-c-avatar.pf-m-lg {
6593
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))));
6594
+ }
6595
+ }
6596
+ @media (min-width: 1200px) {
6597
+ .pf-c-avatar.pf-m-lg {
6598
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)))));
6599
+ }
6600
+ }
6601
+ @media (min-width: 1450px) {
6602
+ .pf-c-avatar.pf-m-lg {
6603
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-2xl, var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))))));
6604
+ }
6605
+ }
6606
+ .pf-c-avatar.pf-m-xl {
6607
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width);
6608
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);
6609
+ }
6610
+ @media (min-width: 576px) {
6611
+ .pf-c-avatar.pf-m-xl {
6612
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width));
6613
+ }
6614
+ }
6615
+ @media (min-width: 768px) {
6616
+ .pf-c-avatar.pf-m-xl {
6617
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)));
6618
+ }
6619
+ }
6620
+ @media (min-width: 992px) {
6621
+ .pf-c-avatar.pf-m-xl {
6622
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))));
6623
+ }
6624
+ }
6625
+ @media (min-width: 1200px) {
6626
+ .pf-c-avatar.pf-m-xl {
6627
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)))));
6628
+ }
6629
+ }
6630
+ @media (min-width: 1450px) {
6631
+ .pf-c-avatar.pf-m-xl {
6632
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-2xl, var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))))));
6633
+ }
6634
+ }
6635
+ @media (min-width: 576px) {
6636
+ .pf-c-avatar.pf-m-xl {
6637
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height));
6638
+ }
6639
+ }
6640
+ @media (min-width: 768px) {
6641
+ .pf-c-avatar.pf-m-xl {
6642
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)));
6643
+ }
6644
+ }
6645
+ @media (min-width: 992px) {
6646
+ .pf-c-avatar.pf-m-xl {
6647
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))));
6648
+ }
6649
+ }
6650
+ @media (min-width: 1200px) {
6651
+ .pf-c-avatar.pf-m-xl {
6652
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)))));
6653
+ }
6654
+ }
6655
+ @media (min-width: 1450px) {
6656
+ .pf-c-avatar.pf-m-xl {
6657
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
6658
+ }
6659
+ }
6436
6660
 
6437
6661
  .pf-c-backdrop {
6438
6662
  --pf-c-backdrop--Position: fixed;
@@ -8159,6 +8383,8 @@ label.pf-c-check, .pf-c-check__label,
8159
8383
  --pf-c-code-editor__code--PaddingLeft: var(--pf-global--spacer--sm);
8160
8384
  --pf-c-code-editor__code-pre--FontSize: var(--pf-global--FontSize--sm);
8161
8385
  --pf-c-code-editor__code-pre--FontFamily: var(--pf-global--FontFamily--monospace);
8386
+ --pf-c-code-editor__header-main--PaddingRight: var(--pf-global--spacer--sm);
8387
+ --pf-c-code-editor__header-main--PaddingLeft: var(--pf-global--spacer--sm);
8162
8388
  --pf-c-code-editor__tab--BackgroundColor: var(--pf-global--BackgroundColor--100);
8163
8389
  --pf-c-code-editor__tab--Color: var(--pf-global--Color--200);
8164
8390
  --pf-c-code-editor__tab--PaddingTop: var(--pf-global--spacer--form-element);
@@ -8207,6 +8433,12 @@ label.pf-c-check, .pf-c-check__label,
8207
8433
  border-bottom-color: var(--pf-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
8208
8434
  }
8209
8435
 
8436
+ .pf-c-code-editor__header-main {
8437
+ flex-grow: 1;
8438
+ padding-right: var(--pf-c-code-editor__header-main--PaddingRight);
8439
+ padding-left: var(--pf-c-code-editor__header-main--PaddingLeft);
8440
+ }
8441
+
8210
8442
  .pf-c-code-editor__main {
8211
8443
  position: relative;
8212
8444
  background-color: var(--pf-c-code-editor__main--BackgroundColor);