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