@patternfly/patternfly 4.222.4 → 5.0.0-alpha.2

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 (172) hide show
  1. package/README.md +3 -3
  2. package/RELEASE-NOTES.md +0 -30
  3. package/base/_fonts.scss +0 -188
  4. package/base/_globals.scss +0 -6
  5. package/base/_icons.scss +28 -0
  6. package/base/_variables.scss +0 -14
  7. package/base/patternfly-fonts.css +0 -120
  8. package/base/patternfly-globals.css +0 -4
  9. package/base/patternfly-icons.scss +0 -28
  10. package/base/patternfly-variables.css +6 -19
  11. package/components/AboutModalBox/about-modal-box.css +1 -28
  12. package/components/AboutModalBox/about-modal-box.scss +1 -27
  13. package/components/Accordion/accordion.css +64 -62
  14. package/components/Accordion/accordion.scss +62 -64
  15. package/components/Alert/alert.css +0 -4
  16. package/components/Alert/alert.scss +0 -7
  17. package/components/Banner/banner.css +1 -1
  18. package/components/Banner/banner.scss +1 -1
  19. package/components/Breadcrumb/breadcrumb.css +0 -6
  20. package/components/Breadcrumb/breadcrumb.scss +0 -9
  21. package/components/Button/button.css +0 -4
  22. package/components/Button/button.scss +0 -7
  23. package/components/Card/card.css +0 -4
  24. package/components/Card/card.scss +0 -7
  25. package/components/Check/check.css +4 -2
  26. package/components/Check/check.scss +2 -2
  27. package/components/Content/content.css +1 -11
  28. package/components/Content/content.scss +1 -15
  29. package/components/DataList/data-list.css +0 -15
  30. package/components/Divider/divider.css +0 -16
  31. package/components/Divider/divider.scss +0 -1
  32. package/components/Drawer/drawer.css +0 -14
  33. package/components/Drawer/drawer.scss +0 -5
  34. package/components/Dropdown/dropdown.css +0 -15
  35. package/components/Dropdown/dropdown.scss +0 -20
  36. package/components/EmptyState/empty-state.css +0 -4
  37. package/components/EmptyState/empty-state.scss +0 -9
  38. package/components/ExpandableSection/expandable-section.css +0 -4
  39. package/components/ExpandableSection/expandable-section.scss +0 -7
  40. package/components/Form/form.css +0 -1
  41. package/components/Form/form.scss +0 -1
  42. package/components/FormControl/form-control.css +1 -1
  43. package/components/FormControl/themes/dark/form-control.scss +1 -1
  44. package/components/InlineEdit/inline-edit.css +1 -12
  45. package/components/InlineEdit/inline-edit.scss +1 -10
  46. package/components/InputGroup/input-group.css +0 -14
  47. package/components/InputGroup/input-group.scss +0 -9
  48. package/components/InputGroup/themes/dark/input-group.scss +0 -8
  49. package/components/JumpLinks/jump-links.css +0 -43
  50. package/components/JumpLinks/jump-links.scss +0 -13
  51. package/components/Label/label.css +0 -3
  52. package/components/Label/label.scss +0 -4
  53. package/components/Menu/menu.css +0 -20
  54. package/components/Menu/menu.scss +0 -6
  55. package/components/NotificationDrawer/notification-drawer.css +1 -0
  56. package/components/NotificationDrawer/notification-drawer.scss +1 -0
  57. package/components/Page/page.css +0 -15
  58. package/components/Pagination/pagination.css +0 -175
  59. package/components/Pagination/pagination.scss +1 -49
  60. package/components/Progress/progress.css +0 -1
  61. package/components/Progress/progress.scss +0 -1
  62. package/components/Radio/radio.css +4 -2
  63. package/components/Radio/radio.scss +2 -2
  64. package/components/SimpleList/simple-list.css +1 -1
  65. package/components/SimpleList/simple-list.scss +1 -1
  66. package/components/SkipToContent/skip-to-content.css +1 -1
  67. package/components/SkipToContent/skip-to-content.scss +1 -1
  68. package/components/Slider/slider.css +7 -0
  69. package/components/Slider/slider.scss +9 -0
  70. package/components/Switch/switch.css +0 -1
  71. package/components/Switch/switch.scss +0 -1
  72. package/components/Table/table-grid.css +0 -10
  73. package/components/Table/table-grid.scss +0 -2
  74. package/components/Table/table-tree-view.css +0 -16
  75. package/components/Table/table-tree-view.scss +0 -4
  76. package/components/Table/table.css +0 -16
  77. package/components/Table/table.scss +0 -1
  78. package/components/Tabs/tabs.css +1 -34
  79. package/components/Tabs/tabs.scss +0 -15
  80. package/components/Title/title.css +0 -5
  81. package/components/Title/title.scss +0 -8
  82. package/components/Toolbar/toolbar.css +0 -31
  83. package/components/Toolbar/toolbar.scss +0 -6
  84. package/components/Wizard/wizard.css +0 -9
  85. package/components/Wizard/wizard.scss +0 -9
  86. package/docs/components/AboutModalBox/examples/AboutModalBox.md +4 -15
  87. package/docs/components/Accordion/examples/Accordion.md +67 -67
  88. package/docs/components/Dropdown/examples/Dropdown.md +0 -216
  89. package/docs/components/InputGroup/examples/InputGroup.md +0 -1
  90. package/docs/components/Pagination/examples/Pagination.md +30 -129
  91. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -5
  92. package/docs/components/Slider/examples/Slider.md +6 -6
  93. package/docs/components/Tabs/examples/Tabs.md +1 -2
  94. package/docs/components/Wizard/examples/Wizard.md +6 -6
  95. package/docs/demos/AboutModal/examples/AboutModal.md +53 -49
  96. package/docs/demos/Alert/examples/Alert.md +18 -12
  97. package/docs/demos/BackToTop/examples/BackToTop.md +6 -4
  98. package/docs/demos/Banner/examples/Banner.md +14 -10
  99. package/docs/demos/Card/examples/Card.md +4 -4
  100. package/docs/demos/CardView/examples/CardView.md +6 -4
  101. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -16
  102. package/docs/demos/Dashboard/examples/Dashboard.md +7 -4
  103. package/docs/demos/DataList/examples/DataList.md +24 -16
  104. package/docs/demos/DescriptionList/examples/DescriptionList.md +18 -12
  105. package/docs/demos/Drawer/examples/Drawer.md +30 -20
  106. package/docs/demos/JumpLinks/examples/JumpLinks.md +36 -24
  107. package/docs/demos/Masthead/examples/Masthead.md +54 -36
  108. package/docs/demos/Modal/examples/Modal.md +36 -24
  109. package/docs/demos/Nav/examples/Nav.md +784 -721
  110. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -20
  111. package/docs/demos/Page/examples/Page.md +54 -36
  112. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +44 -28
  113. package/docs/demos/Skeleton/examples/Skeleton.md +6 -4
  114. package/docs/demos/Table/examples/Table.md +84 -56
  115. package/docs/demos/Tabs/examples/Tabs.md +579 -70
  116. package/docs/demos/Toolbar/examples/Toolbar.md +6 -4
  117. package/docs/demos/Wizard/examples/Wizard.md +67 -45
  118. package/package.json +7 -6
  119. package/patternfly-base-no-reset.css +30 -139
  120. package/patternfly-base.css +30 -143
  121. package/patternfly-charts.css +1 -1
  122. package/patternfly-no-reset.css +118 -665
  123. package/patternfly.css +118 -669
  124. package/patternfly.min.css +1 -1
  125. package/patternfly.min.css.map +1 -1
  126. package/sass-utilities/mixins.scss +0 -6
  127. package/sass-utilities/placeholders.scss +0 -7
  128. package/sass-utilities/scss-variables.scss +6 -12
  129. package/assets/fonts/overpass-mono-webfont/example.html +0 -15
  130. package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff +0 -0
  131. package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff2 +0 -0
  132. package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff +0 -0
  133. package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff2 +0 -0
  134. package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff +0 -0
  135. package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff2 +0 -0
  136. package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff +0 -0
  137. package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2 +0 -0
  138. package/assets/fonts/overpass-mono-webfont/overpass-mono.css +0 -39
  139. package/assets/fonts/overpass-webfont/example.html +0 -18
  140. package/assets/fonts/overpass-webfont/overpass-bold-italic.woff +0 -0
  141. package/assets/fonts/overpass-webfont/overpass-bold-italic.woff2 +0 -0
  142. package/assets/fonts/overpass-webfont/overpass-bold.woff +0 -0
  143. package/assets/fonts/overpass-webfont/overpass-bold.woff2 +0 -0
  144. package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff +0 -0
  145. package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff2 +0 -0
  146. package/assets/fonts/overpass-webfont/overpass-extrabold.woff +0 -0
  147. package/assets/fonts/overpass-webfont/overpass-extrabold.woff2 +0 -0
  148. package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff +0 -0
  149. package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff2 +0 -0
  150. package/assets/fonts/overpass-webfont/overpass-extralight.woff +0 -0
  151. package/assets/fonts/overpass-webfont/overpass-extralight.woff2 +0 -0
  152. package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff +0 -0
  153. package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff2 +0 -0
  154. package/assets/fonts/overpass-webfont/overpass-heavy.woff +0 -0
  155. package/assets/fonts/overpass-webfont/overpass-heavy.woff2 +0 -0
  156. package/assets/fonts/overpass-webfont/overpass-italic.woff +0 -0
  157. package/assets/fonts/overpass-webfont/overpass-italic.woff2 +0 -0
  158. package/assets/fonts/overpass-webfont/overpass-light-italic.woff +0 -0
  159. package/assets/fonts/overpass-webfont/overpass-light-italic.woff2 +0 -0
  160. package/assets/fonts/overpass-webfont/overpass-light.woff +0 -0
  161. package/assets/fonts/overpass-webfont/overpass-light.woff2 +0 -0
  162. package/assets/fonts/overpass-webfont/overpass-regular.woff +0 -0
  163. package/assets/fonts/overpass-webfont/overpass-regular.woff2 +0 -0
  164. package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff +0 -0
  165. package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff2 +0 -0
  166. package/assets/fonts/overpass-webfont/overpass-semibold.woff +0 -0
  167. package/assets/fonts/overpass-webfont/overpass-semibold.woff2 +0 -0
  168. package/assets/fonts/overpass-webfont/overpass-thin-italic.woff +0 -0
  169. package/assets/fonts/overpass-webfont/overpass-thin-italic.woff2 +0 -0
  170. package/assets/fonts/overpass-webfont/overpass-thin.woff +0 -0
  171. package/assets/fonts/overpass-webfont/overpass-thin.woff2 +0 -0
  172. package/assets/fonts/overpass-webfont/overpass.css +0 -141
