@patternfly/patternfly 4.157.1 → 4.159.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.
Files changed (26) hide show
  1. package/README.md +2 -2
  2. package/RELEASE-NOTES.md +30 -0
  3. package/components/Dropdown/dropdown.css +46 -11
  4. package/components/Dropdown/dropdown.scss +60 -11
  5. package/components/Menu/menu.css +84 -0
  6. package/components/Menu/menu.scss +109 -0
  7. package/components/MenuToggle/menu-toggle.css +48 -1
  8. package/components/MenuToggle/menu-toggle.scss +62 -1
  9. package/components/Nav/nav.css +3 -3
  10. package/components/Nav/nav.scss +2 -1
  11. package/components/Table/table.css +2 -2
  12. package/components/Table/table.scss +2 -2
  13. package/docs/components/Dropdown/examples/Dropdown.css +1 -0
  14. package/docs/components/Dropdown/examples/Dropdown.md +94 -0
  15. package/docs/components/Menu/examples/Menu.md +1 -0
  16. package/docs/components/MenuToggle/examples/MenuToggle.md +79 -14
  17. package/docs/components/Nav/examples/Navigation.css +12 -4
  18. package/docs/components/Nav/examples/Navigation.md +51 -232
  19. package/docs/components/Table/examples/Table.md +2168 -76
  20. package/docs/demos/Button/examples/Button.md +176 -0
  21. package/docs/demos/Table/examples/Table.md +3734 -95
  22. package/package.json +1 -1
  23. package/patternfly-no-reset.css +183 -17
  24. package/patternfly.css +183 -17
  25. package/patternfly.min.css +1 -1
  26. package/patternfly.min.css.map +1 -1
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -49,8 +49,8 @@
49
49
  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
50
50
 
51
51
  // Primary
52
- --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
53
52
  --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
53
+ --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
54
54
  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
55
55
  --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
56
56
  --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -58,6 +58,22 @@
58
58
  --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
59
59
  --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
60
60
 
61
+ // Secondary
62
+ --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
63
+ --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
64
+ --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
65
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
66
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
67
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
68
+ --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
69
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
70
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
71
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
72
+ --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
73
+ --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
74
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
75
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
76
+
61
77
  // Plain
62
78
  --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
63
79
  --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
@@ -134,6 +150,51 @@
134
150
  --pf-c-menu-toggle--active--BackgroundColor: var(--pf-c-menu-toggle--m-primary--active--BackgroundColor);
135
151
  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
136
152
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
153
+
154
+
155
+ &,
156
+ &::before {
157
+ border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
158
+ }
159
+ }
160
+
161
+ &.pf-m-secondary {
162
+ --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
163
+ --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
164
+
165
+ &,
166
+ &::before {
167
+ border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
168
+ }
169
+
170
+ &::before {
171
+ border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
172
+ border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
173
+ }
174
+
175
+ &::after {
176
+ border: 0;
177
+ }
178
+
179
+ &:hover {
180
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
181
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
182
+ }
183
+
184
+ &:focus {
185
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
186
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
187
+ }
188
+
189
+ &:active {
190
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
191
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
192
+ }
193
+
194
+ &.pf-m-expanded {
195
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
196
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
197
+ }
137
198
  }
138
199
 
139
200
  &.pf-m-plain:not(.pf-m-text) {
package/components/Nav/nav.css CHANGED
@@ -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
  }
package/components/Nav/nav.scss CHANGED
@@ -894,7 +894,8 @@
894
894
 
895
895
  // States
896
896
  // Set states property explicitly to override with modifiers without having to wrap updates with :state { update }
897
- &:hover {
897
+ &:hover,
898
+ &.pf-m-hover {
898
899
  color: var(--pf-c-nav__link--hover--Color);
899
900
  background-color: var(--pf-c-nav__link--hover--BackgroundColor);
900
901
 
package/components/Table/table.css CHANGED
@@ -227,8 +227,8 @@
227
227
  --pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg);
228
228
  --pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg);
229
229
  --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
230
- --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
231
- --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);
230
+ --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
231
+ --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
232
232
  --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
233
233
  --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
234
234
  --pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
package/components/Table/table.scss CHANGED
@@ -240,8 +240,8 @@
240
240
  --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
241
241
 
242
242
  // Nested table
243
- --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
244
- --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);
243
+ --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
244
+ --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
245
245
 
246
246
  // Modifier - expandable row expanded
247
247
  --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
