@patternfly/react-styles 4.21.0 → 4.24.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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,47 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 4.24.1 (2021-11-12)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
10
+
11
+
12
+
13
+
14
+ # 4.24.0 (2021-11-11)
15
+
16
+
17
+ ### Features
18
+
19
+ * **ComposableTable:** add sticky columns and nested headers ([#6538](https://github.com/patternfly/patternfly-react/issues/6538)) ([f11245b](https://github.com/patternfly/patternfly-react/commit/f11245bfccc8c6c02a9d5545a69ed533743cc552))
20
+
21
+
22
+
23
+
24
+
25
+ # 4.23.0 (2021-11-11)
26
+
27
+
28
+ ### Features
29
+
30
+ * **contextselector:** added support for context selector items as links ([#6554](https://github.com/patternfly/patternfly-react/issues/6554)) ([c465388](https://github.com/patternfly/patternfly-react/commit/c4653881eee0cd8ec8e3a7125bbef0bded9f2de0))
31
+
32
+
33
+
34
+
35
+
36
+ # 4.22.0 (2021-11-11)
37
+
38
+
39
+ ### Features
40
+
41
+ * **Navigation:** Added exemple with third level ([#6564](https://github.com/patternfly/patternfly-react/issues/6564)) ([c30da53](https://github.com/patternfly/patternfly-react/commit/c30da532855118f705c8cfc87c545bb1eea11ebb))
42
+
43
+
44
+
45
+
46
+
6
47
  # 4.21.0 (2021-11-11)
7
48
 
8
49
 
@@ -15,10 +15,10 @@
15
15
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
16
16
  --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300);
17
17
  --pf-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100);
18
- --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
19
- --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
20
18
  --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
21
19
  --pf-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100);
20
+ --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
21
+ --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
22
22
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
23
23
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-global--active-color--100);
24
24
  --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
@@ -32,9 +32,22 @@
32
32
  --pf-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
33
33
  --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
34
34
  --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
35
- --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
36
35
  --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
36
+ --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
37
37
  --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
38
+ --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
39
+ --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
40
+ --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
41
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
42
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
43
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
44
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
45
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
46
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
47
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
48
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
49
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
50
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
38
51
  --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
39
52
  --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
40
53
  --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
@@ -48,6 +61,14 @@
48
61
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
49
62
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
50
63
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
64
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
65
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
66
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
67
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
68
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
69
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
70
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
71
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
51
72
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
52
73
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
53
74
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -140,6 +161,9 @@
140
161
  .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
141
162
  border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
142
163
  }
164
+ .pf-c-dropdown.pf-m-expanded {
165
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
166
+ }
143
167
 
144
168
  .pf-c-dropdown__toggle {
145
169
  position: relative;
@@ -205,6 +229,9 @@
205
229
  .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button:last-child {
206
230
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
207
231
  }
232
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
233
+ border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
234
+ }
208
235
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
209
236
  display: flex;
210
237
  align-items: center;
@@ -222,18 +249,43 @@
222
249
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-text {
223
250
  margin-left: var(--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
224
251
  }
225
- .pf-c-dropdown__toggle:not(.pf-m-action):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
252
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
253
+ --pf-c-dropdown__toggle--before--BorderWidth: 0;
254
+ --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
255
+ }
256
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > * {
257
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
258
+ border: 0;
259
+ }
260
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
261
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
262
+ }
263
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
264
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
265
+ }
266
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *.pf-m-active {
267
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
268
+ }
269
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
270
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
271
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
272
+ }
273
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
274
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
275
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
276
+ }
277
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
226
278
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
227
279
  }
228
- .pf-c-dropdown__toggle:not(.pf-m-action):active::before, .pf-c-dropdown__toggle:not(.pf-m-action).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
280
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
229
281
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
230
282
  border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
231
283
  }
232
- .pf-c-dropdown__toggle:not(.pf-m-action):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
284
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
233
285
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
234
286
  border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
235
287
  }
236
- .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
288
+ .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
237
289
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
238
290
  border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
239
291
  }
@@ -249,32 +301,57 @@
249
301
  .pf-c-dropdown__toggle.pf-m-plain::before {
250
302
  border: 0;
251
303
  }
252
- .pf-c-dropdown__toggle.pf-m-plain:hover, .pf-c-dropdown__toggle.pf-m-plain:active, .pf-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-c-dropdown__toggle.pf-m-plain:focus, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-plain {
304
+ .pf-c-dropdown__toggle.pf-m-plain:hover, .pf-c-dropdown__toggle.pf-m-plain:focus, .pf-c-dropdown__toggle.pf-m-plain:active, .pf-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-plain {
253
305
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
254
306
  }
255
307
  .pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-plain:disabled {
256
308
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
257
309
  }
258
310
  .pf-c-dropdown__toggle.pf-m-primary {
259
- --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
260
311
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
312
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
261
313
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
262
314
  }
315
+ .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
316
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
317
+ }
263
318
  .pf-c-dropdown__toggle.pf-m-primary::before {
264
319
  border: 0;
265
320
  }
