@patternfly/react-styles 4.24.1 → 4.24.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/css/components/Menu/menu.css +84 -0
- package/css/components/Menu/menu.d.ts +1 -0
- package/css/components/Menu/menu.js +1 -0
- package/css/components/Nav/nav.css +3 -3
- package/css/components/Nav/nav.d.ts +1 -0
- package/css/components/Nav/nav.js +1 -0
- package/css/docs/components/Nav/examples/Navigation.css +12 -4
- package/css/docs/components/Nav/examples/Navigation.d.ts +5 -0
- package/css/docs/components/Nav/examples/Navigation.js +5 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,14 @@
|
|
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.2 (2021-11-12)
|
7
|
+
|
8
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
9
|
+
|
10
|
+
|
11
|
+
|
12
|
+
|
13
|
+
|
6
14
|
## 4.24.1 (2021-11-12)
|
7
15
|
|
8
16
|
**Note:** Version bump only for package @patternfly/react-styles
|
@@ -79,6 +79,7 @@
|
|
79
79
|
--pf-c-menu--MinWidth: auto;
|
80
80
|
--pf-c-menu--Width: auto;
|
81
81
|
--pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
|
82
|
+
--pf-c-menu--Top: auto;
|
82
83
|
--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
84
|
--pf-c-menu--m-flyout__menu--Right: auto;
|
84
85
|
--pf-c-menu--m-flyout__menu--Bottom: auto;
|
@@ -195,11 +196,38 @@
|
|
195
196
|
--pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
|
196
197
|
--pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
|
197
198
|
--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
199
|
+
top: var(--pf-c-menu--Top);
|
198
200
|
z-index: var(--pf-c-menu--ZIndex);
|
199
201
|
width: var(--pf-c-menu--Width);
|
200
202
|
min-width: var(--pf-c-menu--MinWidth);
|
201
203
|
background-color: var(--pf-c-menu--BackgroundColor);
|
202
204
|
box-shadow: var(--pf-c-menu--BoxShadow);
|
205
|
+
--pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
|
206
|
+
--pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
|
207
|
+
--pf-c-menu--m-nav__list--PaddingTop: 0;
|
208
|
+
--pf-c-menu--m-nav__list--PaddingBottom: 0;
|
209
|
+
--pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
|
210
|
+
--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
|
211
|
+
--pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
|
212
|
+
--pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
|
213
|
+
--pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
|
214
|
+
--pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
|
215
|
+
--pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
|
216
|
+
--pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
|
217
|
+
--pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
|
218
|
+
--pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
219
|
+
--pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
|
220
|
+
--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
|
221
|
+
--pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
|
222
|
+
--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
|
223
|
+
--pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
|
224
|
+
--pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
|
225
|
+
--pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
|
226
|
+
--pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
|
227
|
+
--pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
|
228
|
+
--pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
|
229
|
+
--pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
|
230
|
+
--pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
|
203
231
|
}
|
204
232
|
.pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
|
205
233
|
overflow: visible;
|
@@ -299,6 +327,62 @@
|
|
299
327
|
.pf-c-menu.pf-m-scrollable .pf-c-menu__content {
|
300
328
|
overflow-y: auto;
|
301
329
|
}
|
330
|
+
.pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
|
331
|
+
--pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
|
332
|
+
--pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
|
333
|
+
--pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
|
334
|
+
--pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
|
335
|
+
--pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
|
336
|
+
--pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
|
337
|
+
--pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
|
338
|
+
--pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
|
339
|
+
--pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
|
340
|
+
--pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
|
341
|
+
--pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
|
342
|
+
--pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
|
343
|
+
box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
|
344
|
+
}
|
345
|
+
.pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
|
346
|
+
position: relative;
|
347
|
+
outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
|
348
|
+
}
|
349
|
+
.pf-c-menu.pf-m-nav .pf-c-menu__item::before, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item::before {
|
350
|
+
position: absolute;
|
351
|
+
right: 0;
|
352
|
+
bottom: 0;
|
353
|
+
left: 0;
|
354
|
+
content: "";
|
355
|
+
border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
|
356
|
+
}
|
357
|
+
.pf-c-menu.pf-m-nav .pf-c-menu__item:hover::after, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item:hover::after {
|
358
|
+
position: absolute;
|
359
|
+
top: var(--pf-c-menu--m-nav__item--hover--after--Top);
|
360
|
+
bottom: 0;
|
361
|
+
left: 0;
|
362
|
+
content: "";
|
363
|
+
border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
|
364
|
+
}
|
365
|
+
.pf-c-menu.pf-m-nav .pf-c-menu {
|
366
|
+
width: 100%;
|
367
|
+
}
|
368
|
+
.pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
|
369
|
+
top: var(--pf-c-menu--m-nav--c-menu--Top);
|
370
|
+
left: var(--pf-c-menu--m-nav--c-menu--Left);
|
371
|
+
}
|
372
|
+
.pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-top {
|
373
|
+
--pf-c-menu--m-nav--c-menu--Top: auto;
|
374
|
+
bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
|
375
|
+
}
|
376
|
+
.pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-left {
|
377
|
+
--pf-c-menu--m-nav--c-menu--Left: auto;
|
378
|
+
right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
|
379
|
+
}
|
380
|
+
.pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child {
|
381
|
+
--pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
|
382
|
+
}
|
383
|
+
.pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child .pf-c-menu, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child .pf-c-menu {
|
384
|
+
--pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
|
385
|
+
}
|
302
386
|
|
303
387
|
.pf-c-menu__breadcrumb {
|
304
388
|
display: flex;
|
@@ -724,14 +724,14 @@
|
|
724
724
|
border-color: var(--pf-c-nav__link--after--BorderColor);
|
725
725
|
border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
|
726
726
|
}
|
727
|
-
.pf-c-nav__link:hover {
|
727
|
+
.pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
|
728
728
|
color: var(--pf-c-nav__link--hover--Color);
|
729
729
|
background-color: var(--pf-c-nav__link--hover--BackgroundColor);
|
730
730
|
}
|
731
|
-
.pf-c-nav__link:hover::before {
|
731
|
+
.pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
|
732
732
|
border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
|
733
733
|
}
|
734
|
-
.pf-c-nav__link:hover::after {
|
734
|
+
.pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
|
735
735
|
border-color: var(--pf-c-nav__link--hover--after--BorderColor);
|
736
736
|
border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
|
737
737
|
}
|
@@ -13,8 +13,7 @@
|
|
13
13
|
#ws-core-c-navigation-nav-with-drilldown-menu .pf-c-nav,
|
14
14
|
#ws-core-c-navigation-level-2-drilldown,
|
15
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
|
+
#ws-core-c-navigation-nav-with-flyout .pf-c-nav {
|
18
17
|
padding: 0;
|
19
18
|
background-color: var(--pf-global--BackgroundColor--dark-300);
|
20
19
|
}
|
@@ -47,7 +46,16 @@
|
|
47
46
|
}
|
48
47
|
|
49
48
|
#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 {
|
49
|
+
[id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html {
|
52
50
|
width: 260px;
|
53
51
|
}
|
52
|
+
|
53
|
+
#ws-core-c-navigation-nav-with-flyout .ws-preview-html {
|
54
|
+
position: relative;
|
55
|
+
}
|
56
|
+
|
57
|
+
#ws-core-c-navigation-nav-with-flyout .pf-c-menu.pf-m-flyout.pf-m-nav {
|
58
|
+
position: absolute;
|
59
|
+
top: 168px;
|
60
|
+
left: 256px;
|
61
|
+
}
|
@@ -2,6 +2,11 @@
|
|
2
2
|
exports.__esModule = true;
|
3
3
|
require('./Navigation.css');
|
4
4
|
exports.default = {
|
5
|
+
"menu": "pf-c-menu",
|
6
|
+
"modifiers": {
|
7
|
+
"flyout": "pf-m-flyout",
|
8
|
+
"nav": "pf-m-nav"
|
9
|
+
},
|
5
10
|
"nav": "pf-c-nav",
|
6
11
|
"pageHeader": "pf-c-page__header",
|
7
12
|
"pageHeaderNav": "pf-c-page__header-nav",
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@patternfly/react-styles",
|
3
|
-
"version": "4.24.
|
3
|
+
"version": "4.24.2",
|
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.159.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": "e3eb3038c1f23818774f99280f2a4485ee4a2be2"
|
33
33
|
}
|