@patternfly/patternfly 4.222.3 → 5.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (172) hide show
  1. package/README.md +2 -2
  2. package/RELEASE-NOTES.md +0 -11
  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
package/components/Pagination/pagination.css CHANGED
@@ -7,22 +7,14 @@
7
7
  }
8
8
 
9
9
  .pf-c-pagination {
10
- --pf-c-pagination--inset: 0;
11
- --pf-c-pagination--PaddingRight: var(--pf-c-pagination--inset);
12
- --pf-c-pagination--PaddingLeft: var(--pf-c-pagination--inset);
13
- --pf-c-pagination--m-page-insets--inset: var(--pf-global--spacer--md);
14
- --pf-c-pagination--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
15
10
  --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
16
11
  --pf-c-pagination--m-bottom--child--MarginRight: 0;
17
12
  --pf-c-pagination--m-bottom--child--md--MarginRight: var(--pf-global--spacer--lg);
18
13
  --pf-c-pagination--m-compact--child--MarginRight: var(--pf-global--spacer--sm);
19
14
  --pf-c-pagination--c-options-menu__toggle--FontSize: var(--pf-global--FontSize--sm);
20
15
  --pf-c-pagination__nav--Display: none;
21
- --pf-c-pagination__nav--Visibility: hidden;
22
16
  --pf-c-pagination--m-display-summary__nav--Display: none;
23
- --pf-c-pagination--m-display-summary__nav--Visibility: hidden;
24
17
  --pf-c-pagination--m-display-full__nav--Display: inline-flex;
25
- --pf-c-pagination--m-display-full__nav--Visibility: visible;
26
18
  --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-global--spacer--sm);
27
19
  --pf-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-global--spacer--sm);
28
20
  --pf-c-pagination__nav-control--c-button--FontSize: var(--pf-global--FontSize--md);
@@ -43,11 +35,8 @@
43
35
  --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
44
36
  --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
45
37
  --pf-c-pagination__total-items--Display: block;
46
- --pf-c-pagination__total-items--Visibility: visible;
47
38
  --pf-c-pagination--m-display-summary__total-items--Display: block;
48
- --pf-c-pagination--m-display-summary__total-items--Visibility: visible;
49
39
  --pf-c-pagination--m-display-full__total-items--Display: none;
50
- --pf-c-pagination--m-display-full__total-items--Visibility: hidden;
51
40
  --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--100);
52
41
  --pf-c-pagination--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
53
42
  --pf-c-pagination--m-sticky--md--PaddingTop: var(--pf-global--spacer--md);
@@ -67,17 +56,12 @@
67
56
  --pf-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-global--spacer--lg);
68
57
  --pf-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-top);
69
58
  --pf-c-pagination--c-options-menu--Display: none;
70
- --pf-c-pagination--c-options-menu--Visibility: hidden;
71
59
  --pf-c-pagination--m-display-summary--c-options-menu--Display: none;
72
- --pf-c-pagination--m-display-summary--c-options-menu--Visibility: hidden;
73
60
  --pf-c-pagination--m-display-full--c-options-menu--Display: inline-flex;
74
- --pf-c-pagination--m-display-full--c-options-menu--Visibility: visible;
75
61
  display: flex;
76
62
  flex-wrap: wrap;
77
63
  align-items: center;
78
64
  justify-content: flex-end;
79
- padding-right: var(--pf-c-pagination--PaddingRight);
80
- padding-left: var(--pf-c-pagination--PaddingLeft);
81
65
  }
82
66
  @media screen and (min-width: 768px) {
83
67
  .pf-c-pagination {
@@ -89,19 +73,14 @@
89
73
  --pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
90
74
  --pf-c-pagination--m-bottom--BoxShadow: none;
91
75
  --pf-c-pagination--c-options-menu--Display: inline-flex;
92
- --pf-c-pagination--c-options-menu--Visibility: visible;
93
76
  --pf-c-pagination__nav--Display: inline-flex;
94
- --pf-c-pagination__nav--Visibility: visible;
95
77
  --pf-c-pagination__total-items--Display: none;
96
- --pf-c-pagination__total-items--Visibility: hidden;
97
78
  }
98
79
  }