266
321
  .pf-c-dropdown__toggle.pf-m-primary:hover {
267
322
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
268
323
  }
269
- .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
270
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
271
- }
272
324
  .pf-c-dropdown__toggle.pf-m-primary:focus {
273
325
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
274
326
  }
327
+ .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
328
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
329
+ }
275
330
  .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
276
331
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
277
332
  }
333
+ .pf-c-dropdown__toggle.pf-m-secondary {
334
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
335
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
336
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
337
+ }
338
+ .pf-c-dropdown__toggle.pf-m-secondary::before {
339
+ border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
340
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
341
+ }
342
+ .pf-c-dropdown__toggle.pf-m-secondary:hover {
343
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
344
+ }
345
+ .pf-c-dropdown__toggle.pf-m-secondary:focus {
346
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
347
+ }
348
+ .pf-c-dropdown__toggle.pf-m-secondary:active, .pf-c-dropdown__toggle.pf-m-secondary.pf-m-active {
349
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
350
+ }
351
+ .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary {
352
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
353
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
354
+ }
278
355
  .pf-c-dropdown__toggle > .pf-c-badge {
279
356
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
280
357
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
@@ -20,13 +20,14 @@ declare const _default: {
20
20
  "menu": "pf-c-menu",
21
21
  "modifiers": {
22
22
  "fullHeight": "pf-m-full-height",
23
+ "expanded": "pf-m-expanded",
23
24
  "action": "pf-m-action",
24
25
  "disabled": "pf-m-disabled",
25
26
  "plain": "pf-m-plain",
26
27
  "splitButton": "pf-m-split-button",
27
- "active": "pf-m-active",
28
- "expanded": "pf-m-expanded",
29
28
  "primary": "pf-m-primary",
29
+ "active": "pf-m-active",
30
+ "secondary": "pf-m-secondary",
30
31
  "top": "pf-m-top",
31
32
  "alignRight": "pf-m-align-right",
32
33
  "alignLeft": "pf-m-align-left",
@@ -22,13 +22,14 @@ exports.default = {
22
22
  "menu": "pf-c-menu",
23
23
  "modifiers": {
24
24
  "fullHeight": "pf-m-full-height",
25
+ "expanded": "pf-m-expanded",
25
26
  "action": "pf-m-action",
26
27
  "disabled": "pf-m-disabled",
27
28
  "plain": "pf-m-plain",
28
29
  "splitButton": "pf-m-split-button",
29
- "active": "pf-m-active",
30
- "expanded": "pf-m-expanded",
31
30
  "primary": "pf-m-primary",
31
+ "active": "pf-m-active",
32
+ "secondary": "pf-m-secondary",
32
33
  "top": "pf-m-top",
33
34
  "alignRight": "pf-m-align-right",
34
35
  "alignLeft": "pf-m-align-left",
@@ -139,6 +139,9 @@
139
139
  overflow-anchor: none;
140
140
  }
141
141
 
142
+ .pf-c-dual-list-selector__list-item:focus {
143
+ --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
144
+ }
142
145
  .pf-c-dual-list-selector__list-item.pf-m-expandable {
143
146
  --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__item--m-expandable--PaddingLeft);
144
147
  }
@@ -159,9 +162,6 @@
159
162
  .pf-c-dual-list-selector__list-item-row:hover {
160
163
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor);
161
164
  }
162
- .pf-c-dual-list-selector__list-item-row:focus-within {
163
- --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
164
- }
165
165
  .pf-c-dual-list-selector__list-item-row.pf-m-selected {
166
166
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
167
167
  }
@@ -205,9 +205,7 @@
205
205
  position: relative;
206
206
  width: 100%;
207
207
  padding: var(--pf-c-dual-list-selector__item--PaddingTop) var(--pf-c-dual-list-selector__item--PaddingRight) var(--pf-c-dual-list-selector__item--PaddingBottom) var(--pf-c-dual-list-selector__item--PaddingLeft);
208
- text-align: left;
209
208
  cursor: pointer;
210
- border: 0;
211
209
  }
212
210
 
213
211
  .pf-c-dual-list-selector__item-count {
@@ -100,7 +100,8 @@
100
100
  --pf-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
101
101
  --pf-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");
102
102
  --pf-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
103
- --pf-c-form-control__select--PaddingRight: var(--pf-global--spacer--lg);
103
+ --pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
104
+ --pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm) - var(--pf-c-form-control--BorderWidth));
104
105
  --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
