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