[BUGFIX] IE show correct select box arrow
[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 16px;
173                         padding-right: 24px;
174
175                         &::-ms-expand {
176                                 display: none;
177                         }
178
179                         &.input-sm,
180                         .form-group-sm & {
181                                 line-height: 16px;
182                         }
183                 }
184                 > optgroup {
185                         margin-top: 9px;
186                         &:first-child {
187                                 margin-top: 0;
188                         }
189                 }
190                 option {
191                         padding-top: 2px;
192                         padding-bottom: 2px;
193                 }
194         }
195         &.icon-select {
196                 option {
197                         padding-left: 22px;
198                 }
199         }
200 }
201
202 //
203 // Styles for the "clearable" jquery plugin.
204 //
205 .form-control-clearable {
206         position: relative;
207         .form-control {
208                 padding-right: 2.3em;
209         }
210         .close {
211                 position: absolute;
212                 z-index: 3;
213                 font-size: 1.2em;
214                 top: 50%;
215                 right: 0.5em;
216                 margin-top: -0.55em;
217                 &:before {
218                         line-height: 1.5em;
219                 }
220         }
221 }
222 .input-group {
223         .form-control-clearable {
224                 display: table-cell;
225                 .form-control {
226                         display: block;
227                 }
228         }
229 }
230
231 //
232 // Styles for the "capslock" jquery plugin.
233 //
234 .form-notice-capslock {
235         position: absolute;
236         right: 6px;
237         top: 50%;
238         margin-top: -10px;
239         height: 20px;
240         width: 20px;
241         padding: 3px;
242         z-index: 10;
243         background-color: #fff;
244         > img {
245                 display: block;
246                 opacity: 0.5;
247         }
248 }
249
250 //
251 // Form Inline adjustments
252 //
253 .form-inline-spaced {
254         margin: 0 -0.5em @line-height-computed;
255         .form-group {
256                 margin: 0.5em 0.5em 0;
257                 label {
258                         margin-right: 0.5em;
259                 }
260         }
261 }
262
263 //
264 // Form group additions
265 //
266 .form-group-dashed {
267         & + .form-group-dashed {
268                 padding-top: 15px;
269                 border-top: 1px dashed #ccc;
270         }
271 }
272
273 //
274 // Form Sections
275 //
276 .form-section {
277         border: 1px solid #cccccc;
278         background-color: #fafafa;
279         padding: 15px 12px 3px;
280         & + .form-section {
281                 margin-top: -1px;
282         }
283 }
284 .tab-pane {
285         > .form-section:first-child {
286                 border-top: none;
287         }
288 }
289 .form-section-headline {
290         margin-top: 0;
291         margin-bottom: 10px;
292 }
293
294 //
295 // Form Wizards
296 //
297 .form-wizards-wrap {
298         &.form-wizards-top {
299                 > .form-wizards-items {
300                         margin-bottom: 9px;
301                 }
302         }
303         &.form-wizards-bottom {
304                 > .form-wizards-element {
305                         margin-bottom: 9px;
306                 }
307         }
308         &.form-wizards-aside {
309                 display: table;
310                 width: 100%;
311                 > .form-wizards-element {
312                         width: 100%;
313                 }
314                 > .form-wizards-element,
315                 > .form-wizards-items {
316                         display: table-cell;
317                         vertical-align: top;
318                 }
319                 > .form-wizards-items {
320                         white-space: nowrap;
321                         padding-left: 5px;
322                 }
323         }
324 }
325 .form-wizards-element {
326         > .table-fit {
327                 margin-bottom: 9px;
328         }
329 }
330
331 //
332 // Form Irre
333 //
334 .form-irre-header {
335         display: table;
336         margin: -5px;
337         .user-select(none);
338 }
339 .form-irre-header-cell {
340         display: table-cell;
341         vertical-align: middle;
342         white-space: nowrap;
343         padding: 5px;
344 }
345 .form-irre-header-body {
346         width: 100%;
347         font-weight: normal;
348         dl {
349                 .dl-horizontal();
350                 margin-bottom: 0;
351         }
352 }
353 .form-irre-header-icon {
354         padding-right: 0;
355 }
356 .form-irre-header-control {
357         cursor: auto;
358         .btn-group > .btn {
359                 float: none;
360         }
361 }
362
363 //
364 // Form Multi Group
365 //
366 .form-multigroup-wrap {
367         width: 100%;
368         display: table;
369         .form-multigroup-item {
370                 display: table-cell;
371                 width: 50%;
372                 vertical-align: top;
373                 + .form-multigroup-item {
374                         padding-left: 5px;
375                 }
376         }
377         .form-multigroup-item-wizard {
378                 margin-bottom: 5px;
379                 + select.form-control[multiple],
380                 + select.form-control[size] {
381                         min-height: 125px;
382                 }
383         }
384         .form-wizards-wrap {
385                 width: 100%;
386         }
387 }
388
389 //
390 // Radio & Checkbox
391 //
392 .radio-row,
393 .checkbox-row {
394         margin-top: 10px;
395         margin-bottom: 5px;
396 }
397 .radio-column,
398 .checkbox-column {
399         margin-bottom: 5px;
400         > .radio,
401         > .checkbox {
402                 margin: 0;
403         }
404 }
405 .radio-inline,
406 .checkbox-inline {
407         &.radio,
408         &.checkbox {
409                 display: block;
410                 margin-left: 0;
411                 margin-right: 10px;
412                 margin-bottom: 10px;
413                 padding: 0;
414                 @media (max-width: @screen-xs-max) {
415                         & + .radio,
416                         & + .checkbox {
417                                 margin-top: -5px;
418                         }
419                 }
420                 @media (min-width: @screen-sm-min) {
421                         display: inline-block;
422                         margin-top: 10px;
423                         label {
424                                 white-space: nowrap;
425                         }
426                 }
427         }
428 }
429
430 //
431 // Autoresize for Textareas
432 //
433 // no manual resizing for textareas (works on non-IE browser only anyways)
434 // as it is handled by JS: "autosize"
435 //
436 textarea {
437         &.formengine-textarea {
438                 resize: none;
439         }
440 }