99
80
  @media screen and (min-width: 1200px) {
100
81
  .pf-c-pagination {
101
82
  --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-c-pagination--m-bottom--xl--PaddingRight);
102
83
  --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft);
103
- --pf-c-pagination__scroll-button--Width: var(--pf-c-pagination__scroll-button--xl--Width);
104
- --pf-c-pagination--m-page-insets--inset: var(--pf-c-pagination--m-page-insets--xl--inset);
105
84
  }
106
85
  }
107
86
  .pf-c-pagination > *:not(:last-child):not(.pf-c-pagination__total-items) {
@@ -109,7 +88,6 @@
109
88
  }
110
89
  .pf-c-pagination .pf-c-options-menu {
111
90
  display: var(--pf-c-pagination--c-options-menu--Display);
112
- visibility: var(--pf-c-pagination--c-options-menu--Visibility);
113
91
  }
114
92
  .pf-c-pagination.pf-m-bottom {
115
93
  --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-bottom--child--MarginRight);
@@ -138,18 +116,15 @@
138
116
  .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
139
117
  .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
140
118
  display: none;
141
- visibility: hidden;
142
119
  }
143
120
  .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
144
121
  position: absolute;
145
122
  display: block;
146
- visibility: visible;
147
123
  }
148
124
  .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav {
149
125
  display: flex;
150
126
  flex-basis: 100%;
151
127
  justify-content: space-between;
152
- visibility: visible;
153
128
  }