@@ -13,7 +13,7 @@
13
13
  --pf-c-inline-edit__group--m-footer--MarginTop: var(--pf-global--spacer--xl);
14
14
 
15
15
  // Label
16
- --pf-c-inline-edit__label--m-bold--FontWeight: var(--pf-global--FontWeight--semi-bold);
16
+ --pf-c-inline-edit__label--m-bold--FontWeight: var(--pf-global--FontWeight--bold);
17
17
  }
18
18
 
19
19
  // Group
@@ -65,25 +65,17 @@
65
65
  .pf-c-inline-edit__action,
66
66
  .pf-c-inline-edit__group.pf-m-action-group {
67
67
  display: none;
68
- visibility: hidden;
69
68
  }
70
69
 
71
70
  // Enable groups
72
71
  .pf-c-inline-edit__action.pf-m-enable-editable {
73
72
  display: inline-block;
74
- visibility: visible;
75
73
  }
76
74
 
77
75
  // Editable
78
76
  .pf-c-inline-edit.pf-m-inline-editable,
79
77
  .pf-c-inline-edit .pf-m-inline-editable {
80
78
  // Expose inputs, input groups, actions and action groups
81
- .pf-c-inline-edit__input,
82
- .pf-c-inline-edit__action,
83
- .pf-c-inline-edit__group.pf-m-action-group {
84
- visibility: visible;
85
- }
86
-
87
79
  // Input
88
80
  .pf-c-inline-edit__input {
89
81
  display: block;
@@ -103,7 +95,6 @@
103
95
  .pf-c-inline-edit__value,
104
96
  .pf-c-inline-edit__action.pf-m-enable-editable {
105
97
  display: none;
106
- visibility: hidden;
107
98
  }
108
99
  }
109
100
 
@@ -22,9 +22,6 @@
22
22
  --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
23
23
  --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
24
24
  --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
25
- --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
26
- --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
27
- --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
28
25
  --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
29
26
  --pf-c-input-group--c-form-control--MarginRight: 0;
30
27
  color: var(--pf-global--Color--100);
@@ -74,11 +71,6 @@ label.pf-c-input-group__text {
74
71
  --pf-c-input-group__text--BorderWidth: 0;
75
72
  margin-left: 0;
76
73
  }
77
- .pf-c-input-group__text.pf-m-disabled {
78
- --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
79
- --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
80
- --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
81
- }
82
74
 
83
75
  :where(.pf-theme-dark) .pf-c-input-group {
84
76
  --pf-c-input-group--BackgroundColor: transparent;
@@ -87,8 +79,6 @@ label.pf-c-input-group__text {
87
79
  --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
88
80
  --pf-c-input-group__text--BorderLeftColor: transparent;
89
81
  --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
90
- --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
91
- --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
92
82
  }
93
83
  :where(.pf-theme-dark) .pf-c-input-group > * + * {
94
84
  margin-left: 0;
@@ -102,8 +92,4 @@ label.pf-c-input-group__text {
102
92
  }
103
93
  :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
104
94
  --pf-c-input-group__text--BackgroundColor: transparent;
105
- }
106
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-disabled {
107
- --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
108
- color: var(--pf-c-input-group__text--m-disabled--Color);
109
95
  }
@@ -15,9 +15,6 @@
15
15
  --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
16
16
  --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
17
17
  --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
18
- --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
19
- --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
20
- --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
21
18
 
22
19
  // Form control
23
20
  --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
@@ -87,12 +84,6 @@
87
84
 
88
85
  margin-left: 0;
89
86
  }
90
-
91
- &.pf-m-disabled {
92
- --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
93
- --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
94
- --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
95
- }
96
87
  }
