@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 +41 -0
- package/css/components/Dropdown/dropdown.css +89 -12
- package/css/components/Dropdown/dropdown.d.ts +3 -2
- package/css/components/Dropdown/dropdown.js +3 -2
- package/css/components/DualListSelector/dual-list-selector.css +3 -5
- package/css/components/FormControl/form-control.css +9 -1
- package/css/components/Menu/menu.css +21 -19
- package/css/components/MenuToggle/menu-toggle.css +51 -0
- package/css/components/MenuToggle/menu-toggle.d.ts +2 -1
- package/css/components/MenuToggle/menu-toggle.js +2 -1
- package/css/components/Nav/nav.css +129 -41
- package/css/components/Nav/nav.d.ts +5 -4
- package/css/components/Nav/nav.js +5 -4
- package/css/docs/components/Dropdown/examples/Dropdown.css +4 -1
- package/css/docs/components/Menu/examples/Menu.css +2 -1
- package/css/docs/components/Nav/examples/Navigation.css +7 -6
- package/css/docs/components/Nav/examples/Navigation.d.ts +2 -1
- package/css/docs/components/Nav/examples/Navigation.js +2 -1
- package/package.json +3 -3
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
|
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:
|
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:
|
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-
|
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-
|
233
|
-
|
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-
|
264
|
-
--pf-c-
|
265
|
-
--pf-c-
|
266
|
-
--pf-c-
|
267
|
-
--pf-c-
|
268
|
-
--pf-c-
|
269
|
-
--pf-c-
|
270
|
-
--pf-c-
|
271
|
-
--pf-c-
|
272
|
-
--pf-c-
|
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
|
|
@@ -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-
|
48
|
-
|
49
|
-
#ws-core-c-navigation-
|
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;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@patternfly/react-styles",
|
3
|
-
"version": "4.
|
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.
|
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": "
|
32
|
+
"gitHead": "8c1eb5d895aa2512f7b4197654e414394ff25b30"
|
33
33
|
}
|