[BUGFIX] Add transparent background for tables again
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / typo3 / _element_table.scss
1 //
2 // Tables
3 //
4
5 //
6 // used in the admin tools => DB check
7 //
8
9 .t3-overview-list dt {
10     padding: 0 0 2px 20px;
11
12     img {
13         vertical-align: middle;
14         margin-right: 5px;
15     }
16 }
17
18 .t3-overview-list dd {
19     margin: 2px 0 15px 20px;
20     padding-left: 22px;
21 }
22
23 //
24 // Common style for tables
25 //
26 // <table class="table table-striped table-hover>
27 //   <thead>
28 //     <tr>
29 //       <th>...</th>
30 //       <th>...</th>
31 //     </tr>
32 //   </thead>
33 //   <tbody>
34 //     <tr>
35 //       <td>
36 //         <span class="t3-icon t3-icon-treeline t3-icon-treeline-join t3-icon-join">&nbsp;</span>
37 //       </td>
38 //       <td>...</td>
39 //     </tr>
40 //   </tbody>
41 // </table>
42 //
43
44 // Revert Bootstrap $table-bg in order to allow DateTimePicker and dataTable <table>
45 table {
46     background: transparent;
47 }
48
49 //
50 // Default table styling
51 //
52 .table {
53     .table {
54         + .table {
55             margin-top: 6px;
56         }
57
58         margin: 0;
59     }
60
61     background-color: $table-bg;
62     border: 1px solid $table-border-color;
63
64     * {
65         box-sizing: border-box;
66     }
67
68     > thead,
69     > tbody,
70     > tfoot {
71         > tr {
72             > th {
73                 white-space: nowrap;
74                 vertical-align: middle;
75             }
76
77             > td {
78                 vertical-align: middle;
79             }
80         }
81     }
82
83     > thead > tr {
84         background-color: darken($table-bg, 5%);
85
86         th.col-checkbox {
87             + th.col-title {
88                 label {
89                     margin-bottom: 0;
90                 }
91             }
92         }
93
94         th,
95         td {
96             border-bottom: 1px solid $table-border-color;
97
98             i {
99                 font-weight: normal;
100             }
101         }
102     }
103
104     .btn-group {
105         > .btn-group,
106         > .btn {
107             float: none;
108         }
109     }
110
111     .btn-default {
112         @include button-variant($btn-default-color, darken($table-bg-accent, 10%), darken($table-bg-accent, 20%));
113     }
114
115     .pagination {
116         margin: 0;
117     }
118
119     .col-icon {
120         text-align: center;
121
122         .t3-icon {
123             margin: 0;
124         }
125     }
126
127     .col-icon,
128     .col-checkbox {
129         padding-right: 0;
130     }
131
132     .col-title {
133         width: 99%;
134     }
135
136     .col-nowrap,
137     .col-control,
138     .col-clipboard {
139         white-space: nowrap !important;
140     }
141
142     .col-control,
143     .col-clipboard {
144         text-align: right;
145     }
146
147     .col-control {
148         padding: 4px 6px;
149     }
150
151     .col-border-left {
152         border-left: 1px solid $table-border-color;
153     }
154
155     .col-min {
156         min-width: 150px;
157     }
158     // Column contents are cut off with an ellipsis if they get too large.
159     .col-responsive {
160         max-width: 200px;
161         overflow: hidden;
162         text-overflow: ellipsis;
163         white-space: nowrap;
164     }
165
166     .col-word-break {
167         @media (min-width: $screen-sm-min) {
168             word-wrap: break-word;
169             word-break: break-all;
170         }
171     }
172 }
173
174 .table-fixed {
175     word-wrap: break-word;
176     word-break: break-all;
177     table-layout: fixed;
178 }
179
180 //
181 // Sets the background to white
182 //
183 .table-white {
184     background-color: #fff;
185 }
186
187 //
188 // Sets the background to transparent
189 //
190 .table-transparent {
191     background-color: transparent;
192 }
193
194 //
195 // Centers the text in all cells of the table
196 //
197 .table-center {
198     th,
199     td {
200         text-align: center;
201     }
202 }
203
204 //
205 // Sets a rudimentary table styling
206 //
207 .table-basic {
208     width: 100%;
209
210     th,
211     td {
212         vertical-align: middle;
213     }
214 }
215
216 //
217 // Table cell vertical alignment
218 //
219 .table-vertical-top {
220     > thead,
221     > tbody,
222     > tfoot {
223         > tr {
224             > th,
225             > td {
226                 vertical-align: top;
227             }
228         }
229     }
230 }
231
232 .table-vertical-bottom {
233     > thead,
234     > tbody,
235     > tfoot {
236         > tr {
237             > th,
238             > td {
239                 vertical-align: bottom;
240             }
241         }
242     }
243 }
244
245 .table-no-borders {
246     border: none;
247
248     > thead,
249     > tbody,
250     > tfoot {
251         > tr {
252             > th,
253             > td {
254                 border: none;
255                 padding: 2px;
256             }
257         }
258     }
259 }
260 //
261 // Fits the table in the viewport and makes overflow possible
262 //
263 .table-fit {
264     width: 100%;
265     margin-bottom: 1.5em;
266     overflow-x: auto;
267     overflow-y: hidden;
268     -webkit-overflow-scrolling: touch;
269     -ms-overflow-style: -ms-autohiding-scrollbar;
270     border: 1px solid #ddd;
271
272     > .dataTables_wrapper > .table,
273     > .table {
274         margin-top: 0;
275         margin-bottom: 0;
276         border: 0;
277
278         colgroup:first-child + tbody,
279         tbody:first-child {
280             tr:first-child {
281                 th,
282                 td {
283                     border-top: 0;
284                 }
285             }
286         }
287
288         tr {
289             > th,
290             > td {
291                 white-space: nowrap;
292
293                 &.col-word-break {
294                     @media (min-width: $screen-sm-min) {
295                         white-space: normal;
296                     }
297                 }
298             }
299
300             > th:first-child,
301             > td:first-child {
302                 border-left: 0;
303             }
304
305             > th:last-child,
306             > td:last-child {
307                 border-right: 0;
308             }
309
310             &:last-child {
311                 th,
312                 td {
313                     border-bottom: 0;
314                 }
315             }
316         }
317     }
318 }
319
320 .table-fit-wrap {
321     > .table {
322         tr {
323             > th,
324             > td {
325                 white-space: normal;
326             }
327         }
328     }
329 }
330
331 .table-fit-inline-block {
332     max-width: 100%;
333     width: auto;
334     display: inline-block;
335     margin: 0;
336
337     > .table {
338         width: auto;
339     }
340 }
341
342 .table-fit-block {
343     max-width: 100%;
344     width: auto;
345     display: block;
346     margin: 0;
347
348     > .table {
349         width: auto;
350     }
351 }
352
353 .table-spacer-wrap {
354     margin-top: 10px;
355     margin-bottom: 10px;
356 }
357
358 .taskGroup {
359     cursor: pointer;
360 }
361
362 .taskGroup--close {
363     .icon-actions-view-list-collapse {
364         transform: rotate(180deg);
365     }
366
367     td {
368         padding: 0 !important;
369         border: 0 !important;
370     }
371
372     .t-span {
373         height: 0;
374         overflow: hidden;
375         padding: 0;
376         line-height: 0;
377         display: block;
378     }
379 }