105
106
  --pf-c-form-control__select--BackgroundSize: .625em;
106
107
  --pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 1px);
@@ -232,10 +233,17 @@
232
233
  }
233
234
  select.pf-c-form-control {
234
235
  --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
236
+ --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
235
237
  background-image: var(--pf-c-form-control__select--BackgroundUrl);
236
238
  background-position: var(--pf-c-form-control__select--BackgroundPosition);
237
239
  background-size: var(--pf-c-form-control__select--BackgroundSize);
238
240
  }
241
+ @-moz-document url-prefix() {
242
+ select.pf-c-form-control {
243
+ --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px);
244
+ --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px);
245
+ }
246
+ }
239
247
  select.pf-c-form-control[aria-invalid=true] {
240
248
  --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
241
249
  --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition);
@@ -80,6 +80,8 @@
80
80
  --pf-c-menu--Width: auto;
81
81
  --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
82
82
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
83
+ --pf-c-menu--m-flyout__menu--Right: auto;
84
+ --pf-c-menu--m-flyout__menu--Bottom: auto;
83
85
  --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
84
86
  --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
85
87
  --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
@@ -199,9 +201,6 @@
199
201
  background-color: var(--pf-c-menu--BackgroundColor);
200
202
  box-shadow: var(--pf-c-menu--BoxShadow);
201
203
  }
202
- .pf-c-menu .pf-c-menu__content {
203
- overflow-y: auto;
204
- }
205
204
  .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
206
205
  overflow: visible;
207
206
  }
@@ -209,28 +208,23 @@
209
208
  margin-top: var(--pf-c-menu--c-divider--MarginTop);
210
209
  margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
211
210
  }
212
- .pf-c-menu.pf-m-flyout {
213
- overflow: visible;
214
- }
215
- .pf-c-menu.pf-m-flyout .pf-c-menu {
211
+ .pf-c-menu .pf-c-menu.pf-m-flyout, .pf-c-menu.pf-m-flyout .pf-c-menu {
216
212
  position: absolute;
217
213
  top: var(--pf-c-menu--m-flyout__menu--Top);
218
- right: auto;
214
+ right: var(--pf-c-menu--m-flyout__menu--Right);
215
+ bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
219
216
  left: var(--pf-c-menu--m-flyout__menu--Left);
220
217
  }
221
- .pf-c-menu.pf-m-flyout .pf-c-menu.pf-m-top {
222
- top: auto;
223
- bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
224
- }
225
- .pf-c-menu.pf-m-flyout .pf-c-menu.pf-m-left {
226
- right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
227
- left: auto;
228
- }
229
- .pf-c-menu.pf-m-flyout .pf-c-menu__content {
218
+ .pf-c-menu .pf-c-menu.pf-m-flyout .pf-c-menu__content, .pf-c-menu.pf-m-flyout .pf-c-menu .pf-c-menu__content {
230
219
  overflow-y: visible;
231
220
  }
232
- .pf-c-menu.pf-m-flyout .pf-c-menu__list-item {
233
- position: relative;
221
+ .pf-c-menu.pf-m-top {
222
+ --pf-c-menu--m-flyout__menu--Top: auto;
223
+ --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
224
+ }
225
+ .pf-c-menu.pf-m-left {
226
+ --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
227
+ --pf-c-menu--m-flyout__menu--Left: auto;
234
228
  }
235
229
  .pf-c-menu.pf-m-drilldown {
236
230
  display: flex;
@@ -264,6 +258,10 @@
264
258
  overflow: hidden;
265
259
  transition: var(--pf-c-menu--m-drilldown__list--Transition);
266
260
  }
261
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
262
+ --pf-c-menu__list--PaddingTop: 0;
263
+ --pf-c-menu__list--PaddingBottom: 0;
264
+ }
267
265
  .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path .pf-c-menu {
268
266
  z-index: var(--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
269
267
  }
@@ -298,6 +296,9 @@
298
296
  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
299
297
  --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
300
298
  }
299
+ .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
300
+ overflow-y: auto;
301
+ }
301
302
 
302
303
  .pf-c-menu__breadcrumb {
303
304
  display: flex;
@@ -364,6 +365,7 @@
364
365
 
365
366
  .pf-c-menu__list-item {
366
367
  --pf-hidden-visible--visible--Display: var(--pf-c-menu__list-item--Display);
368
+ position: relative;
367
369
  color: var(--pf-c-menu__list-item--Color);
368
370
  background-color: var(--pf-c-menu__list-item--BackgroundColor);
369
371
  }
@@ -1,4 +1,5 @@
1
1
  .pf-c-menu-toggle {
2
+ --pf-c-menu-toggle--BorderRadius: 0;
2
3
  --pf-c-menu-toggle--PaddingTop: var(--pf-global--spacer--form-element);
3
4
  --pf-c-menu-toggle--PaddingRight: var(--pf-global--spacer--sm);
4
5
  --pf-c-menu-toggle--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -33,12 +34,27 @@
33
34
  --pf-c-menu-toggle--disabled--Color: var(--pf-global--disabled-color--100);
34
35
  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
35
36
  --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
37
+ --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
36
38
  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
37
39
  --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
38
40
  --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
39
41
  --pf-c-menu-toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
40
42
  --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
41
43
  --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
44
+ --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
45
+ --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
46
+ --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
47
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
48
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
49
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
50
+ --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
51
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
52
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
53
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
54
+ --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
55
+ --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
56
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
57
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
42
58
  --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
43
59
  --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
44
60
  --pf-c-menu-toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
@@ -69,6 +85,7 @@
69
85
  color: var(--pf-c-menu-toggle--Color);
70
86
  background-color: var(--pf-c-menu-toggle--BackgroundColor);
71
87
  border: 0;
88
+ border-radius: var(--pf-c-menu-toggle--BorderRadius);
72
89
  }
73
90
  .pf-c-menu-toggle::before, .pf-c-menu-toggle::after {
74
91
  position: absolute;
@@ -88,6 +105,7 @@
88
105
  border-bottom: var(--pf-c-menu-toggle--after--BorderBottomWidth) solid var(--pf-c-menu-toggle--after--BorderBottomColor);
89
106
  }
90
107
  .pf-c-menu-toggle.pf-m-primary {
108
+ --pf-c-menu-toggle--BorderRadius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
91
109
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-primary--Color);
92
110
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--m-primary--BackgroundColor);
93
111
  --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-c-menu-toggle--m-primary--hover--BackgroundColor);