154
129
  @media screen and (min-width: 768px) {
155
130
  .pf-c-pagination.pf-m-bottom {
@@ -164,7 +139,6 @@
164
139
  .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
165
140
  .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
166
141
  display: block;
167
- visibility: visible;
168
142
  }
169
143
  .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
170
144
  position: relative;
@@ -197,14 +171,10 @@
197
171
  .pf-c-pagination.pf-m-compact {
198
172
  --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
199
173
  }
200
- .pf-c-pagination.pf-m-page-insets {
201
- --pf-c-pagination--inset: var(--pf-c-pagination--m-page-insets--inset);
202
- }
203
174
 
204
175
  .pf-c-pagination__nav {
205
176
  display: var(--pf-c-pagination__nav--Display);
206
177
  justify-content: flex-end;
207
- visibility: var(--pf-c-pagination__nav--Visibility);
208
178
  }
209
179
 
210
180
  .pf-c-pagination__nav-control .pf-c-button {
@@ -235,221 +205,76 @@
235
205
 
236
206
  .pf-c-pagination__total-items {
237
207
  display: var(--pf-c-pagination__total-items--Display);
238
- visibility: var(--pf-c-pagination__total-items--Visibility);
239
208
  }
240
209
 
241
210
  .pf-c-pagination.pf-m-display-summary {
242
211
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
243
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
244
212
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
245
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
246
213
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
247
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
248
214
  }
249
215
  .pf-c-pagination.pf-m-display-full {
250
216
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
251
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
252
217
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
253
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
254
218
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
255
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
256
- }
257
- .pf-c-pagination.pf-m-inset-none {
258
- --pf-c-pagination--inset: 0;
259
- }
260
- .pf-c-pagination.pf-m-inset-sm {
261
- --pf-c-pagination--inset: var(--pf-global--spacer--sm);
262
- }
263
- .pf-c-pagination.pf-m-inset-md {
264
- --pf-c-pagination--inset: var(--pf-global--spacer--md);
265
- }
266
- .pf-c-pagination.pf-m-inset-lg {
267
- --pf-c-pagination--inset: var(--pf-global--spacer--lg);
268
- }
269
- .pf-c-pagination.pf-m-inset-xl {
270
- --pf-c-pagination--inset: var(--pf-global--spacer--xl);
271
- }
272
- .pf-c-pagination.pf-m-inset-2xl {
273
- --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
274
219
  }
275
220
  @media (min-width: 576px) {
276
221
  .pf-c-pagination.pf-m-display-summary-on-sm {
277
222
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
278
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
279
223
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
280
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
281
224
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
282
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
283
225
  }
284
226
  .pf-c-pagination.pf-m-display-full-on-sm {
285
227
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
286
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
287
228
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
288
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
289
229
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
290
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
291
- }
292
- .pf-c-pagination.pf-m-inset-none-on-sm {
293
- --pf-c-pagination--inset: 0;
294
- }
295
- .pf-c-pagination.pf-m-inset-sm-on-sm {
296
- --pf-c-pagination--inset: var(--pf-global--spacer--sm);
297
- }
298
- .pf-c-pagination.pf-m-inset-md-on-sm {
299
- --pf-c-pagination--inset: var(--pf-global--spacer--md);
300
- }
301
- .pf-c-pagination.pf-m-inset-lg-on-sm {
302
- --pf-c-pagination--inset: var(--pf-global--spacer--lg);
303
- }
304
- .pf-c-pagination.pf-m-inset-xl-on-sm {
305
- --pf-c-pagination--inset: var(--pf-global--spacer--xl);
306
- }
307
- .pf-c-pagination.pf-m-inset-2xl-on-sm {
308
- --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
309
230
  }
310
231
  }
311
232
  @media (min-width: 768px) {
312
233
  .pf-c-pagination.pf-m-display-summary-on-md {
313
234
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
314
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
315
235
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
316
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
317
236
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
318
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
319
237
  }
320
238
  .pf-c-pagination.pf-m-display-full-on-md {
321
239
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
322
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
323
240
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
324
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
325
241
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
326
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
327
- }
328
- .pf-c-pagination.pf-m-inset-none-on-md {
329
- --pf-c-pagination--inset: 0;
330
- }
331
- .pf-c-pagination.pf-m-inset-sm-on-md {
332
- --pf-c-pagination--inset: var(--pf-global--spacer--sm);
333
- }
334
- .pf-c-pagination.pf-m-inset-md-on-md {
335
- --pf-c-pagination--inset: var(--pf-global--spacer--md);
336
- }
337
- .pf-c-pagination.pf-m-inset-lg-on-md {
338
- --pf-c-pagination--inset: var(--pf-global--spacer--lg);
339
- }
340
- .pf-c-pagination.pf-m-inset-xl-on-md {
341
- --pf-c-pagination--inset: var(--pf-global--spacer--xl);
342
- }
343
- .pf-c-pagination.pf-m-inset-2xl-on-md {
344
- --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
345
242
  }
346
243
  }
347
244
  @media (min-width: 992px) {
348
245
  .pf-c-pagination.pf-m-display-summary-on-lg {
349
246
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
350
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
351
247
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
352
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
353
248
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
354
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
355
249
  }
356
250
  .pf-c-pagination.pf-m-display-full-on-lg {
357
251
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
358
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
359
252
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
360
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
361
253
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
362
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
363
- }
364
- .pf-c-pagination.pf-m-inset-none-on-lg {
365
- --pf-c-pagination--inset: 0;
366
- }
367
- .pf-c-pagination.pf-m-inset-sm-on-lg {
368
- --pf-c-pagination--inset: var(--pf-global--spacer--sm);
369
- }
370
- .pf-c-pagination.pf-m-inset-md-on-lg {
371
- --pf-c-pagination--inset: var(--pf-global--spacer--md);
372
- }
373
- .pf-c-pagination.pf-m-inset-lg-on-lg {
374
- --pf-c-pagination--inset: var(--pf-global--spacer--lg);
375
- }
376
- .pf-c-pagination.pf-m-inset-xl-on-lg {
377
- --pf-c-pagination--inset: var(--pf-global--spacer--xl);
378
- }
379
- .pf-c-pagination.pf-m-inset-2xl-on-lg {
380
- --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
381
254
  }
382
255
  }
383
256
  @media (min-width: 1200px) {
384
257
  .pf-c-pagination.pf-m-display-summary-on-xl {
385
258
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
386
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
387
259
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
388
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
389
260
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
390
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
391
261
  }
392
262
  .pf-c-pagination.pf-m-display-full-on-xl {
393
263
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
394
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
395
264
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
396
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
397
265
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
398
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
399
- }
400
- .pf-c-pagination.pf-m-inset-none-on-xl {
401
- --pf-c-pagination--inset: 0;
402
- }
403
- .pf-c-pagination.pf-m-inset-sm-on-xl {
404
- --pf-c-pagination--inset: var(--pf-global--spacer--sm);
405
- }
406
- .pf-c-pagination.pf-m-inset-md-on-xl {
407
- --pf-c-pagination--inset: var(--pf-global--spacer--md);
408
- }
409
- .pf-c-pagination.pf-m-inset-lg-on-xl {
410
- --pf-c-pagination--inset: var(--pf-global--spacer--lg);
411
- }
412
- .pf-c-pagination.pf-m-inset-xl-on-xl {
413
- --pf-c-pagination--inset: var(--pf-global--spacer--xl);
414
- }
415
- .pf-c-pagination.pf-m-inset-2xl-on-xl {
416
- --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
417
266
  }
418
267
  }
419
268
  @media (min-width: 1450px) {
420
269
  .pf-c-pagination.pf-m-display-summary-on-2xl {
421
270
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
422
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
423
271
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
424
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
425
272
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
426
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
427
273
  }
428
274
  .pf-c-pagination.pf-m-display-full-on-2xl {
429
275
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
430
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
431
276
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
432
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
433
277
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
434
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
435
- }
436
- .pf-c-pagination.pf-m-inset-none-on-2xl {
437
- --pf-c-pagination--inset: 0;
438
- }
439
- .pf-c-pagination.pf-m-inset-sm-on-2xl {
440
- --pf-c-pagination--inset: var(--pf-global--spacer--sm);
441
- }
442
- .pf-c-pagination.pf-m-inset-md-on-2xl {
443
- --pf-c-pagination--inset: var(--pf-global--spacer--md);
444
- }
445
- .pf-c-pagination.pf-m-inset-lg-on-2xl {
446
- --pf-c-pagination--inset: var(--pf-global--spacer--lg);
447
- }
448
- .pf-c-pagination.pf-m-inset-xl-on-2xl {
449
- --pf-c-pagination--inset: var(--pf-global--spacer--xl);
450
- }
451
- .pf-c-pagination.pf-m-inset-2xl-on-2xl {
452
- --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
453
278
  }
454
279
  }
455
280
 
package/components/Pagination/pagination.scss CHANGED
@@ -1,15 +1,6 @@
1
1
  $pf-c-pagination--breakpoint-map: build-breakpoint-map();
2
- $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
3
2
 
4
3
  .pf-c-pagination {
5
- --pf-c-pagination--inset: 0;
6
- --pf-c-pagination--PaddingRight: var(--pf-c-pagination--inset);
7
- --pf-c-pagination--PaddingLeft: var(--pf-c-pagination--inset);
8
-
9
- // Page insets
10
- --pf-c-pagination--m-page-insets--inset: var(--pf-global--spacer--md);
11
- --pf-c-pagination--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
12
-
13
4
  // children
14
5
  --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
15
6
  --pf-c-pagination--m-bottom--child--MarginRight: 0;
@@ -21,11 +12,8 @@ $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl",
21
12
 
22
13
  // nav
23
14
  --pf-c-pagination__nav--Display: none;
24
- --pf-c-pagination__nav--Visibility: hidden;
25
15
  --pf-c-pagination--m-display-summary__nav--Display: none;
26
- --pf-c-pagination--m-display-summary__nav--Visibility: hidden;
27
16
  --pf-c-pagination--m-display-full__nav--Display: inline-flex;
28
- --pf-c-pagination--m-display-full__nav--Visibility: visible;
29
17
 
30
18
  // nav control
31
19
  --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-global--spacer--sm);
@@ -52,11 +40,8 @@ $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl",
52
40
 
53
41
  // total items
54
42
  --pf-c-pagination__total-items--Display: block;
55
- --pf-c-pagination__total-items--Visibility: visible;
56
43
  --pf-c-pagination--m-display-summary__total-items--Display: block;
57
- --pf-c-pagination--m-display-summary__total-items--Visibility: visible;
58
44
  --pf-c-pagination--m-display-full__total-items--Display: none;
59
- --pf-c-pagination--m-display-full__total-items--Visibility: hidden;
60
45
 
61
46
  // top
62
47
  --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--100);
@@ -82,11 +67,8 @@ $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl",
82
67
 
83
68
  // options menu
84
69
  --pf-c-pagination--c-options-menu--Display: none;
85
- --pf-c-pagination--c-options-menu--Visibility: hidden;
86
70
  --pf-c-pagination--m-display-summary--c-options-menu--Display: none;
87
- --pf-c-pagination--m-display-summary--c-options-menu--Visibility: hidden;
88
71
  --pf-c-pagination--m-display-full--c-options-menu--Display: inline-flex;
89
- --pf-c-pagination--m-display-full--c-options-menu--Visibility: visible;
90
72
 
91
73
  @media screen and (min-width: $pf-global--breakpoint--md) {
92
74
  --pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop);
@@ -97,26 +79,19 @@ $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl",
97
79
  --pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
98
80
  --pf-c-pagination--m-bottom--BoxShadow: none;
99
81
  --pf-c-pagination--c-options-menu--Display: inline-flex;
100
- --pf-c-pagination--c-options-menu--Visibility: visible;
101
82
  --pf-c-pagination__nav--Display: inline-flex;
102
- --pf-c-pagination__nav--Visibility: visible;
103
83
  --pf-c-pagination__total-items--Display: none;
104
- --pf-c-pagination__total-items--Visibility: hidden;
105
84
  }
