@patternfly/patternfly 5.0.0-alpha.74 → 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 (22) hide show
  1. package/components/FormControl/form-control.css +83 -90
  2. package/components/FormControl/form-control.scss +89 -103
  3. package/components/FormControl/themes/dark/form-control.scss +6 -6
  4. package/components/Masthead/masthead.css +15 -3
  5. package/components/Masthead/masthead.scss +16 -4
  6. package/components/Nav/nav.css +12 -8
  7. package/components/Nav/nav.scss +14 -9
  8. package/components/Toolbar/toolbar.css +2 -1
  9. package/components/Toolbar/toolbar.scss +2 -1
  10. package/docs/components/Nav/examples/Navigation.md +2 -41
  11. package/docs/components/Toolbar/examples/Toolbar.md +15 -15
  12. package/docs/demos/DataList/examples/DataList.md +6 -6
  13. package/docs/demos/Masthead/examples/Masthead.md +9 -9
  14. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +9 -18
  15. package/docs/demos/Table/examples/Table.md +36 -42
  16. package/docs/demos/Toolbar/examples/Toolbar.md +12 -12
  17. package/package.json +1 -1
  18. package/patternfly-no-globals.css +112 -102
  19. package/patternfly-theme-dark-unversioned.css +112 -102
  20. package/patternfly.css +112 -102
  21. package/patternfly.min.css +1 -1
  22. package/patternfly.min.css.map +1 -1
package/components/FormControl/form-control.scss CHANGED
@@ -1,88 +1,84 @@
1
1
  .#{$form-control} {
2
- // Component
3
2
  --#{$form-control}--ColumnGap: var(--#{$pf-global}--spacer--sm);
4
3
  --#{$form-control}--Color: var(--#{$pf-global}--Color--100);
5
4
  --#{$form-control}--FontSize: var(--#{$pf-global}--FontSize--md);
6
5
  --#{$form-control}--LineHeight: var(--#{$pf-global}--LineHeight--md);
7
6
  --#{$form-control}--Resize: none;
8
- --#{$form-control}--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
9
- --#{$form-control}--BorderTopColor: var(--#{$pf-global}--BorderColor--300);
10
- --#{$form-control}--BorderRightColor: var(--#{$pf-global}--BorderColor--300);
11
- --#{$form-control}--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
12
- --#{$form-control}--BorderLeftColor: var(--#{$pf-global}--BorderColor--300);
13
- --#{$form-control}--BorderRadius: 0;
7
+ --#{$form-control}--OutlineOffset: -2px;
8
+ --#{$form-control}--before--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
9
+ --#{$form-control}--before--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
10
+ --#{$form-control}--before--BorderBottomWidth: 0;
11
+ --#{$form-control}--before--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
12
+ --#{$form-control}--before--BorderTopColor: var(--#{$pf-global}--BorderColor--300);
13
+ --#{$form-control}--before--BorderRightColor: var(--#{$pf-global}--BorderColor--300);
14
+ --#{$form-control}--before--BorderBottomColor: transparent;
15
+ --#{$form-control}--before--BorderLeftColor: var(--#{$pf-global}--BorderColor--300);
16
+ --#{$form-control}--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
17
+ --#{$form-control}--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
14
18
  --#{$form-control}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
15
19
  --#{$form-control}--Width: 100%;
16
- --#{$form-control}--Height: calc(var(--#{$form-control}--FontSize) * var(--#{$form-control}--LineHeight) + var(--#{$form-control}--BorderWidth) * 2 + var(--#{$form-control}--PaddingTop) + var(--#{$form-control}--PaddingBottom)); // Needed for various browsers that compute height of form elements differently
17
20
 
18
21
  // padding
19
- // Note for top/bottom padding, subtracting the border height so the height of the input is consistent with buttons and dropdowns that use the same spacing but draw their borders with pseudo elements
20
22
  --#{$form-control}--inset--base: var(--#{$pf-global}--spacer--sm);
21
- --#{$form-control}--PaddingTop: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$pf-global}--BorderWidth--sm));
22
- --#{$form-control}--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$pf-global}--BorderWidth--sm));
23
+ --#{$form-control}--PaddingTop: var(--#{$pf-global}--spacer--form-element);
24
+ --#{$form-control}--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
23
25
  --#{$form-control}--PaddingRight: var(--#{$form-control}--inset--base);
24
26
  --#{$form-control}--PaddingLeft: var(--#{$form-control}--inset--base);
25
27
 
26
28
  // hover
27
- --#{$form-control}--hover--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
29
+ --#{$form-control}--hover--after--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
28
30
 
29
31
  // focus
30
- --#{$form-control}--focus--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
31
- --#{$form-control}--focus--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$form-control}--focus--BorderBottomWidth));
32
- --#{$form-control}--focus--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
32
+ --#{$form-control}--focus--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
33
+ --#{$form-control}--focus--after--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
33
34
 
