[TASK] Make list title width responsive
[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.col-checkbox {
82                         + th.col-title {
83                                 label {
84                                         margin-bottom: 0px;
85                                 }
86                         }
87                 }
88                 th,
89                 td {
90                         border-bottom: 1px solid @table-border-color;
91                         i {
92                                 font-weight: normal;
93                         }
94                 }
95         }
96         .btn-group {
97                 > .btn-group,
98                 > .btn {
99                         float: none;
100                 }
101         }
102         .btn-default {
103                 .button-variant(@btn-default-color; darken(@table-bg-accent, 10%); darken(@table-bg-accent, 20%));
104         }
105         .pagination {
106                 margin: 0;
107         }
108         .col-icon {
109                 text-align: center;
110                 .t3-icon {
111                         margin: 0;
112                 }
113         }
114         .col-icon,
115         .col-checkbox {
116                 padding-right: 0;
117         }
118         .col-title {
119                 width: 99%;
120         }
121         .col-nowrap,
122         .col-control,
123         .col-clipboard {
124                 white-space: nowrap!important;
125         }
126         .col-control,
127         .col-clipboard {
128                 text-align: right;
129         }
130         .col-control {
131                 padding: 4px 6px;
132         }
133         .col-border-left {
134                 border-left: 1px solid @table-border-color;
135         }
136         .col-min {
137                 min-width: 150px;
138         }
139         // Column contents are cut off with an ellipsis if they get too large.
140         .col-responsive {
141                 max-width: 200px;
142                 overflow: hidden;
143                 text-overflow: ellipsis;
144                 white-space: nowrap;
145         }
146 }
147
148 .table-fixed {
149         word-wrap: break-word;
150         word-break: break-all;
151         table-layout: fixed;
152 }
153
154 //
155 // Sets the background to white
156 //
157 .table-white {
158         background-color: #fff;
159 }
160
161
162 //
163 // Sets the background to transparent
164 //
165 .table-transparent {
166         background-color: transparent;
167 }
168
169 //
170 // Centers the text in all cells of the table
171 //
172 .table-center {
173         th,
174         td {
175                 text-align: center
176         }
177 }
178
179 //
180 // Sets a rudimentary table styling
181 //
182 .table-basic {
183         width: 100%;
184         th,
185         td {
186                 vertical-align: middle;
187         }
188 }
189
190 //
191 // Table cell vertical alignment
192 //
193 .table-vertical-top {
194         > thead,
195         > tbody,
196         > tfoot {
197                 > tr {
198                         > th,
199                         > td {
200                                 vertical-align: top;
201                         }
202                 }
203         }
204 }
205 .table-vertical-bottom {
206         > thead,
207         > tbody,
208         > tfoot {
209                 > tr {
210                         > th,
211                         > td {
212                                 vertical-align: bottom;
213                         }
214                 }
215         }
216 }
217 .table-no-borders {
218         border: none;
219         > thead,
220         > tbody,
221         > tfoot {
222                 > tr {
223                         > th,
224                         > td {
225                                 border: none;
226                                 padding: 2px;
227                         }
228                 }
229         }
230 }
231 //
232 // Fits the table in the viewport and makes overflow possible
233 //
234 .table-fit {
235         width: 100%;
236         margin-bottom: 1.5em;
237         overflow-x: auto;
238         overflow-y: hidden;
239         -webkit-overflow-scrolling: touch;
240         -ms-overflow-style: -ms-autohiding-scrollbar;
241         border: 1px solid #ddd;
242         > .dataTables_wrapper > .table,
243         > .table {
244                 margin-top: 0;
245                 margin-bottom: 0;
246                 border: 0;
247                 colgroup:first-child + tbody,
248                 tbody:first-child {
249                         tr:first-child {
250                                 th,
251                                 td {
252                                         border-top: 0;
253                                 }
254                         }
255                 }
256                 tr {
257                         > th,
258                         > td {
259                                 white-space: nowrap;
260                         }
261                         > th:first-child,
262                         > td:first-child {
263                                 border-left: 0;
264                         }
265                         > th:last-child,
266                         > td:last-child {
267                                 border-right: 0;
268                         }
269                         &:last-child {
270                                 th,
271                                 td {
272                                         border-bottom: 0;
273                                 }
274                         }
275                 }
276         }
277 }
278 .table-fit-wrap {
279         > .table {
280                 tr {
281                         > th,
282                         > td {
283                                 white-space: normal;
284                         }
285                 }
286         }
287 }
288 .table-fit-inline-block {
289         max-width: 100%;
290         width: auto;
291         display: inline-block;
292         margin: 0;
293         > .table {
294                 width: auto;
295         }
296 }
297 .table-fit-block {
298         max-width: 100%;
299         width: auto;
300         display: block;
301         margin: 0;
302         > .table {
303                 width: auto;
304         }
305 }
306 .table-spacer-wrap {
307         margin-top: 10px;
308         margin-bottom: 10px;
309 }