@@ -96,6 +114,39 @@
96
114
  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
97
115
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
98
116
  }
117
+ .pf-c-menu-toggle.pf-m-primary, .pf-c-menu-toggle.pf-m-primary::before {
118
+ border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
119
+ }
120
+ .pf-c-menu-toggle.pf-m-secondary {
121
+ --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
122
+ --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
123
+ }
124
+ .pf-c-menu-toggle.pf-m-secondary, .pf-c-menu-toggle.pf-m-secondary::before {
125
+ border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
126
+ }
127
+ .pf-c-menu-toggle.pf-m-secondary::before {
128
+ border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
129
+ border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
130
+ }
131
+ .pf-c-menu-toggle.pf-m-secondary::after {
132
+ border: 0;
133
+ }
134
+ .pf-c-menu-toggle.pf-m-secondary:hover {
135
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
136
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
137
+ }
138
+ .pf-c-menu-toggle.pf-m-secondary:focus {
139
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
140
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
141
+ }
142
+ .pf-c-menu-toggle.pf-m-secondary:active {
143
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
144
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
145
+ }
146
+ .pf-c-menu-toggle.pf-m-secondary.pf-m-expanded {
147
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
148
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
149
+ }
99
150
  .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
100
151
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
101
152
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
@@ -8,9 +8,10 @@ declare const _default: {
8
8
  "menuToggleToggleIcon": "pf-c-menu-toggle__toggle-icon",
9
9
  "modifiers": {
10
10
  "primary": "pf-m-primary",
11
+ "secondary": "pf-m-secondary",
12
+ "expanded": "pf-m-expanded",
11
13
  "plain": "pf-m-plain",
12
14
  "text": "pf-m-text",
13
- "expanded": "pf-m-expanded",
14
15
  "fullHeight": "pf-m-full-height"
15
16
  }
16
17
  };
@@ -10,9 +10,10 @@ exports.default = {
10
10
  "menuToggleToggleIcon": "pf-c-menu-toggle__toggle-icon",
11
11
  "modifiers": {
12
12
  "primary": "pf-m-primary",
13
+ "secondary": "pf-m-secondary",
14
+ "expanded": "pf-m-expanded",
13
15
  "plain": "pf-m-plain",
14
16
  "text": "pf-m-text",
15
- "expanded": "pf-m-expanded",
16
17
  "fullHeight": "pf-m-full-height"
17
18
  }
18
19
  };
@@ -237,7 +237,6 @@
237
237
  --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
238
238
  --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
239
239
  --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
240
- --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
241
240
  --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
242
241
  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: calc(var(--pf-c-nav__item--m-flyout--c-menu--Top) - var(--pf-c-nav__item--before--BorderWidth));
243
242
  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
@@ -246,11 +245,10 @@
246
245
  --pf-c-nav__item--m-flyout--c-menu--m-top--Bottom: calc(0 + var(--pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset));
247
246
  --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
248
247
  --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