97
88
 
98
89
  // stylelint-disable no-invalid-position-at-import-rule
@@ -8,8 +8,6 @@
8
8
  --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9
9
  --pf-c-input-group__text--BorderLeftColor: transparent;
10
10
  --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
11
- --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
12
- --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
13
11
 
14
12
  > * + * {
15
13
  margin-left: 0;
@@ -26,11 +24,5 @@
26
24
  &.pf-m-plain {
27
25
  --pf-c-input-group__text--BackgroundColor: transparent;
28
26
  }
29
-
30
- &.pf-m-disabled {
31
- --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
32
-
33
- color: var(--pf-c-input-group__text--m-disabled--Color);
34
- }
35
27
  }
36
28
  }
@@ -1,6 +1,5 @@
1
1
  .pf-c-jump-links {
2
2
  --pf-c-jump-links__list--Display: flex;
3
- --pf-c-jump-links__list--Visibility: visible;
4
3
  --pf-c-jump-links__list--PaddingTop: 0;
5
4
  --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
6
5
  --pf-c-jump-links__list--PaddingBottom: 0;
@@ -43,14 +42,12 @@
43
42
  --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
44
43
  --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
45
44
  --pf-c-jump-links__label--Display: block;
46
- --pf-c-jump-links__label--Visibility: visible;
47
45
  --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
48
46
  --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
49
47
  --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
50
48
  --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
51
49
  --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
52
50
  --pf-c-jump-links__toggle--Display: none;
53
- --pf-c-jump-links__toggle--Visibility: hidden;
54
51
  --pf-c-jump-links__toggle-icon--Color: currentcolor;
55
52
  --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
56
53
  --pf-c-jump-links__toggle-icon--Rotate: 0;
@@ -80,113 +77,76 @@
80
77
  }
