[TASK] Improve visual identification of read only fields
[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 }