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