34
35
  // expanded
35
- --#{$form-control}--m-expanded--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
36
- --#{$form-control}--m-expanded--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$form-control}--focus--BorderBottomWidth));
37
- --#{$form-control}--m-expanded--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
36
+ --#{$form-control}--m-expanded--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
37
+ --#{$form-control}--m-expanded--after--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
38
38
 
39
- // input placeholder style
39
+ // placeholder
40
40
  --#{$form-control}--m-placeholder--Color: var(--#{$pf-global}--Color--dark-200);
41
41
  --#{$form-control}--m-placeholder--child--Color: var(--#{$pf-global}--Color--100);
42
42
 
43
- // input disabled style
43
+ // disabled
44
44
  --#{$form-control}--m-disabled--Color: var(--#{$pf-global}--disabled-color--100);
45
45
  --#{$form-control}--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
46
- --#{$form-control}--m-disabled--BorderColor: transparent;
46
+ --#{$form-control}--m-disabled--after--BorderColor: transparent;
47
47
 
48
- // input readonly style
48
+ // readonly
49
49
  --#{$form-control}--m-readonly--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
50
- --#{$form-control}--m-readonly--hover--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
51
- --#{$form-control}--m-readonly--focus--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$pf-global}--BorderWidth--sm));
52
- --#{$form-control}--m-readonly--focus--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
53
- --#{$form-control}--m-readonly--focus--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
50
+ --#{$form-control}--m-readonly--hover--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
51
+ --#{$form-control}--m-readonly--focus--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
52
+ --#{$form-control}--m-readonly--focus--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
54
53
 
55
- // input readonly plain style
54
+ // readonly plain
56
55
  --#{$form-control}--m-readonly--m-plain--BackgroundColor: transparent;
57
56
  --#{$form-control}--m-readonly--m-plain--inset--base: 0;
57
+ --#{$form-control}--m-readonly--m-plain--OutlineOffset: 0;
58
58
 
59
- // Input m-success -- rename vars to m-success in breaking change release
60
- --#{$form-control}--m-success--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
61
- --#{$form-control}--m-success--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$form-control}--m-success--BorderBottomWidth));
62
- --#{$form-control}--m-success--BorderBottomColor: var(--#{$pf-global}--success-color--100);
59
+ // success
60
+ --#{$form-control}--m-success--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
61
+ --#{$form-control}--m-success--after--BorderBottomColor: var(--#{$pf-global}--success-color--100);
63
62
  --#{$form-control}--m-success--PaddingRight: var(--#{$pf-global}--spacer--xl);
64
63
 
65
- // Input m-warning
66
- --#{$form-control}--m-warning--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
67
- --#{$form-control}--m-warning--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$form-control}--m-warning--BorderBottomWidth));
68
- --#{$form-control}--m-warning--BorderBottomColor: var(--#{$pf-global}--warning-color--100);
64
+ // warning
65
+ --#{$form-control}--m-warning--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
66
+ --#{$form-control}--m-warning--after--BorderBottomColor: var(--#{$pf-global}--warning-color--100);
69
67
  --#{$form-control}--m-warning--PaddingRight: var(--#{$pf-global}--spacer--xl);
70
68
 
71
- // Input invalid
72
- --#{$form-control}--m-error--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
73
- --#{$form-control}--m-error--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$form-control}--m-error--BorderBottomWidth));
74
- --#{$form-control}--m-error--BorderBottomColor: var(--#{$pf-global}--danger-color--100);
69
+ // error
70
+ --#{$form-control}--m-error--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
71
+ --#{$form-control}--m-error--after--BorderBottomColor: var(--#{$pf-global}--danger-color--100);
75
72
  --#{$form-control}--m-error--PaddingRight: var(--#{$pf-global}--spacer--xl);
76
- --#{$form-control}--m-error--IconWidth: var(--#{$form-control}--FontSize);
73
+ --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize);
77
74
 
78
-
79
- // Input m-icon
80
- --#{$form-control}--m-icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--IconWidth) + var(--#{$form-control}--m-icon--icon--spacer));
81
- --#{$form-control}--m-icon--IconWidth: var(--#{$form-control}--FontSize);
75
+ // custom icon
76
+ --#{$form-control}--m-icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
77
+ --#{$form-control}--m-icon--icon--width: var(--#{$form-control}--FontSize);
82
78
  --#{$form-control}--m-icon--icon--spacer: var(--#{$pf-global}--spacer--sm);