248
+ --pf-c-nav__item--m-flyout--c-menu__item--PaddingTop: var(--pf-global--spacer--sm);
249
249
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
250
+ --pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom: var(--pf-global--spacer--sm);
250
251
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft: var(--pf-global--spacer--lg);
251
- --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
252
- --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
253
- --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
254
252
  --pf-c-nav__item--m-flyout--c-menu__item-description--Color: var(--pf-global--Color--light-200);
255
253
  --pf-c-nav__item--m-flyout--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
256
254
  --pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset: var(--pf-c-nav__link--OutlineOffset);
@@ -259,17 +257,52 @@
259
257
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
260
258
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
261
259
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: calc(-1 * var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth));
260
+ --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
261
+ --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
262
+ --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
262
263
  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
263
- --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
264
- --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
265
- --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
266
- --pf-c-nav__item--m-drilldown__subnav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
267
- --pf-c-nav__item--m-drilldown__subnav--ZIndex: var(--pf-global--ZIndex--xs);
268
- --pf-c-nav__item--m-drilldown__link--PaddingTop: var(--pf-global--spacer--md);
269
- --pf-c-nav__item--m-drilldown__link--PaddingBottom: var(--pf-global--spacer--md);
270
- --pf-c-nav__item--m-drilldown__link--FontSize: var(--pf-global--FontSize--md);
271
- --pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate: 0;
272
- --pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex: var(--pf-global--ZIndex--xs);
264
+ --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
265
+ --pf-c-nav--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
266
+ --pf-c-nav--c-menu__list--PaddingTop: 0;
267
+ --pf-c-nav--c-menu__list--PaddingBottom: 0;
268
+ --pf-c-nav--c-menu__list-item--Color: var(--pf-global--Color--light-100);
269
+ --pf-c-nav--c-menu__list-item--hover--Color: var(--pf-global--Color--light-100);
270
+ --pf-c-nav--c-menu__list-item--active--Color: var(--pf-global--Color--light-100);
271
+ --pf-c-nav--c-menu__list-item--focus-within--Color: var(--pf-global--Color--light-100);
272
+ --pf-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
273
+ --pf-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
274
+ --pf-c-nav--c-menu__item--PaddingTop: var(--pf-global--spacer--md);
275
+ --pf-c-nav--c-menu__item--PaddingRight: var(--pf-global--spacer--md);
276
+ --pf-c-nav--c-menu__item--PaddingBottom: var(--pf-global--spacer--md);
277
+ --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-global--spacer--md);
278
+ --pf-c-nav--c-menu__item--xl--PaddingRight: var(--pf-global--spacer--lg);
279
+ --pf-c-nav--c-menu__item--xl--PaddingLeft: var(--pf-global--spacer--lg);
280
+ --pf-c-nav--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
281
+ --pf-c-nav--c-menu__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
282
+ --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
283
+ --pf-c-nav--c-menu__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
284
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: 0;
285
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: transparent;
286
+ --pf-c-nav--c-menu__item--m-current--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
287
+ --pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth: var(--pf-global--BorderWidth--xl);
288
+ --pf-c-nav--c-menu__item--m-current--after--BorderColor: var(--pf-global--active-color--400);
289
+ --pf-c-nav--c-menu__item-description--Color: var(--pf-global--Color--400);
290
+ --pf-c-nav--c-menu--m-flyout--left-offset: 0.25rem;
291
+ --pf-c-nav--c-menu--m-flyout--m-left--right-offset: 0.25rem;
292
+ --pf-c-nav--c-menu--m-flyout--Top: 0;
293
+ --pf-c-nav--c-menu--m-flyout--c-menu--Top: calc(var(--pf-c-nav--c-menu--m-flyout--Top) * -1);
294
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: auto;
295
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: auto;
296
+ --pf-c-nav--c-menu--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav--c-menu--m-flyout--left-offset));
297
+ --pf-c-nav--c-menu--m-flyout--m-left--Right: calc(100% - var(--pf-c-nav--c-menu--m-flyout--m-left--right-offset));
298
+ --pf-c-nav--c-menu--m-flyout--m-top--Bottom: 0;
299
+ --pf-c-nav--c-menu--m-flyout--BoxShadow: var(--pf-global--BoxShadow--lg);
300
+ --pf-c-nav--c-menu--m-flyout__item--PaddingTop: var(--pf-global--spacer--sm);
301
+ --pf-c-nav--c-menu--m-flyout__item--PaddingRight: var(--pf-global--spacer--lg);
302
+ --pf-c-nav--c-menu--m-flyout__item--PaddingBottom: var(--pf-global--spacer--sm);
303
+ --pf-c-nav--c-menu--m-flyout__item--PaddingLeft: var(--pf-global--spacer--lg);
304
+ --pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
305
+ --pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
273
306
  --pf-c-nav__toggle--m-start--MarginRight: var(--pf-global--spacer--sm);
