@patternfly/patternfly 5.0.0-alpha.74 → 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 (12) 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/docs/components/Nav/examples/Navigation.md +2 -41
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +95 -98
  9. package/patternfly-theme-dark-unversioned.css +95 -98
  10. package/patternfly.css +95 -98
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/components/FormControl/form-control.css CHANGED
@@ -14,75 +14,74 @@
14
14
  --pf-v5-c-form-control--FontSize: var(--pf-v5-global--FontSize--md);
15
15
  --pf-v5-c-form-control--LineHeight: var(--pf-v5-global--LineHeight--md);
16
16
  --pf-v5-c-form-control--Resize: none;
17
- --pf-v5-c-form-control--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
18
- --pf-v5-c-form-control--BorderTopColor: var(--pf-v5-global--BorderColor--300);
19
- --pf-v5-c-form-control--BorderRightColor: var(--pf-v5-global--BorderColor--300);
20
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
21
- --pf-v5-c-form-control--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
22
- --pf-v5-c-form-control--BorderRadius: 0;
17
+ --pf-v5-c-form-control--OutlineOffset: -2px;
18
+ --pf-v5-c-form-control--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
19
+ --pf-v5-c-form-control--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
20
+ --pf-v5-c-form-control--before--BorderBottomWidth: 0;
21
+ --pf-v5-c-form-control--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
22
+ --pf-v5-c-form-control--before--BorderTopColor: var(--pf-v5-global--BorderColor--300);
23
+ --pf-v5-c-form-control--before--BorderRightColor: var(--pf-v5-global--BorderColor--300);
24
+ --pf-v5-c-form-control--before--BorderBottomColor: transparent;
25
+ --pf-v5-c-form-control--before--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
26
+ --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
27
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
23
28
  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
24
29
  --pf-v5-c-form-control--Width: 100%;
25
- --pf-v5-c-form-control--Height: calc(var(--pf-v5-c-form-control--FontSize) * var(--pf-v5-c-form-control--LineHeight) + var(--pf-v5-c-form-control--BorderWidth) * 2 + var(--pf-v5-c-form-control--PaddingTop) + var(--pf-v5-c-form-control--PaddingBottom));
26
30
  --pf-v5-c-form-control--inset--base: var(--pf-v5-global--spacer--sm);
27
- --pf-v5-c-form-control--PaddingTop: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));
28
- --pf-v5-c-form-control--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));
31
+ --pf-v5-c-form-control--PaddingTop: var(--pf-v5-global--spacer--form-element);
32
+ --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-global--spacer--form-element);
29
33
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--inset--base);
30
34
  --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control--inset--base);
31
- --pf-v5-c-form-control--hover--BorderBottomColor: var(--pf-v5-global--primary-color--100);
32
- --pf-v5-c-form-control--focus--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
33
- --pf-v5-c-form-control--focus--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
34
- --pf-v5-c-form-control--focus--BorderBottomColor: var(--pf-v5-global--primary-color--100);
35
- --pf-v5-c-form-control--m-expanded--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
36
- --pf-v5-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
37
- --pf-v5-c-form-control--m-expanded--BorderBottomColor: var(--pf-v5-global--primary-color--100);
35
+ --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
36
+ --pf-v5-c-form-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
37
+ --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
38
+ --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
39
+ --pf-v5-c-form-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
38
40
  --pf-v5-c-form-control--m-placeholder--Color: var(--pf-v5-global--Color--dark-200);
39
41
  --pf-v5-c-form-control--m-placeholder--child--Color: var(--pf-v5-global--Color--100);
40
42
  --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
41
43
  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
42
- --pf-v5-c-form-control--m-disabled--BorderColor: transparent;
44
+ --pf-v5-c-form-control--m-disabled--after--BorderColor: transparent;
43
45
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--300);
44
- --pf-v5-c-form-control--m-readonly--hover--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
45
- --pf-v5-c-form-control--m-readonly--focus--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));
46
- --pf-v5-c-form-control--m-readonly--focus--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
47
- --pf-v5-c-form-control--m-readonly--focus--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
46
+ --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
47
+ --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
48
+ --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
48
49
  --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
