[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 }