3c5d01daf2fc9186b06dba6d49e40e978119f026
[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 }