_element_tceforms.scss 5.46 KB
Newer Older
1
2
3
//
// TCEforms
//
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
19
//
// TCEforms Flexforms
//
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
30
//
// TCEforms Sections
//
31
.t3-flex-section {
32
33
    clear: both;
    margin: 5px 0;
34
35
}

36
.t3-form-field-header-flexsection {
37
38
    width: 100%;
    height: 16px;
39
40
41
}

.t3-form-field-add-flexsection {
42
43
    border-top: 1px solid #cdcdcd;
    padding: 10px 5px 5px 0;
44
45
}

46
.t3-form-flex,
47
.t3-form-field-container-flexsections {
48
49
    margin: 5px 0;
    clear: both;
50
51
}

52
.t3-flex-section-content,
53
.t3-form-field-record-flexsection {
54
55
    background: #eee;
    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
65
66
67
68
69
70
    font-style: italic;
    width: 100px;
    display: inline-block;
    padding-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
71
72
}

73
// preview image in sys_file records
74
img.t3-tceforms-sysfile-imagepreview {
75
76
77
    float: left;
    margin-right: 10px;
    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
90
//
// TCEforms
//
91
92
table#typo3-altdoc-header input,
.c-inputButton {
93
94
    background: none;
    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
104
    background: none;
    border: 0;
105
106
}

107
.typo3-TCEforms span.typo3-TCEforms-newToken {
108
109
    color: #900;
    font-weight: bold;
110
111
}

112
.typo3-TCEforms span.typo3-TCEforms-helpText {
113
114
    background: transparent;
    color: #fff;
115
116
}

117
table.typo3-TCEforms-select-checkbox {
118
119
    background-color: #fff;
    border: 1px solid #aaa;
120
121
}

Daniel Sattler's avatar
Daniel Sattler committed
122
.typo3-TCEforms table.typo3-TCEforms-select-checkbox {
123
124
125
126
    tr.c-header td {
        background-color: #fff;
        font-weight: bold;
    }
127

128
129
130
    tr:nth-child(2n) {
        background-color: #f7f7f7;
    }
131

132
133
134
    tr.c-selectedItem {
        background-color: #d8ecd0;
    }
135

136
137
138
    tr.c-invalidItem {
        color: #ddd;
    }
139

140
141
142
    tr:hover {
        background-color: #dedede;
    }
143

144
145
146
    tr.c-selectedItem:hover {
        background-color: #abd99a;
    }
147

148
149
150
    tr.c-invalidItem:hover {
        background-color: transparent;
    }
Daniel Sattler's avatar
Daniel Sattler committed
151

152
153
154
    tr td.c-labelCell {
        white-space: nowrap;
    }
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
164
165
166
167
    background-color: #dadada;
    border: 1px solid #c0c0c0;
    padding: 2px;
    font-size: 0.9em;
    margin-top: 4px;
168
    word-break: break-all;
169
170
}

171
.t3-form-original-language-diff {
172
173
174
    border: 1px solid #c0c0c0;
    font-size: 0.9em;
    margin-top: 4px;
175
176
}

177
.t3-form-original-language-diffheader {
178
    @include label-variant($label-danger-bg);
179
180
181

    font-weight: bold;
    padding: 2px;
182
183
184
}

.t3-form-original-language-diffcontent {
185
    padding: 2px;
186
187
}

188
.t3-form-original-language .icon {
189
    margin-right: 5px;
190
191
}

192
// Default. Always used on main-palettes in the bottom of the forms
193

194
.typo3-TCEforms .typo3-TCEforms-checkboxArray td {
195
    padding-right: 5px;
Felix Kopp's avatar
Felix Kopp committed
196
197
}

198
div.typo3-TCEforms-suggest-choises a {
199
    cursor: pointer;
200
}
201
202
203
//
// TCEforms Flexforms
//
204
div.t3-form-field-container:first-child .t3-form-field-label-flex {
205
    border-top: 0;
206
207
}

208
209
210
211
212
213
214
215
216
.form-irre-object {
    transition: opacity 0.5s;
    opacity: 1;

    &--deleted {
        opacity: 0 !important;
    }
}

217
218
219
//
// TCEforms Inline-Relational-Record-Editing
//
220
221
.t3-form-field-container-inline-hidden,
.t3-form-field-container-inline-placeHolder {
222
    opacity: 0.3;
223
224
}

225
.t3-form-field-header-inline table {
226
    vertical-align: top;
227
228
}

229
230
231
//
// TCEforms Sections
//
232
.t3-tceforms-fieldReadOnly span.t3-icon {
233
234
235
    position: absolute;
    right: 3px;
    top: 4px;
236
237
}

238
.t3-tceforms-widget-null-wrapper + .t3-form-field-item {
239
    display: inline-block;
240
241
}

242
.t3-form-field-disable {
243
    display: none;
244
}
245

246
.formengine-field-item.disabled {
247
248
249
250
251
252
253
254
255
256
257
258
    position: relative;

    .t3-form-field-disable {
        z-index: 100;
        background: #fafafa;
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }
259
}
260
261
262
// z-index must be higher as .t3-form-field-disable z-index
// this is required for the eval=null field checkbox
.t3-form-field-eval-null-checkbox {
263
    z-index: 150;
264
}
265

266
.t3-form-palette-field-label {
267
    text-indent: 2px;
268
}
269

270
271
272
//
// TCEforms Tree
//
273

274
.t3-form-field-item .x-tree input.x-tree-node-cb {
275
276
277
    height: auto;
    margin: 0 0 0 1px;
    vertical-align: middle;
278
}
279

280
// state: the form field was modified
281
.t3-form-field-label.t3-form-field-state-changed {
282
    color: #004fb0;
283
}
284

285
.icon-list {
286
287
288
289
290
291
292
293
294
295
296
    background: #fff;
    margin-top: 9px;
    border: 1px solid $table-border-color;

    .row {
        margin: 0;
    }

    .item {
        float: left;
        padding: 6px;
297
        max-width: 140px;
298
299
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
300
301

        img {
302
303
            max-width: 128px;
            max-height: 128px;
304
305
        }
    }
306
307
308
309
310
311
312
313
314
315

    .active {
        background-color: $table-bg-active;
        border-left: 1px solid $table-border-color;
        border-right: 1px solid $table-border-color;
    }

    :first-child.active {
        border-left: 1px solid transparent;
    }
316
}