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

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 (15) 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/Nav/nav.css +12 -8
  5. package/components/Nav/nav.scss +14 -9
  6. package/components/Page/page.css +20 -17
  7. package/components/Page/page.scss +5 -2
  8. package/components/Page/themes/dark/page.scss +1 -1
  9. package/docs/components/Nav/examples/Navigation.md +2 -41
  10. package/package.json +1 -1
  11. package/patternfly-no-globals.css +115 -115
  12. package/patternfly-theme-dark-unversioned.css +115 -115
  13. package/patternfly.css +115 -115
  14. package/patternfly.min.css +1 -1
  15. 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/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/Page/page.css CHANGED
@@ -67,7 +67,7 @@
67
67
  }
68
68
  }
69
69
 
70
- .pf-v5-c-page {
70
+ :root {
71
71
  --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
72
72
  --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
73
73
  --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -181,40 +181,32 @@
181
181
  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
182
182
  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
183
183
  --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
184
- display: grid;
185
- grid-template-areas: "header" "main";
186
- grid-template-rows: max-content 1fr;
187
- grid-template-columns: 1fr;
188
- height: 100vh;
189
- height: 100dvh;
190
- max-height: 100%;
191
- background-color: var(--pf-v5-c-page--BackgroundColor);
192
184
  }
193
185
  @media (min-width: 1200px) {
194
- .pf-v5-c-page {
186
+ :root {
195
187
  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
196
188
  --pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
197
189
  }
198
190
  }
199
191
  @media screen and (min-width: 1200px) {
200
- .pf-v5-c-page {
192
+ :root {
201
193
  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
202
194
  --pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
203
195
  --pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
204
196
  }
205
197
  }
206
198
  @media screen and (min-width: 1200px) {
207
- .pf-v5-c-page {
199
+ :root {
208
200
  --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
209
201
  }
210
202
  }
211
203
  @media screen and (min-width: 1200px) {
212
- .pf-v5-c-page {
204
+ :root {
213
205
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
214
206
  }
215
207
  }
216
208
  @media screen and (min-width: 1200px) {
217
- .pf-v5-c-page {
209
+ :root {
218
210
  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
219
211
  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
220
212
  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
@@ -222,17 +214,28 @@
222
214
  }
223
215
  }
224
216
  @media screen and (min-width: 1200px) {
225
- .pf-v5-c-page {
217
+ :root {
226
218
  --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
227
219
  --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
228
220
  }
229
221
  }
230
222
  @media screen and (min-width: 1200px) {
231
- .pf-v5-c-page {
223
+ :root {
232
224
  --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
233
225
  --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
234
226
  }
235
227
  }
228
+
229
+ .pf-v5-c-page {
230
+ display: grid;
231
+ grid-template-areas: "header" "main";
232
+ grid-template-rows: max-content 1fr;
233
+ grid-template-columns: 1fr;
234
+ height: 100vh;
235
+ height: 100dvh;
236
+ max-height: 100%;
237
+ background-color: var(--pf-v5-c-page--BackgroundColor);
238
+ }
236
239
  @media (min-width: 1200px) {
237
240
  .pf-v5-c-page {
238
241
  grid-template-areas: "header header" "nav main";
@@ -961,7 +964,7 @@
961
964
  --pf-v5-global--BackgroundColor--100: #1b1d21;
962
965
  }
963
966
 
964
- :where(.pf-v5-theme-dark) .pf-v5-c-page {
967
+ :where(.pf-v5-theme-dark):root {
965
968
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
966
969
  --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
967
970
  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
package/components/Page/page.scss CHANGED
@@ -4,8 +4,7 @@ $pf-page-v5--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl"
4
4
  $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
5
5
  // stylelint-enable
6
6
 
7
- // URL.com/guidelines#layout
8
- .#{$page} {
7
+ :root {
9
8
  --#{$page}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
10
9
  --#{$page}--inset: var(--#{$pf-global}--spacer--md);
11
10
  --#{$page}--xl--inset: var(--#{$pf-global}--spacer--lg);
@@ -197,6 +196,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
197
196
  --#{$page}__main-wizard--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
198
197
  --#{$page}__main-wizard--m-light-200--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
199
198
 
199
+ // URL.com/guidelines#layout
200
+ }
201
+
202
+ .#{$page} {
200
203
  // Base
201
204
  display: grid;
202
205
  grid-template-areas:
package/components/Page/themes/dark/page.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @import "../../../../sass-utilities/themes/dark/all";
2
2
 
3
3
  @mixin pf-v5-theme-dark-page() {
4
- .#{$page} {
4
+ &:root {
5
5
  --#{$page}__main-section--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
6
6
  --#{$page}__header-tools--c-button--m-selected--before--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
7
7
  --#{$page}__sidebar--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);