@redhat-cloud-services/frontend-components 3.9.14 → 3.9.15

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.
@@ -1,438 +1,3 @@
1
- .pf-c-form-control, .pf-c-input-group {
2
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
3
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
4
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
5
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
6
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
7
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
8
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9
- }
10
-
11
- .pf-c-input-group {
12
- --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
13
- --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
14
- --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
15
- --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
16
- --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
17
- --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
18
- --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
19
- --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
20
- --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
21
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
22
- --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
23
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
24
- --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
25
- --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
26
- --pf-c-input-group--c-form-control--MarginRight: 0;
27
- color: var(--pf-global--Color--100);
28
- display: flex;
29
- width: 100%;
30
- background-color: var(--pf-c-input-group--BackgroundColor);
31
- }
32
- .pf-c-input-group.pf-m-plain {
33
- --pf-c-input-group--BackgroundColor: transparent;
34
- }
35
- .pf-c-input-group > * + * {
36
- margin-left: -1px;
37
- }
38
- .pf-c-input-group > :focus,
39
- .pf-c-input-group > :focus-within {
40
- z-index: var(--pf-c-input-group--child--ZIndex);
41
- }
42
- .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
43
- margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
44
- }
45
- .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
46
- .pf-c-input-group textarea {
47
- flex: 2;
48
- min-width: 0;
49
- }
50
- .pf-c-input-group textarea {
51
- min-height: var(--pf-c-input-group__textarea--MinHeight);
52
- }
53
-
54
- .pf-c-input-group__text {
55
- display: flex;
56
- align-items: center;
57
- padding-right: var(--pf-c-input-group__text--PaddingRight);
58
- padding-left: var(--pf-c-input-group__text--PaddingLeft);
59
- font-size: var(--pf-c-input-group__text--FontSize);
60
- color: var(--pf-c-input-group__text--Color);
61
- text-align: center;
62
- background-color: var(--pf-c-input-group__text--BackgroundColor);
63
- border: var(--pf-c-input-group__text--BorderWidth) solid;
64
- border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
65
- }
66
- label.pf-c-input-group__text {
67
- cursor: pointer;
68
- }
69
-
70
- .pf-c-input-group__text.pf-m-plain {
71
- --pf-c-input-group__text--BorderWidth: 0;
72
- margin-left: 0;
73
- }
74
-
75
- :where(.pf-theme-dark) .pf-c-input-group {
76
- --pf-c-input-group--BackgroundColor: transparent;
77
- --pf-c-input-group__text--BorderTopColor: transparent;
78
- --pf-c-input-group__text--BorderRightColor: transparent;
79
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
80
- --pf-c-input-group__text--BorderLeftColor: transparent;
81
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
82
- }
83
- :where(.pf-theme-dark) .pf-c-input-group > * + * {
84
- margin-left: 0;
85
- border-left: 1px solid var(--pf-global--palette--black-700);
86
- }
87
- :where(.pf-theme-dark) .pf-c-input-group__text {
88
- --pf-c-input-group__text--BorderTopColor: transparent;
89
- --pf-c-input-group__text--BorderRightColor: transparent;
90
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
91
- --pf-c-input-group__text--BorderLeftColor: transparent;
92
- }
93
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
94
- --pf-c-input-group__text--BackgroundColor: transparent;
95
- }
96
-
97
- .pf-c-form-control {
98
- --pf-c-form-control--Color: var(--pf-global--Color--100);
99
- --pf-c-form-control--FontSize: var(--pf-global--FontSize--md);
100
- --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md);
101
- --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm);
102
- --pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--300);
103
- --pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--300);
104
- --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--200);
105
- --pf-c-form-control--BorderLeftColor: var(--pf-global--BorderColor--300);
106
- --pf-c-form-control--BorderRadius: 0;
107
- --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--100);
108
- --pf-c-form-control--Width: 100%;
109
- --pf-c-form-control--Height: calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom));
110
- --pf-c-form-control--inset--base: var(--pf-global--spacer--sm);
111
- --pf-c-form-control--PaddingTop: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm));
112
- --pf-c-form-control--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm));
113
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control--inset--base);
114
- --pf-c-form-control--PaddingLeft: var(--pf-c-form-control--inset--base);
115
- --pf-c-form-control--hover--BorderBottomColor: var(--pf-global--primary-color--100);
116
- --pf-c-form-control--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
117
- --pf-c-form-control--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--focus--BorderBottomWidth));
118
- --pf-c-form-control--focus--BorderBottomColor: var(--pf-global--primary-color--100);
119
- --pf-c-form-control--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
120
- --pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--focus--BorderBottomWidth));
121
- --pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100);
122
- --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200);
123
- --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100);
124
- --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100);
125
- --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
126
- --pf-c-form-control--disabled--BorderColor: transparent;
127
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--300);
128
- --pf-c-form-control--readonly--hover--BorderBottomColor: var(--pf-global--BorderColor--200);
129
- --pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm));
130
- --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
131
- --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200);
132
- --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
133
- --pf-c-form-control--readonly--m-plain--inset--base: 0;
134
- --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md);
135
- --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--success--BorderBottomWidth));
136
- --pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100);
137
- --pf-c-form-control--success--PaddingRight: var(--pf-global--spacer--xl);
138
- --pf-c-form-control--success--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft));
139
- --pf-c-form-control--success--BackgroundPositionY: center;
140
- --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY);
141
- --pf-c-form-control--success--BackgroundSizeX: var(--pf-c-form-control--FontSize);
142
- --pf-c-form-control--success--BackgroundSizeY: var(--pf-c-form-control--FontSize);
143
- --pf-c-form-control--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY);
144
- --pf-c-form-control--success--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
145
- --pf-c-form-control--m-warning--BorderBottomWidth: var(--pf-global--BorderWidth--md);
146
- --pf-c-form-control--m-warning--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--m-warning--BorderBottomWidth));
147
- --pf-c-form-control--m-warning--BorderBottomColor: var(--pf-global--warning-color--100);
148
- --pf-c-form-control--m-warning--PaddingRight: var(--pf-global--spacer--xl);
149
- --pf-c-form-control--m-warning--BackgroundPositionX: calc(100% - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem));
150
- --pf-c-form-control--m-warning--BackgroundPositionY: center;
151
- --pf-c-form-control--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY);
152
- --pf-c-form-control--m-warning--BackgroundSizeX: 1.25rem;
153
- --pf-c-form-control--m-warning--BackgroundSizeY: var(--pf-c-form-control--FontSize);
154
- --pf-c-form-control--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY);
155
- --pf-c-form-control--m-warning--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
156
- --pf-c-form-control--invalid--BorderBottomWidth: var(--pf-global--BorderWidth--md);
157
- --pf-c-form-control--invalid--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--invalid--BorderBottomWidth));
158
- --pf-c-form-control--invalid--BorderBottomColor: var(--pf-global--danger-color--100);
159
- --pf-c-form-control--invalid--PaddingRight: var(--pf-global--spacer--xl);
160
- --pf-c-form-control--invalid--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft));
161
- --pf-c-form-control--invalid--BackgroundPositionY: center;
162
- --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY);
163
- --pf-c-form-control--invalid--BackgroundSizeX: var(--pf-c-form-control--FontSize);
164
- --pf-c-form-control--invalid--BackgroundSizeY: var(--pf-c-form-control--FontSize);
165
- --pf-c-form-control--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY);
166
- --pf-c-form-control--invalid--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fe5142' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
167
- --pf-c-form-control--invalid--exclamation--Background: var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat;
168
- --pf-c-form-control--invalid--Background: var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background);
169
- --pf-c-form-control--m-search--PaddingLeft: var(--pf-global--spacer--xl);
170
- --pf-c-form-control--m-search--BackgroundPosition: var(--pf-c-form-control--PaddingRight);
171
- --pf-c-form-control--m-search--BackgroundSize: var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize);
172
- --pf-c-form-control--m-search--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
173
- --pf-c-form-control--m-icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer));
174
- --pf-c-form-control--m-icon--BackgroundUrl: none;
175
- --pf-c-form-control--m-icon--BackgroundPositionX: calc(100% - var(--pf-c-form-control--inset--base));
176
- --pf-c-form-control--m-icon--BackgroundPositionY: center;
177
- --pf-c-form-control--m-icon--BackgroundSizeX: var(--pf-c-form-control--FontSize);
178
- --pf-c-form-control--m-icon--BackgroundSizeY: var(--pf-c-form-control--FontSize);
179
- --pf-c-form-control--m-icon--icon--spacer: var(--pf-global--spacer--sm);
180
- --pf-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer));
181
- --pf-c-form-control--m-icon--icon--BackgroundPositionX: calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX));
182
- --pf-c-form-control--m-icon--invalid--BackgroundUrl: var(--pf-c-form-control--invalid--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
183
- --pf-c-form-control--m-icon--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
184
- --pf-c-form-control--m-icon--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
185
- --pf-c-form-control--m-icon--success--BackgroundUrl: var(--pf-c-form-control--success--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
186
- --pf-c-form-control--m-icon--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
187
- --pf-c-form-control--m-icon--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
188
- --pf-c-form-control--m-icon--m-warning--BackgroundUrl: var(--pf-c-form-control--m-warning--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
189
- --pf-c-form-control--m-icon--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
190
- --pf-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
191
- --pf-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");
192
- --pf-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
193
- --pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
194
- --pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm) - var(--pf-c-form-control--BorderWidth));
195
- --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
196
- --pf-c-form-control__select--BackgroundSize: .625em;
197
- --pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 1px);
198
- --pf-c-form-control__select--BackgroundPositionY: center;
199
- --pf-c-form-control__select--BackgroundPosition: var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY);
200
- --pf-c-form-control__select--success--PaddingRight: var(--pf-global--spacer--3xl);
201
- --pf-c-form-control__select--success--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg));
202
- --pf-c-form-control__select--m-warning--PaddingRight: var(--pf-global--spacer--3xl);
203
- --pf-c-form-control__select--m-warning--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg) + 0.0625rem);
204
- --pf-c-form-control__select--invalid--PaddingRight: var(--pf-global--spacer--3xl);
205
- --pf-c-form-control__select--invalid--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg));
206
- --pf-c-form-control--textarea--Width: var(--pf-c-form-control--Width);
207
- --pf-c-form-control--textarea--Height: auto;
208
- --pf-c-form-control--textarea--success--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
209
- --pf-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
210
- --pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
211
- --pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#success");
212
- --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#warning");
213
- --pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#invalid");
214
- --pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#select");
215
- --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#search");
216
- --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#calendar");
217
- --pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#clock");
218
- --pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize);
219
- --pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 7px);
220
- --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
221
- --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + 0.0625rem);
222
- --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
223
- color: var(--pf-c-form-control--Color);
224
- width: var(--pf-c-form-control--Width);
225
- padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
226
- font-size: var(--pf-c-form-control--FontSize);
227
- line-height: var(--pf-c-form-control--LineHeight);
228
- background-color: var(--pf-c-form-control--BackgroundColor);
229
- background-repeat: no-repeat;
230
- border: var(--pf-c-form-control--BorderWidth) solid;
231
- border-color: var(--pf-c-form-control--BorderTopColor) var(--pf-c-form-control--BorderRightColor) var(--pf-c-form-control--BorderBottomColor) var(--pf-c-form-control--BorderLeftColor);
232
- border-radius: var(--pf-c-form-control--BorderRadius);
233
- -moz-appearance: none;
234
- -webkit-appearance: none;
235
- }
236
- .pf-c-form-control::placeholder {
237
- color: var(--pf-c-form-control--placeholder--Color);
238
- }
239
- .pf-c-form-control:not(textarea) {
240
- height: var(--pf-c-form-control--Height);
241
- text-overflow: ellipsis;
242
- }
243
- .pf-c-form-control[readonly] {
244
- background-color: var(--pf-c-form-control--readonly--BackgroundColor);
245
- }
246
- .pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):hover {
247
- --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--readonly--hover--BorderBottomColor);
248
- }
249
- .pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):focus {
250
- --pf-c-form-control--focus--PaddingBottom: var(--pf-c-form-control--readonly--focus--PaddingBottom);
251
- --pf-c-form-control--focus--BorderBottomWidth: var(--pf-c-form-control--readonly--focus--BorderBottomWidth);
252
- --pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor);
253
- }
254
- .pf-c-form-control[readonly].pf-m-plain {
255
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
256
- --pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
257
- border-color: transparent;
258
- }
259
- .pf-c-form-control:hover {
260
- --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
261
- }
262
- .pf-c-form-control:focus {
263
- --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--focus--BorderBottomColor);
264
- padding-bottom: var(--pf-c-form-control--focus--PaddingBottom);
265
- border-bottom-width: var(--pf-c-form-control--focus--BorderBottomWidth);
266
- }
267
- .pf-c-form-control.pf-m-expanded {
268
- --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--m-expanded--BorderBottomColor);
269
- padding-bottom: var(--pf-c-form-control--m-expanded--PaddingBottom);
270
- border-bottom-width: var(--pf-c-form-control--m-expanded--BorderBottomWidth);
271
- }
272
- .pf-c-form-control:disabled {
273
- --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
274
- color: var(--pf-c-form-control--disabled--Color);
275
- cursor: not-allowed;
276
- border-color: var(--pf-c-form-control--disabled--BorderColor);
277
- }
278
- .pf-c-form-control[aria-invalid=true] {
279
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control--invalid--PaddingRight);
280
- --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--invalid--BorderBottomColor);
281
- padding-bottom: var(--pf-c-form-control--invalid--PaddingBottom);
282
- background-image: var(--pf-c-form-control--invalid--BackgroundUrl);
283
- background-position: var(--pf-c-form-control--invalid--BackgroundPosition);
284
- background-size: var(--pf-c-form-control--invalid--BackgroundSize);
285
- border-bottom-width: var(--pf-c-form-control--invalid--BorderBottomWidth);
286
- }
287
- .pf-c-form-control[aria-invalid=true].pf-m-icon {
288
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-icon--icon--PaddingRight);
289
- background-image: var(--pf-c-form-control--m-icon--invalid--BackgroundUrl);
290
- background-position: var(--pf-c-form-control--m-icon--invalid--BackgroundPosition);
291
- background-size: var(--pf-c-form-control--m-icon--invalid--BackgroundSize);
292
- }
293
- .pf-c-form-control.pf-m-success {
294
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control--success--PaddingRight);
295
- --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--success--BorderBottomColor);
296
- padding-bottom: var(--pf-c-form-control--success--PaddingBottom);
297
- background-image: var(--pf-c-form-control--success--BackgroundUrl);
298
- background-position: var(--pf-c-form-control--success--BackgroundPosition);
299
- background-size: var(--pf-c-form-control--success--BackgroundSize);
300
- border-bottom-width: var(--pf-c-form-control--success--BorderBottomWidth);
301
- }
302
- .pf-c-form-control.pf-m-success.pf-m-icon {
303
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-icon--icon--PaddingRight);
304
- background-image: var(--pf-c-form-control--m-icon--success--BackgroundUrl);
305
- background-position: var(--pf-c-form-control--m-icon--success--BackgroundPosition);
306
- background-size: var(--pf-c-form-control--m-icon--success--BackgroundSize);
307
- }
308
- .pf-c-form-control.pf-m-warning {
309
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-warning--PaddingRight);
310
- --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--m-warning--BorderBottomColor);
311
- padding-bottom: var(--pf-c-form-control--m-warning--PaddingBottom);
312
- background-image: var(--pf-c-form-control--m-warning--BackgroundUrl);
313
- background-position: var(--pf-c-form-control--m-warning--BackgroundPosition);
314
- background-size: var(--pf-c-form-control--m-warning--BackgroundSize);
315
- border-bottom-width: var(--pf-c-form-control--m-warning--BorderBottomWidth);
316
- }
317
- .pf-c-form-control.pf-m-warning.pf-m-icon {
318
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-icon--icon--PaddingRight);
319
- background-image: var(--pf-c-form-control--m-icon--m-warning--BackgroundUrl);
320
- background-position: var(--pf-c-form-control--m-icon--m-warning--BackgroundPosition);
321
- background-size: var(--pf-c-form-control--m-icon--m-warning--BackgroundSize);
322
- }
323
- .pf-c-form-control.pf-m-search {
324
- --pf-c-form-control--PaddingLeft: var(--pf-c-form-control--m-search--PaddingLeft);
325
- background-image: var(--pf-c-form-control--m-search--BackgroundUrl);
326
- background-position: var(--pf-c-form-control--m-search--BackgroundPosition);
327
- background-size: var(--pf-c-form-control--m-search--BackgroundSize);
328
- }
329
- .pf-c-form-control.pf-m-icon {
330
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-icon--PaddingRight);
331
- background-image: var(--pf-c-form-control--m-icon--BackgroundUrl);
332
- background-position: var(--pf-c-form-control--m-icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
333
- background-size: var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
334
- }
335
- .pf-c-form-control.pf-m-icon.pf-m-calendar {
336
- --pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-calendar--BackgroundUrl);
337
- }
338
- .pf-c-form-control.pf-m-icon.pf-m-clock {
339
- --pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-clock--BackgroundUrl);
340
- }
341
- .pf-c-form-control.pf-m-icon-sprite {
342
- --pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
343
- --pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
344
- --pf-c-form-control--invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl);
345
- --pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
346
- --pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
347
- --pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
348
- --pf-c-form-control--m-clock--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl);
349
- --pf-c-form-control__select--BackgroundSize: var(--pf-c-form-control--m-icon-sprite__select--BackgroundSize);
350
- --pf-c-form-control__select--BackgroundPositionX: var(--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX);
351
- --pf-c-form-control__select--success--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition);
352
- --pf-c-form-control__select--m-warning--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition);
353
- --pf-c-form-control__select--invalid--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition);
354
- }
355
- select.pf-c-form-control {
356
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
357
- --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
358
- background-image: var(--pf-c-form-control__select--BackgroundUrl);
359
- background-position: var(--pf-c-form-control__select--BackgroundPosition);
360
- background-size: var(--pf-c-form-control__select--BackgroundSize);
361
- }
362
- @-moz-document url-prefix() {
363
- select.pf-c-form-control {
364
- --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px);
365
- --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px);
366
- }
367
- }
368
- select.pf-c-form-control[aria-invalid=true] {
369
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
370
- --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition);
371
- background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--invalid--BackgroundUrl);
372
- background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--invalid--BackgroundPosition);
373
- background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--invalid--BackgroundSize);
374
- }
375
- select.pf-c-form-control.pf-m-success {
376
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--success--PaddingRight);
377
- --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control__select--success--BackgroundPosition);
378
- background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--success--BackgroundUrl);
379
- background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--success--BackgroundPosition);
380
- background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--success--BackgroundSize);
381
- }
382
- select.pf-c-form-control.pf-m-warning {
383
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--m-warning--PaddingRight);
384
- background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--m-warning--BackgroundUrl);
385
- background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control__select--m-warning--BackgroundPosition);
386
- background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--m-warning--BackgroundSize);
387
- }
388
- select.pf-c-form-control.pf-m-placeholder {
389
- color: var(--pf-c-form-control--placeholder--Color);
390
- }
391
- select.pf-c-form-control.pf-m-placeholder * {
392
- color: var(--pf-c-form-control--placeholder--child--Color);
393
- }
394
- select.pf-c-form-control.pf-m-placeholder *:disabled {
395
- color: revert;
396
- }
397
-
398
- textarea.pf-c-form-control {
399
- --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
400
- --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY);
401
- --pf-c-form-control--m-warning--BackgroundPositionY: var(--pf-c-form-control--textarea--m-warning--BackgroundPositionY);
402
- width: var(--pf-c-form-control--textarea--Width);
403
- height: var(--pf-c-form-control--textarea--Height);
404
- vertical-align: bottom;
405
- }
406
-
407
- .pf-c-form-control.pf-m-resize-vertical {
408
- resize: vertical;
409
- }
410
- .pf-c-form-control.pf-m-resize-horizontal {
411
- resize: horizontal;
412
- }
413
-
414
- :where(.pf-theme-dark) .pf-c-form-control {
415
- --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
416
- --pf-c-form-control--BorderTopColor: transparent;
417
- --pf-c-form-control--BorderRightColor: transparent;
418
- --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
419
- --pf-c-form-control--BorderLeftColor: transparent;
420
- --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
421
- --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
422
- --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
423
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
424
- color: var(--pf-global--Color--100);
425
- }
426
- :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
427
- filter: invert(1);
428
- }
429
- :where(.pf-theme-dark) .pf-c-form-control[readonly] {
430
- border-bottom-color: var(--pf-global--palette--black-700);
431
- }
432
- :where(.pf-theme-dark) .pf-c-form-control:disabled {
433
- color: var(--pf-global--palette--black-100);
434
- }
435
-
436
1
  :root {
437
2
  --ins-color--orange: #ec7a08;
438
3
  }
@@ -1,7 +1,5 @@
1
1
 
2
2
  @import '~@patternfly/patternfly/sass-utilities/all';
3
- @import '~@patternfly/patternfly/components/InputGroup/input-group.scss';
4
- @import '~@patternfly/patternfly/components/FormControl/form-control.scss';
5
3
  @import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
6
4
 
7
5
  .pf-c-input-group.ins-c-filter {