@patternfly/patternfly 4.158.0 → 4.159.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/components/Menu/menu.css +84 -0
  2. package/components/Menu/menu.scss +109 -0
  3. package/components/Nav/nav.css +3 -3
  4. package/components/Nav/nav.scss +2 -1
  5. package/docs/components/Menu/examples/Menu.md +1 -0
  6. package/docs/components/Nav/examples/Navigation.css +12 -4
  7. package/docs/components/Nav/examples/Navigation.md +51 -232
  8. package/package.json +1 -1
  9. package/patternfly-no-reset.css +87 -3
  10. package/patternfly.css +87 -3
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/patternfly-no-reset.css CHANGED
@@ -15780,6 +15780,7 @@ ul.pf-c-list {
15780
15780
  --pf-c-menu--MinWidth: auto;
15781
15781
  --pf-c-menu--Width: auto;
15782
15782
  --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
15783
+ --pf-c-menu--Top: auto;
15783
15784
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
15784
15785
  --pf-c-menu--m-flyout__menu--Right: auto;
15785
15786
  --pf-c-menu--m-flyout__menu--Bottom: auto;
@@ -15896,11 +15897,38 @@ ul.pf-c-list {
15896
15897
  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
15897
15898
  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
15898
15899
  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
15900
+ top: var(--pf-c-menu--Top);
15899
15901
  z-index: var(--pf-c-menu--ZIndex);
15900
15902
  width: var(--pf-c-menu--Width);
15901
15903
  min-width: var(--pf-c-menu--MinWidth);
15902
15904
  background-color: var(--pf-c-menu--BackgroundColor);
15903
15905
  box-shadow: var(--pf-c-menu--BoxShadow);
15906
+ --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
15907
+ --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
15908
+ --pf-c-menu--m-nav__list--PaddingTop: 0;
15909
+ --pf-c-menu--m-nav__list--PaddingBottom: 0;
15910
+ --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
15911
+ --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
15912
+ --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
15913
+ --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
15914
+ --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
15915
+ --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
15916
+ --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
15917
+ --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
15918
+ --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
15919
+ --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
15920
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
15921
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
15922
+ --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
15923
+ --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
15924
+ --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
15925
+ --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
15926
+ --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
15927
+ --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
15928
+ --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
15929
+ --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
15930
+ --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
15931
+ --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
15904
15932
  }
15905
15933
  .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
15906
15934
  overflow: visible;
@@ -16000,6 +16028,62 @@ ul.pf-c-list {
16000
16028
  .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
16001
16029
  overflow-y: auto;
16002
16030
  }
16031
+ .pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
16032
+ --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
16033
+ --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
16034
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
16035
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
16036
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
16037
+ --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
16038
+ --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
16039
+ --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
16040
+ --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
16041
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
16042
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
16043
+ --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
16044
+ box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
16045
+ }
16046
+ .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
16047
+ position: relative;
16048
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
16049
+ }
16050
+ .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 {
16051
+ position: absolute;
16052
+ right: 0;
16053
+ bottom: 0;
16054
+ left: 0;
16055
+ content: "";
16056
+ border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
16057
+ }
16058
+ .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 {
16059
+ position: absolute;
16060
+ top: var(--pf-c-menu--m-nav__item--hover--after--Top);
16061
+ bottom: 0;
16062
+ left: 0;
16063
+ content: "";
16064
+ border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
16065
+ }
16066
+ .pf-c-menu.pf-m-nav .pf-c-menu {
16067
+ width: 100%;
16068
+ }
16069
+ .pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
16070
+ top: var(--pf-c-menu--m-nav--c-menu--Top);
16071
+ left: var(--pf-c-menu--m-nav--c-menu--Left);
16072
+ }
16073
+ .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 {
16074
+ --pf-c-menu--m-nav--c-menu--Top: auto;
16075
+ bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
16076
+ }
16077
+ .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 {
16078
+ --pf-c-menu--m-nav--c-menu--Left: auto;
16079
+ right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
16080
+ }
16081
+ .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 {
16082
+ --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
16083
+ }
16084
+ .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 {
16085
+ --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
16086
+ }
16003
16087
 