81
78
  .pf-c-jump-links.pf-m-expandable {
82
79
  --pf-c-jump-links__list--Display: none;
83
- --pf-c-jump-links__list--Visibility: hidden;
84
80
  --pf-c-jump-links__toggle--Display: block;
85
- --pf-c-jump-links__toggle--Visibility: visible;
86
81
  --pf-c-jump-links__label--Display: none;
87
- --pf-c-jump-links__label--Visibility: hidden;
88
82
  }
89
83
  .pf-c-jump-links.pf-m-non-expandable {
90
84
  --pf-c-jump-links__list--Display: flex;
91
- --pf-c-jump-links__list--Visibility: visible;
92
85
  --pf-c-jump-links__toggle--Display: none;
93
- --pf-c-jump-links__toggle--Visibility: hidden;
94
86
  --pf-c-jump-links__label--Display: block;
95
- --pf-c-jump-links__label--Visibility: visible;
96
87
  }
97
88
  @media (min-width: 576px) {
98
89
  .pf-c-jump-links.pf-m-expandable-on-sm {
99
90
  --pf-c-jump-links__list--Display: none;
100
- --pf-c-jump-links__list--Visibility: hidden;
101
91
  --pf-c-jump-links__toggle--Display: block;
102
- --pf-c-jump-links__toggle--Visibility: visible;
103
92
  --pf-c-jump-links__label--Display: none;
104
- --pf-c-jump-links__label--Visibility: hidden;
105
93
  }
106
94
  .pf-c-jump-links.pf-m-non-expandable-on-sm {
107
95
  --pf-c-jump-links__list--Display: flex;
108
- --pf-c-jump-links__list--Visibility: visible;
109
96
  --pf-c-jump-links__toggle--Display: none;
110
- --pf-c-jump-links__toggle--Visibility: hidden;
111
97
  --pf-c-jump-links__label--Display: block;
112
- --pf-c-jump-links__label--Visibility: visible;
113
98
  }
114
99
  }
