@patternfly/patternfly 5.0.0-alpha.75 → 5.0.0-alpha.76

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 (16) hide show
  1. package/components/Masthead/masthead.css +15 -3
  2. package/components/Masthead/masthead.scss +16 -4
  3. package/components/Toolbar/toolbar.css +2 -1
  4. package/components/Toolbar/toolbar.scss +2 -1
  5. package/docs/components/Toolbar/examples/Toolbar.md +15 -15
  6. package/docs/demos/DataList/examples/DataList.md +6 -6
  7. package/docs/demos/Masthead/examples/Masthead.md +9 -9
  8. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +9 -18
  9. package/docs/demos/Table/examples/Table.md +36 -42
  10. package/docs/demos/Toolbar/examples/Toolbar.md +12 -12
  11. package/package.json +1 -1
  12. package/patternfly-no-globals.css +17 -4
  13. package/patternfly-theme-dark-unversioned.css +17 -4
  14. package/patternfly.css +17 -4
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -32,7 +32,7 @@ section: components
32
32
  aria-label="search filter"
33
33
  role="group"
34
34
  >
35
- <div class="pf-v5-c-input-group__item pf-m-fill">
35
+ <div class="pf-v5-c-input-group__item">
36
36
  <div class="pf-v5-c-select" style="width: 124px">
37
37
  <span
38
38
  id="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
@@ -100,8 +100,8 @@ section: components
100
100
  </ul>
101
101
  </div>
102
102
  </div>
103
- <div class="pf-v5-c-input-group__item">
104
- <div class="pf-v5-c-text-input-group" style="width: auto">
103
+ <div class="pf-v5-c-input-group__item pf-m-fill">
104
+ <div class="pf-v5-c-text-input-group">
105
105
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
106
106
  <span class="pf-v5-c-text-input-group__text">
107
107
  <span class="pf-v5-c-text-input-group__icon">
@@ -1371,7 +1371,7 @@ section: components
1371
1371
  aria-label="search filter"
1372
1372
  role="group"
1373
1373
  >
1374
- <div class="pf-v5-c-input-group__item pf-m-fill">
1374
+ <div class="pf-v5-c-input-group__item">
1375
1375
  <div class="pf-v5-c-select" style="width: 160px">
1376
1376
  <span
1377
1377
  id="toolbar-with-validation-example-select-name-label"
@@ -1442,8 +1442,8 @@ section: components
1442
1442
  </ul>
1443
1443
  </div>
1444
1444
  </div>
1445
- <div class="pf-v5-c-input-group__item">
1446
- <div class="pf-v5-c-text-input-group" style="width: auto">
1445
+ <div class="pf-v5-c-input-group__item pf-m-fill">
1446
+ <div class="pf-v5-c-text-input-group">
1447
1447
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
1448
1448
  <span class="pf-v5-c-text-input-group__text">
1449
1449
  <span class="pf-v5-c-text-input-group__icon">
@@ -2163,7 +2163,7 @@ section: components
2163
2163
  aria-label="search filter"
2164
2164
  role="group"
2165
2165
  >
2166
- <div class="pf-v5-c-input-group__item pf-m-fill">
2166
+ <div class="pf-v5-c-input-group__item">
2167
2167
  <div class="pf-v5-c-select" style="width: 124px">
2168
2168
  <span
2169
2169
  id="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
@@ -2231,8 +2231,8 @@ section: components
2231
2231
  </ul>
2232
2232
  </div>
2233
2233
  </div>
2234
- <div class="pf-v5-c-input-group__item">
2235
- <div class="pf-v5-c-text-input-group" style="width: auto">
2234
+ <div class="pf-v5-c-input-group__item pf-m-fill">
2235
+ <div class="pf-v5-c-text-input-group">
2236
2236
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
2237
2237
  <span class="pf-v5-c-text-input-group__text">
2238
2238
  <span class="pf-v5-c-text-input-group__icon">
@@ -4573,7 +4573,7 @@ section: components
4573
4573
  aria-label="search filter"
4574
4574
  role="group"
4575
4575
  >
4576
- <div class="pf-v5-c-input-group__item pf-m-fill">
4576
+ <div class="pf-v5-c-input-group__item">
4577
4577
  <div class="pf-v5-c-select" style="width: 124px">