83
- --#{$form-control}--m-icon--icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--IconWidth) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--IconWidth) + var(--#{$form-control}--m-icon--icon--spacer));
84
- --#{$form-control}__select--PaddingRight: calc(var(--#{$pf-global}--spacer--lg) + var(--#{$form-control}--BorderWidth) + var(--#{$form-control}--BorderWidth));
85
- --#{$form-control}__select--PaddingLeft: calc(var(--#{$pf-global}--spacer--sm) - var(--#{$form-control}--BorderWidth));
79
+ --#{$form-control}--m-icon--icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
80
+ --#{$form-control}__select--PaddingRight: var(--#{$pf-global}--spacer--lg);
81
+ --#{$form-control}__select--PaddingLeft: var(--#{$pf-global}--spacer--sm);
86
82
 
87
83
  // Select success
88
84
  --#{$form-control}__select--m-success--m-status--PaddingRight: var(--#{$pf-global}--spacer--3xl);
@@ -98,12 +94,12 @@
98
94
  --#{$form-control}--textarea--Height: auto;
99
95
 
100
96
  // Form control icon
97
+ --#{$form-control}__icon--PaddingTop: var(--#{$pf-global}--spacer--form-element);
101
98
  --#{$form-control}__icon--Color: var(--#{$pf-global}--icon--Color--light);
102
99
  --#{$form-control}__icon--m-status--Color: var(--#{$pf-global}--icon--Color--light);
103
100
  --#{$form-control}--m-success__icon--m-status--Color: var(--#{$pf-global}--success-color--100);
104
101
  --#{$form-control}--m-warning__icon--m-status--Color: var(--#{$pf-global}--warning-color--100);
105
102
  --#{$form-control}--m-error__icon--m-status--Color: var(--#{$pf-global}--danger-color--100);
106
- --#{$form-control}__icon--Height: calc(var(--#{$form-control}--Height) - (2 * var(--#{$form-control}--BorderWidth)));
107
103
 
108
104
  // Form control utilities
109
105
  --#{$form-control}__utilities--Gap: var(--#{$pf-global}--spacer--sm);
@@ -111,9 +107,9 @@
111
107
  --#{$form-control}__utilities--PaddingRight: var(--#{$form-control}--inset--base);
112
108
 
113
109
  // Form control select toggle icon
110
+ --#{$form-control}__toggle-icon--PaddingTop: var(--#{$pf-global}--spacer--form-element);
114
111
  --#{$form-control}__toggle-icon--PaddingRight: var(--#{$form-control}--inset--base);
115
112
  --#{$form-control}__toggle-icon--PaddingLeft: var(--#{$form-control}--inset--base);
116
- --#{$form-control}__toggle-icon--Height: calc(var(--#{$form-control}--Height) - (2 * var(--#{$form-control}--BorderWidth)));
117
113
  --#{$form-control}__toggle-icon--Color: var(--#{$pf-global}--Color--100);
118
114
  --#{$form-control}--m-disabled__toggle-icon--Color: var(--#{$pf-global}--disabled-color--100);
119
115
 