115
100
  @media (min-width: 768px) {
116
101
  .pf-c-jump-links.pf-m-expandable-on-md {
117
102
  --pf-c-jump-links__list--Display: none;
118
- --pf-c-jump-links__list--Visibility: hidden;
119
103
  --pf-c-jump-links__toggle--Display: block;
120
- --pf-c-jump-links__toggle--Visibility: visible;
121
104
  --pf-c-jump-links__label--Display: none;
122
- --pf-c-jump-links__label--Visibility: hidden;
123
105
  }
124
106
  .pf-c-jump-links.pf-m-non-expandable-on-md {
125
107
  --pf-c-jump-links__list--Display: flex;
126
- --pf-c-jump-links__list--Visibility: visible;
127
108
  --pf-c-jump-links__toggle--Display: none;
128
- --pf-c-jump-links__toggle--Visibility: hidden;
129
109
  --pf-c-jump-links__label--Display: block;
130
- --pf-c-jump-links__label--Visibility: visible;
131
110
  }
132
111
  }
133
112
  @media (min-width: 992px) {
134
113
  .pf-c-jump-links.pf-m-expandable-on-lg {
135
114
  --pf-c-jump-links__list--Display: none;
136
- --pf-c-jump-links__list--Visibility: hidden;
137
115
  --pf-c-jump-links__toggle--Display: block;
138
- --pf-c-jump-links__toggle--Visibility: visible;
139
116
  --pf-c-jump-links__label--Display: none;
140
- --pf-c-jump-links__label--Visibility: hidden;
141
117
  }
142
118
  .pf-c-jump-links.pf-m-non-expandable-on-lg {
143
119
  --pf-c-jump-links__list--Display: flex;
144
- --pf-c-jump-links__list--Visibility: visible;
145
120
  --pf-c-jump-links__toggle--Display: none;
146
- --pf-c-jump-links__toggle--Visibility: hidden;
147
121
  --pf-c-jump-links__label--Display: block;
148
- --pf-c-jump-links__label--Visibility: visible;
149
122
  }
150
123
  }
151
124
  @media (min-width: 1200px) {
152
125
  .pf-c-jump-links.pf-m-expandable-on-xl {
153
126
  --pf-c-jump-links__list--Display: none;
154
- --pf-c-jump-links__list--Visibility: hidden;
155
127
  --pf-c-jump-links__toggle--Display: block;
156
- --pf-c-jump-links__toggle--Visibility: visible;
157
128
  --pf-c-jump-links__label--Display: none;
158
- --pf-c-jump-links__label--Visibility: hidden;
159
129
  }
160
130
  .pf-c-jump-links.pf-m-non-expandable-on-xl {
161
131
  --pf-c-jump-links__list--Display: flex;
162
- --pf-c-jump-links__list--Visibility: visible;
163
132
  --pf-c-jump-links__toggle--Display: none;
164
- --pf-c-jump-links__toggle--Visibility: hidden;
165
133
  --pf-c-jump-links__label--Display: block;
166
- --pf-c-jump-links__label--Visibility: visible;
167
134
  }
168
135
  }
169
136
  @media (min-width: 1450px) {
170
137
  .pf-c-jump-links.pf-m-expandable-on-2xl {
171
138
  --pf-c-jump-links__list--Display: none;
172
- --pf-c-jump-links__list--Visibility: hidden;
173
139
  --pf-c-jump-links__toggle--Display: block;
174
- --pf-c-jump-links__toggle--Visibility: visible;
175
140
  --pf-c-jump-links__label--Display: none;
176
- --pf-c-jump-links__label--Visibility: hidden;
177
141
  }
178
142
  .pf-c-jump-links.pf-m-non-expandable-on-2xl {
179
143
  --pf-c-jump-links__list--Display: flex;
180
- --pf-c-jump-links__list--Visibility: visible;
181
144
  --pf-c-jump-links__toggle--Display: none;
182
- --pf-c-jump-links__toggle--Visibility: hidden;
183
145
  --pf-c-jump-links__label--Display: block;
184
- --pf-c-jump-links__label--Visibility: visible;
185
146
  }
186
147
  }
187
148
  .pf-c-jump-links.pf-m-expanded {
188
149
  --pf-c-jump-links__list--Display: flex;
189
- --pf-c-jump-links__list--Visibility: visible;
190
150
  --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
191
151
  --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
192
152
  --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
@@ -200,7 +160,6 @@
200
160
  padding-right: var(--pf-c-jump-links__list--PaddingRight);
201
161
  padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
202
162
  padding-left: var(--pf-c-jump-links__list--PaddingLeft);
203
- visibility: var(--pf-c-jump-links__list--Visibility);
204
163
  }