274
307
  position: relative;
275
308
  }
@@ -286,8 +319,86 @@
286
319
  --pf-c-nav__section-title--PaddingRight: var(--pf-c-nav__section-title--xl--PaddingRight);
287
320
  --pf-c-nav__section-title--PaddingLeft: var(--pf-c-nav__section-title--xl--PaddingLeft);
288
321
  --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav--xl--PaddingLeft);
322
+ --pf-c-nav--c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--xl--PaddingRight);
323
+ --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--xl--PaddingLeft);
289
324
  }
290
325
  }
326
+ .pf-c-nav .pf-c-menu {
327
+ --pf-c-menu--MinWidth: 100%;
328
+ --pf-c-menu--BackgroundColor: var(--pf-c-nav--c-menu--BackgroundColor);
329
+ --pf-c-menu__list--PaddingTop: var(--pf-c-nav--c-menu__list--PaddingTop);
330
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-nav--c-menu__list--PaddingBottom);
331
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu__item--PaddingTop);
332
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--PaddingRight);
333
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu__item--PaddingBottom);
334
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--PaddingLeft);
335
+ --pf-c-menu__list-item--Color: var(--pf-c-nav--c-menu__list-item--Color);
336
+ --pf-c-menu__list-item--hover--Color: var(--pf-c-nav--c-menu__list-item--hover--Color);
337
+ --pf-c-menu__list-item--active--Color: var(--pf-c-nav--c-menu__list-item--active--Color);
338
+ --pf-c-menu__list-item--focus-within--Color: var(--pf-c-nav--c-menu__list-item--focus-within--Color);
339
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav--c-menu__list-item--hover--BackgroundColor);
340
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor);
341
+ --pf-c-menu__item-description--Color: var(--pf-c-nav--c-menu__item-description--Color);
342
+ }
343
+ .pf-c-nav .pf-c-menu:first-child > .pf-c-menu__content {
344
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
345
+ }
346
+ .pf-c-nav .pf-c-menu.pf-m-flyout, .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu {
347
+ --pf-c-menu--BoxShadow: var(--pf-c-nav--c-menu--m-flyout--BoxShadow);
348
+ --pf-c-menu__list--PaddingTop: 0;
349
+ --pf-c-menu__list--PaddingBottom: 0;
350
+ --pf-c-menu__item--FontSize: var(--pf-c-nav--c-menu__item--FontSize);
351
+ --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color);
352
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu--m-flyout__item--PaddingTop);
353
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu--m-flyout__item--PaddingRight);
354
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu--m-flyout__item--PaddingBottom);
355
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu--m-flyout__item--PaddingLeft);
356
+ top: var(--pf-c-nav--c-menu--m-flyout--c-menu--Top);
357
+ right: var(--pf-c-nav--c-menu--m-flyout--c-menu--Right);
358
+ bottom: var(--pf-c-nav--c-menu--m-flyout--c-menu--Bottom);
359
+ left: var(--pf-c-nav--c-menu--m-flyout--c-menu--Left);
360
+ }
361
+ .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover {
362
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth);
363
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor);
364
+ }
365
+ .pf-c-nav .pf-c-menu.pf-m-top {
366
+ --pf-c-nav--c-menu--m-flyout--c-menu--Top: auto;
367
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav--c-menu--m-flyout--m-top--Bottom);
368
+ }
369
+ .pf-c-nav .pf-c-menu.pf-m-left {
370
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav--c-menu--m-flyout--m-left--Right);
371
+ --pf-c-nav--c-menu--m-flyout--c-menu--Left: auto;
372
+ }
373
+ .pf-c-nav .pf-c-menu .pf-c-divider {
374
+ margin-top: 0;
375
+ margin-bottom: 0;
376
+ }
377
+ .pf-c-nav .pf-c-menu__item {
378
+ position: relative;
379
+ outline-offset: var(--pf-c-nav--c-menu__item--OutlineOffset);
380
+ }
381
+ .pf-c-nav .pf-c-menu__item::before, .pf-c-nav .pf-c-menu__item::after {
382
+ position: absolute;
383
+ top: 0;
384
+ content: "";
385
+ }
386
+ .pf-c-nav .pf-c-menu__item::before {
387
+ right: 0;
388
+ bottom: calc(var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) * -1);
389
+ left: 0;
390
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
391
+ }
392
+ .pf-c-nav .pf-c-menu__item::after {
393
+ bottom: 0;
394
+ left: 0;
395
+ border-left: var(--pf-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-c-nav--c-menu__item--after--BorderLeftColor);
396
+ }
397
+ .pf-c-nav .pf-c-menu__item.pf-m-current {
398
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth);
399
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
400
+ background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
401
+ }
291
402
  .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
