[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 }