File: text-input-group.css

package info (click to toggle)
cockpit 354-1
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid
  • size: 308,956 kB
  • sloc: javascript: 775,606; python: 40,351; ansic: 35,655; cpp: 11,117; sh: 3,511; makefile: 580; xml: 261
file content (223 lines) | stat: -rw-r--r-- 14,569 bytes parent folder | download | duplicates (10) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
 
.pf-v6-c-text-input-group {
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
  --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
  --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
  --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
  --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
  --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
  --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
  --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
  --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
  --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
  --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
  --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
  --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
  --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
  --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
  --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
  --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
  --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
  --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
  --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
  --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
  --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
  --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
  --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
  --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
  --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
  --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
  --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
  --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
  --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
  --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
  --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
  --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
  --pf-v6-c-text-input-group__icon--TranslateY: -50%;
  --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
  --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
  --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
}

.pf-v6-c-text-input-group {
  position: relative;
  display: flex;
  width: 100%;
  font-size: var(--pf-v6-c-text-input-group__FontSize);
  line-height: var(--pf-v6-c-text-input-group__LineHeight);
  color: var(--pf-v6-c-text-input-group--Color, inherit);
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
  border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
  border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
  border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
  border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
}
.pf-v6-c-text-input-group::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
  border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
  border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
  border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
  border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
}
.pf-v6-c-text-input-group.pf-m-disabled {
  --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
  --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
  --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
  --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
  pointer-events: none;
}
.pf-v6-c-text-input-group.pf-m-plain {
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
}
.pf-v6-c-text-input-group.pf-m-plain::before {
  border: 0;
}
.pf-v6-c-text-input-group.pf-m-success {
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
}
.pf-v6-c-text-input-group.pf-m-warning {
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
}
.pf-v6-c-text-input-group.pf-m-error {
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
}
@media (prefers-reduced-motion: no-preference) {
  .pf-v6-c-text-input-group.pf-m-error {
    translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
    animation-name: pf-v6-global-danger-jiggle-motion;
    animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
    animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
    animation-fill-mode: both;
  }
}
.pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
  --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
  --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
  animation-name: pf-v6-global-fade-in;
  animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
  animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
}
.pf-v6-c-text-input-group:hover {
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
}
.pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
}
.pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
  --pf-v6-c-text-input-group__text--Position: relative;
}
.pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
  --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
  --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
}

.pf-v6-c-text-input-group__main {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
  min-width: 0;
}
.pf-v6-c-text-input-group__main.pf-m-icon {
  --pf-v6-c-text-input-group__text--Position: relative;
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
}
.pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
}
.pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
  padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
  padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
  padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
}

.pf-v6-c-text-input-group__text {
  position: var(--pf-v6-c-text-input-group__text--Position, revert);
  display: inline-grid;
  flex: 1;
  grid-template-areas: "text-input";
  grid-template-columns: 1fr;
}

.pf-v6-c-text-input-group__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
  font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
  color: var(--pf-v6-c-text-input-group__icon--Color);
  transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
}
.pf-v6-c-text-input-group__icon.pf-m-status {
  inset-inline-start: auto;
  inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
  color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
}

.pf-v6-c-text-input-group__text-input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  width: 100%;
  min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
  padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
  padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
  padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
  padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
  color: var(--pf-v6-c-text-input-group__text-input--Color);
  background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
  border: 0;
  outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
}
.pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
  grid-area: text-input;
}
.pf-v6-c-text-input-group__text-input.pf-m-hint {
  color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
}
.pf-v6-c-text-input-group__text-input::placeholder {
  color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
}

.pf-v6-c-text-input-group__utilities {
  display: flex;
  align-items: center;
  margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
  margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
}
.pf-v6-c-text-input-group__utilities > * + * {
  margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
}

.pf-v6-c-text-input-group__group {
  display: flex;
}