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