[BUGFIX] Improve usability of inline header
[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 white-space: normal;
349 dl {
350 .dl-horizontal();
351 margin-bottom: 0;
352 }
353 }
354 .form-irre-header-icon {
355 padding-right: 0;
356 }
357 .form-irre-header-control {
358 cursor: auto;
359 .btn-group > .btn {
360 float: none;
361 }
362 }
363
364 //
365 // Form Multi Group
366 //
367 .form-multigroup-wrap {
368 width: 100%;
369 display: table;
370 .form-multigroup-item {
371 display: table-cell;
372 width: 50%;
373 vertical-align: top;
374 + .form-multigroup-item {
375 padding-left: 5px;
376 }
377 }
378 .form-multigroup-item-wizard {
379 margin-bottom: 5px;
380 + select.form-control[multiple],
381 + select.form-control[size] {
382 min-height: 125px;
383 }
384 }
385 .form-wizards-wrap {
386 width: 100%;
387 }
388 }
389
390 //
391 // Radio & Checkbox
392 //
393 .radio-row,
394 .checkbox-row {
395 margin-top: 10px;
396 margin-bottom: 5px;
397 }
398 .radio-column,
399 .checkbox-column {
400 margin-bottom: 5px;
401 > .radio,
402 > .checkbox {
403 margin: 0;
404 }
405 }
406 .radio-inline,
407 .checkbox-inline {
408 &.radio,
409 &.checkbox {
410 display: block;
411 margin-left: 0;
412 margin-right: 10px;
413 margin-bottom: 10px;
414 padding: 0;
415 @media (max-width: @screen-xs-max) {
416 & + .radio,
417 & + .checkbox {
418 margin-top: -5px;
419 }
420 }
421 @media (min-width: @screen-sm-min) {
422 display: inline-block;
423 margin-top: 10px;
424 label {
425 white-space: nowrap;
426 }
427 }
428 }
429 }
430
431 //
432 // Autoresize for Textareas
433 //
434 // no manual resizing for textareas (works on non-IE browser only anyways)
435 // as it is handled by JS: "autosize"
436 //
437 textarea {
438 &.formengine-textarea {
439 resize: none;
440 }
441 }