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