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