4578
4578
  <span
4579
4579
  id="toolbar-pagination-management-example-toolbar-select-name-label"
@@ -4644,8 +4644,8 @@ section: components
4644
4644
  </ul>
4645
4645
  </div>
4646
4646
  </div>
4647
- <div class="pf-v5-c-input-group__item">
4648
- <div class="pf-v5-c-text-input-group" style="width: auto">
4647
+ <div class="pf-v5-c-input-group__item pf-m-fill">
4648
+ <div class="pf-v5-c-text-input-group">
4649
4649
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
4650
4650
  <span class="pf-v5-c-text-input-group__text">
4651
4651
  <span class="pf-v5-c-text-input-group__icon">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.0.0-alpha.75",
4
+ "version": "5.0.0-alpha.76",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -10909,6 +10909,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10909
10909
  --pf-v5-c-toolbar--m-page-insets--inset: var(--pf-v5-global--spacer--md);
10910
10910
  --pf-v5-c-toolbar--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
10911
10911
  --pf-v5-c-toolbar__expandable-content--Display: grid;
10912
+ --pf-v5-c-toolbar__expandable-content--PaddingTop: 0;
10912
10913
  --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-toolbar__content--PaddingRight);
10913
10914
  --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
10914
10915
  --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-toolbar__content--PaddingLeft);
@@ -11248,7 +11249,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11248
11249
  z-index: var(--pf-v5-c-toolbar__expandable-content--ZIndex);
11249
11250
  display: none;
11250
11251
  width: 100%;
11251
- padding: 0 var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
11252
+ padding: var(--pf-v5-c-toolbar__expandable-content--PaddingTop) var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
11252
11253
  background-color: var(--pf-v5-c-toolbar__expandable-content--BackgroundColor);
11253
11254
  box-shadow: var(--pf-v5-c-toolbar__expandable-content--BoxShadow);
11254
11255
  }
@@ -17024,6 +17025,7 @@ ul.pf-v5-c-list {
17024
17025
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
17025
17026
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
17026
17027
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
17028
+ --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
17027
17029
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
17028
17030
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
17029
17031
  --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
@@ -17031,8 +17033,8 @@ ul.pf-v5-c-list {
17031
17033
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
17032
17034
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
17033
17035
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
17034
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
17035
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17036
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
17037
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17036
17038
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
17037
17039
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
17038
17040
  --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
@@ -17097,6 +17099,7 @@ ul.pf-v5-c-list {
17097
17099
  --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
17098
17100
  }
17099
17101
  .pf-v5-c-masthead .pf-v5-c-toolbar {
17102
+ --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
17100
17103
  --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
17101
17104
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
17102
17105
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
@@ -17110,7 +17113,17 @@ ul.pf-v5-c-list {
17110
17113
  flex-wrap: nowrap;
17111
17114
  }
17112
17115
  .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
17113
- border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor);
17116
+ top: 100%;
17117
+ }
17118
+ .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content::before {
17119
+ position: absolute;
17120
+ top: 0;
17121
+ right: 0;
17122
+ bottom: 0;
17123
+ left: 0;
17124
+ content: "";
17125
+ border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
17126
+ box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
17114
17127
  }
17115
17128
  .pf-v5-c-masthead .pf-v5-c-menu-toggle {
17116
17129
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -11026,6 +11026,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11026
11026
  --pf-v5-c-toolbar--m-page-insets--inset: var(--pf-v5-global--spacer--md);
11027
11027
  --pf-v5-c-toolbar--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
11028
11028
  --pf-v5-c-toolbar__expandable-content--Display: grid;
11029
+ --pf-v5-c-toolbar__expandable-content--PaddingTop: 0;
11029
11030
  --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-toolbar__content--PaddingRight);
11030
11031
  --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
11031
11032
  --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-toolbar__content--PaddingLeft);
@@ -11365,7 +11366,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11365
11366
  z-index: var(--pf-v5-c-toolbar__expandable-content--ZIndex);
11366
11367
  display: none;
11367
11368
  width: 100%;
11368
- padding: 0 var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
11369
+ padding: var(--pf-v5-c-toolbar__expandable-content--PaddingTop) var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
11369
11370
  background-color: var(--pf-v5-c-toolbar__expandable-content--BackgroundColor);