49
50
  --pf-v5-c-form-control--m-readonly--m-plain--inset--base: 0;
50
- --pf-v5-c-form-control--m-success--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
51
- --pf-v5-c-form-control--m-success--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--m-success--BorderBottomWidth));
52
- --pf-v5-c-form-control--m-success--BorderBottomColor: var(--pf-v5-global--success-color--100);
51
+ --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
52
+ --pf-v5-c-form-control--m-success--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
53
+ --pf-v5-c-form-control--m-success--after--BorderBottomColor: var(--pf-v5-global--success-color--100);
53
54
  --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-v5-global--spacer--xl);
54
- --pf-v5-c-form-control--m-warning--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
55
- --pf-v5-c-form-control--m-warning--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--m-warning--BorderBottomWidth));
56
- --pf-v5-c-form-control--m-warning--BorderBottomColor: var(--pf-v5-global--warning-color--100);
55
+ --pf-v5-c-form-control--m-warning--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
56
+ --pf-v5-c-form-control--m-warning--after--BorderBottomColor: var(--pf-v5-global--warning-color--100);
57
57
  --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-v5-global--spacer--xl);
58
- --pf-v5-c-form-control--m-error--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
59
- --pf-v5-c-form-control--m-error--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--m-error--BorderBottomWidth));
60
- --pf-v5-c-form-control--m-error--BorderBottomColor: var(--pf-v5-global--danger-color--100);
58
+ --pf-v5-c-form-control--m-error--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
59
+ --pf-v5-c-form-control--m-error--after--BorderBottomColor: var(--pf-v5-global--danger-color--100);
61
60
  --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-v5-global--spacer--xl);
62
- --pf-v5-c-form-control--m-error--IconWidth: var(--pf-v5-c-form-control--FontSize);
63
- --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--IconWidth) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
64
- --pf-v5-c-form-control--m-icon--IconWidth: var(--pf-v5-c-form-control--FontSize);
61
+ --pf-v5-c-form-control--m-error--icon--width: var(--pf-v5-c-form-control--FontSize);
62
+ --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
63
+ --pf-v5-c-form-control--m-icon--icon--width: var(--pf-v5-c-form-control--FontSize);
65
64
  --pf-v5-c-form-control--m-icon--icon--spacer: var(--pf-v5-global--spacer--sm);
66
- --pf-v5-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-error--IconWidth) + var(--pf-v5-c-form-control--m-icon--icon--spacer) + var(--pf-v5-c-form-control--m-icon--IconWidth) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
67
- --pf-v5-c-form-control__select--PaddingRight: calc(var(--pf-v5-global--spacer--lg) + var(--pf-v5-c-form-control--BorderWidth) + var(--pf-v5-c-form-control--BorderWidth));
68
- --pf-v5-c-form-control__select--PaddingLeft: calc(var(--pf-v5-global--spacer--sm) - var(--pf-v5-c-form-control--BorderWidth));
65
+ --pf-v5-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-error--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
66
+ --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-global--spacer--lg);
67
+ --pf-v5-c-form-control__select--PaddingLeft: var(--pf-v5-global--spacer--sm);
69
68
  --pf-v5-c-form-control__select--m-success--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
70
69
  --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
71
70
  --pf-v5-c-form-control__select--m-error--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
72
71
  --pf-v5-c-form-control--textarea--Width: var(--pf-v5-c-form-control--Width);
73
72
  --pf-v5-c-form-control--textarea--Height: auto;
73
+ --pf-v5-c-form-control__icon--PaddingTop: var(--pf-v5-global--spacer--form-element);
74
74
  --pf-v5-c-form-control__icon--Color: var(--pf-v5-global--icon--Color--light);
75
75
  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-global--icon--Color--light);
76
76
  --pf-v5-c-form-control--m-success__icon--m-status--Color: var(--pf-v5-global--success-color--100);
