@patternfly/react-styles 5.0.0-alpha.2 → 5.0.0-alpha.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/css/components/Accordion/accordion.css +2 -0
  3. package/css/components/AppLauncher/app-launcher.css +2 -0
  4. package/css/components/Breadcrumb/breadcrumb.css +2 -0
  5. package/css/components/Chip/chip.css +33 -24
  6. package/css/components/Chip/chip.d.ts +2 -1
  7. package/css/components/Chip/chip.js +2 -1
  8. package/css/components/Chip/chip.mjs +2 -1
  9. package/css/components/ContextSelector/context-selector.css +5 -1
  10. package/css/components/DataList/data-list.css +2 -1
  11. package/css/components/Drawer/drawer.css +13 -13
  12. package/css/components/Dropdown/dropdown.css +12 -10
  13. package/css/components/ExpandableSection/expandable-section.css +2 -0
  14. package/css/components/Label/label.css +37 -24
  15. package/css/components/Label/label.d.ts +1 -0
  16. package/css/components/Label/label.js +1 -0
  17. package/css/components/Label/label.mjs +1 -0
  18. package/css/components/Login/login.css +1 -1
  19. package/css/components/Menu/menu.css +3 -0
  20. package/css/components/MenuToggle/menu-toggle.css +2 -0
  21. package/css/components/ModalBox/modal-box.css +9 -8
  22. package/css/components/ModalBox/modal-box.d.ts +1 -0
  23. package/css/components/ModalBox/modal-box.js +1 -0
  24. package/css/components/ModalBox/modal-box.mjs +1 -0
  25. package/css/components/Page/page.css +60 -60
  26. package/css/components/Pagination/pagination.css +2 -2
  27. package/css/components/Popover/popover.css +21 -24
  28. package/css/components/Popover/popover.d.ts +4 -5
  29. package/css/components/Popover/popover.js +4 -5
  30. package/css/components/Popover/popover.mjs +4 -5
  31. package/css/components/Progress/progress.css +5 -2
  32. package/css/components/SearchInput/search-input.css +2 -0
  33. package/css/components/Table/table-grid.css +28 -28
  34. package/css/components/Table/table-tree-view.css +14 -4
  35. package/css/components/Table/table-tree-view.d.ts +1 -0
  36. package/css/components/Table/table-tree-view.js +1 -0
  37. package/css/components/Table/table-tree-view.mjs +1 -0
  38. package/css/components/Table/table.css +4 -0
  39. package/css/components/TextInputGroup/text-input-group.css +4 -2
  40. package/css/components/Toolbar/toolbar.css +35 -35
  41. package/css/components/TreeView/tree-view.css +7 -15
  42. package/css/components/Wizard/wizard.css +2 -0
  43. package/css/docs/components/ContextSelector/examples/context-selector.css +5 -1
  44. package/css/docs/components/Dropdown/examples/Dropdown.css +5 -2
  45. package/css/layouts/Grid/grid.css +5 -5
  46. package/package.json +3 -3
@@ -12,10 +12,20 @@
12
12
  --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
13
13
  --pf-c-table--m-tree-view__toggle--TranslateX: -100%;
14
14
  --pf-c-table--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-global--FontSize--md);
15
+ --pf-c-table--m-no-inset__tree-view-main--PaddingLeft: 0;
16
+ --pf-c-table--m-no-inset__tree-view-main--MarginLeft: 0;
15
17
  }
16
18
  .pf-c-table.pf-m-tree-view > tbody > tr {
17
19
  --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
18
20
  }
21
+ .pf-c-table.pf-m-tree-view > tbody > tr.pf-m-no-inset {
22
+ --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
23
+ --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
24
+ }
25
+ .pf-c-table.pf-m-tree-view.pf-m-no-inset {
26
+ --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
27
+ --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
28
+ }
19
29
  .pf-c-table.pf-m-tree-view tr[aria-level="2"] {
20
30
  --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
21
31
  }
@@ -311,7 +321,7 @@
311
321
  display: block;
312
322
  }
313
323
  .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-details-toggle,
314
- .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
324
+ .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
315
325
  display: inline-block;
316
326
  }
317
327
  .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
@@ -452,7 +462,7 @@
452
462
  display: block;
