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 }