[BUGFIX] Avoid jumping of form fields on focus
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / typo3 / _main_form.scss
1 //
2 // Disable ms-clear pseudo-element globally to avoid confusion with the
3 // existing clearable integration in TYPO3
4 //
5 // https://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx
6 //
7 *::-ms-clear {
8 display: none;
9 }
10
11 //
12 // Form
13 //
14 #typo3-docbody form {
15 margin-bottom: 1.25em;
16 }
17
18 //
19 // Go back A-tags
20 //
21 a.typo3-goBack {
22 font-weight: bold;
23
24 img {
25 margin-right: 5px;
26 vertical-align: middle;
27 }
28 }
29
30 span.typo3-moduleHeader img {
31 margin-right: 4px;
32 vertical-align: middle;
33 }
34
35 //
36 // Form control state additions
37 //
38 .has-change {
39 @include form-control-validation($state-info-text, $state-info-text, $state-info-bg);
40
41 .thumbnail-status {
42 border: 1px solid $state-info-text;
43 }
44 // A loading order issue prevents .has-change to be overridden with .has-error
45 // this is a workaround needs to be cleaned up in a less file restructuring
46 &.has-error {
47 @extend .has-error;
48 }
49 }
50
51 //
52 // Input group additions
53 //
54 .input-group-icon {
55 width: 32px;
56 vertical-align: middle;
57
58 img {
59 width: 100%;
60 max-height: 18px;
61 }
62 }
63
64 .input-group-addon {
65 min-width: 2.5em;
66 }
67
68 //
69 // IE: ensure DatePicker is opened on button click
70 //
71 label {
72 .icon {
73 img {
74 pointer-events: none;
75 }
76 }
77 }
78
79 //
80 // Form control additions
81 //
82 .form-control {
83 min-width: 120px;
84 }
85
86 .form-control-adapt {
87 width: auto;
88 max-width: 100%;
89 }
90
91 .form-control-wrap {
92 margin: 9px 0;
93 }
94
95 .form-control-holder {
96 position: relative;
97 }
98
99 .row {
100 > .form-group {
101 > .form-control-wrap {
102 margin-bottom: 0;
103 }
104 }
105 }
106
107 .form-group {
108 .t3js-formengine-field-item {
109 position: relative;
110
111 > .t3js-charcounter {
112 left: 0;
113 position: absolute;
114 top: 100%;
115 }
116 }
117 }
118
119 .form-control[disabled],
120 .form-control[readonly],
121 fieldset[disabled] .form-control {
122 color: $input-color-disabled;
123 }
124
125 //
126 // Form control icon
127 //
128 .form-control-icon {
129 position: absolute;
130 top: 50%;
131 left: 15px;
132 transform: translate(0, -50%);
133 z-index: 1;
134
135 + .form-control,
136 + .form-control-clearable .form-control {
137 padding-left: 3.25em;
138 }
139 }
140
141 //
142 // Form group validation states
143 //
144 .form-group.has-error {
145 label:before {
146 font-family: FontAwesome;
147 font-size: 12px;
148 text-align: center;
149 content: $fa-var-exclamation-circle;
150 color: $brand-danger;
151 display: inline-block;
152 }
153
154 .btn-toolbar {
155 label:before {
156 font-family: inherit;
157 font-size: inherit;
158 margin-right: inherit;
159 text-align: inherit;
160 content: '';
161 color: inherit;
162 display: block;
163 }
164 }
165
166 .input-group-btn {
167 label {
168 border-color: $brand-danger;
169
170 .t3-icon {
171 color: $brand-danger;
172 }
173 }
174
175 label:before {
176 font-family: inherit;
177 font-size: inherit;
178 margin-right: inherit;
179 text-align: inherit;
180 content: '';
181 color: inherit;
182 display: block;
183 }
184 }
185 }
186
187 //
188 // Select
189 //
190 select {
191 &.form-control {
192 &[multiple],
193 &[size] {
194 min-height: 156px;
195 width: 100% !important;
196 }
197
198 &[size="1"] {
199 height: $input-height-base;
200 min-height: 0;
201 }
202
203 &[size="1"],
204 &:not([size]) {
205 appearance: none;
206
207 &::-ms-expand {
208 display: none;
209 }
210
211 &:not(.form-select-no-siblings) {
212 background-image: url('#{$path-sysext}/core/Resources/Public/Icons/T3Icons/actions/actions-view-list-expand.svg');
213 background-position: right 4px center;
214 background-repeat: no-repeat;
215 background-size: 16px 16px;
216 padding-right: 24px;
217 }
218
219 &.input-sm,
220 .form-group-sm & {
221 line-height: 16px;
222 }
223 }
224
225 > optgroup {
226 margin-top: 9px;
227
228 &:first-child {
229 margin-top: 0;
230 }
231 }
232
233 option {
234 padding-top: 2px;
235 padding-bottom: 2px;
236 }
237 }
238
239 &.icon-select {
240 option {
241 padding-left: 22px;
242 }
243 }
244 }
245
246 //
247 // Styles for the "clearable" jquery plugin.
248 //
249 .form-control-clearable {
250 position: relative;
251
252 .form-control {
253 padding-right: 2.3em;
254 }
255
256 .close {
257 position: absolute;
258 height: 16px;
259 z-index: 3;
260 top: 50%;
261 right: 0.5em;
262 transform: translate(0, -50%);
263
264 .icon {
265 vertical-align: 0;
266 }
267 }
268 }
269
270 .input-group {
271 .form-control-clearable {
272 display: table-cell;
273
274 .form-control {
275 display: block;
276 }
277 }
278 }
279
280 //
281 // Styles for the "capslock" jquery plugin.
282 //
283 .form-notice-capslock {
284 position: absolute;
285 right: 6px;
286 top: 50%;
287 margin-top: -10px;
288 height: 20px;
289 width: 20px;
290 padding: 3px;
291 z-index: 10;
292 background-color: #fff;
293
294 > img {
295 display: block;
296 opacity: 0.5;
297 }
298 }
299
300 //
301 // Form Inline adjustments
302 //
303 .form-inline-spaced {
304 margin: 0 -0.5em $line-height-computed;
305
306 .form-group {
307 margin: 0.5em 0.5em 0;
308
309 label {
310 margin-right: 0.5em;
311 }
312 }
313 }
314
315 //
316 // Form group additions
317 //
318 .form-group-dashed {
319 & + .form-group-dashed {
320 padding-top: 15px;
321 border-top: 1px dashed #ccc;
322 }
323 }
324
325 //
326 // Form Sections
327 //
328 .form-section {
329 border: 1px solid #ccc;
330 background-color: #fafafa;
331 padding: 15px 12px 3px;
332
333 & + .form-section {
334 margin-top: -1px;
335 }
336 }
337
338 .tab-pane {
339 > .form-section:first-child {
340 border-top: none;
341 }
342 }
343
344 .form-section-headline {
345 margin-top: 0;
346 margin-bottom: 10px;
347 }
348
349 //
350 // Form Wizards
351 //
352 .form-wizards-wrap {
353 display: table;
354 width: 100%;
355
356 > .form-wizards-element {
357 display: table-cell;
358 width: 100%;
359 }
360
361 > .form-wizards-items-top {
362 display: table-row;
363 }
364
365 > .form-wizards-items-aside {
366 display: table-cell;
367 vertical-align: top;
368 padding-left: 5px;
369 white-space: nowrap;
370 }
371
372 > .form-wizards-items-bottom {
373 display: table-row;
374 }
375
376 > .form-wizards-items-bottom:first-child {
377 margin-top: 4px;
378 }
379 }
380
381 //
382 // Form Irre
383 //
384 .form-irre-header {
385 display: table;
386 margin: -5px;
387
388 @include user-select(none);
389 }
390
391 .form-irre-header-cell {
392 display: table-cell;
393 vertical-align: middle;
394 white-space: nowrap;
395 padding: 5px;
396 }
397
398 .form-irre-header-body {
399 width: 100%;
400 font-weight: normal;
401 white-space: normal;
402
403 dl {
404 @extend .dl-horizontal;
405
406 margin-bottom: 0;
407 }
408 }
409
410 .form-irre-header-icon {
411 padding-right: 0;
412 }
413
414 .form-irre-header-control {
415 cursor: auto;
416
417 .btn-group > .btn {
418 float: none;
419 }
420 }
421
422 //
423 // Form Multi Group
424 //
425 .form-multigroup-wrap {
426 width: 100%;
427 display: table;
428
429 .form-multigroup-item {
430 display: table-cell;
431 width: 50%;
432 vertical-align: top;
433
434 + .form-multigroup-item {
435 padding-left: 5px;
436 }
437 }
438
439 .form-multigroup-item-wizard {
440 margin-bottom: 5px;
441
442 + select.form-control[multiple],
443 + select.form-control[size] {
444 min-height: 125px;
445 }
446 }
447
448 .form-wizards-wrap {
449 width: 100%;
450 }
451 }
452
453 //
454 // Radio & Checkbox
455 //
456 .radio-row,
457 .checkbox-row {
458 margin-top: 10px;
459 margin-bottom: 5px;
460 }
461
462 .radio-column,
463 .checkbox-column {
464 margin-bottom: 5px;
465
466 > .radio,
467 > .checkbox {
468 margin: 0;
469 }
470 }
471
472 .radio-inline,
473 .checkbox-inline {
474 &.radio,
475 &.checkbox {
476 display: block;
477 margin-left: 0;
478 margin-right: 10px;
479 margin-bottom: 10px;
480 padding: 0;
481
482 @media (max-width: $screen-xs-max) {
483 & + .radio,
484 & + .checkbox {
485 margin-top: -5px;
486 }
487 }
488
489 @media (min-width: $screen-sm-min) {
490 display: inline-block;
491 margin-top: 10px;
492
493 label {
494 white-space: nowrap;
495 }
496 }
497 }
498 }
499
500 //
501 // Autoresize for Textareas
502 //
503 // no manual resizing for textareas (works on non-IE browser only anyways)
504 // as it is handled by JS: "autosize"
505 //
506 textarea {
507 &.formengine-textarea {
508 resize: none;
509 }
510 }