0facac699ef852bc466fd0ec621bc4677939ac00
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _element_table.less
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 ExtJS and dataTable <table>
45 table {
46         background: transparent;
47         font-size: inherit;
48         line-height: inherit;
49 }
50
51 //
52 // Default table styling
53 //
54 .table {
55         .table {
56                 + .table {
57                         margin-top: 6px;
58                 }
59                 margin: 0;
60         }
61         background-color: @table-bg;
62         border: 1px solid @table-border-color;
63         * {
64                 box-sizing: border-box;
65         }
66         > thead,
67         > tbody,
68         > tfoot {
69                 > tr {
70                         > th {
71                                 white-space: nowrap;
72                                 vertical-align: middle;
73                         }
74                         > td {
75                                 vertical-align: middle;
76                         }
77                 }
78         }
79         > thead > tr {
80                 background-color: darken(@table-bg, 5%);
81                 th,
82                 td {
83                         border-bottom: 1px solid @table-border-color;
84                         i {
85                                 font-weight: normal;
86                         }
87                 }
88         }
89         .btn-group {
90                 > .btn-group,
91                 > .btn {
92                         float: none;
93                 }
94         }
95         .btn-default {
96                 .button-variant(@btn-default-color; darken(@table-bg-accent, 10%); darken(@table-bg-accent, 20%));
97         }
98         .pagination {
99                 margin: 0;
100         }
101         .col-icon {
102                 text-align: center;
103                 .t3-icon {
104                         margin: 0;
105                 }
106         }
107         .col-icon,
108         .col-checkbox {
109                 padding-right: 0;
110         }
111         .col-title {
112                 width: 99%;
113         }
114         .col-nowrap,
115         .col-control,
116         .col-clipboard {
117                 white-space: nowrap;
118         }
119         .col-control,
120         .col-clipboard {
121                 text-align: right;
122         }
123         .col-control {
124                 padding: 4px 6px;
125         }
126         .col-border-left {
127                 border-left: 1px solid @table-border-color;
128         }
129         .col-min {
130                 min-width: 150px;
131         }
132 }
133
134 .table-fixed {
135         word-wrap: break-word;
136         word-break: break-all;
137         table-layout: fixed;
138 }
139
140 //
141 // Sets the background to white
142 //
143 .table-white {
144         background-color: #fff;
145 }
146
147
148 //
149 // Sets the background to transparent
150 //
151 .table-transparent {
152         background-color: transparent;
153 }
154
155 //
156 // Centers the text in all cells of the table
157 //
158 .table-center {
159         th,
160         td {
161                 text-align: center
162         }
163 }
164
165 //
166 // Sets a rudimentary table styling
167 //
168 .table-basic {
169         width: 100%;
170         th,
171         td {
172                 vertical-align: middle;
173         }
174 }
175
176 //
177 // Table cell vertical alignment
178 //
179 .table-vertical-top {
180         > thead,
181         > tbody,
182         > tfoot {
183                 > tr {
184                         > th,
185                         > td {
186                                 vertical-align: top;
187                         }
188                 }
189         }
190 }
191 .table-vertical-bottom {
192         > thead,
193         > tbody,
194         > tfoot {
195                 > tr {
196                         > th,
197                         > td {
198                                 vertical-align: bottom;
199                         }
200                 }
201         }
202 }
203 .table-no-borders {
204         border: none;
205         > thead,
206         > tbody,
207         > tfoot {
208                 > tr {
209                         > th,
210                         > td {
211                                 border: none;
212                                 padding: 2px;
213                         }
214                 }
215         }
216 }
217 //
218 // Fits the table in the viewport and makes overflow possible
219 //
220 .table-fit {
221         width: 100%;
222         margin-bottom: 1.5em;
223         overflow-x: auto;
224         overflow-y: hidden;
225         -webkit-overflow-scrolling: touch;
226         -ms-overflow-style: -ms-autohiding-scrollbar;
227         border: 1px solid #ddd;
228         > .dataTables_wrapper > .table,
229         > .table {
230                 margin-top: 0;
231                 margin-bottom: 0;
232                 border: 0;
233                 colgroup:first-child + tbody,
234                 tbody:first-child {
235                         tr:first-child {
236                                 th,
237                                 td {
238                                         border-top: 0;
239                                 }
240                         }
241                 }
242                 tr {
243                         > th,
244                         > td {
245                                 white-space: nowrap;
246                         }
247                         > th:first-child,
248                         > td:first-child {
249                                 border-left: 0;
250                         }
251                         > th:last-child,
252                         > td:last-child {
253                                 border-right: 0;
254                         }
255                         &:last-child {
256                                 th,
257                                 td {
258                                         border-bottom: 0;
259                                 }
260                         }
261                 }
262         }
263 }
264 .table-fit-wrap {
265         > .table {
266                 tr {
267                         > th,
268                         > td {
269                                 white-space: normal;
270                         }
271                 }
272         }
273 }
274 .table-fit-inline-block {
275         max-width: 100%;
276         width: auto;
277         display: inline-block;
278         margin: 0;
279         > .table {
280                 width: auto;
281         }
282 }
283 .table-fit-block {
284         max-width: 100%;
285         width: auto;
286         display: block;
287         margin: 0;
288         > .table {
289                 width: auto;
290         }
291 }
292 .table-spacer-wrap {
293         margin-top: 10px;
294         margin-bottom: 10px;
295 }