77
77
  --pf-v5-c-form-control--m-warning__icon--m-status--Color: var(--pf-v5-global--warning-color--100);
78
78
  --pf-v5-c-form-control--m-error__icon--m-status--Color: var(--pf-v5-global--danger-color--100);
79
- --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - (2 * var(--pf-v5-c-form-control--BorderWidth)));
80
79
  --pf-v5-c-form-control__utilities--Gap: var(--pf-v5-global--spacer--sm);
81
80
  --pf-v5-c-form-control__utilities--PaddingTop: var(--pf-v5-c-form-control--inset--base);
82
81
  --pf-v5-c-form-control__utilities--PaddingRight: var(--pf-v5-c-form-control--inset--base);
82
+ --pf-v5-c-form-control__toggle-icon--PaddingTop: var(--pf-v5-global--spacer--form-element);
83
83
  --pf-v5-c-form-control__toggle-icon--PaddingRight: var(--pf-v5-c-form-control--inset--base);
84
84
  --pf-v5-c-form-control__toggle-icon--PaddingLeft: var(--pf-v5-c-form-control--inset--base);
85
- --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - (2 * var(--pf-v5-c-form-control--BorderWidth)));
86
85
  --pf-v5-c-form-control__toggle-icon--Color: var(--pf-v5-global--Color--100);
87
86
  --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
88
87
  color: var(--pf-v5-c-form-control--Color);
@@ -96,9 +95,20 @@
96
95
  line-height: var(--pf-v5-c-form-control--LineHeight);
97
96
  resize: var(--pf-v5-c-form-control--Resize);
98
97
  background-color: var(--pf-v5-c-form-control--BackgroundColor);
99
- border: var(--pf-v5-c-form-control--BorderWidth) solid;
100
- border-color: var(--pf-v5-c-form-control--BorderTopColor) var(--pf-v5-c-form-control--BorderRightColor) var(--pf-v5-c-form-control--BorderBottomColor) var(--pf-v5-c-form-control--BorderLeftColor);
101
- border-radius: var(--pf-v5-c-form-control--BorderRadius);
98
+ }
99
+ .pf-v5-c-form-control::before, .pf-v5-c-form-control::after {
100
+ position: absolute;
101
+ inset: 0;
102
+ pointer-events: none;
103
+ content: "";
104
+ }
105
+ .pf-v5-c-form-control::before {
106
+ border-color: var(--pf-v5-c-form-control--before--BorderTopColor) var(--pf-v5-c-form-control--before--BorderRightColor) var(--pf-v5-c-form-control--before--BorderBottomColor) var(--pf-v5-c-form-control--before--BorderLeftColor);
107
+ border-style: var(--pf-v5-c-form-control--before--BorderStyle, solid);
108
+ border-width: var(--pf-v5-c-form-control--before--BorderTopWidth) var(--pf-v5-c-form-control--before--BorderRightWidth) var(--pf-v5-c-form-control--before--BorderBottomWidth) var(--pf-v5-c-form-control--before--BorderLeftWidth);
109
+ }
110
+ .pf-v5-c-form-control::after {
111
+ border-bottom: var(--pf-v5-c-form-control--after--BorderBottomWidth) var(--pf-v5-c-form-control--after--BorderStyle, solid) var(--pf-v5-c-form-control--after--BorderBottomColor);
102
112
  }
103
113
  .pf-v5-c-form-control > :is(input, select, textarea) {
104
114
  grid-row: 1/2;
@@ -110,6 +120,9 @@
110
120
  -moz-appearance: none;
111
121
  -webkit-appearance: none;
112
122
  }
123
+ .pf-v5-c-form-control > :is(input, select, textarea):focus {
124
+ outline-offset: var(--pf-v5-c-form-control--OutlineOffset);
125
+ }
113
126
  .pf-v5-c-form-control > ::placeholder {
114
127
  color: var(--pf-v5-c-form-control--m-placeholder--Color);
115
128
  }