106
85
 
107
86
  @media screen and (min-width: $pf-global--breakpoint--xl) {
108
87
  --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-c-pagination--m-bottom--xl--PaddingRight);
109
88
  --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft);
110
- --pf-c-pagination__scroll-button--Width: var(--pf-c-pagination__scroll-button--xl--Width);
111
- --pf-c-pagination--m-page-insets--inset: var(--pf-c-pagination--m-page-insets--xl--inset);
112
89
  }
113
90
 
114
91
  display: flex;
115
92
  flex-wrap: wrap;
116
93
  align-items: center;
117
94
  justify-content: flex-end;
118
- padding-right: var(--pf-c-pagination--PaddingRight);
119
- padding-left: var(--pf-c-pagination--PaddingLeft);
120
95
 
121
96
  // stylelint-disable selector-not-notation
122
97
  // update to single :not() in breaking change
@@ -126,7 +101,6 @@ $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl",
126
101
 
127
102
  .pf-c-options-menu {
128
103
  display: var(--pf-c-pagination--c-options-menu--Display);
129
- visibility: var(--pf-c-pagination--c-options-menu--Visibility);
130
104
  }
131
105
 
132
106
  &.pf-m-bottom {
@@ -163,20 +137,17 @@ $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl",
163
137
  .pf-c-pagination__nav-control.pf-m-last,
164
138
  .pf-c-pagination__nav-page-select {
165
139
  display: none;
166
- visibility: hidden;
167
140
  }
168
141
 
169
142
  .pf-c-options-menu {
170
143
  position: absolute;
171
144
  display: block;
172
- visibility: visible;
173
145
  }
174
146
 
175
147
  .pf-c-pagination__nav {
176
148
  display: flex;
177
149
  flex-basis: 100%;
178
150
  justify-content: space-between;
179
- visibility: visible;
180
151
  }
181
152
 
182
153
  @media screen and (min-width: $pf-global--breakpoint--md) {
@@ -192,7 +163,6 @@ $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl",
192
163
  .pf-c-pagination__nav-control.pf-m-last,
193
164
  .pf-c-pagination__nav-page-select {
194
165
  display: block;
195
- visibility: visible;
196
166
  }
197
167
 
198
168
  .pf-c-options-menu {
@@ -224,6 +194,7 @@ $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl",
224
194
  }
225
195
  }
226
196
 
197
+
227
198
  .pf-c-options-menu__toggle {
228
199
  font-size: var(--pf-c-pagination--c-options-menu__toggle--FontSize);
229
200
  }
@@ -231,18 +202,12 @@ $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl",
231
202
  &.pf-m-compact {
232
203
  --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
233
204
  }
234
-
235
- &.pf-m-page-insets {
236
- --pf-c-pagination--inset: var(--pf-c-pagination--m-page-insets--inset);
237
- }
238
205
  }