292
403
  content: none;
293
404
  }
@@ -539,9 +650,13 @@
539
650
  --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
540
651
  --pf-c-menu__item--FontSize: var(--pf-c-nav__item--m-flyout--c-menu__item--FontSize);
541
652
  --pf-c-menu__item--Color: var(--pf-c-nav__item--m-flyout--c-menu__item--Color);
653
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingTop);
542
654
  --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
655
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom);
543
656
  --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
544
657
  --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
658
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
659
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
545
660
  position: absolute;
546
661
  top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
547
662
  left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
@@ -549,14 +664,6 @@
549
664
  .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
550
665
  top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
551
666
  }
552
- .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
553
- top: auto;
554
- bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
555
- }
556
- .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
557
- right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
558
- left: auto;
559
- }
560
667
  .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
561
668
  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
562
669
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
@@ -581,25 +688,6 @@
581
688
  content: "";
582
689
  border-left: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
583
690
  }
584
- .pf-c-nav__item.pf-m-drilldown {
585
- --pf-c-nav__subnav--PaddingTop: var(--pf-c-nav__item--m-drilldown__subnav--PaddingTop);
586
- --pf-c-nav__subnav--PaddingBottom: var(--pf-c-nav__item--m-drilldown__subnav--PaddingBottom);
587
- --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__item--m-drilldown__subnav--PaddingLeft);
588
- --pf-c-nav__item--m-expanded__toggle-icon--Rotate: var(--pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate);
589
- }
590
- .pf-c-nav__item.pf-m-drilldown > .pf-c-nav__subnav {
591
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav__item--m-drilldown__link--PaddingTop);
592
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__item--m-drilldown__link--PaddingBottom);
593
- --pf-c-nav__link--FontSize: var(--pf-c-nav__item--m-drilldown__link--FontSize);
594
- --pf-c-nav__subnav--MaxHeight: 100%;
595
- position: absolute;
596
- top: 0;
597
- left: 100%;
598
- z-index: var(--pf-c-nav__item--m-drilldown__subnav--ZIndex);
599
- width: 100%;
600
- height: 100%;
601
- background-color: var(--pf-c-nav__item--m-drilldown__subnav--BackgroundColor);
602
- }
603
691
  .pf-c-nav__item.pf-m-drilldown.pf-m-expanded > .pf-c-nav__subnav {
604
692
  left: 0;
605
693
  z-index: var(--pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex);
@@ -2,9 +2,14 @@ import './nav.css';
2
2
  declare const _default: {
3
3
  "divider": "pf-c-divider",
4
4
  "menu": "pf-c-menu",
5
+ "menuContent": "pf-c-menu__content",
5
6
  "menuItem": "pf-c-menu__item",
6
7
  "menuListItem": "pf-c-menu__list-item",
7
8
  "modifiers": {
9
+ "flyout": "pf-m-flyout",
10
+ "top": "pf-m-top",
11
+ "left": "pf-m-left",
12
+ "current": "pf-m-current",
8
13
  "horizontal": "pf-m-horizontal",
9
14
  "tertiary": "pf-m-tertiary",
10
15
  "horizontalSubnav": "pf-m-horizontal-subnav",
@@ -13,11 +18,7 @@ declare const _default: {
13
18
  "overflowHidden": "pf-m-overflow-hidden",
14
19
  "expandable": "pf-m-expandable",
15
20
  "expanded": "pf-m-expanded",
16
- "flyout": "pf-m-flyout",
17
- "top": "pf-m-top",
18
- "left": "pf-m-left",
19
21
  "drilldown": "pf-m-drilldown",
20
- "current": "pf-m-current",
21
22
  "start": "pf-m-start"
22
23
  },
23
24
  "nav": "pf-c-nav",
@@ -4,9 +4,14 @@ require('./nav.css');
4
4
  exports.default = {
5
5
  "divider": "pf-c-divider",
6
6
  "menu": "pf-c-menu",
7
+ "menuContent": "pf-c-menu__content",
7
8
  "menuItem": "pf-c-menu__item",
8
9
  "menuListItem": "pf-c-menu__list-item",
9
10
  "modifiers": {
11
+ "flyout": "pf-m-flyout",
12
+ "top": "pf-m-top",
13
+ "left": "pf-m-left",
14
+ "current": "pf-m-current",
10
15
  "horizontal": "pf-m-horizontal",
11
16
  "tertiary": "pf-m-tertiary",
12
17
  "horizontalSubnav": "pf-m-horizontal-subnav",
@@ -15,11 +20,7 @@ exports.default = {
15
20
  "overflowHidden": "pf-m-overflow-hidden",
16
21
  "expandable": "pf-m-expandable",
17
22
  "expanded": "pf-m-expanded",
18
- "flyout": "pf-m-flyout",
19
- "top": "pf-m-top",
20
- "left": "pf-m-left",
21
23
  "drilldown": "pf-m-drilldown",
22
- "current": "pf-m-current",
23
24
  "start": "pf-m-start"
24
25
  },
25
26
  "nav": "pf-c-nav",
@@ -7,6 +7,7 @@
7
7
  #ws-core-c-dropdown-align-on-different-breakpoint,
8
8
  #ws-core-c-dropdown-align-top,
9
9
  #ws-core-c-dropdown-primary-toggle,
10
+ #ws-core-c-dropdown-secondary-toggle,
10
11
  #ws-core-c-dropdown-menu-item-icons,
11
12
  #ws-core-c-dropdown-aria-disabled-items {
12
13
  min-height: 310px;
@@ -39,7 +40,9 @@
39
40
  }
40
41
 
41
42
  #ws-core-c-dropdown-split-button-checkbox,
42
- #ws-core-c-dropdown-split-button-action {
43
+ #ws-core-c-dropdown-split-button-action,
44
+ #ws-core-c-dropdown-split-button-primary-checkbox,
45
+ #ws-core-c-dropdown-split-button-primary-action {
43
46
  min-height: 210px;
44
47
  }
45
48
 
@@ -1,4 +1,5 @@
1
- [id^="ws-core-c-menu-with-flyout"] {
1
+ [id^="ws-core-c-menu-with-flyout"],
2
+ [id^="ws-core-c-menu-standard-menu-flyout-child"] {
2
3
  display: flex;
3
4
  height: 400px;
4
5
  }
@@ -5,14 +5,16 @@
5
5
  #ws-core-c-navigation-expanded,
6
6
  #ws-core-c-navigation-expanded-with-subnav-titles,
7
7
  #ws-core-c-navigation-mixed,
8
- #ws-core-c-navigation-flyout-with-menu-component,
9
8
  #ws-core-c-navigation-horizontal,
10
9
  #ws-core-c-navigation-horizontal-overflow,
11
10
  #ws-core-c-navigation-horizontal-subnav,
12
11
  #ws-core-c-navigation-horizontal-subnav-overflow,
13
12
  #ws-core-c-navigation-drilldown,
13
+ #ws-core-c-navigation-nav-with-drilldown-menu .pf-c-nav,
14
14
  #ws-core-c-navigation-level-2-drilldown,
15
- #ws-core-c-navigation-level-3-drilldown {
15
+ #ws-core-c-navigation-level-3-drilldown,
16
+ #ws-core-c-navigation-nav-with-flyout .pf-c-nav,
17
+ #ws-core-c-navigation-nav-with-menu-and-flyout .pf-c-nav {
16
18
  padding: 0;
17
19
  background-color: var(--pf-global--BackgroundColor--dark-300);
18
20
  }
@@ -44,9 +46,8 @@
44
46
  grid-row: 1;
45
47
  }
46
48
 
47
- #ws-core-c-navigation-flyout-with-menu-component,
48
- #ws-core-c-navigation-drilldown,
49
- #ws-core-c-navigation-level-2-drilldown,
50
- #ws-core-c-navigation-level-3-drilldown {
49
+ #ws-core-c-navigation-nav-with-flyout .ws-preview-html,
50
+ [id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html,
51
+ #ws-core-c-navigation-nav-with-menu-and-flyout .ws-preview-html {
51
52
  width: 260px;
52
53
  }
@@ -2,6 +2,7 @@ import './Navigation.css';
2
2
  declare const _default: {
3
3
  "nav": "pf-c-nav",
4
4
  "pageHeader": "pf-c-page__header",
5
- "pageHeaderNav": "pf-c-page__header-nav"
5
+ "pageHeaderNav": "pf-c-page__header-nav",
6
+ "wsPreviewHtml": "ws-preview-html"
6
7
  };
7
8
  export default _default;
@@ -4,5 +4,6 @@ require('./Navigation.css');
4
4
  exports.default = {
5
5
  "nav": "pf-c-nav",
6
6
  "pageHeader": "pf-c-page__header",
7
- "pageHeaderNav": "pf-c-page__header-nav"
7
+ "pageHeaderNav": "pf-c-page__header-nav",
8
+ "wsPreviewHtml": "ws-preview-html"
8
9
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "4.21.0",
3
+ "version": "4.24.1",
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": "4.156.0",
22
+ "@patternfly/patternfly": "4.158.0",
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.0.0"
30
30
  },
31
31
  "license": "MIT",
32
- "gitHead": "09d356c99de79684e78f5dcd8caa40ce3a0873d4"
32
+ "gitHead": "8c1eb5d895aa2512f7b4197654e414394ff25b30"
33
33
  }