@@ -130,9 +126,24 @@
130
126
  line-height: var(--#{$form-control}--LineHeight);
131
127
  resize: var(--#{$form-control}--Resize);
132
128
  background-color: var(--#{$form-control}--BackgroundColor);
133
- border: var(--#{$form-control}--BorderWidth) solid;
134
- border-color: var(--#{$form-control}--BorderTopColor) var(--#{$form-control}--BorderRightColor) var(--#{$form-control}--BorderBottomColor) var(--#{$form-control}--BorderLeftColor);
135
- border-radius: var(--#{$form-control}--BorderRadius);
129
+
130
+ &::before,
131
+ &::after {
132
+ position: absolute;
133
+ inset: 0;
134
+ pointer-events: none;
135
+ content: "";
136
+ }
137
+
138
+ &::before {
139
+ border-color: var(--#{$form-control}--before--BorderTopColor) var(--#{$form-control}--before--BorderRightColor) var(--#{$form-control}--before--BorderBottomColor) var(--#{$form-control}--before--BorderLeftColor);
140
+ border-style: var(--#{$form-control}--before--BorderStyle, solid);
141
+ border-width: var(--#{$form-control}--before--BorderTopWidth) var(--#{$form-control}--before--BorderRightWidth) var(--#{$form-control}--before--BorderBottomWidth) var(--#{$form-control}--before--BorderLeftWidth);
142
+ }
143
+
144
+ &::after {
145
+ border-bottom: var(--#{$form-control}--after--BorderBottomWidth) var(--#{$form-control}--after--BorderStyle, solid) var(--#{$form-control}--after--BorderBottomColor);
146
+ }
136
147
 
137
148
  > :is(input, select, textarea) {
138
149
  grid-row: 1 / 2;
@@ -145,6 +156,10 @@
145
156
  -moz-appearance: none;
146
157
  -webkit-appearance: none;
147
158
  // stylelint-enable
159
+
160
+ &:focus {
161
+ outline-offset: var(--#{$form-control}--OutlineOffset);
162
+ }
148
163
  }
149
164
 
150
165
  > ::placeholder {
@@ -160,66 +175,50 @@
160
175
 
161
176
  // stylelint-disable selector-not-notation
162
177
  &:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
163
- &:hover {
164
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--m-readonly--hover--BorderBottomColor);
165
- }
166
-
167
- &:focus {
168
- --#{$form-control}--focus--PaddingBottom: var(--#{$form-control}--m-readonly--focus--PaddingBottom);
169
- --#{$form-control}--focus--BorderBottomWidth: var(--#{$form-control}--m-readonly--focus--BorderBottomWidth);
170
- --#{$form-control}--focus--BorderBottomColor: var(--#{$form-control}--m-readonly--focus--BorderBottomColor);
171
- }
178
+ --#{$form-control}--hover--after--BorderBottomColor: var(--#{$form-control}--m-readonly--hover--after--BorderBottomColor);
179
+ --#{$form-control}--focus--after--BorderBottomWidth: var(--#{$form-control}--m-readonly--focus--after--BorderBottomWidth);
180
+ --#{$form-control}--focus--after--BorderBottomColor: var(--#{$form-control}--m-readonly--focus--after--BorderBottomColor);
172
181
  }
173
182
 
174
183
  &.pf-m-plain {
175
184
  --#{$form-control}--m-readonly--BackgroundColor: var(--#{$form-control}--m-readonly--m-plain--BackgroundColor);
176
185
  --#{$form-control}--inset--base: var(--#{$form-control}--m-readonly--m-plain--inset--base);
177
-
178
- border-color: transparent;
186
+ --#{$form-control}--before--BorderStyle: none;
187
+ --#{$form-control}--after--BorderStyle: none;
188
+ --#{$form-control}--OutlineOffset: var(--#{$form-control}--m-readonly--m-plain--OutlineOffset);
179
189
  }
180
190
  }
181
191
 
182
192
  &:hover {
183
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--hover--BorderBottomColor);
193
+ --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--hover--after--BorderBottomColor);
184
194
  }
185
195
 
186
- &:focus {
187
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--focus--BorderBottomColor);
188
- --#{$form-control}__icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--focus--BorderBottomWidth));
189
- --#{$form-control}__toggle-icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--focus--BorderBottomWidth));
190
- --#{$form-control}--PaddingBottom: var(--#{$form-control}--focus--PaddingBottom);
191
-
192
- border-bottom-width: var(--#{$form-control}--focus--BorderBottomWidth);
196
+ &:focus-within {
197
+ --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--focus--after--BorderBottomColor);
198
+ --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--focus--after--BorderBottomWidth);
193
199
  }
194
200
 
195
201
  &.pf-m-expanded {
196
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--m-expanded--BorderBottomColor);
197
- --#{$form-control}__icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-expanded--BorderBottomWidth));
198
- --#{$form-control}__toggle-icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-expanded--BorderBottomWidth));
199
- --#{$form-control}--PaddingBottom: var(--#{$form-control}--m-expanded--PaddingBottom);
200
-
201
- border-bottom-width: var(--#{$form-control}--m-expanded--BorderBottomWidth);
202
+ --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--m-expanded--after--BorderBottomColor);
203
+ --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--m-expanded--after--BorderBottomWidth);
202
204
  }
203
205
 
204
206
  &.pf-m-disabled {
205
207
  --#{$form-control}--BackgroundColor: var(--#{$form-control}--m-disabled--BackgroundColor);
206
208
  --#{$form-control}--Color: var(--#{$form-control}--m-disabled--Color);
207
209
  --#{$form-control}__toggle-icon--Color: var(--#{$form-control}--m-disabled__toggle-icon--Color);
210
+ --#{$form-control}--before--BorderStyle: none;
211
+ --#{$form-control}--after--BorderStyle: none;
208
212
 
209
213
  cursor: not-allowed;
210
- border-color: var(--#{$form-control}--m-disabled--BorderColor);
211
214
  }
212
215
 
213
216
  &.pf-m-error {
214
217
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-error--PaddingRight);
215
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--m-error--BorderBottomColor);
218
+ --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--m-error--after--BorderBottomColor);
216
219
  --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-error__icon--m-status--Color);
217
- --#{$form-control}__icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-error--BorderBottomWidth));
218
- --#{$form-control}__toggle-icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-error--BorderBottomWidth));
219
- --#{$form-control}--PaddingBottom: var(--#{$form-control}--m-error--PaddingBottom);
220
220
  --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-error--m-status--PaddingRight);
221
-
222
- border-bottom-width: var(--#{$form-control}--m-error--BorderBottomWidth);
221
+ --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--m-error--after--BorderBottomWidth);
223
222
 
224
223
  &.pf-m-icon {
225
224
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
@@ -228,14 +227,10 @@
228
227
 
229
228
  &.pf-m-success {
230
229
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-success--PaddingRight);
231
- --#{$form-control}--PaddingBottom: var(--#{$form-control}--m-success--PaddingBottom);
232
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--m-success--BorderBottomColor);
230
+ --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--m-success--after--BorderBottomColor);
233
231
  --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-success__icon--m-status--Color);
