@patternfly/react-styles 4.24.1 → 4.25.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 CHANGED
@@ -3,6 +3,41 @@
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.25.2 (2021-11-15)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
10
+
11
+
12
+
13
+
14
+ ## 4.25.1 (2021-11-15)
15
+
16
+ **Note:** Version bump only for package @patternfly/react-styles
17
+
18
+
19
+
20
+
21
+
22
+ # 4.25.0 (2021-11-12)
23
+
24
+
25
+ ### Features
26
+
27
+ * **card:** added hoverable/selectable/selected-raised variant ([#6565](https://github.com/patternfly/patternfly-react/issues/6565)) ([8c60568](https://github.com/patternfly/patternfly-react/commit/8c60568ba4fa18398fed636710e222ce506de82c))
28
+
29
+
30
+
31
+
32
+
33
+ ## 4.24.2 (2021-11-12)
34
+
35
+ **Note:** Version bump only for package @patternfly/react-styles
36
+
37
+
38
+
39
+
40
+
6
41
  ## 4.24.1 (2021-11-12)
7
42
 
8
43
  **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;
@@ -43,6 +43,7 @@ declare const _default: {
43
43
  "static": "pf-m-static",
44
44
  "plain": "pf-m-plain",
45
45
  "scrollable": "pf-m-scrollable",
46
+ "nav": "pf-m-nav",
46
47
  "disabled": "pf-m-disabled",
47
48
  "load": "pf-m-load",
48
49
  "loading": "pf-m-loading",
@@ -45,6 +45,7 @@ exports.default = {
45
45
  "static": "pf-m-static",
46
46
  "plain": "pf-m-plain",
47
47
  "scrollable": "pf-m-scrollable",
48
+ "nav": "pf-m-nav",
48
49
  "disabled": "pf-m-disabled",
49
50
  "load": "pf-m-load",
50
51
  "loading": "pf-m-loading",
@@ -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
  }
@@ -19,6 +19,7 @@ declare const _default: {
19
19
  "expandable": "pf-m-expandable",
20
20
  "expanded": "pf-m-expanded",
21
21
  "drilldown": "pf-m-drilldown",
22
+ "hover": "pf-m-hover",
22
23
  "start": "pf-m-start"
23
24
  },
24
25
  "nav": "pf-c-nav",
@@ -21,6 +21,7 @@ exports.default = {
21
21
  "expandable": "pf-m-expandable",
22
22
  "expanded": "pf-m-expanded",
23
23
  "drilldown": "pf-m-drilldown",
24
+ "hover": "pf-m-hover",
24
25
  "start": "pf-m-start"
25
26
  },
26
27
  "nav": "pf-c-nav",
@@ -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
+ }
@@ -1,5 +1,10 @@
1
1
  import './Navigation.css';
2
2
  declare const _default: {
3
+ "menu": "pf-c-menu",
4
+ "modifiers": {
5
+ "flyout": "pf-m-flyout",
6
+ "nav": "pf-m-nav"
7
+ },
3
8
  "nav": "pf-c-nav",
4
9
  "pageHeader": "pf-c-page__header",
5
10
  "pageHeaderNav": "pf-c-page__header-nav",
@@ -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.1",
3
+ "version": "4.25.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.158.0",
22
+ "@patternfly/patternfly": "4.159.1",
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": "8c1eb5d895aa2512f7b4197654e414394ff25b30"
32
+ "gitHead": "77f760305bd6eb6415fd27be973783cca4f0d97a"
33
33
  }