239
206
 
240
-
241
207
  // nav
242
208
  .pf-c-pagination__nav {
243
209
  display: var(--pf-c-pagination__nav--Display);
244
210
  justify-content: flex-end;
245
- visibility: var(--pf-c-pagination__nav--Visibility);
246
211
  }
247
212
 
248
213
  // nav control
@@ -284,7 +249,6 @@ $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl",
284
249
  // display-summary element for total-items items
285
250
  .pf-c-pagination__total-items {
286
251
  display: var(--pf-c-pagination__total-items--Display);
287
- visibility: var(--pf-c-pagination__total-items--Visibility);
288
252
  }
289
253
 
290
254
  // stylelint-disable no-duplicate-selectors
@@ -295,26 +259,14 @@ $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl",
295
259
  @include pf-apply-breakpoint($breakpoint) {
296
260
  &.pf-m-display-summary#{$breakpoint-name} {
297
261
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
298
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
299
262
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
300
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
301
263
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
302
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
303
264
  }
304
265
 
305
266
  &.pf-m-display-full#{$breakpoint-name} {
306
267
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
307
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
308
268
  --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
309
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
310
269
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
311
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
312
- }
313
-
314
- @each $spacer, $spacer-value in $pf-c-pagination--variable-map {
315
- &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
316
- --pf-c-pagination--inset: #{$spacer-value};
317
- }
318
270
  }
