[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 .t3js-formengine-field-item {
106 position: relative;
107
108 > .t3js-charcounter {
109 left: 0;
110 position: absolute;
111 top: 100%;
112 }
113 }
114 }
115 }
116
117 .form-control[disabled],
118 .form-control[readonly],
119 fieldset[disabled] .form-control {
120 color: $input-color-disabled;
121 }
122
123 //
124 // Form control icon
125 //
126 .form-control-icon {
127 position: absolute;
128 top: 50%;
129 left: 15px;
130 transform: translate(0, -50%);
131 z-index: 1;
132
133 + .form-control,
134 + .form-control-clearable .form-control {
135 padding-left: 3.25em;
136 }
137 }
138
139 //
140 // Form group validation states
141 //
142 .form-group.has-error {
143 label:before {
144 font-family: FontAwesome;
145 font-size: 12px;
146 text-align: center;
147 content: $fa-var-exclamation-circle;
148 color: $brand-danger;
149 display: inline-block;
150 }
151
152 .btn-toolbar {
153 label:before {
154 font-family: inherit;
155 font-size: inherit;
156 margin-right: inherit;
157 text-align: inherit;
158 content: '';
159 color: inherit;
160 display: block;
161 }
162 }
163
164 .input-group-btn {
165 label {
166 border-color: $brand-danger;
167
168 .t3-icon {
169 color: $brand-danger;
170 }
171 }
172
173 label:before {
174 font-family: inherit;
175 font-size: inherit;
176 margin-right: inherit;
177 text-align: inherit;
178 content: '';
179 color: inherit;
180 display: block;
181 }
182 }
183 }
184
185 //
186 // Select
187 //
188 select {
189 &.form-control {
190 &[multiple],
191 &[size] {
192 min-height: 156px;
193 width: 100% !important;
194 }
195
196 &[size="1"] {
197 height: $input-height-base;
198 min-height: 0;
199 }
200
201 &[size="1"],
202 &:not([size]) {
203 appearance: none;
204
205 &::-ms-expand {
206 display: none;
207 }
208
209 &:not(.form-select-no-siblings) {
210 background-image: url('#{$path-sysext}/core/Resources/Public/Icons/T3Icons/actions/actions-view-list-expand.svg');
211 background-position: right 4px center;
212 background-repeat: no-repeat;
213 background-size: 16px 16px;
214 padding-right: 24px;
215 }
216
217 &.input-sm,
218 .form-group-sm & {
219 line-height: 16px;
220 }
221 }
222
223 > optgroup {
224 margin-top: 9px;
225
226 &:first-child {
227 margin-top: 0;
228 }
229 }
230
231 option {
232 padding-top: 2px;
233 padding-bottom: 2px;
234 }
235 }
236
237 &.icon-select {
238 option {
239 padding-left: 22px;
240 }
241 }
242 }
243
244 //
245 // Styles for the "clearable" jquery plugin.
246 //
247 .form-control-clearable {
248 position: relative;
249
250 .form-control {
251 padding-right: 2.3em;
252 }
253
254 .close {
255 position: absolute;
256 height: 16px;
257 z-index: 3;
258 top: 50%;
259 right: 0.5em;
260 transform: translate(0, -50%);
261
262 .icon {
263 vertical-align: 0;
264 }
265 }
266 }
267
268 .input-group {
269 .form-control-clearable {
270 display: table-cell;
271
272 .form-control {
273 display: block;
274 }
275 }
276 }
277
278 //
279 // Styles for the "capslock" jquery plugin.
280 //
281 .form-notice-capslock {
282 position: absolute;
283 right: 6px;
284 top: 50%;
285 margin-top: -10px;
286 height: 20px;
287 width: 20px;
288 padding: 3px;
289 z-index: 10;
290 background-color: #fff;
291
292 > img {
293 display: block;
294 opacity: 0.5;
295 }
296 }
297
298 //
299 // Form Inline adjustments
300 //
301 .form-inline-spaced {
302 margin: 0 -0.5em $line-height-computed;
303
304 .form-group {
305 margin: 0.5em 0.5em 0;
306
307 label {
308 margin-right: 0.5em;
309 }
310 }
311 }
312
313 //
314 // Form group additions
315 //
316 .form-group-dashed {
317 & + .form-group-dashed {
318 padding-top: 15px;
319 border-top: 1px dashed #ccc;
320 }
321 }
322
323 //
324 // Form Sections
325 //
326 .form-section {
327 border: 1px solid #ccc;
328 background-color: #fafafa;
329 padding: 15px 12px 3px;
330
331 & + .form-section {
332 margin-top: -1px;
333 }
334 }
335
336 .tab-pane {
337 > .form-section:first-child {
338 border-top: none;
339 }
340 }
341
342 .form-section-headline {
343 margin-top: 0;
344 margin-bottom: 10px;
345 }
346
347 //
348 // Form Wizards
349 //
350 .form-wizards-wrap {
351 display: table;
352 width: 100%;
353
354 > .form-wizards-element {
355 display: table-cell;
356 width: 100%;
357 }
358
359 > .form-wizards-items-top {
360 display: table-row;
361 }
362
363 > .form-wizards-items-aside {
364 display: table-cell;
365 vertical-align: top;
366 padding-left: 5px;
367 white-space: nowrap;
368 }
369
370 > .form-wizards-items-bottom {
371 display: table-row;
372 }
373
374 > .form-wizards-items-bottom:first-child {
375 margin-top: 4px;
376 }
377 }
378
379 //
380 // Form Irre
381 //
382 .form-irre-header {
383 display: table;
384 margin: -5px;
385
386 @include user-select(none);
387 }
388
389 .form-irre-header-cell {
390 display: table-cell;
391 vertical-align: middle;
392 white-space: nowrap;
393 padding: 5px;
394 }
395
396 .form-irre-header-body {
397 width: 100%;
398 font-weight: normal;
399 white-space: normal;
400
401 dl {
402 @extend .dl-horizontal;
403
404 margin-bottom: 0;
405 }
406 }
407
408 .form-irre-header-icon {
409 padding-right: 0;
410 }
411
412 .form-irre-header-control {
413 cursor: auto;
414
415 .btn-group > .btn {
416 float: none;
417 }
418 }
419
420 //
421 // Form Multi Group
422 //
423 .form-multigroup-wrap {
424 width: 100%;
425 display: table;
426
427 .form-multigroup-item {
428 display: table-cell;
429 width: 50%;
430 vertical-align: top;
431
432 + .form-multigroup-item {
433 padding-left: 5px;
434 }
435 }
436
437 .form-multigroup-item-wizard {
438 margin-bottom: 5px;
439
440 + select.form-control[multiple],
441 + select.form-control[size] {
442 min-height: 125px;
443 }
444 }
445
446 .form-wizards-wrap {
447 width: 100%;
448 }
449 }
450
451 //
452 // Radio & Checkbox
453 //
454 .radio-row,
455 .checkbox-row {
456 margin-top: 10px;
457 margin-bottom: 5px;
458 }
459
460 .radio-column,
461 .checkbox-column {
462 margin-bottom: 5px;
463
464 > .radio,
465 > .checkbox {
466 margin: 0;
467 }
468 }
469
470 .radio-inline,
471 .checkbox-inline {
472 &.radio,
473 &.checkbox {
474 display: block;
475 margin-left: 0;
476 margin-right: 10px;
477 margin-bottom: 10px;
478 padding: 0;
479
480 @media (max-width: $screen-xs-max) {
481 & + .radio,
482 & + .checkbox {
483 margin-top: -5px;
484 }
485 }
486
487 @media (min-width: $screen-sm-min) {
488 display: inline-block;
489 margin-top: 10px;
490
491 label {
492 white-space: nowrap;
493 }
494 }
495 }
496 }
497
498 //
499 // Autoresize for Textareas
500 //
501 // no manual resizing for textareas (works on non-IE browser only anyways)
502 // as it is handled by JS: "autosize"
503 //
504 textarea {
505 &.formengine-textarea {
506 resize: none;
507 }
508 }