e96ec9489f9bad22f81190baf5bf24c8e14a5819
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / 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 }
39
40 //
41 // Input group additions
42 //
43 .input-group-icon {
44         width: 32px;
45         vertical-align: middle;
46         img {
47                 width: auto;
48                 max-height: 18px;
49         }
50 }
51 .input-group-addon {
52         min-width: 2.5em;
53 }
54
55 //
56 // Form control additions
57 //
58 .form-control {
59         min-width: 120px;
60 }
61 .form-control-adapt {
62         width: auto;
63         max-width: 100%;
64 }
65 .form-control-wrap {
66         margin: 9px 0;
67 }
68 .row {
69         > .form-group {
70                 > .form-control-wrap {
71                         margin-bottom: 0;
72                 }
73         }
74 }
75
76 //
77 // Select
78 //
79 select {
80         &.form-control {
81                 &[multiple],
82                 &[size]{
83                         min-height: 156px;
84                         width: 100%!important;
85                 }
86                 &[size="1"] {
87                         height: @input-height-base;
88                         min-height: 0;
89                 }
90                 > optgroup {
91                         margin-top: 9px;
92                         &:first-child {
93                                 margin-top: 0;
94                         }
95                 }
96                 option {
97                         padding-top: 2px;
98                         padding-bottom: 2px;
99                 }
100         }
101         &.icon-select {
102                 option {
103                         padding-left: 22px;
104                 }
105         }
106 }
107
108 //
109 // Styles for the "clearable" jquery plugin.
110 //
111 .form-control-clearable {
112         position: relative;
113         .form-control {
114                 padding-right: 2.3em;
115         }
116         .close {
117                 position: absolute;
118                 z-index: 3;
119                 font-size: 1.2em;
120                 top: 50%;
121                 right: 0.5em;
122                 margin-top: -0.55em;
123                 &:before {
124                         line-height: 1.5em;
125                 }
126         }
127 }
128 .input-group {
129         .form-control-clearable {
130                 display: table-cell;
131                 .form-control {
132                         display: block;
133                 }
134         }
135 }
136
137 //
138 // Form Inline adjustments
139 //
140 .form-inline-spaced {
141         margin: 0 -0.5em @line-height-computed;
142         .form-group {
143                 margin: 0.5em 0.5em 0;
144                 label {
145                         margin-right: 0.5em;
146                 }
147         }
148 }
149
150 //
151 // Form group additions
152 //
153 .form-group-dashed {
154         & + .form-group-dashed {
155                 padding-top: 15px;
156                 border-top: 1px dashed #ccc;
157         }
158 }
159
160 //
161 // Form Sections
162 //
163 .form-section {
164         border: 1px solid #cccccc;
165         background-color: #fafafa;
166         padding: 15px 12px 3px;
167         & + .form-section {
168                 margin-top: -1px;
169         }
170 }
171 .tab-pane {
172         > .form-section:first-child {
173                 border-top: none;
174         }
175 }
176 .form-section-headline {
177         margin-top: 0;
178         margin-bottom: 10px;
179 }
180
181 //
182 // Form Wizards
183 //
184 .form-wizards-wrap {
185         &.form-wizards-top {
186                 > .form-wizards-items {
187                         margin-bottom: 9px;
188                 }
189         }
190         &.form-wizards-bottom {
191                 > .form-wizards-element {
192                         margin-bottom: 9px;
193                 }
194         }
195         &.form-wizards-aside {
196                 display: table;
197                 width: 100%;
198                 > .form-wizards-element {
199                         width: 100%;
200                 }
201                 > .form-wizards-element,
202                 > .form-wizards-items {
203                         display: table-cell;
204                         vertical-align: top;
205                 }
206                 > .form-wizards-items {
207                         white-space: nowrap;
208                         padding-left: 5px;
209                 }
210         }
211 }
212 .form-wizards-element {
213         > .table-fit {
214                 margin-bottom: 9px;
215         }
216 }
217
218 //
219 // Form Irre
220 //
221 .form-irre-header {
222         display: table;
223         margin: -5px;
224         .user-select(none);
225 }
226 .form-irre-header-cell {
227         display: table-cell;
228         vertical-align: middle;
229         white-space: nowrap;
230         padding: 5px;
231 }
232 .form-irre-header-body {
233         width: 100%;
234         font-weight: normal;
235         dl {
236                 .dl-horizontal();
237                 margin-bottom: 0;
238         }
239 }
240 .form-irre-header-icon {
241         padding-right: 0;
242 }
243 .form-irre-header-control {
244         cursor: auto;
245         .btn-group > .btn {
246                 float: none;
247         }
248 }
249
250 //
251 // Form Multi Group
252 //
253 .form-multigroup-wrap {
254         width: 100%;
255         display: table;
256         .form-multigroup-item {
257                 display: table-cell;
258                 width: 50%;
259                 vertical-align: top;
260                 + .form-multigroup-item {
261                         padding-left: 5px;
262                 }
263         }
264         .form-multigroup-item-wizard {
265                 margin-bottom: 5px;
266                 + select.form-control[multiple],
267                 + select.form-control[size] {
268                         min-height: 125px;
269                 }
270         }
271         .form-wizards-wrap {
272                 width: 100%;
273         }
274 }
275
276 //
277 // Radio & Checkbox
278 //
279 .radio-row,
280 .checkbox-row {
281         margin-top: 10px;
282         margin-bottom: 5px;
283 }
284 .radio-column,
285 .checkbox-column {
286         margin-bottom: 5px;
287         > .radio,
288         > .checkbox {
289                 margin: 0;
290         }
291 }
292 .radio-inline,
293 .checkbox-inline {
294         &.radio,
295         &.checkbox {
296                 display: block;
297                 margin-left: 0;
298                 margin-right: 10px;
299                 margin-bottom: 10px;
300                 padding: 0;
301                 @media (max-width: @screen-xs-max) {
302                         & + .radio,
303                         & + .checkbox {
304                                 margin-top: -5px;
305                         }
306                 }
307                 @media (min-width: @screen-sm-min) {
308                         display: inline-block;
309                         margin-top: 10px;
310                         label {
311                                 white-space: nowrap;
312                         }
313                 }
314         }
315 }
316
317 //
318 // Autoresize for Textareas
319 //
320 // no manual resizing for textareas (works on non-IE browser only anyways)
321 // as it is handled by JS: "autosize"
322 //
323 textarea {
324         &.t3js-formengine-textarea {
325                 resize: none;
326         }
327 }