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