8415154b1355b621dedf6bd3df3b84d08133c238
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / TYPO3 / _element_table.less
1 /**
2  * This file is part of the TYPO3 CMS project.
3  *
4  * It is free software; you can redistribute it and/or modify it under
5  * the terms of the GNU General Public License, either version 2
6  * of the License, or any later version.
7  *
8  * For the full copyright and license information, please read the
9  * LICENSE.txt file that was distributed with this source code.
10  *
11  * The TYPO3 project - inspiring people to share!
12  */
13
14 /** used in the admin tools => DB check **/
15 .t3-overview-list dt {
16         padding: 0px 0px 2px 20px;
17
18         img {
19                 vertical-align: middle;
20                 margin-right: 5px;
21         }
22 }
23
24 .t3-overview-list dd {
25         margin: 2px 0 15px 20px;
26         padding-left: 22px;
27 }
28
29 /**
30  * Common style for tables
31  *
32  * <table class="t3-table>
33  *   <thead>
34  *     <tr>
35  *       <th>...</th>
36  *       <th>...</th>
37  *     </tr>
38  *   </thead>
39  *   <tbody>
40  *     <tr>
41  *       <td>
42  *         <span class="t3-icon t3-icon-treeline t3-icon-treeline-join t3-icon-join">&nbsp;</span>
43  *       </td>
44  *       <td>...</td>
45  *     </tr>
46  *   </tbody>
47  * </table>
48  */
49
50
51 /**
52  * Copy table stylings from bootstrap
53  **/
54 .t3-table {
55     .table();
56     .table-striped();
57     .table-hover();
58
59     // .active
60         > thead > tr,
61         > tbody > tr,
62         > tfoot > tr {
63                 > td.active,
64                 > th.active,
65                 &.active > td,
66                 &.active > th {
67                         background-color: @table-bg-active;
68                 }
69         }
70     > tbody > tr {
71     > td.active:hover,
72     > th.active:hover,
73                 &.active:hover > td,
74                 &:hover > .active,
75                 &.active:hover > th {
76                         background-color: darken(@table-bg-active, 5%);
77                 }
78         }
79
80     // .success
81         > thead > tr,
82         > tbody > tr,
83         > tfoot > tr {
84                 > td.success,
85                 > th.success,
86                 &.success > td,
87                 &.success > th {
88                         background-color: @state-success-bg;
89                 }
90         }
91         > tbody > tr {
92                 > td.success:hover,
93                 > th.success:hover,
94                 &.success:hover > td,
95                 &:hover > .success,
96                 &.success:hover > th {
97                         background-color: darken(@state-success-bg, 5%);
98                 }
99         }
100
101         // .info
102         > thead > tr,
103         > tbody > tr,
104         > tfoot > tr {
105                 > td.info,
106                 > th.info,
107                 &.info > td,
108                 &.info > th {
109                         background-color: @state-info-bg;
110                 }
111         }
112         > tbody > tr {
113                 > td.info:hover,
114                 > th.info:hover,
115                 &.info:hover > td,
116                 &:hover > .info,
117                 &.info:hover > th {
118                         background-color: darken(@state-info-bg, 5%);
119                 }
120         }
121
122         // .warning
123         > thead > tr,
124         > tbody > tr,
125         > tfoot > tr {
126                 > td.warning,
127                 > th.warning,
128                 &.warning > td,
129                 &.warning > th {
130                         background-color: @state-warning-bg;
131                 }
132         }
133         > tbody > tr {
134                 > td.warning:hover,
135                 > th.warning:hover,
136                 &.warning:hover > td,
137                 &:hover > .warning,
138                 &.warning:hover > th {
139                         background-color: darken(@state-warning-bg, 5%);
140                 }
141         }
142
143         // .danger
144         > thead > tr,
145         > tbody > tr,
146         > tfoot > tr {
147                 > td.danger,
148                 > th.danger,
149                 &.danger > td,
150                 &.danger > th {
151                         background-color: @state-danger-bg;
152                 }
153         }
154         > tbody > tr {
155                 > td.danger:hover,
156                 > th.danger:hover,
157                 &.danger:hover > td,
158                 &:hover > .danger,
159                 &.danger:hover > th {
160                         background-color: darken(@state-danger-bg, 5%);
161                 }
162         }
163 }
164
165 /**
166  * Default table styling
167  **/
168 .table,
169 .t3-table {
170     margin-bottom: 1.5em;
171     * {
172         box-sizing: border-box;
173     }
174     > thead > tr > th,
175     > tbody > tr > th,
176     > tfoot > tr > th,
177     > thead > tr > td,
178     > tbody > tr > td,
179     > tfoot > tr > td {
180         vertical-align: middle;
181     }
182     > thead > tr {
183         background-color: darken(@table-bg,4%);
184         th,
185         td {
186             border-bottom: 1px solid @table-border-color;
187             i {
188                 font-weight: normal;
189             }
190         }
191     }
192     .btn {
193         .btn-sm();
194         color: #333;
195         background-color: darken(@table-bg-accent,10%);
196         border-color: darken(@table-bg-accent,20%);
197         margin-top: -2px;
198         margin-bottom: -2px;
199         &:hover {
200             border-color: darken(@table-bg-accent,30%);
201             background-color: darken(@table-bg-accent,20%);
202         }
203         .t3-icon {
204             margin: 0;
205         }
206         &.btn-danger {
207             .btn-danger();
208         }
209         &.btn-success {
210             .btn-success();
211         }
212         &.btn-warning {
213             .btn-warning();
214         }
215         &.btn-info {
216             .btn-info();
217         }
218         &.btn-default {
219             .btn-default();
220         }
221         &.btn-primary {
222             .btn-primary();
223         }
224     }
225     .btn-group {
226         font-size: 0;
227         .btn {
228             font-size: 12px;
229             float: none;
230         }
231     }
232     .btn-checkbox-holder {
233         position: relative;
234         display: inline-block;
235         .btn-checkbox {
236             position: absolute;
237             top: 0;
238             height: 100%;
239             width: 100%;
240             opacity: 0;
241             z-index: 10;
242         }
243         input[type=checkbox] + .btn {
244             .t3-icon:before {
245                 content: "\f096";
246             }
247         }
248         input[type=checkbox]:checked + .btn {
249             .btn-primary();
250             .t3-icon:before {
251                 content: "\f00c";
252             }
253         }
254     }
255         .btn-group {
256                 .btn + .btn-checkbox-holder {
257             margin-left: -1px;
258                         border-top-left-radius: 0;
259                         border-bottom-left-radius: 0;
260                 }
261         }
262     .pagination {
263         margin: 0;
264     }
265     .col-icon {
266         .t3-icon {
267             margin: 0;
268         }
269         text-align: center;
270     }
271     .col-title {
272         width: 95%;
273     }
274     .col-control,
275     .col-clipboard {
276         white-space: nowrap;
277         text-align: right;
278     }
279 }
280
281
282 // TYPO3 standard <table class="t3-table">
283 .t3-table {
284
285
286         // .success
287         > thead > tr,
288         > tbody > tr,
289         > tfoot > tr {
290                 > td.success,
291                 > th.success,
292                 &.success > td,
293                 &.success > th {
294                         background-color: @state-success-bg;
295                 }
296         }
297         > tbody > tr {
298                 > td.success:hover,
299                 > th.success:hover,
300                 &.success:hover > td,
301                 &:hover > .success,
302                 &.success:hover > th {
303                         background-color: darken(@state-success-bg, 5%);
304                 }
305         }
306         // .info
307         > thead > tr,
308         > tbody > tr,
309         > tfoot > tr {
310                 > td.info,
311                 > th.info,
312                 &.info > td,
313                 &.info > th {
314                         background-color: @state-info-bg;
315                 }
316         }
317         > tbody > tr {
318                 > td.info:hover,
319                 > th.info:hover,
320                 &.info:hover > td,
321                 &:hover > .info,
322                 &.info:hover > th {
323                         background-color: darken(@state-info-bg, 5%);
324                 }
325         }
326         // .warning
327         > thead > tr,
328         > tbody > tr,
329         > tfoot > tr {
330                 > td.warning,
331                 > th.warning,
332                 &.warning > td,
333                 &.warning > th {
334                         background-color: @state-warning-bg;
335                 }
336         }
337         > tbody > tr {
338                 > td.warning:hover,
339                 > th.warning:hover,
340                 &.warning:hover > td,
341                 &:hover > .warning,
342                 &.warning:hover > th {
343                         background-color: darken(@state-warning-bg, 5%);
344                 }
345         }
346         // .danger
347         > thead > tr,
348         > tbody > tr,
349         > tfoot > tr {
350                 > td.danger,
351                 > th.danger,
352                 &.danger > td,
353                 &.danger > th {
354                         background-color: @state-danger-bg;
355                 }
356         }
357         > tbody > tr {
358                 > td.danger:hover,
359                 > th.danger:hover,
360                 &.danger:hover > td,
361                 &:hover > .danger,
362                 &.danger:hover > th {
363                         background-color: darken(@state-danger-bg, 5%);
364                 }
365         }
366 }
367
368
369 /**
370  * Fits the table in the viewport and makes overflow possible
371  **/
372 .table-fit {
373     width: 100%;
374     margin-bottom: 1.5em;
375     overflow-x: auto;
376     overflow-y: hidden;
377     -webkit-overflow-scrolling: touch;
378     -ms-overflow-style: -ms-autohiding-scrollbar;
379     border: 1px solid #ddd;
380     > .table,
381     > .t3-table {
382         margin-top: 0;
383         margin-bottom: 0;
384         > thead > tr > th,
385         > tbody > tr > th,
386         > tfoot > tr > th,
387         > thead > tr > td,
388         > tbody > tr > td,
389         > tfoot > tr > td {
390             white-space: nowrap;
391         }
392     }
393     > .table-bordered {
394         border: 0;
395     }
396     > .table-bordered > thead > tr > th:first-child,
397     > .table-bordered > tbody > tr > th:first-child,
398     > .table-bordered > tfoot > tr > th:first-child,
399     > .table-bordered > thead > tr > td:first-child,
400     > .table-bordered > tbody > tr > td:first-child,
401     > .table-bordered > tfoot > tr > td:first-child {
402         border-left: 0;
403     }
404     > .table-bordered > thead > tr > th:last-child,
405     > .table-bordered > tbody > tr > th:last-child,
406     > .table-bordered > tfoot > tr > th:last-child,
407     > .table-bordered > thead > tr > td:last-child,
408     > .table-bordered > tbody > tr > td:last-child,
409     > .table-bordered > tfoot > tr > td:last-child {
410         border-right: 0;
411     }
412     > .table-bordered > tbody > tr:last-child > th,
413     > .table-bordered > tfoot > tr:last-child > th,
414     > .table-bordered > tbody > tr:last-child > td,
415     > .table-bordered > tfoot > tr:last-child > td {
416         border-bottom: 0;
417     }
418 }