205
164
  .pf-c-jump-links__list::before {
206
165
  position: absolute;
@@ -269,7 +228,6 @@
269
228
  .pf-c-jump-links__label {
270
229
  display: var(--pf-c-jump-links__label--Display);
271
230
  margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
272
- visibility: var(--pf-c-jump-links__label--Visibility);
273
231
  }
274
232
 
275
233
  .pf-c-jump-links__main {
@@ -282,7 +240,6 @@
282
240
  margin-top: var(--pf-c-jump-links__toggle--MarginTop);
283
241
  margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
284
242
  margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
285
- visibility: var(--pf-c-jump-links__toggle--Visibility);
286
243
  }
287
244
  .pf-c-jump-links__toggle .pf-c-button {
288
245
  display: flex;
@@ -3,7 +3,6 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
3
3
  .pf-c-jump-links {
4
4
  // list
5
5
  --pf-c-jump-links__list--Display: flex;
6
- --pf-c-jump-links__list--Visibility: visible;
7
6
  --pf-c-jump-links__list--PaddingTop: 0;
8
7
  --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9
8
  --pf-c-jump-links__list--PaddingBottom: 0;
@@ -54,7 +53,6 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
54
53
  // label
55
54
  --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
56
55
  --pf-c-jump-links__label--Display: block;
57
- --pf-c-jump-links__label--Visibility: visible;
58
56
 
59
57
  // toggle
60
58
  --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
@@ -63,7 +61,6 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
63
61
  --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
64
62
  --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
65
63
  --pf-c-jump-links__toggle--Display: none;
66
- --pf-c-jump-links__toggle--Visibility: hidden;
67
64
 
68
65
  // toggle icon
69
66
  --pf-c-jump-links__toggle-icon--Color: currentcolor;
@@ -107,27 +104,20 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
107
104
  @include pf-apply-breakpoint($breakpoint) {
108
105
  &.pf-m-expandable#{$breakpoint-name} {
109
106
  --pf-c-jump-links__list--Display: none;
110
- --pf-c-jump-links__list--Visibility: hidden;
111
107
  --pf-c-jump-links__toggle--Display: block;
112
- --pf-c-jump-links__toggle--Visibility: visible;
113
108
  --pf-c-jump-links__label--Display: none;
114
- --pf-c-jump-links__label--Visibility: hidden;
115
109
  }
116
110
 
117
111
  &.pf-m-non-expandable#{$breakpoint-name} {
118
112
  --pf-c-jump-links__list--Display: flex;
119
- --pf-c-jump-links__list--Visibility: visible;
120
113
  --pf-c-jump-links__toggle--Display: none;
121
- --pf-c-jump-links__toggle--Visibility: hidden;
122
114
  --pf-c-jump-links__label--Display: block;
123
- --pf-c-jump-links__label--Visibility: visible;
124
115
  }
125
116
  }
126
117
  }
127
118
 
