[BUGFIX] Fix false icons widths in FormEngine IconSelect
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / typo3 / _element_tceforms.scss
1 //
2 // TCEforms
3 //
4
5 .typo3-TCEforms {
6     width: 100%;
7 }
8
9 .t3-form-field-container {
10     display: block;
11 }
12
13 .typo3-TCEforms .typo3-csh-link {
14     margin-left: 5px;
15 }
16
17 //
18 // TCEforms Flexforms
19 //
20 .t3-form-field-container-inline-placeHolder .t3-form-field-header-inline > span {
21     display: none;
22 }
23
24 .sortableHandle {
25     cursor: move;
26 }
27
28 //
29 // TCEforms Sections
30 //
31 .t3-flex-section {
32     clear: both;
33     margin: 5px 0;
34 }
35
36 .t3-form-field-header-flexsection {
37     width: 100%;
38     height: 16px;
39 }
40
41 .t3-form-field-add-flexsection {
42     border-top: 1px solid #cdcdcd;
43     padding: 10px 5px 5px 0;
44 }
45
46 .t3-form-flex,
47 .t3-form-field-container-flexsections {
48     margin: 5px 0;
49     clear: both;
50 }
51
52 .t3-flex-section-content,
53 .t3-form-field-record-flexsection {
54     background: #eee;
55     padding: 5px 0;
56 }
57
58 .t3-flex-section-content > div,
59 .t3-form-field-record-flexsection > div {
60     margin: 0 10px;
61 }
62
63 .t3-flex-section-header-preview {
64     font-style: italic;
65     width: 100px;
66     display: inline-block;
67     padding-left: 10px;
68     overflow: hidden;
69     white-space: nowrap;
70     text-overflow: ellipsis;
71 }
72
73 // preview image in sys_file records
74 img.t3-tceforms-sysfile-imagepreview {
75     float: left;
76     margin-right: 10px;
77     margin-bottom: 10px;
78 }
79
80 * html div#typo3-docbody .typo3-TCEforms {
81     margin-top: 20px;
82 }
83
84 .typo3-TCEforms img[src*="clear.gif"] {
85     z-index: 0;
86 }
87
88 //
89 // TCEforms
90 //
91 table#typo3-altdoc-header input,
92 .c-inputButton {
93     background: none;
94     border: 0;
95 }
96
97 .t3-tceforms-input-wrapper-datetime .t3-icon-edit-pick-date {
98     top: -4px;
99 }
100
101 .typo3-TCEforms table#typo3-altdoc-header input:hover,
102 .c-inputButton:hover {
103     background: none;
104     border: 0;
105 }
106
107 .typo3-TCEforms span.typo3-TCEforms-newToken {
108     color: #900;
109     font-weight: bold;
110 }
111
112 .typo3-TCEforms span.typo3-TCEforms-helpText {
113     background: transparent;
114     color: #fff;
115 }
116
117 table.typo3-TCEforms-select-checkbox {
118     background-color: #fff;
119     border: 1px solid #aaa;
120 }
121
122 .typo3-TCEforms table.typo3-TCEforms-select-checkbox {
123     tr.c-header td {
124         background-color: #fff;
125         font-weight: bold;
126     }
127
128     tr:nth-child(2n) {
129         background-color: #f7f7f7;
130     }
131
132     tr.c-selectedItem {
133         background-color: #d8ecd0;
134     }
135
136     tr.c-invalidItem {
137         color: #ddd;
138     }
139
140     tr:hover {
141         background-color: #dedede;
142     }
143
144     tr.c-selectedItem:hover {
145         background-color: #abd99a;
146     }
147
148     tr.c-invalidItem:hover {
149         background-color: transparent;
150     }
151
152     tr td.c-labelCell {
153         white-space: nowrap;
154     }
155 }
156
157 .form-field-inputlink-explanation {
158     background: #eee;
159 }
160
161 // show text of default language under the translated input field
162 .t3-form-original-language {
163     background-color: #dadada;
164     border: 1px solid #c0c0c0;
165     padding: 2px;
166     font-size: 0.9em;
167     margin-top: 4px;
168 }
169
170 .t3-form-original-language-diff {
171     border: 1px solid #c0c0c0;
172     font-size: 0.9em;
173     margin-top: 4px;
174 }
175
176 .t3-form-original-language-diffheader {
177     @include label-variant($label-danger-bg);
178
179     font-weight: bold;
180     padding: 2px;
181 }
182
183 .t3-form-original-language-diffcontent {
184     padding: 2px;
185 }
186
187 .t3-form-original-language .icon {
188     margin-right: 5px;
189 }
190
191 // Default. Always used on main-palettes in the bottom of the forms
192
193 .typo3-TCEforms .typo3-TCEforms-checkboxArray td {
194     padding-right: 5px;
195 }
196
197 div.typo3-TCEforms-suggest-choises a {
198     cursor: pointer;
199 }
200 //
201 // TCEforms Flexforms
202 //
203 div.t3-form-field-container:first-child .t3-form-field-label-flex {
204     border-top: 0;
205 }
206
207 //
208 // TCEforms Inline-Relational-Record-Editing
209 //
210 .t3-form-field-container-inline-hidden,
211 .t3-form-field-container-inline-placeHolder {
212     opacity: 0.3;
213 }
214
215 .t3-form-field-header-inline table {
216     vertical-align: top;
217 }
218
219 //
220 // TCEforms Sections
221 //
222 .t3-tceforms-fieldReadOnly span.t3-icon {
223     position: absolute;
224     right: 3px;
225     top: 4px;
226 }
227
228 .t3-tceforms-widget-null-wrapper + .t3-form-field-item {
229     display: inline-block;
230 }
231
232 .t3-form-field-disable {
233     display: none;
234 }
235
236 .formengine-field-item.disabled {
237     position: relative;
238
239     .t3-form-field-disable {
240         z-index: 100;
241         background: #fafafa;
242         display: block;
243         position: absolute;
244         width: 100%;
245         height: 100%;
246         opacity: 0.5;
247         filter: alpha(opacity=50);
248     }
249 }
250 // z-index must be higher as .t3-form-field-disable z-index
251 // this is required for the eval=null field checkbox
252 .t3-form-field-eval-null-checkbox {
253     z-index: 150;
254 }
255
256 .t3-form-palette-field-label {
257     text-indent: 2px;
258 }
259
260 //
261 // TCEforms Tree
262 //
263
264 .t3-form-field-item .x-tree input.x-tree-node-cb {
265     height: auto;
266     margin: 0 0 0 1px;
267     vertical-align: middle;
268 }
269
270 // state: the form field was modified
271 .t3-form-field-label.t3-form-field-state-changed {
272     color: #004fb0;
273 }
274
275 .icon-list {
276     background: #fff;
277     margin-top: 9px;
278     border: 1px solid $table-border-color;
279
280     .row {
281         margin: 0;
282     }
283
284     .item {
285         float: left;
286         padding: 6px;
287         max-width: 140px;
288         border-left: 1px solid transparent;
289         border-right: 1px solid transparent;
290
291         img {
292             max-width: 128px;
293             max-height: 128px;
294         }
295     }
296
297     .active {
298         background-color: $table-bg-active;
299         border-left: 1px solid $table-border-color;
300         border-right: 1px solid $table-border-color;
301     }
302
303     :first-child.active {
304         border-left: 1px solid transparent;
305     }
306 }