16004
16088
  .pf-c-menu__breadcrumb {
16005
16089
  display: flex;
@@ -17371,14 +17455,14 @@ ul.pf-c-list {
17371
17455
  border-color: var(--pf-c-nav__link--after--BorderColor);
17372
17456
  border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
17373
17457
  }
17374
- .pf-c-nav__link:hover {
17458
+ .pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
17375
17459
  color: var(--pf-c-nav__link--hover--Color);
17376
17460
  background-color: var(--pf-c-nav__link--hover--BackgroundColor);
17377
17461
  }
17378
- .pf-c-nav__link:hover::before {
17462
+ .pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
17379
17463
  border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
17380
17464
  }
17381
- .pf-c-nav__link:hover::after {
17465
+ .pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
17382
17466
  border-color: var(--pf-c-nav__link--hover--after--BorderColor);
17383
17467
  border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
17384
17468
  }
package/patternfly.css CHANGED
@@ -15916,6 +15916,7 @@ ul.pf-c-list {
15916
15916
  --pf-c-menu--MinWidth: auto;
15917
15917
  --pf-c-menu--Width: auto;
15918
15918
  --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
15919
+ --pf-c-menu--Top: auto;
15919
15920
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
15920
15921
  --pf-c-menu--m-flyout__menu--Right: auto;
15921
15922
  --pf-c-menu--m-flyout__menu--Bottom: auto;
@@ -16032,11 +16033,38 @@ ul.pf-c-list {
16032
16033
  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
16033
16034
  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
16034
16035
  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
16036
+ top: var(--pf-c-menu--Top);
16035
16037
  z-index: var(--pf-c-menu--ZIndex);
16036
16038
  width: var(--pf-c-menu--Width);
16037
16039
  min-width: var(--pf-c-menu--MinWidth);
16038
16040
  background-color: var(--pf-c-menu--BackgroundColor);
16039
16041
  box-shadow: var(--pf-c-menu--BoxShadow);
16042
+ --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
16043
+ --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
16044
+ --pf-c-menu--m-nav__list--PaddingTop: 0;
16045
+ --pf-c-menu--m-nav__list--PaddingBottom: 0;
16046
+ --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16047
+ --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16048
+ --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16049
+ --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
16050
+ --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
16051
+ --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
16052
+ --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
16053
+ --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
16054
+ --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
16055
+ --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
16056
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
16057
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
16058
+ --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
16059
+ --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
16060
+ --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
16061
+ --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
16062
+ --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
16063
+ --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
16064
+ --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
16065
+ --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
16066
+ --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
16067
+ --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
16040
16068
  }
16041
16069
  .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
16042
16070
  overflow: visible;
@@ -16136,6 +16164,62 @@ ul.pf-c-list {
16136
16164
  .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
16137
16165
  overflow-y: auto;
16138
16166
  }
16167
+ .pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
16168
+ --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
16169
+ --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
16170
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
16171
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
16172
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
16173
+ --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
16174
+ --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
16175
+ --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
16176
+ --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
16177
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
16178
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
16179
+ --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
16180
+ box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
16181
+ }
16182
+ .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
16183
+ position: relative;
16184
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
16185
+ }
16186
+ .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 {
16187
+ position: absolute;
16188
+ right: 0;
16189
+ bottom: 0;
16190
+ left: 0;
16191
+ content: "";
16192
+ border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
16193
+ }
16194
+ .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 {
16195
+ position: absolute;
16196
+ top: var(--pf-c-menu--m-nav__item--hover--after--Top);
16197
+ bottom: 0;
16198
+ left: 0;
16199
+ content: "";
16200
+ border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
16201
+ }
16202
+ .pf-c-menu.pf-m-nav .pf-c-menu {
16203
+ width: 100%;
16204
+ }
16205
+ .pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
16206
+ top: var(--pf-c-menu--m-nav--c-menu--Top);
16207
+ left: var(--pf-c-menu--m-nav--c-menu--Left);
16208
+ }
16209
+ .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 {
16210
+ --pf-c-menu--m-nav--c-menu--Top: auto;
16211
+ bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
16212
+ }
16213
+ .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 {
16214
+ --pf-c-menu--m-nav--c-menu--Left: auto;
16215
+ right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
16216
+ }
16217
+ .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 {
16218
+ --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
16219
+ }
16220
+ .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 {
16221
+ --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
16222
+ }
16139
16223
 
16140
16224
  .pf-c-menu__breadcrumb {
16141
16225
  display: flex;
@@ -17507,14 +17591,14 @@ ul.pf-c-list {
17507
17591
  border-color: var(--pf-c-nav__link--after--BorderColor);
17508
17592
  border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
17509
17593
  }
17510
- .pf-c-nav__link:hover {
17594
+ .pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
17511
17595
  color: var(--pf-c-nav__link--hover--Color);
17512
17596
  background-color: var(--pf-c-nav__link--hover--BackgroundColor);
17513
17597
  }
17514
- .pf-c-nav__link:hover::before {
17598
+ .pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
17515
17599
  border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
17516
17600
  }
17517
- .pf-c-nav__link:hover::after {
17601
+ .pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
17518
17602
  border-color: var(--pf-c-nav__link--hover--after--BorderColor);
17519
17603
  border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
17520
17604
  }