128
119
  &.pf-m-expanded {
129
120
  --pf-c-jump-links__list--Display: flex;
130
- --pf-c-jump-links__list--Visibility: visible;
131
121
  --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
132
122
  --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
133
123
  --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
@@ -142,7 +132,6 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
142
132
  padding-right: var(--pf-c-jump-links__list--PaddingRight);
143
133
  padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
144
134
  padding-left: var(--pf-c-jump-links__list--PaddingLeft);
145
- visibility: var(--pf-c-jump-links__list--Visibility);
146
135
 
147
136
  &::before {
148
137
  position: absolute;
@@ -220,7 +209,6 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
220
209
  .pf-c-jump-links__label {
221
210
  display: var(--pf-c-jump-links__label--Display);
222
211
  margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
223
- visibility: var(--pf-c-jump-links__label--Visibility);
224
212
  }
225
213
 
226
214
  .pf-c-jump-links__main {
@@ -233,7 +221,6 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
233
221
  margin-top: var(--pf-c-jump-links__toggle--MarginTop);
234
222
  margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
235
223
  margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
236
- visibility: var(--pf-c-jump-links__toggle--Visibility);
237
224
 
238
225
  .pf-c-button {
239
226
  display: flex;
@@ -311,9 +311,6 @@
311
311
  --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
312
312
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
313
313
  }
314
- .pf-c-label.pf-m-editable-active .pf-c-button {
315
- visibility: hidden;
316
- }
317
314
  .pf-c-label .pf-c-button {
318
315
  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
319
316
  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
@@ -372,10 +372,6 @@
372
372
  --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
373
373
  --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
374
374
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
375
-
376
- .pf-c-button {
377
- visibility: hidden; // use visibility hidden to retain positioning
378
- }
379
375
  }
380
376
 
381
377
  .pf-c-button {
@@ -9,66 +9,51 @@
9
9
  }
10
10
 
11
11
  .pf-c-menu__group, .pf-c-menu__list-item, .pf-c-menu__list {
12
- --pf-hidden-visible--visible--Visibility: visible;
13
12
  --pf-hidden-visible--hidden--Display: none;
14
- --pf-hidden-visible--hidden--Visibility: hidden;
15
13
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
16
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17
14
  display: var(--pf-hidden-visible--Display);
18
- visibility: var(--pf-hidden-visible--Visibility);
19
15
  }
20
16
  .pf-m-hidden.pf-c-menu__group, .pf-m-hidden.pf-c-menu__list-item, .pf-m-hidden.pf-c-menu__list {
21
17
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
22
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
23
18
  }
24
19
  @media screen and (min-width: 576px) {
25
20
  .pf-m-hidden-on-sm.pf-c-menu__group, .pf-m-hidden-on-sm.pf-c-menu__list-item, .pf-m-hidden-on-sm.pf-c-menu__list {
26
21
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
27
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
28
22
  }
29
23
  .pf-m-visible-on-sm.pf-c-menu__group, .pf-m-visible-on-sm.pf-c-menu__list-item, .pf-m-visible-on-sm.pf-c-menu__list {
30
24
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
31
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
32
25
  }
33
26
  }
34
27
  @media screen and (min-width: 768px) {
35
28
  .pf-m-hidden-on-md.pf-c-menu__group, .pf-m-hidden-on-md.pf-c-menu__list-item, .pf-m-hidden-on-md.pf-c-menu__list {
36
29
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
37
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
38
30
  }
39
31
  .pf-m-visible-on-md.pf-c-menu__group, .pf-m-visible-on-md.pf-c-menu__list-item, .pf-m-visible-on-md.pf-c-menu__list {
40
32
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
41
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
42
33
  }
43
34
  }
44
35
  @media screen and (min-width: 992px) {
45
36
  .pf-m-hidden-on-lg.pf-c-menu__group, .pf-m-hidden-on-lg.pf-c-menu__list-item, .pf-m-hidden-on-lg.pf-c-menu__list {
46
37
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
47
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
48
38
  }
49
39
  .pf-m-visible-on-lg.pf-c-menu__group, .pf-m-visible-on-lg.pf-c-menu__list-item, .pf-m-visible-on-lg.pf-c-menu__list {
50
40
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
51
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
52
41
  }
53
42
  }
54
43
  @media screen and (min-width: 1200px) {
55
44
  .pf-m-hidden-on-xl.pf-c-menu__group, .pf-m-hidden-on-xl.pf-c-menu__list-item, .pf-m-hidden-on-xl.pf-c-menu__list {
56
45
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
57
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
58
46
  }
59
47
  .pf-m-visible-on-xl.pf-c-menu__group, .pf-m-visible-on-xl.pf-c-menu__list-item, .pf-m-visible-on-xl.pf-c-menu__list {
60
48
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
61
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
62
49
  }
63
50
  }
64
51
  @media screen and (min-width: 1450px) {
65
52
  .pf-m-hidden-on-2xl.pf-c-menu__group, .pf-m-hidden-on-2xl.pf-c-menu__list-item, .pf-m-hidden-on-2xl.pf-c-menu__list {
66
53
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
67
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
68
54
  }
69
55
  .pf-m-visible-on-2xl.pf-c-menu__group, .pf-m-visible-on-2xl.pf-c-menu__list-item, .pf-m-visible-on-2xl.pf-c-menu__list {
70
56
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
71
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
72
57
  }
73
58
  }
74
59
 
@@ -305,22 +290,17 @@
305
290
  }
306
291
  .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
307
292
  display: none;
308
- visibility: hidden;
309
293
  }
310
294
  .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
311
295
  outline-offset: var(--pf-c-menu__item--OutlineOffset);
312
296
  }
313
297
  .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
314
298
  overflow: visible;
315
- visibility: hidden;
316
299
  }
317
300
  .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-divider,
318
301
  .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item:not(.pf-m-current-path) {
319
302
  display: none;
320
303
  }
321
- .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item.pf-m-current-path {
322
- visibility: hidden;
323
- }
324
304
  .pf-c-menu.pf-m-plain {
325
305
  --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
326
306
  }