319
271
  }
320
272
  }
package/components/Progress/progress.css CHANGED
@@ -80,7 +80,6 @@
80
80
  }
81
81
  .pf-c-progress.pf-m-singleline .pf-c-progress__description {
82
82
  display: none;
83
- visibility: hidden;
84
83
  }
85
84
  .pf-c-progress.pf-m-singleline .pf-c-progress__bar {
86
85
  grid-row: 1/2;
package/components/Progress/progress.scss CHANGED
@@ -107,7 +107,6 @@
107
107
 
108
108
  .pf-c-progress__description {
109
109
  display: none;
110
- visibility: hidden;
111
110
  }
112
111
 
113
112
  .pf-c-progress__bar {
package/components/Radio/radio.css CHANGED
@@ -15,8 +15,6 @@
15
15
  display: grid;
16
16
  grid-template-columns: auto 1fr;
17
17
  grid-gap: var(--pf-c-radio--GridGap);
18
- align-items: start;
19
- justify-items: start;
20
18
  }
21
19
  .pf-c-radio.pf-m-standalone {
22
20
  --pf-c-radio--GridGap: 0;
@@ -55,6 +53,10 @@
55
53
  margin-top: var(--pf-c-radio__body--MarginTop);
56
54
  }
57
55
 
56
+ .pf-c-radio__label,
57
+ .pf-c-radio__input {
58
+ justify-self: start;
59
+ }
58
60
  label.pf-c-radio, .pf-c-radio__label,
59
61
  .pf-c-radio__input {
60
62
  cursor: pointer;
package/components/Radio/radio.scss CHANGED
@@ -16,8 +16,6 @@
16
16
  display: grid;
17
17
  grid-template-columns: auto 1fr;
18
18
  grid-gap: var(--pf-c-radio--GridGap);
19
- align-items: start;
20
- justify-items: start;
21
19
 
22
20
  &.pf-m-standalone {
23
21
  --pf-c-radio--GridGap: 0;
@@ -64,6 +62,8 @@
64
62
 
65
63
  .pf-c-radio__label,
66
64
  .pf-c-radio__input {
65
+ justify-self: start;
66
+
67
67
  @at-root label.pf-c-radio,
68
68
  & {
69
69
  cursor: pointer;
package/components/SimpleList/simple-list.css CHANGED
@@ -24,7 +24,7 @@
24
24
  --pf-c-simple-list__title--PaddingLeft: var(--pf-global--spacer--md);
25
25
  --pf-c-simple-list__title--FontSize: var(--pf-global--FontSize--sm);
26
26
  --pf-c-simple-list__title--Color: var(--pf-global--Color--dark-200);
27
- --pf-c-simple-list__title--FontWeight: var(--pf-global--FontWeight--semi-bold);
27
+ --pf-c-simple-list__title--FontWeight: var(--pf-global--FontWeight--bold);
28
28
  --pf-c-simple-list__section--section--MarginTop: var(--pf-global--spacer--sm);
29
29
  }
30
30
 
package/components/SimpleList/simple-list.scss CHANGED
@@ -27,7 +27,7 @@
27
27
  --pf-c-simple-list__title--PaddingLeft: var(--pf-global--spacer--md);
28
28
  --pf-c-simple-list__title--FontSize: var(--pf-global--FontSize--sm);
29
29
  --pf-c-simple-list__title--Color: var(--pf-global--Color--dark-200);
30
- --pf-c-simple-list__title--FontWeight: var(--pf-global--FontWeight--semi-bold);
30
+ --pf-c-simple-list__title--FontWeight: var(--pf-global--FontWeight--bold);
31
31
 
32
32
  // Simple list section
33
33
  --pf-c-simple-list__section--section--MarginTop: var(--pf-global--spacer--sm);
package/components/SkipToContent/skip-to-content.css CHANGED
@@ -7,6 +7,6 @@
7
7
  left: -300%;
8
8
  z-index: var(--pf-c-skip-to-content--ZIndex);
9
9
  }
10
- .pf-c-skip-to-content:focus {
10
+ .pf-c-skip-to-content:focus-within {
11
11
  left: var(--pf-c-skip-to-content--focus--Left);
12
12
  }
package/components/SkipToContent/skip-to-content.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  left: -300%; // moves off screen
9
9
  z-index: var(--pf-c-skip-to-content--ZIndex);
10
10
 
11
- &:focus {
11
+ &:focus-within {
12
12
  left: var(--pf-c-skip-to-content--focus--Left);
13
13
  }
14
14
  }
package/components/Slider/slider.css CHANGED
@@ -182,6 +182,13 @@
182
182
  z-index: var(--pf-c-slider__value--m-floating--ZIndex);
183
183
  transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
184
184
  }
185
+ .pf-c-slider__value.pf-m-floating .pf-c-input-group {
186
+ align-items: center;
187
+ }
188
+ .pf-c-slider__value.pf-m-floating .pf-c-input-group__text {
189
+ position: absolute;
190
+ left: 100%;
191
+ }
185
192
  .pf-c-slider__value .pf-c-form-control {
186
193
  width: var(--pf-c-slider__value--c-form-control--Width);
187
194
  }
package/components/Slider/slider.scss CHANGED
@@ -218,6 +218,15 @@
218
218
  left: var(--pf-c-slider__value--m-floating--Left);
219
219
  z-index: var(--pf-c-slider__value--m-floating--ZIndex);
220
220
  transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
221
+
222
+ .pf-c-input-group {
223
+ align-items: center;
224
+ }
225
+
226
+ .pf-c-input-group__text {
227
+ position: absolute;
228
+ left: 100%;
229
+ }
221
230
  }
222
231
 
223
232
  .pf-c-form-control {
package/components/Switch/switch.css CHANGED
@@ -76,7 +76,6 @@
76
76
  }
77
77
  .pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
78
78
  display: none;
79
- visibility: hidden;
80
79
  }
81
80
  .pf-c-switch__input:not(:checked) ~ .pf-m-on {
82
81
  display: none;
package/components/Switch/switch.scss CHANGED
@@ -102,7 +102,6 @@
102
102
  ~ .pf-c-switch__toggle {
103
103
  .pf-c-switch__toggle-icon {
104
104
  display: none;
105
- visibility: hidden;
106
105
  }
107
106
  }
108
107