234
- --#{$form-control}__icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-success--BorderBottomWidth));
235
- --#{$form-control}__toggle-icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-success--BorderBottomWidth));
236
232
  --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-success--m-status--PaddingRight);
237
-
238
- border-bottom-width: var(--#{$form-control}--m-success--BorderBottomWidth);
233
+ --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--m-success--after--BorderBottomWidth);
239
234
 
240
235
  &.pf-m-icon {
241
236
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
@@ -244,14 +239,10 @@
244
239
 
245
240
  &.pf-m-warning {
246
241
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-warning--PaddingRight);
247
- --#{$form-control}--PaddingBottom: var(--#{$form-control}--m-warning--PaddingBottom);
248
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--m-warning--BorderBottomColor);
242
+ --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--m-warning--after--BorderBottomColor);
249
243
  --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-warning__icon--m-status--Color);
250
- --#{$form-control}__icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-warning--BorderBottomWidth));
251
- --#{$form-control}__toggle-icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-warning--BorderBottomWidth));
252
244
  --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-warning--m-status--PaddingRight);
253
-
254
- border-bottom-width: var(--#{$form-control}--m-warning--BorderBottomWidth);
245
+ --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--m-warning--after--BorderBottomWidth);
255
246
 
256
247
  &.pf-m-icon {
257
248
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
@@ -316,9 +307,7 @@
316
307
  }
317
308
 
318
309
  .#{$form-control}__icon {