@@ -119,78 +132,63 @@
119
132
  .pf-v5-c-form-control.pf-m-readonly {
120
133
  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--m-readonly--BackgroundColor);
121
134
  }
122
- .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error):hover {
123
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--hover--BorderBottomColor);
124
- }
125
- .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error):focus {
126
- --pf-v5-c-form-control--focus--PaddingBottom: var(--pf-v5-c-form-control--m-readonly--focus--PaddingBottom);
127
- --pf-v5-c-form-control--focus--BorderBottomWidth: var(--pf-v5-c-form-control--m-readonly--focus--BorderBottomWidth);
128
- --pf-v5-c-form-control--focus--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--focus--BorderBottomColor);
135
+ .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
136
+ --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor);
137
+ --pf-v5-c-form-control--focus--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth);
138
+ --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor);
129
139
  }
130
140
  .pf-v5-c-form-control.pf-m-readonly.pf-m-plain {
131
141
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor);
132
142
  --pf-v5-c-form-control--inset--base: var(--pf-v5-c-form-control--m-readonly--m-plain--inset--base);
133
- border-color: transparent;
143
+ --pf-v5-c-form-control--before--BorderStyle: none;
144
+ --pf-v5-c-form-control--after--BorderStyle: none;
145
+ --pf-v5-c-form-control--OutlineOffset: var(--pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset);
134
146
  }
135
147
  .pf-v5-c-form-control:hover {
136
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--hover--BorderBottomColor);
148
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--hover--after--BorderBottomColor);
137
149
  }
138
- .pf-v5-c-form-control:focus {
139
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--focus--BorderBottomColor);
140
- --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
141
- --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
142
- --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--focus--PaddingBottom);
143
- border-bottom-width: var(--pf-v5-c-form-control--focus--BorderBottomWidth);
150
+ .pf-v5-c-form-control:focus-within {
151
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--focus--after--BorderBottomColor);
152
+ --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--focus--after--BorderBottomWidth);
144
153
  }
145
154
  .pf-v5-c-form-control.pf-m-expanded {
146
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-expanded--BorderBottomColor);
147
- --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-expanded--BorderBottomWidth));
148
- --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-expanded--BorderBottomWidth));
149
- --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-expanded--PaddingBottom);
150
- border-bottom-width: var(--pf-v5-c-form-control--m-expanded--BorderBottomWidth);
155
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-expanded--after--BorderBottomColor);
156
+ --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-expanded--after--BorderBottomWidth);
151
157
  }
152
158
  .pf-v5-c-form-control.pf-m-disabled {
153
159
  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--m-disabled--BackgroundColor);
154
160
  --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-disabled--Color);
155
161
  --pf-v5-c-form-control__toggle-icon--Color: var(--pf-v5-c-form-control--m-disabled__toggle-icon--Color);
162
+ --pf-v5-c-form-control--before--BorderStyle: none;
163
+ --pf-v5-c-form-control--after--BorderStyle: none;
156
164
  cursor: not-allowed;
157
- border-color: var(--pf-v5-c-form-control--m-disabled--BorderColor);
158
165
  }
159
166
  .pf-v5-c-form-control.pf-m-error {
160
167
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-error--PaddingRight);
161
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-error--BorderBottomColor);
168
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-error--after--BorderBottomColor);
162
169
  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-error__icon--m-status--Color);
163
- --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-error--BorderBottomWidth));
164
- --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-error--BorderBottomWidth));
165
- --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-error--PaddingBottom);
166
170
  --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-error--m-status--PaddingRight);
167
- border-bottom-width: var(--pf-v5-c-form-control--m-error--BorderBottomWidth);
171
+ --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-error--after--BorderBottomWidth);
168
172
  }
169
173
  .pf-v5-c-form-control.pf-m-error.pf-m-icon {
170
174
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
171
175
  }
172
176
  .pf-v5-c-form-control.pf-m-success {
173
177
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-success--PaddingRight);
174
- --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-success--PaddingBottom);
175
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-success--BorderBottomColor);
178
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-success--after--BorderBottomColor);
176
179
  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-success__icon--m-status--Color);