package/docs/components/Dropdown/examples/Dropdown.css CHANGED
@@ -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;
package/docs/components/Dropdown/examples/Dropdown.md CHANGED
@@ -1437,6 +1437,99 @@ The dropdown panel is provided for flexibility in allowing various content withi
1437
1437
 
1438
1438
  ```
1439
1439
 
1440
+ ### Secondary toggle
1441
+
1442
+ ```html
1443
+ <div class="pf-c-dropdown">
1444
+ <button
1445
+ class="pf-c-dropdown__toggle pf-m-secondary"
1446
+ id="dropdown-secondary-toggle-button"
1447
+ aria-expanded="false"
1448
+ type="button"
1449
+ >
1450
+ <span class="pf-c-dropdown__toggle-text">Collapsed dropdown</span>
1451
+ <span class="pf-c-dropdown__toggle-icon">
1452
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1453
+ </span>
1454
+ </button>
1455
+ <ul
1456
+ class="pf-c-dropdown__menu"
1457
+ aria-labelledby="dropdown-secondary-toggle-button"
1458
+ hidden
1459
+ >
1460
+ <li>
1461
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1462
+ </li>
1463
+ <li>
1464
+ <button class="pf-c-dropdown__menu-item" type="button">Action</button>
1465
+ </li>
1466
+ <li>
1467
+ <a
1468
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1469
+ href="#"
1470
+ aria-disabled="true"
1471
+ tabindex="-1"
1472
+ >Disabled link</a>
1473
+ </li>
1474
+ <li>
1475
+ <button
1476
+ class="pf-c-dropdown__menu-item"
1477
+ type="button"
1478
+ disabled
1479
+ >Disabled action</button>
1480
+ </li>
1481
+ <li class="pf-c-divider" role="separator"></li>
1482
+ <li>
1483
+ <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
1484
+ </li>
1485
+ </ul>
1486
+ </div>
1487
+ <div class="pf-c-dropdown pf-m-expanded">
1488
+ <button
1489
+ class="pf-c-dropdown__toggle pf-m-secondary"
1490
+ id="dropdown-secondary-toggle-expanded-button"
1491
+ aria-expanded="true"
1492
+ type="button"
1493
+ >
1494
+ <span class="pf-c-dropdown__toggle-text">Expanded dropdown</span>
1495
+ <span class="pf-c-dropdown__toggle-icon">
1496
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1497
+ </span>
1498
+ </button>
1499
+ <ul
1500
+ class="pf-c-dropdown__menu"
1501
+ aria-labelledby="dropdown-secondary-toggle-expanded-button"
1502
+ >
1503
+ <li>
1504
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1505
+ </li>
1506
+ <li>
1507
+ <button class="pf-c-dropdown__menu-item" type="button">Action</button>
1508
+ </li>
1509
+ <li>
1510
+ <a
1511
+ class="pf-c-dropdown__menu-item pf-m-disabled"
1512
+ href="#"
1513
+ aria-disabled="true"
1514
+ tabindex="-1"
1515
+ >Disabled link</a>
1516
+ </li>
1517
+ <li>
1518
+ <button
1519
+ class="pf-c-dropdown__menu-item"
1520
+ type="button"
1521
+ disabled
1522
+ >Disabled action</button>
1523
+ </li>
1524
+ <li class="pf-c-divider" role="separator"></li>
1525
+ <li>
1526
+ <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
1527
+ </li>
1528
+ </ul>
1529
+ </div>
1530
+
1531
+ ```
1532
+
1440
1533
  ### Dropdown with image and text
1441
1534
 
1442
1535
  ```html
@@ -1612,6 +1705,7 @@ The dropdown menu can contain either links or buttons, depending on the expected
1612
1705
  | `.pf-m-text` | `.pf-c-dropdown__menu-item` | Modifies a menu item to be non-interactive text. |
1613
1706
  | `.pf-m-plain` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with no border. |
1614
1707
  | `.pf-m-primary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with primary styles. |
1708
+ | `.pf-m-secondary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with secondary styles. |
1615
1709
  | `.pf-m-full-height` | `.pf-c-dropdown` | Modifies a dropdown to full height of parent. See masthead for use. |
1616
1710
  | `.pf-m-disabled` | `a.pf-c-dropdown__menu-item` | Modifies to display the menu item as disabled. This applies to `a.pf-c-dropdown__menu-item` and should not be used in lieu of the `disabled` attribute on `button.pf-c-dropdown__menu-item`. |
1617
1711
  | `.pf-m-disabled` | `div.pf-c-dropdown__toggle` | Modifies to display the dropdown toggle as disabled. This applies to `div.pf-c-dropdown__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-c-dropdown__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-c-dropdown__toggle`. |