319
- display: flex;
320
- align-items: center;
321
- height: var(--#{$form-control}__icon--Height);
310
+ padding-top: var(--#{$form-control}__icon--PaddingTop);
322
311
  color: var(--#{$form-control}__icon--Color);
323
312
 
324
313
  &.pf-m-status {
@@ -327,11 +316,9 @@
327
316
  }
328
317
 
329
318
  .#{$form-control}__toggle-icon {
330
- display: flex;
331
319
  grid-row: 1 / 2;
332
320
  grid-column: 3;
333
- align-items: center;
334
- height: var(--#{$form-control}__toggle-icon--Height);
321
+ padding-top: var(--#{$form-control}__toggle-icon--PaddingTop);
335
322
  padding-right: var(--#{$form-control}__toggle-icon--PaddingRight);
336
323
  padding-left: var(--#{$form-control}__toggle-icon--PaddingLeft);
337
324
  color: var(--#{$form-control}__toggle-icon--Color);
@@ -344,7 +331,6 @@
344
331
  grid-row: 1 / 2;
345
332
  grid-column: 2;
346
333
  gap: var(--#{$form-control}__utilities--Gap);
347
- align-items: flex-start;
348
334
  padding-right: var(--#{$form-control}__utilities--PaddingRight);
349
335
  pointer-events: none;
350
336
  }
package/components/FormControl/themes/dark/form-control.scss CHANGED
@@ -2,16 +2,16 @@
2
2
 
3
3
  @mixin pf-v5-theme-dark-form-control() {
4
4
  .#{$form-control} {
5
- --#{$form-control}--BorderTopColor: transparent;
6
- --#{$form-control}--BorderRightColor: transparent;
7
- --#{$form-control}--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
8
- --#{$form-control}--BorderLeftColor: transparent;
5
+ --#{$form-control}--before--BorderTopColor: transparent;
6
+ --#{$form-control}--before--BorderRightColor: transparent;
7
+ --#{$form-control}--before--BorderLeftColor: transparent;
8
+ --#{$form-control}--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
9
9
  --#{$form-control}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
10
10
  --#{$form-control}--m-disabled--Color: var(--#{$pf-global}--disabled-color--300);
11
11
  --#{$form-control}--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
12
12
  --#{$form-control}--m-readonly--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
13
- --#{$form-control}--m-readonly--hover--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
14
- --#{$form-control}--m-readonly--focus--BorderBottomColor:var(--#{$pf-global}--BorderColor--400);
13
+ --#{$form-control}--m-readonly--hover--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
14
+ --#{$form-control}--m-readonly--focus--after--BorderBottomColor:var(--#{$pf-global}--BorderColor--400);
15
15
  --#{$form-control}--m-disabled__toggle-icon--Color: var(--#{$pf-global}--disabled-color--300);
16
16
 
17
17
  color: var(--#{$pf-global}--Color--100);
package/components/Masthead/masthead.css CHANGED
@@ -89,6 +89,7 @@
89
89
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
90
90
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
91
91
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
92
+ --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
92
93
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
93
94
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
94
95
  --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
@@ -96,8 +97,8 @@
96
97
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
97
98
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
98
99
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
99
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
100
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
100
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
101
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
101
102
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
102
103
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
103
104
  --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
@@ -162,6 +163,7 @@
162
163
  --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
163
164
  }
164
165
  .pf-v5-c-masthead .pf-v5-c-toolbar {
166
+ --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
165
167
  --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
166
168
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
167
169
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
@@ -175,7 +177,17 @@
175
177
  flex-wrap: nowrap;
176
178
  }
177
179
  .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
178
- border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor);
180
+ top: 100%;
181
+ }
182
+ .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content::before {
183
+ position: absolute;
184
+ top: 0;
185
+ right: 0;
186
+ bottom: 0;
187
+ left: 0;
188
+ content: "";
189
+ 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);
190
+ box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
179
191
  }
180
192
  .pf-v5-c-masthead .pf-v5-c-menu-toggle {
181
193
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
package/components/Masthead/masthead.scss CHANGED
@@ -139,6 +139,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
139
139
  --#{$masthead}--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
140
140
 
141
141
  // Toolbar
142
+ --#{$masthead}--c-toolbar--BackgroundColor: var(--#{$masthead}--BackgroundColor);
142
143
  --#{$masthead}--c-toolbar--AlignItems--base: center;
143
144
  --#{$masthead}--c-toolbar__content--PaddingRight: 0;
144
145
  --#{$masthead}--c-toolbar__content--PaddingLeft: 0;
@@ -146,9 +147,8 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
146
147
  --#{$masthead}--c-toolbar__expandable-content--PaddingRight: var(--#{$masthead}--inset);
147
148
  --#{$masthead}--c-toolbar__expandable-content--PaddingBottom: var(--#{$pf-global}--spacer--md);
148
149
  --#{$masthead}--c-toolbar__expandable-content--PaddingLeft: var(--#{$masthead}--inset);
149
- --#{$masthead}--c-toolbar__expandable-content--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
150
- --#{$masthead}--c-toolbar__expandable-content--BorderTopColor: var(--#{$masthead}--item-border-color--base);
151
-
150
+ --#{$masthead}--c-toolbar__expandable-content--before--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
151
+ --#{$masthead}--c-toolbar__expandable-content--before--BorderTopColor: var(--#{$masthead}--item-border-color--base);
152
152
 
153
153
  // Set layout to stack by default
154
154
  @include pf-v5-c-masthead--m-display-stack;
@@ -190,6 +190,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
190
190
  }
191
191
 
192
192
  .#{$toolbar} {
193
+ --#{$toolbar}--BackgroundColor: var(--#{$masthead}--c-toolbar--BackgroundColor);
193
194
  --#{$toolbar}--AlignItems--base: var(--#{$masthead}--c-toolbar--AlignItems--base);
194
195
  --#{$toolbar}__content--PaddingRight: var(--#{$masthead}--c-toolbar__content--PaddingRight);
195
196
  --#{$toolbar}__content--PaddingLeft: var(--#{$masthead}--c-toolbar__content--PaddingLeft);
@@ -206,7 +207,18 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
206
207
  }
207
208
 
208
209
  .#{$toolbar}__expandable-content {
209
- border-top: var(--#{$masthead}--c-toolbar__expandable-content--BorderTopWidth) solid var(--#{$masthead}--c-toolbar__expandable-content--BorderTopColor);
210
+ top: 100%;
211
+
212
+ &::before {
213
+ position: absolute;
214
+ top: 0;
215
+ right: 0;
216
+ bottom: 0;
217
+ left: 0;
218
+ content: '';
219
+ border-top: var(--#{$masthead}--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--#{$masthead}--c-toolbar__expandable-content--before--BorderTopColor);
220
+ box-shadow: var(--#{$toolbar}__expandable-content--before--BoxShadow);
221
+ }
210
222
  }
211
223
 
212
224
  .#{$menu-toggle} {
package/components/Nav/nav.css CHANGED
@@ -171,7 +171,8 @@
171
171
  --pf-v5-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
172
172
  --pf-v5-c-nav__subnav--c-divider--PaddingRight: var(--pf-v5-global--spacer--lg);
173
173
  --pf-v5-c-nav__subnav--c-divider--PaddingLeft: var(--pf-v5-global--spacer--lg);
174
- --pf-v5-c-nav__section--MarginTop: var(--pf-v5-global--spacer--sm);
174
+ --pf-v5-c-nav__section--first-child--PaddingTop: var(--pf-v5-global--spacer--sm);
175
+ --pf-v5-c-nav__section--last-child--PaddingBottom: var(--pf-v5-global--spacer--sm);
175
176
  --pf-v5-c-nav__section__item--MarginTop: var(--pf-v5-global--spacer--sm);
176
177
  --pf-v5-c-nav__section__link--PaddingTop: var(--pf-v5-global--spacer--sm);
177
178
  --pf-v5-c-nav__section__link--PaddingRight: var(--pf-v5-global--spacer--md);
@@ -194,6 +195,7 @@
194
195
  --pf-v5-c-nav__section-title--PaddingRight: var(--pf-v5-global--spacer--md);
195
196
  --pf-v5-c-nav__section-title--PaddingBottom: var(--pf-v5-global--spacer--sm);
196
197
  --pf-v5-c-nav__section-title--PaddingLeft: var(--pf-v5-global--spacer--md);
198
+ --pf-v5-c-nav__section-title--MarginBottom: var(--pf-v5-global--spacer--sm);
197
199
  --pf-v5-c-nav__section-title--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
198
200
  --pf-v5-c-nav__section-title--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
199
201
  --pf-v5-c-nav__section-title--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -872,21 +874,23 @@
872
874
  --pf-v5-c-nav__link--focus--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--focus--after--BorderWidth);
873
875
  --pf-v5-c-nav__link--active--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--active--after--BorderWidth);
874
876
  --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--m-current--after--BorderWidth);
877
+ --pf-v5-c-nav__list--PaddingTop: 0;
878
+ --pf-v5-c-nav__list--PaddingBottom: 0;
875
879
  --pf-v5-c-nav--c-divider--MarginBottom: 0;
876
- margin-top: var(--pf-v5-c-nav__section--MarginTop);
877
880
  }
878
- .pf-v5-c-nav__section + .pf-v5-c-nav__section {
879
- --pf-v5-c-nav__section--MarginTop: var(--pf-v5-c-nav__section--section--MarginTop);
881
+ .pf-v5-c-nav__section:first-child {
882
+ padding-top: var(--pf-v5-c-nav__section--first-child--PaddingTop);
880
883
  }
881
- .pf-v5-c-nav__section.pf-m-no-title {
882
- --pf-v5-c-nav__section--MarginTop: 0;
884
+ .pf-v5-c-nav__section + .pf-v5-c-nav__section {
885
+ margin-top: var(--pf-v5-c-nav__section--section--MarginTop);
883
886
  }
884
- .pf-v5-c-nav__section:not(:last-child) {
885
- --pf-v5-c-nav__list--PaddingBottom: 0;
887
+ .pf-v5-c-nav__section:last-child {
888
+ padding-bottom: var(--pf-v5-c-nav__section--last-child--PaddingBottom);
886
889
  }
887
890
 
888
891
  .pf-v5-c-nav__section-title {
889
892
  padding: var(--pf-v5-c-nav__section-title--PaddingTop) var(--pf-v5-c-nav__section-title--PaddingRight) var(--pf-v5-c-nav__section-title--PaddingBottom) var(--pf-v5-c-nav__section-title--PaddingLeft);
893
+ margin-bottom: var(--pf-v5-c-nav__section-title--MarginBottom);
890
894
  font-size: var(--pf-v5-c-nav__section-title--FontSize);
891
895
  color: var(--pf-v5-c-nav__section-title--Color);
892
896
  border-bottom: var(--pf-v5-c-nav__section-title--BorderBottomWidth) solid var(--pf-v5-c-nav__section-title--BorderBottomColor);
package/components/Nav/nav.scss CHANGED
@@ -203,7 +203,8 @@
203
203
  --#{$nav}__subnav--c-divider--PaddingLeft: var(--#{$pf-global}--spacer--lg);
204
204
 
205
205
  // Nav section
206
- --#{$nav}__section--MarginTop: var(--#{$pf-global}--spacer--sm);
206
+ --#{$nav}__section--first-child--PaddingTop: var(--#{$pf-global}--spacer--sm);
207
+ --#{$nav}__section--last-child--PaddingBottom: var(--#{$pf-global}--spacer--sm);
207
208
  --#{$nav}__section__item--MarginTop: var(--#{$pf-global}--spacer--sm);
208
209
  --#{$nav}__section__link--PaddingTop: var(--#{$pf-global}--spacer--sm);
209
210
  --#{$nav}__section__link--PaddingRight: var(--#{$pf-global}--spacer--md);
@@ -228,6 +229,7 @@
228
229
  --#{$nav}__section-title--PaddingRight: var(--#{$pf-global}--spacer--md);
229
230
  --#{$nav}__section-title--PaddingBottom: var(--#{$pf-global}--spacer--sm);
230
231
  --#{$nav}__section-title--PaddingLeft: var(--#{$pf-global}--spacer--md);
232
+ --#{$nav}__section-title--MarginBottom: var(--#{$pf-global}--spacer--sm);
231
233
  --#{$nav}__section-title--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
232
234
  --#{$nav}__section-title--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
233
235
  --#{$nav}__section-title--FontSize: var(--#{$pf-global}--FontSize--sm);
@@ -1084,27 +1086,30 @@
1084
1086
  --#{$nav}__link--active--after--BorderLeftWidth: var(--#{$nav}__section__link--active--after--BorderWidth);
1085
1087
  --#{$nav}__link--m-current--after--BorderLeftWidth: var(--#{$nav}__section__link--m-current--after--BorderWidth);
1086
1088
 
1089
+ // Lists
1090
+ --#{$nav}__list--PaddingTop: 0;
1091
+ --#{$nav}__list--PaddingBottom: 0;
1092
+
1087
1093
  // Divider
1088
1094
  --#{$nav}--c-divider--MarginBottom: 0;
1089
1095
 
1090
- margin-top: var(--#{$nav}__section--MarginTop);
1091
-
1092
- & + & {
1093
- --#{$nav}__section--MarginTop: var(--#{$nav}__section--section--MarginTop);
1096
+ &:first-child {
1097
+ padding-top: var(--#{$nav}__section--first-child--PaddingTop);
1094
1098
  }
1095
1099
 
1096
- &.pf-m-no-title {
1097
- --#{$nav}__section--MarginTop: 0;
1100
+ & + & {
1101
+ margin-top: var(--#{$nav}__section--section--MarginTop);
1098
1102
  }
1099
1103
 
1100
- &:not(:last-child) {
1101
- --#{$nav}__list--PaddingBottom: 0;
1104
+ &:last-child {
1105
+ padding-bottom: var(--#{$nav}__section--last-child--PaddingBottom);
1102
1106
  }
1103
1107
  }
1104
1108
 
1105
1109
  // Section title
1106
1110
  .#{$nav}__section-title {
1107
1111
  padding: var(--#{$nav}__section-title--PaddingTop) var(--#{$nav}__section-title--PaddingRight) var(--#{$nav}__section-title--PaddingBottom) var(--#{$nav}__section-title--PaddingLeft);
1112
+ margin-bottom: var(--#{$nav}__section-title--MarginBottom);
1108
1113
  font-size: var(--#{$nav}__section-title--FontSize);
1109
1114
  color: var(--#{$nav}__section-title--Color);
1110
1115
  border-bottom: var(--#{$nav}__section-title--BorderBottomWidth) solid var(--#{$nav}__section-title--BorderBottomColor);
package/components/Toolbar/toolbar.css CHANGED
@@ -76,6 +76,7 @@
76
76
  --pf-v5-c-toolbar--m-page-insets--inset: var(--pf-v5-global--spacer--md);
77
77
  --pf-v5-c-toolbar--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
78
78
  --pf-v5-c-toolbar__expandable-content--Display: grid;
79
+ --pf-v5-c-toolbar__expandable-content--PaddingTop: 0;
79
80
  --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-toolbar__content--PaddingRight);
80
81
  --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
81
82
  --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-toolbar__content--PaddingLeft);
@@ -415,7 +416,7 @@
415
416
  z-index: var(--pf-v5-c-toolbar__expandable-content--ZIndex);
416
417
  display: none;
417
418
  width: 100%;
418
- 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);
419
+ 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);
419
420
  background-color: var(--pf-v5-c-toolbar__expandable-content--BackgroundColor);
420
421
  box-shadow: var(--pf-v5-c-toolbar__expandable-content--BoxShadow);
421
422
  }
package/components/Toolbar/toolbar.scss CHANGED
@@ -48,6 +48,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
48
48
 
49
49
  // Expandable content
50
50
  --#{$toolbar}__expandable-content--Display: grid;
51
+ --#{$toolbar}__expandable-content--PaddingTop: 0;
51
52
  --#{$toolbar}__expandable-content--PaddingRight: var(--#{$toolbar}__content--PaddingRight);
52
53
  --#{$toolbar}__expandable-content--PaddingBottom: var(--#{$pf-global}--spacer--md);
53
54
  --#{$toolbar}__expandable-content--PaddingLeft: var(--#{$toolbar}__content--PaddingLeft);
@@ -445,7 +446,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
445
446
  z-index: var(--#{$toolbar}__expandable-content--ZIndex);
446
447
  display: none;
447
448
  width: 100%;
448
- padding: 0 var(--#{$toolbar}__expandable-content--PaddingRight) var(--#{$toolbar}__expandable-content--PaddingBottom) var(--#{$toolbar}__expandable-content--PaddingLeft);
449
+ padding: var(--#{$toolbar}__expandable-content--PaddingTop) var(--#{$toolbar}__expandable-content--PaddingRight) var(--#{$toolbar}__expandable-content--PaddingBottom) var(--#{$toolbar}__expandable-content--PaddingLeft);
449
450
  background-color: var(--#{$toolbar}__expandable-content--BackgroundColor);
450
451
  box-shadow: var(--#{$toolbar}__expandable-content--BoxShadow);
451
452