@@ -304,7 +304,6 @@
304
304
 
305
305
  &:not(.pf-m-current-path) .pf-c-menu {
306
306
  display: none;
307
- visibility: hidden;
308
307
  }
309
308
  }
310
309
 
@@ -317,16 +316,11 @@
317
316
  // stylelint-disable selector-max-class
318
317
  &.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
319
318
  overflow: visible;
320
- visibility: hidden;
321
319
 
322
320
  > .pf-c-divider,
323
321
  > .pf-c-menu__list-item:not(.pf-m-current-path) {
324
322
  display: none; // hide all siblings of current path to maintain proper menu height
325
323
  }
326
-
327
- > .pf-c-menu__list-item.pf-m-current-path {
328
- visibility: hidden;
329
- }
330
324
  }
331
325
  // stylelint-enable
332
326
 
@@ -100,6 +100,7 @@
100
100
  }
101
101
 
102
102
  .pf-c-notification-drawer__body {
103
+ flex: 1;
103
104
  overflow-y: auto;
104
105
  box-shadow: var(--pf-c-notification-drawer__body--ZIndex);
105
106
  }
@@ -129,6 +129,7 @@
129
129
  }
130
130
 
131
131
  .pf-c-notification-drawer__body {
132
+ flex: 1;
132
133
  overflow-y: auto;
133
134
  box-shadow: var(--pf-c-notification-drawer__body--ZIndex);
134
135
  }
@@ -40,66 +40,51 @@
40
40
  }
41
41
 
42
42
  .pf-c-page__header-tools-item, .pf-c-page__header-tools-group {
43
- --pf-hidden-visible--visible--Visibility: visible;
44
43
  --pf-hidden-visible--hidden--Display: none;
45
- --pf-hidden-visible--hidden--Visibility: hidden;
46
44
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
47
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
48
45
  display: var(--pf-hidden-visible--Display);
49
- visibility: var(--pf-hidden-visible--Visibility);
50
46
  }
51
47
  .pf-m-hidden.pf-c-page__header-tools-item, .pf-m-hidden.pf-c-page__header-tools-group {
52
48
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
53
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
54
49
  }
55
50
  @media screen and (min-width: 576px) {
56
51
  .pf-m-hidden-on-sm.pf-c-page__header-tools-item, .pf-m-hidden-on-sm.pf-c-page__header-tools-group {
57
52
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
58
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
59
53
  }
60
54
  .pf-m-visible-on-sm.pf-c-page__header-tools-item, .pf-m-visible-on-sm.pf-c-page__header-tools-group {
61
55
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
62
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
63
56
  }
64
57
  }
65
58
  @media screen and (min-width: 768px) {
66
59
  .pf-m-hidden-on-md.pf-c-page__header-tools-item, .pf-m-hidden-on-md.pf-c-page__header-tools-group {
67
60
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
68
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
69
61
  }
70
62
  .pf-m-visible-on-md.pf-c-page__header-tools-item, .pf-m-visible-on-md.pf-c-page__header-tools-group {
71
63
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
72
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
73
64
  }
74
65
  }
75
66
  @media screen and (min-width: 992px) {
76
67
  .pf-m-hidden-on-lg.pf-c-page__header-tools-item, .pf-m-hidden-on-lg.pf-c-page__header-tools-group {
77
68
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
78
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
79
69
  }
80
70
  .pf-m-visible-on-lg.pf-c-page__header-tools-item, .pf-m-visible-on-lg.pf-c-page__header-tools-group {
81
71
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
82
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
83
72
  }
84
73
  }
85
74
  @media screen and (min-width: 1200px) {
86
75
  .pf-m-hidden-on-xl.pf-c-page__header-tools-item, .pf-m-hidden-on-xl.pf-c-page__header-tools-group {
87
76
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
88
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
89
77
  }
90
78
  .pf-m-visible-on-xl.pf-c-page__header-tools-item, .pf-m-visible-on-xl.pf-c-page__header-tools-group {
91
79
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
92
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
93
80
  }
94
81
  }
95
82
  @media screen and (min-width: 1450px) {
96
83
  .pf-m-hidden-on-2xl.pf-c-page__header-tools-item, .pf-m-hidden-on-2xl.pf-c-page__header-tools-group {
97
84
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
98
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
99
85
  }
100
86
  .pf-m-visible-on-2xl.pf-c-page__header-tools-item, .pf-m-visible-on-2xl.pf-c-page__header-tools-group {
101
87
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
102
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
103
88
  }
104
89
  }
105
90