package/docs/components/Menu/examples/Menu.md CHANGED
@@ -5080,6 +5080,7 @@ cssPrefix: pf-c-menu
5080
5080
  | `.pf-m-favorited` | `.pf-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited. |
5081
5081
  | `.pf-m-selected` | `.pf-c-menu__item` | Modifies the menu item to be selected. |
5082
5082
  | `.pf-m-flyout` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "flyout". |
5083
+ | `.pf-m-nav` | `.pf-c-menu` | Modifies the menu for nav variant. |
5083
5084
  | `.pf-m-top` | `.pf-c-menu` | Modifies a flyout menu to expand to the top. |
5084
5085
  | `.pf-m-left` | `.pf-c-menu` | Modifies a flyout menu to expand to the left. |
5085
5086
  | `.pf-m-plain` | `.pf-c-menu` | Modifies the menu component for use in the page instead of as a dropdown. |
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -151,6 +151,70 @@ cssPrefix: pf-c-menu-toggle
151
151
 
152
152
  ```
153
153
 
154
+ ### Secondary
155
+
156
+ ```html
157
+ <button
158
+ class="pf-c-menu-toggle pf-m-secondary"
159
+ type="button"
160
+ aria-expanded="false"
161
+ >
162
+ <span class="pf-c-menu-toggle__text">Collapsed</span>
163
+ <span class="pf-c-menu-toggle__controls">
164
+ <span class="pf-c-menu-toggle__toggle-icon">
165
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
166
+ </span>
167
+ </span>
168
+ </button>
169
+
170
+ &nbsp;
171
+ <button
172
+ class="pf-c-menu-toggle pf-m-secondary"
173
+ type="button"
174
+ aria-expanded="false"
175
+ >
176
+ <span class="pf-c-menu-toggle__icon">
177
+ <i class="fas fa-cog" aria-hidden="true"></i>
178
+ </span>
179
+ <span class="pf-c-menu-toggle__text">Icon</span>
180
+ <span class="pf-c-menu-toggle__controls">
181
+ <span class="pf-c-menu-toggle__toggle-icon">
182
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
183
+ </span>
184
+ </span>
185
+ </button>
186
+
187
+ &nbsp;
188
+ <button
189
+ class="pf-c-menu-toggle pf-m-secondary pf-m-expanded"
190
+ type="button"
191
+ aria-expanded="true"
192
+ >
193
+ <span class="pf-c-menu-toggle__text">Expanded</span>
194
+ <span class="pf-c-menu-toggle__controls">
195
+ <span class="pf-c-menu-toggle__toggle-icon">
196
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
197
+ </span>
198
+ </span>
199
+ </button>
200
+
201
+ &nbsp;
202
+ <button
203
+ class="pf-c-menu-toggle pf-m-secondary"
204
+ type="button"
205
+ aria-expanded="false"
206
+ disabled
207
+ >
208
+ <span class="pf-c-menu-toggle__text">Disabled</span>
209
+ <span class="pf-c-menu-toggle__controls">
210
+ <span class="pf-c-menu-toggle__toggle-icon">
211
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
212
+ </span>
213
+ </span>
214
+ </button>
215
+
216
+ ```
217
+
154
218
  ### Plain
155
219
 
156
220
  ```html
@@ -283,17 +347,18 @@ cssPrefix: pf-c-menu-toggle
283
347
 
284
348
  ### Usage
285
349
 
286
- | Class | Applied | Outcome |
287
- | -------------------------------- | ------------------- | ------------------------------------------------------------- |
288
- | `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
289
- | `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon. |
290
- | `.pf-c-menu-toggle__image` | `<span>` | Defines the menu toggle component image. |
291
- | `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
292
- | `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
293
- | `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
294
- | `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
295
- | `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
296
- | `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
297
- | `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
298
- | `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
299
- | `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
350
+ | Class | Applied | Outcome |
351
+ | -------------------------------- | ------------------- | --------------------------------------------------------------- |
352
+ | `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
353
+ | `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon. |
354
+ | `.pf-c-menu-toggle__image` | `<span>` | Defines the menu toggle component image. |
355
+ | `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
356
+ | `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
357
+ | `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
358
+ | `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
359
+ | `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
360
+ | `.pf-m-secondary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
361
+ | `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
362
+ | `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
363
+ | `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
364
+ | `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
package/docs/components/Nav/examples/Navigation.css CHANGED
@@ -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
+ }