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