@patternfly/patternfly 4.140.0 → 4.141.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 (8) hide show
  1. package/components/Menu/menu.css +32 -1
  2. package/components/Menu/menu.scss +39 -1
  3. package/docs/components/Menu/examples/Menu.md +548 -67
  4. package/package.json +1 -1
  5. package/patternfly-no-reset.css +32 -1
  6. package/patternfly.css +32 -1
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Menu/menu.css CHANGED
@@ -83,10 +83,13 @@
83
83
  --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
84
84
  --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
85
85
  --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
86
+ --pf-c-menu--m-plain--BoxShadow: none;
86
87
  --pf-c-menu--m-flyout__menu--top-offset: 0px;
87
88
  --pf-c-menu--m-flyout__menu--left-offset: 0px;
88
89
  --pf-c-menu--m-flyout__menu--m-left--right-offset: 0px;
89
90
  --pf-c-menu__content--Height: auto;
91
+ --pf-c-menu__content--MaxHeight: none;
92
+ --pf-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
90
93
  --pf-c-menu--c-divider--MarginTop: 0;
91
94
  --pf-c-menu--c-divider--MarginBottom: 0;
92
95
  --pf-c-menu__list--c-divider--MarginTop: var(--pf-global--spacer--sm);
@@ -182,7 +185,14 @@
182
185
  --pf-c-menu__footer--PaddingRight: var(--pf-global--spacer--md);
183
186
  --pf-c-menu__footer--PaddingBottom: var(--pf-global--spacer--md);
184
187
  --pf-c-menu__footer--PaddingLeft: var(--pf-global--spacer--md);
185
- --pf-c-menu__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
188
+ --pf-c-menu__footer--BoxShadow: none;
189
+ --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
190
+ --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
191
+ --pf-c-menu__footer--after--BorderBottomWidth: 0;
192
+ --pf-c-menu__footer--after--BorderBottomColor: var(--pf-global--BorderColor--100);
193
+ --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
194
+ --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
195
+ --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
186
196
  z-index: var(--pf-c-menu--ZIndex);
187
197
  width: var(--pf-c-menu--Width);
188
198
  background-color: var(--pf-c-menu--BackgroundColor);
@@ -278,6 +288,15 @@
278
288
  .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item:not(.pf-m-current-path) {
279
289
  display: none;
280
290
  }
291
+ .pf-c-menu.pf-m-plain {
292
+ --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
293
+ }
294
+ .pf-c-menu.pf-m-scrollable {
295
+ --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
296
+ --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
297
+ --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
298
+ --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
299
+ }
281
300
 
282
301
  .pf-c-menu__breadcrumb {
283
302
  display: flex;
@@ -492,6 +511,18 @@
492
511
  }
493
512
 
494
513
  .pf-c-menu__footer {
514
+ position: relative;
495
515
  padding: var(--pf-c-menu__footer--PaddingTop) var(--pf-c-menu__footer--PaddingRight) var(--pf-c-menu__footer--PaddingBottom) var(--pf-c-menu__footer--PaddingLeft);
496
516
  box-shadow: var(--pf-c-menu__footer--BoxShadow);
517
+ }
518
+ .pf-c-menu__footer::after {
519
+ position: absolute;
520
+ top: 0;
521
+ right: 0;
522
+ bottom: 0;
523
+ left: 0;
524
+ pointer-events: none;
525
+ content: "";
526
+ border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
527
+ border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
497
528
  }
package/components/Menu/menu.scss CHANGED
@@ -7,11 +7,16 @@
7
7
  --pf-c-menu--MinWidth: 100%;
8
8
  --pf-c-menu--Width: auto;
9
9
  --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
10
+
11
+ // Flyout
10
12
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
11
13
  --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
12
14
  --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
13
15
  --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
14
16
 
17
+ // Plain
18
+ --pf-c-menu--m-plain--BoxShadow: none;
19
+
15
20
  // stylelint-disable length-zero-no-unit
16
21
  // Needs a unit because of type checking for use in calc()
17
22
  --pf-c-menu--m-flyout__menu--top-offset: 0px;
@@ -21,6 +26,8 @@
21
26
 
22
27
  // Content
23
28
  --pf-c-menu__content--Height: auto;
29
+ --pf-c-menu__content--MaxHeight: none;
30
+ --pf-c-menu--m-scrollable__content--MaxHeight: #{pf-size-prem(300px)};
24
31
 
25
32
  // Divider
26
33
  --pf-c-menu--c-divider--MarginTop: 0;
@@ -167,7 +174,14 @@
167
174
  --pf-c-menu__footer--PaddingRight: var(--pf-global--spacer--md);
168
175
  --pf-c-menu__footer--PaddingBottom: var(--pf-global--spacer--md);
169
176
  --pf-c-menu__footer--PaddingLeft: var(--pf-global--spacer--md);
170
- --pf-c-menu__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
177
+ --pf-c-menu__footer--BoxShadow: none;
178
+ --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
179
+ --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
180
+ --pf-c-menu__footer--after--BorderBottomWidth: 0;
181
+ --pf-c-menu__footer--after--BorderBottomColor: var(--pf-global--BorderColor--100);
182
+ --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
183
+ --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
184
+ --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
171
185
 
172
186
  z-index: var(--pf-c-menu--ZIndex);
173
187
  width: var(--pf-c-menu--Width);
@@ -308,6 +322,17 @@
308
322
  }
309
323
  }
310
324
  // stylelint-enable
325
+
326
+ &.pf-m-plain {
327
+ --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
328
+ }
329
+
330
+ &.pf-m-scrollable {
331
+ --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
332
+ --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
333
+ --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
334
+ --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
335
+ }
311
336
  }
312
337
 
313
338
  // breadcrumb
@@ -567,6 +592,19 @@
567
592
  }
568
593
 
569
594
  .pf-c-menu__footer {
595
+ position: relative;
570
596
  padding: var(--pf-c-menu__footer--PaddingTop) var(--pf-c-menu__footer--PaddingRight) var(--pf-c-menu__footer--PaddingBottom) var(--pf-c-menu__footer--PaddingLeft);
571
597
  box-shadow: var(--pf-c-menu__footer--BoxShadow);
598
+
599
+ &::after {
600
+ position: absolute;
601
+ top: 0;
602
+ right: 0;
603
+ bottom: 0;
604
+ left: 0;
605
+ pointer-events: none;
606
+ content: "";
607
+ border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
608
+ border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
609
+ }
572
610
  }