177
- --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-success--BorderBottomWidth));
178
- --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-success--BorderBottomWidth));
179
180
  --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-success--m-status--PaddingRight);
180
- border-bottom-width: var(--pf-v5-c-form-control--m-success--BorderBottomWidth);
181
+ --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-success--after--BorderBottomWidth);
181
182
  }
182
183
  .pf-v5-c-form-control.pf-m-success.pf-m-icon {
183
184
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
184
185
  }
185
186
  .pf-v5-c-form-control.pf-m-warning {
186
187
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-warning--PaddingRight);
187
- --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-warning--PaddingBottom);
188
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-warning--BorderBottomColor);
188
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-warning--after--BorderBottomColor);
189
189
  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-warning__icon--m-status--Color);
190
- --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-warning--BorderBottomWidth));
191
- --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-warning--BorderBottomWidth));
192
190
  --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-warning--m-status--PaddingRight);
193
- border-bottom-width: var(--pf-v5-c-form-control--m-warning--BorderBottomWidth);
191
+ --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-warning--after--BorderBottomWidth);
194
192
  }
195
193
  .pf-v5-c-form-control.pf-m-warning.pf-m-icon {
196
194
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
@@ -237,9 +235,7 @@
237
235
  }
238
236
 
239
237
  .pf-v5-c-form-control__icon {
240
- display: flex;
241
- align-items: center;
242
- height: var(--pf-v5-c-form-control__icon--Height);
238
+ padding-top: var(--pf-v5-c-form-control__icon--PaddingTop);
243
239
  color: var(--pf-v5-c-form-control__icon--Color);
244
240
  }
245
241
  .pf-v5-c-form-control__icon.pf-m-status {
@@ -247,11 +243,9 @@
247
243
  }
248
244
 
249
245
  .pf-v5-c-form-control__toggle-icon {
250
- display: flex;
251
246
  grid-row: 1/2;
252
247
  grid-column: 3;
253
- align-items: center;
254
- height: var(--pf-v5-c-form-control__toggle-icon--Height);
248
+ padding-top: var(--pf-v5-c-form-control__toggle-icon--PaddingTop);
255
249
  padding-right: var(--pf-v5-c-form-control__toggle-icon--PaddingRight);
256
250
  padding-left: var(--pf-v5-c-form-control__toggle-icon--PaddingLeft);
257
251
  color: var(--pf-v5-c-form-control__toggle-icon--Color);
@@ -264,22 +258,21 @@
264
258
  grid-row: 1/2;
265
259
  grid-column: 2;
266
260
  gap: var(--pf-v5-c-form-control__utilities--Gap);
267
- align-items: flex-start;
268
261
  padding-right: var(--pf-v5-c-form-control__utilities--PaddingRight);
269
262
  pointer-events: none;
270
263
  }
271
264
 
272
265
  :where(.pf-v5-theme-dark) .pf-v5-c-form-control {
273
- --pf-v5-c-form-control--BorderTopColor: transparent;
274
- --pf-v5-c-form-control--BorderRightColor: transparent;
275
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
276
- --pf-v5-c-form-control--BorderLeftColor: transparent;
266
+ --pf-v5-c-form-control--before--BorderTopColor: transparent;
267
+ --pf-v5-c-form-control--before--BorderRightColor: transparent;
268
+ --pf-v5-c-form-control--before--BorderLeftColor: transparent;
269
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
277
270
  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
278
271
  --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
279
272
  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
280
273
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--200);
281
- --pf-v5-c-form-control--m-readonly--hover--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
282
- --pf-v5-c-form-control--m-readonly--focus--BorderBottomColor:var(--pf-v5-global--BorderColor--400);
274
+ --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
275
+ --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor:var(--pf-v5-global--BorderColor--400);
283
276
  --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--300);
284
277
  color: var(--pf-v5-global--Color--100);
285
278
  }