0cc6a26b8e93521b4e9ee7d20c1ebc8543ef4429
[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 // Form control additions
65 //
66 .form-control {
67         min-width: 120px;
68 }
69 .form-control-adapt {
70         width: auto;
71         max-width: 100%;
72 }
73 .form-control-wrap {
74         margin: 9px 0;
75 }
76 .form-control-holder {
77         position: relative;
78 }
79 .row {
80         > .form-group {
81                 > .form-control-wrap {
82                         margin-bottom: 0;
83                 }
84         }
85 }
86
87
88 //
89 // Form group validation states
90 //
91 .form-group.has-error {
92         label:before {
93                 font-family: FontAwesome;
94                 font-size: 12px;
95                 margin-right: 5px;
96                 text-align: center;
97                 content: @fa-var-warning;
98                 color: @brand-danger;
99                 display: inline-block;
100         }
101
102         .input-group-btn {
103                 label {
104                         border-color: @brand-danger;
105                         .t3-icon {
106                                 color: @brand-danger;
107                         }
108                 }
109                 label:before {
110                         font-family: inherit;
111                         font-size: inherit;
112                         margin-right: inherit;
113                         text-align: inherit;
114                         content: '';
115                         color: inherit;
116                         display: block;
117                 }
118         }
119 }
120
121
122 //
123 // Select
124 //
125 select {
126         &.form-control {
127                 &[multiple],
128                 &[size]{
129                         min-height: 156px;
130                         width: 100%!important;
131                 }
132                 &[size="1"] {
133                         height: @input-height-base;
134                         min-height: 0;
135                 }
136                 > optgroup {
137                         margin-top: 9px;
138                         &:first-child {
139                                 margin-top: 0;
140                         }
141                 }
142                 option {
143                         padding-top: 2px;
144                         padding-bottom: 2px;
145                 }
146         }
147         &.icon-select {
148                 option {
149                         padding-left: 22px;
150                 }
151         }
152 }
153
154 //
155 // Styles for the "clearable" jquery plugin.
156 //
157 .form-control-clearable {
158         position: relative;
159         .form-control {
160                 padding-right: 2.3em;
161         }
162         .close {
163                 position: absolute;
164                 z-index: 3;
165                 font-size: 1.2em;
166                 top: 50%;
167                 right: 0.5em;
168                 margin-top: -0.55em;
169                 &:before {
170                         line-height: 1.5em;
171                 }
172         }
173 }
174 .input-group {
175         .form-control-clearable {
176                 display: table-cell;
177                 .form-control {
178                         display: block;
179                 }
180         }
181 }
182
183 //
184 // Styles for the "capslock" jquery plugin.
185 //
186 .form-notice-capslock {
187         position: absolute;
188         right: 6px;
189         top: 50%;
190         margin-top: -10px;
191         height: 20px;
192         width: 20px;
193         padding: 3px;
194         z-index: 10;
195         background-color: #fff;
196         > img {
197                 display: block;
198                 opacity: 0.5;
199         }
200 }
201
202 //
203 // Form Inline adjustments
204 //
205 .form-inline-spaced {
206         margin: 0 -0.5em @line-height-computed;
207         .form-group {
208                 margin: 0.5em 0.5em 0;
209                 label {
210                         margin-right: 0.5em;
211                 }
212         }
213 }
214
215 //
216 // Form group additions
217 //
218 .form-group-dashed {
219         & + .form-group-dashed {
220                 padding-top: 15px;
221                 border-top: 1px dashed #ccc;
222         }
223 }
224
225 //
226 // Form Sections
227 //
228 .form-section {
229         border: 1px solid #cccccc;
230         background-color: #fafafa;
231         padding: 15px 12px 3px;
232         & + .form-section {
233                 margin-top: -1px;
234         }
235 }
236 .tab-pane {
237         > .form-section:first-child {
238                 border-top: none;
239         }
240 }
241 .form-section-headline {
242         margin-top: 0;
243         margin-bottom: 10px;
244 }
245
246 //
247 // Form Wizards
248 //
249 .form-wizards-wrap {
250         &.form-wizards-top {
251                 > .form-wizards-items {
252                         margin-bottom: 9px;
253                 }
254         }
255         &.form-wizards-bottom {
256                 > .form-wizards-element {
257                         margin-bottom: 9px;
258                 }
259         }
260         &.form-wizards-aside {
261                 display: table;
262                 width: 100%;
263                 > .form-wizards-element {
264                         width: 100%;
265                 }
266                 > .form-wizards-element,
267                 > .form-wizards-items {
268                         display: table-cell;
269                         vertical-align: top;
270                 }
271                 > .form-wizards-items {
272                         white-space: nowrap;
273                         padding-left: 5px;
274                 }
275         }
276 }
277 .form-wizards-element {
278         > .table-fit {
279                 margin-bottom: 9px;
280         }
281 }
282
283 //
284 // Form Irre
285 //
286 .form-irre-header {
287         display: table;
288         margin: -5px;
289         .user-select(none);
290 }
291 .form-irre-header-cell {
292         display: table-cell;
293         vertical-align: middle;
294         white-space: nowrap;
295         padding: 5px;
296 }
297 .form-irre-header-body {
298         width: 100%;
299         font-weight: normal;
300         dl {
301                 .dl-horizontal();
302                 margin-bottom: 0;
303         }
304 }
305 .form-irre-header-icon {
306         padding-right: 0;
307 }
308 .form-irre-header-control {
309         cursor: auto;
310         .btn-group > .btn {
311                 float: none;
312         }
313 }
314
315 //
316 // Form Multi Group
317 //
318 .form-multigroup-wrap {
319         width: 100%;
320         display: table;
321         .form-multigroup-item {
322                 display: table-cell;
323                 width: 50%;
324                 vertical-align: top;
325                 + .form-multigroup-item {
326                         padding-left: 5px;
327                 }
328         }
329         .form-multigroup-item-wizard {
330                 margin-bottom: 5px;
331                 + select.form-control[multiple],
332                 + select.form-control[size] {
333                         min-height: 125px;
334                 }
335         }
336         .form-wizards-wrap {
337                 width: 100%;
338         }
339 }
340
341 //
342 // Radio & Checkbox
343 //
344 .radio-row,
345 .checkbox-row {
346         margin-top: 10px;
347         margin-bottom: 5px;
348 }
349 .radio-column,
350 .checkbox-column {
351         margin-bottom: 5px;
352         > .radio,
353         > .checkbox {
354                 margin: 0;
355         }
356 }
357 .radio-inline,
358 .checkbox-inline {
359         &.radio,
360         &.checkbox {
361                 display: block;
362                 margin-left: 0;
363                 margin-right: 10px;
364                 margin-bottom: 10px;
365                 padding: 0;
366                 @media (max-width: @screen-xs-max) {
367                         & + .radio,
368                         & + .checkbox {
369                                 margin-top: -5px;
370                         }
371                 }
372                 @media (min-width: @screen-sm-min) {
373                         display: inline-block;
374                         margin-top: 10px;
375                         label {
376                                 white-space: nowrap;
377                         }
378                 }
379         }
380 }
381
382 //
383 // Autoresize for Textareas
384 //
385 // no manual resizing for textareas (works on non-IE browser only anyways)
386 // as it is handled by JS: "autosize"
387 //
388 textarea {
389         &.t3js-formengine-textarea {
390                 resize: none;
391         }
392 }