453
463
  }
454
464
  .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-details-toggle,
455
- .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
465
+ .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
456
466
  display: inline-block;
457
467
  }
458
468
  .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
@@ -593,7 +603,7 @@
593
603
  display: block;
594
604
  }
595
605
  .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-details-toggle,
596
- .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
606
+ .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
597
607
  display: inline-block;
598
608
  }
599
609
  .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
@@ -734,7 +744,7 @@
734
744
  display: block;
735
745
  }
736
746
  .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-details-toggle,
737
- .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
747
+ .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
738
748
  display: inline-block;
739
749
  }
740
750
  .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
@@ -3,6 +3,7 @@ declare const _default: {
3
3
  "dropdown": "pf-c-dropdown",
4
4
  "modifiers": {
5
5
  "treeView": "pf-m-tree-view",
6
+ "noInset": "pf-m-no-inset",
6
7
  "treeViewGrid": "pf-m-tree-view-grid",
7
8
  "treeViewDetailsExpanded": "pf-m-tree-view-details-expanded",
8
9
  "treeViewGridMd": "pf-m-tree-view-grid-md",
@@ -5,6 +5,7 @@ exports.default = {
5
5
  "dropdown": "pf-c-dropdown",
6
6
  "modifiers": {
7
7
  "treeView": "pf-m-tree-view",
8
+ "noInset": "pf-m-no-inset",
8
9
  "treeViewGrid": "pf-m-tree-view-grid",
9
10
  "treeViewDetailsExpanded": "pf-m-tree-view-details-expanded",
10
11
  "treeViewGridMd": "pf-m-tree-view-grid-md",
@@ -3,6 +3,7 @@ export default {
3
3
  "dropdown": "pf-c-dropdown",
4
4
  "modifiers": {
5
5
  "treeView": "pf-m-tree-view",
6
+ "noInset": "pf-m-no-inset",
6
7
  "treeViewGrid": "pf-m-tree-view-grid",
7
8
  "treeViewDetailsExpanded": "pf-m-tree-view-details-expanded",
8
9
  "treeViewGridMd": "pf-m-tree-view-grid-md",
@@ -768,6 +768,10 @@
768
768
  vertical-align: middle;
769
769
  }
770
770
 
771
+ .pf-c-table__action {
772
+ text-align: right;
773
+ }
774
+
771
775
  .pf-c-table__inline-edit-action {
772
776
  --pf-c-table--cell--PaddingLeft: 0;
773
777
  --pf-c-table--cell--PaddingRight: 0;
@@ -20,7 +20,8 @@
20
20
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
21
21
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
22
22
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
23
- --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
23
+ --pf-c-text-input-group__text-input--placeholder--Color: var(--pf-global--Color--dark-200);
24
+ --pf-c-text-input-group__text-input--BackgroundColor: transparent;
24
25
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
25
26
  --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
26
27
  --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -120,6 +121,7 @@
120
121
  width: 100%;
121
122
  min-width: var(--pf-c-text-input-group__text-input--MinWidth);
122
123
  padding: var(--pf-c-text-input-group__text-input--PaddingTop) var(--pf-c-text-input-group__text-input--PaddingRight) var(--pf-c-text-input-group__text-input--PaddingBottom) var(--pf-c-text-input-group__text-input--PaddingLeft);
124
+ background-color: var(--pf-c-text-input-group__text-input--BackgroundColor);
123
125
  border: 0;
124
126
  }
125
127
  .pf-c-text-input-group__text-input, .pf-c-text-input-group__text-input.pf-m-hint {
@@ -129,7 +131,7 @@
129
131
  color: var(--pf-c-text-input-group__text-input--m-hint--Color);
130
132
  }
131
133
  .pf-c-text-input-group__text-input::placeholder {
132
- color: var(--pf-c-text-input-group--placeholder--Color);
134
+ color: var(--pf-c-text-input-group__text-input--placeholder--Color);
133
135
  }
134
136
 
135
137
  .pf-c-text-input-group__utilities {
@@ -457,7 +457,7 @@
457
457
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
458
458
  }
459
459
  .pf-m-toggle-group.pf-m-show-on-sm .pf-c-toolbar__group,
460
- .pf-m-toggle-group.pf-m-show-on-sm .pf-c-toolbar__item {
460
+ .pf-m-toggle-group.pf-m-show-on-sm .pf-c-toolbar__item {
461
461
  display: flex;
462
462
  flex: 0 1 auto;
463
463
  }
@@ -470,7 +470,7 @@
470
470
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
471
471
  }
472
472
  .pf-m-toggle-group.pf-m-show-on-md .pf-c-toolbar__group,
473
- .pf-m-toggle-group.pf-m-show-on-md .pf-c-toolbar__item {
473
+ .pf-m-toggle-group.pf-m-show-on-md .pf-c-toolbar__item {
474
474
  display: flex;
475
475
  flex: 0 1 auto;
476
476
  }
@@ -483,7 +483,7 @@
483
483
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
484
484
  }
485
485
  .pf-m-toggle-group.pf-m-show-on-lg .pf-c-toolbar__group,
486
- .pf-m-toggle-group.pf-m-show-on-lg .pf-c-toolbar__item {
486
+ .pf-m-toggle-group.pf-m-show-on-lg .pf-c-toolbar__item {
487
487
  display: flex;
488
488
  flex: 0 1 auto;
489
489
  }
@@ -496,7 +496,7 @@
496
496
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
497
497
  }
498
498
  .pf-m-toggle-group.pf-m-show-on-xl .pf-c-toolbar__group,
499
- .pf-m-toggle-group.pf-m-show-on-xl .pf-c-toolbar__item {
499
+ .pf-m-toggle-group.pf-m-show-on-xl .pf-c-toolbar__item {
500
500
  display: flex;
501
501
  flex: 0 1 auto;
502
502
  }
@@ -509,7 +509,7 @@
509
509
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
510
510
  }
511
511
  .pf-m-toggle-group.pf-m-show-on-2xl .pf-c-toolbar__group,
512
- .pf-m-toggle-group.pf-m-show-on-2xl .pf-c-toolbar__item {
512
+ .pf-m-toggle-group.pf-m-show-on-2xl .pf-c-toolbar__item {
513
513
  display: flex;
514
514
  flex: 0 1 auto;
515
515
  }
@@ -543,131 +543,131 @@
543
543
  }
544
544
  @media (min-width: 576px) {
545
545
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-sm,
546
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-sm {
546
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-sm {
547
547
  margin-left: auto;
548
548
  }
549
549
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-sm ~ .pf-m-pagination,
550
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-sm ~ .pf-m-pagination {
550
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-sm ~ .pf-m-pagination {
551
551
  margin-left: 0;
552
552
  }
553
553
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-sm,
554
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-sm {
554
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-sm {
555
555
  margin-left: 0;
556
556
  }
557
557
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-sm ~ .pf-m-pagination,
558
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-sm ~ .pf-m-pagination {
558
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-sm ~ .pf-m-pagination {
559
559
  margin-left: auto;
560
560
  }
561
561
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-sm,
562
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-sm {
562
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-sm {
563
563
  flex-wrap: nowrap;
564
564
  }
565
565
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-sm,
566
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-sm {
566
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-sm {
567
567
  flex-wrap: wrap;
568
568
  }
569
569
  }
570
570
  @media (min-width: 768px) {
571
571
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-md,
572
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-md {
572
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-md {
573
573
  margin-left: auto;
574
574
  }
575
575
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-md ~ .pf-m-pagination,
576
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-md ~ .pf-m-pagination {
576
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-md ~ .pf-m-pagination {
577
577
  margin-left: 0;
578
578
  }
579
579
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-md,
580
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-md {
580
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-md {
581
581
  margin-left: 0;
582
582
  }
583
583
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-md ~ .pf-m-pagination,
584
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-md ~ .pf-m-pagination {
584
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-md ~ .pf-m-pagination {
585
585
  margin-left: auto;
586
586
  }
587
587
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-md,
588
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-md {
588
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-md {
589
589
  flex-wrap: nowrap;
590
590
  }
591
591
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-md,
592
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-md {
592
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-md {
593
593
  flex-wrap: wrap;
594
594
  }
595
595
  }
596
596
  @media (min-width: 992px) {
597
597
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-lg,
598
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-lg {
598
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-lg {
599
599
  margin-left: auto;
600
600
  }
601
601
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-lg ~ .pf-m-pagination,
602
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-lg ~ .pf-m-pagination {
602
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-lg ~ .pf-m-pagination {
603
603
  margin-left: 0;
604
604
  }
605
605
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-lg,
606
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-lg {
606
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-lg {
607
607
  margin-left: 0;
608
608
  }
609
609
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-lg ~ .pf-m-pagination,
610
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-lg ~ .pf-m-pagination {
610
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-lg ~ .pf-m-pagination {
611
611
  margin-left: auto;
612
612
  }
613
613
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-lg,
614
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-lg {
614
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-lg {
615
615
  flex-wrap: nowrap;
616
616
  }
617
617
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-lg,
618
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-lg {
618
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-lg {
619
619
  flex-wrap: wrap;
620
620
  }
621
621
  }
622
622
  @media (min-width: 1200px) {
623
623
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-xl,
624
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-xl {
624
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-xl {
625
625
  margin-left: auto;
626
626
  }
627
627
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-xl ~ .pf-m-pagination,
628
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-xl ~ .pf-m-pagination {
628
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-xl ~ .pf-m-pagination {
629
629
  margin-left: 0;
630
630
  }
631
631
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-xl,
632
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-xl {
632
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-xl {
633
633
  margin-left: 0;
634
634
  }
635
635
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-xl ~ .pf-m-pagination,
636
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-xl ~ .pf-m-pagination {
636
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-xl ~ .pf-m-pagination {
637
637
  margin-left: auto;
638
638
  }
639
639
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-xl,
640
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-xl {
640
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-xl {
641
641
  flex-wrap: nowrap;
642
642
  }
643
643
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-xl,
644
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-xl {
644
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-xl {
645
645
  flex-wrap: wrap;
646
646
  }
647
647
  }
648
648
  @media (min-width: 1450px) {
649
649
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-2xl,
650
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-2xl {
650
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-2xl {
651
651
  margin-left: auto;
652
652
  }
653
653
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-2xl ~ .pf-m-pagination,
654
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-2xl ~ .pf-m-pagination {
654
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-2xl ~ .pf-m-pagination {
655
655
  margin-left: 0;
656
656
  }
657
657
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-2xl,
658
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-2xl {
658
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-2xl {
659
659
  margin-left: 0;
660
660
  }
661
661
  .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-2xl ~ .pf-m-pagination,
662
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-2xl ~ .pf-m-pagination {
662
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-2xl ~ .pf-m-pagination {
663
663
  margin-left: auto;
664
664
  }
665
665
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-2xl,
666
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-2xl {
666
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-2xl {
667
667
  flex-wrap: nowrap;
668
668
  }
669
669
  .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-2xl,
670
- .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-2xl {
670
+ .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-2xl {
671
671
  flex-wrap: wrap;
672
672
  }
673
673
  }
@@ -11,11 +11,12 @@
11
11
  --pf-c-tree-view__node--Color: var(--pf-global--Color--100);
12
12
  --pf-c-tree-view__node--m-current--Color: var(--pf-global--link--Color);
13
13
  --pf-c-tree-view__node--m-current--FontWeight: var(--pf-global--FontWeight--bold);
14
+ --pf-c-tree-view__node--BackgroundColor: transparent;
14
15
  --pf-c-tree-view__node-container--Display: contents;
15
16
  --pf-c-tree-view__node-content--RowGap: var(--pf-global--spacer--sm);
16
17
  --pf-c-tree-view__node-content--Overflow: visible;
17
18
  --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
18
- --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--palette--black-200);
19
+ --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
19
20
  --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view__node--PaddingTop--base);
20
21
  --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
21
22
  --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -25,6 +26,7 @@
25
26
  --pf-c-tree-view__node-toggle--hover--Color: var(--pf-global--Color--100);
26
27
  --pf-c-tree-view__node-toggle--focus--Color: var(--pf-global--Color--100);
27
28
  --pf-c-tree-view__node-toggle--active--Color: var(--pf-global--Color--100);
29
+ --pf-c-tree-view__node-toggle--BackgroundColor: transparent;
28
30
  --pf-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-global--Color--100);
29
31
  --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
30
32
  --pf-c-tree-view__node-toggle-icon--Transition: transform var(--pf-global--TransitionDuration) var(--pf-global--TimingFunction);
@@ -49,10 +51,6 @@
49
51
  --pf-c-tree-view__node-text--max-lines: 1;
50
52
  --pf-c-tree-view__node-title--FontWeight: var(--pf-global--FontWeight--bold);
51
53
  --pf-c-tree-view__action--MarginLeft: var(--pf-global--spacer--md);
52
- --pf-c-tree-view__action--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
53
- --pf-c-tree-view__action--Color: var(--pf-global--icon--Color--light);
54
- --pf-c-tree-view__action--hover--Color: var(--pf-global--icon--Color--dark);
55
- --pf-c-tree-view__action--focus--Color: var(--pf-global--icon--Color--dark);
56
54
  --pf-c-tree-view--m-guides--guide--Left: var(--pf-c-tree-view--m-guides--guide-left--base);
57
55
  --pf-c-tree-view--m-guides--guide-color--base: var(--pf-global--BorderColor--100);
58
56
  --pf-c-tree-view--m-guides--guide-width--base: var(--pf-global--BorderWidth--sm);
@@ -250,13 +248,14 @@
250
248
  display: flex;
251
249
  padding: var(--pf-c-tree-view__node--PaddingTop) var(--pf-c-tree-view__node--PaddingRight) var(--pf-c-tree-view__node--PaddingBottom) var(--pf-c-tree-view__node--PaddingLeft);
252
250
  color: var(--pf-c-tree-view__node--Color);
251
+ background-color: var(--pf-c-tree-view__node--BackgroundColor);
253
252
  }
254
253
  .pf-c-tree-view__node.pf-m-current {
255
254
  --pf-c-tree-view__node--Color: var(--pf-c-tree-view__node--m-current--Color);
256
255
  font-weight: var(--pf-c-tree-view__node--m-current--FontWeight);
257
256
  }
258
257
  .pf-c-tree-view__node:focus {
259
- background-color: var(--pf-c-tree-view__node--focus--BackgroundColor);
258
+ --pf-c-tree-view__node--BackgroundColor: var(--pf-c-tree-view__node--focus--BackgroundColor);
260
259
  }
261
260
  .pf-c-tree-view__node .pf-c-tree-view__node-count {
262
261
  margin-left: var(--pf-c-tree-view__node-count--MarginLeft);
@@ -303,6 +302,7 @@
303
302
  margin-top: var(--pf-c-tree-view__node-toggle-button--MarginTop);
304
303
  margin-bottom: var(--pf-c-tree-view__node-toggle-button--MarginBottom);
305
304
  color: var(--pf-c-tree-view__node-toggle--Color);
305
+ background-color: var(--pf-c-tree-view__node-toggle--BackgroundColor);
306
306
  border: 0;
307
307
  transform: translateX(var(--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX));
308
308
  }
@@ -326,6 +326,7 @@
326
326
  font-weight: inherit;
327
327
  color: inherit;
328
328
  text-align: left;
329
+ background-color: transparent;
329
330
  border: 0;
330
331
  }
331
332
  label.pf-c-tree-view__node-text {
@@ -357,15 +358,6 @@ label.pf-c-tree-view__node-text {
357
358
 
358
359
  .pf-c-tree-view__action {
359
360
  margin-left: var(--pf-c-tree-view__action--MarginLeft);
360
- color: var(--pf-c-tree-view__action--Color);
361
- border: 0;
362
- }
363
- .pf-c-tree-view__action:hover {
364
- --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--hover--Color);
365
- }
366
- .pf-c-tree-view__action:focus {
367
- --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--focus--Color);
368
- background-color: var(--pf-c-tree-view__action--focus--BackgroundColor);
369
361
  }
370
362
 
371
363
  .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
@@ -50,6 +50,7 @@
50
50
  --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
51
51
  --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
52
52
  --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
53
+ --pf-c-wizard__nav-link--BackgroundColor: transparent;
53
54
  --pf-c-wizard__nav-link--TextDecoration: var(--pf-global--link--TextDecoration);
54
55
  --pf-c-wizard__nav-link--hover--Color: var(--pf-global--link--Color);
55
56
  --pf-c-wizard__nav-link--focus--Color: var(--pf-global--link--Color);
@@ -399,6 +400,7 @@
399
400
  text-align: left;
400
401
  text-decoration: var(--pf-c-wizard__nav-link--TextDecoration);
401
402
  word-break: break-word;
403
+ background-color: var(--pf-c-wizard__nav-link--BackgroundColor);
402
404
  border: 0;
403
405
  }
404
406
  .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link::before {
@@ -1,3 +1,7 @@
1
- #ws-core-c-context-selector-basic, #ws-core-c-context-selector-with-footer, #ws-core-c-context-selector-plain-with-text {
1
+ #ws-core-c-context-selector-basic, #ws-core-c-context-selector-plain-with-text {
2
2
  min-height: 380px;
3
3
  }
4
+
5
+ #ws-core-c-context-selector-with-footer {
6
+ min-height: 420px;
7
+ }
@@ -31,11 +31,14 @@
31
31
  }
32
32
 
33
33
  #ws-core-c-dropdown-with-groups,
34
- #ws-core-c-dropdown-with-groups-and-dividers-between-groups,
35
- #ws-core-c-dropdown-with-groups-and-dividers-between-items {
34
+ #ws-core-c-dropdown-with-groups-and-dividers-between-groups {
36
35
  min-height: 440px;
37
36
  }
38
37
 
38
+ #ws-core-c-dropdown-with-groups-and-dividers-between-items {
39
+ min-height: 460px;
40
+ }
41
+
39
42
  #ws-core-c-dropdown-dropdown-with-image-and-text .ws-preview-html {
40
43
  min-height: 19rem;
41
44
  }
@@ -16,31 +16,31 @@
16
16
  }
17
17
  @media (min-width: 576px) {
18
18
  .pf-l-grid > *,
19
- .pf-l-grid .pf-l-grid__item {
19
+ .pf-l-grid .pf-l-grid__item {
20
20
  order: var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order));
21
21
  }
22
22
  }
23
23
  @media (min-width: 768px) {
24
24
  .pf-l-grid > *,
25
- .pf-l-grid .pf-l-grid__item {
25
+ .pf-l-grid .pf-l-grid__item {
26
26
  order: var(--pf-l-grid--item--Order-on-md, var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order)));
27
27
  }
28
28
  }
29
29
  @media (min-width: 992px) {
30
30
  .pf-l-grid > *,
31
- .pf-l-grid .pf-l-grid__item {
31
+ .pf-l-grid .pf-l-grid__item {
32
32
  order: var(--pf-l-grid--item--Order-on-lg, var(--pf-l-grid--item--Order-on-md, var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order))));
33
33
  }
34
34
  }
35
35
  @media (min-width: 1200px) {
36
36
  .pf-l-grid > *,
37
- .pf-l-grid .pf-l-grid__item {
37
+ .pf-l-grid .pf-l-grid__item {
38
38
  order: var(--pf-l-grid--item--Order-on-xl, var(--pf-l-grid--item--Order-on-lg, var(--pf-l-grid--item--Order-on-md, var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order)))));
39
39
  }
40
40
  }
41
41
  @media (min-width: 1450px) {
42
42
  .pf-l-grid > *,
43
- .pf-l-grid .pf-l-grid__item {
43
+ .pf-l-grid .pf-l-grid__item {
44
44
  order: var(--pf-l-grid--item--Order-on-2xl, var(--pf-l-grid--item--Order-on-xl, var(--pf-l-grid--item--Order-on-lg, var(--pf-l-grid--item--Order-on-md, var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order))))));
45
45
  }
46
46
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "5.0.0-alpha.2",
3
+ "version": "5.0.0-alpha.4",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "5.0.0-alpha.12",
22
+ "@patternfly/patternfly": "5.0.0-alpha.24",
23
23
  "camel-case": "^3.0.0",
24
24
  "css": "^2.2.3",
25
25
  "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
29
29
  "typescript": "^4.7.4"
30
30
  },
31
31
  "license": "MIT",
32
- "gitHead": "dd91c73c726d471205cc7ce2cf463fa8c1a6e593"
32
+ "gitHead": "1686e14afb758f8ce45881ca0cdab6bc0ea1c403"
33
33
  }