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