11370
11371
  box-shadow: var(--pf-v5-c-toolbar__expandable-content--BoxShadow);
11371
11372
  }
@@ -17141,6 +17142,7 @@ ul.pf-v5-c-list {
17141
17142
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
17142
17143
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
17143
17144
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
17145
+ --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
17144
17146
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
17145
17147
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
17146
17148
  --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
@@ -17148,8 +17150,8 @@ ul.pf-v5-c-list {
17148
17150
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
17149
17151
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
17150
17152
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
17151
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
17152
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17153
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
17154
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17153
17155
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
17154
17156
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
17155
17157
  --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
@@ -17214,6 +17216,7 @@ ul.pf-v5-c-list {
17214
17216
  --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
17215
17217
  }
17216
17218
  .pf-v5-c-masthead .pf-v5-c-toolbar {
17219
+ --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
17217
17220
  --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
17218
17221
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
17219
17222
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
@@ -17227,7 +17230,17 @@ ul.pf-v5-c-list {
17227
17230
  flex-wrap: nowrap;
17228
17231
  }
17229
17232
  .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
17230
- border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor);
17233
+ top: 100%;
17234
+ }
17235
+ .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content::before {
17236
+ position: absolute;
17237
+ top: 0;
17238
+ right: 0;
17239
+ bottom: 0;
17240
+ left: 0;
17241
+ content: "";
17242
+ border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
17243
+ box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
17231
17244
  }
17232
17245
  .pf-v5-c-masthead .pf-v5-c-menu-toggle {
17233
17246
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
package/patternfly.css CHANGED
@@ -11026,6 +11026,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11026
11026
  --pf-v5-c-toolbar--m-page-insets--inset: var(--pf-v5-global--spacer--md);
11027
11027
  --pf-v5-c-toolbar--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
11028
11028
  --pf-v5-c-toolbar__expandable-content--Display: grid;
11029
+ --pf-v5-c-toolbar__expandable-content--PaddingTop: 0;
11029
11030
  --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-toolbar__content--PaddingRight);
11030
11031
  --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
11031
11032
  --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-toolbar__content--PaddingLeft);
@@ -11365,7 +11366,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11365
11366
  z-index: var(--pf-v5-c-toolbar__expandable-content--ZIndex);
11366
11367
  display: none;
11367
11368
  width: 100%;
11368
- padding: 0 var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
11369
+ padding: var(--pf-v5-c-toolbar__expandable-content--PaddingTop) var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
11369
11370
  background-color: var(--pf-v5-c-toolbar__expandable-content--BackgroundColor);
11370
11371
  box-shadow: var(--pf-v5-c-toolbar__expandable-content--BoxShadow);
11371
11372
  }
@@ -17141,6 +17142,7 @@ ul.pf-v5-c-list {
17141
17142
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
17142
17143
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
17143
17144
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
17145
+ --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
17144
17146
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
17145
17147
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
17146
17148
  --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
@@ -17148,8 +17150,8 @@ ul.pf-v5-c-list {
17148
17150
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
17149
17151
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
17150
17152
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
17151
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
17152
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17153
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
17154
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17153
17155
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
17154
17156
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
17155
17157
  --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
@@ -17214,6 +17216,7 @@ ul.pf-v5-c-list {
17214
17216
  --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
17215
17217
  }
17216
17218
  .pf-v5-c-masthead .pf-v5-c-toolbar {
17219
+ --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
17217
17220
  --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
17218
17221
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
17219
17222
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
@@ -17227,7 +17230,17 @@ ul.pf-v5-c-list {
17227
17230
  flex-wrap: nowrap;
17228
17231
  }
17229
17232
  .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
17230
- border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor);
17233
+ top: 100%;
17234
+ }
17235
+ .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content::before {
17236
+ position: absolute;
17237
+ top: 0;
17238
+ right: 0;
17239
+ bottom: 0;
17240
+ left: 0;
17241
+ content: "";
17242
+ border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
17243
+ box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
17231
17244
  }
17232
17245
  .pf-v5-c-masthead .pf-v5-c-menu-toggle {
17233
17246
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);