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