[BUGFIX] Fix CSS3 List/Table styling (Bootstrap)
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / TYPO3 / _element_table.less
1 /**
2  * This file is part of the TYPO3 CMS project.
3  *
4  * It is free software; you can redistribute it and/or modify it under
5  * the terms of the GNU General Public License, either version 2
6  * of the License, or any later version.
7  *
8  * For the full copyright and license information, please read the
9  * LICENSE.txt file that was distributed with this source code.
10  *
11  * The TYPO3 project - inspiring people to share!
12  */
13
14 /** used in the admin tools => DB check **/
15 .t3-overview-list dt {
16         padding: 0px 0px 2px 20px;
17
18         img {
19                 vertical-align: middle;
20                 margin-right: 5px;
21         }
22 }
23
24 .t3-overview-list dd {
25         margin: 2px 0 15px 20px;
26         padding-left: 22px;
27 }
28
29 /**
30  * Common style for tables
31  *
32  * <table class="t3-table>
33  *   <thead>
34  *     <tr>
35  *       <th>...</th>
36  *       <th>...</th>
37  *     </tr>
38  *   </thead>
39  *   <tbody>
40  *     <tr>
41  *       <td>
42  *         <span class="t3-icon t3-icon-treeline t3-icon-treeline-join t3-icon-join">&nbsp;</span>
43  *       </td>
44  *       <td>...</td>
45  *     </tr>
46  *   </tbody>
47  * </table>
48  */
49
50 // Revert Bootstrap @table-bg in order to allow ExtJS and dataTable <table>
51 table {
52         background: transparent;
53 }
54
55 /**
56  * Default table styling
57  **/
58 .t3-table,
59 .table {
60         background-color: @table-bg;
61         margin-bottom: 1.5em;
62         border: 1px solid @table-border-color;
63
64         * {
65                 box-sizing: border-box;
66         }
67
68         > thead > tr > th,
69         > tbody > tr > th,
70         > tfoot > tr > th,
71         > thead > tr > td,
72         > tbody > tr > td,
73         > tfoot > tr > td {
74                 vertical-align: middle;
75         }
76
77         > thead > tr {
78                 background-color: darken(@table-bg, 5%);
79
80                 th,
81                 td {
82                         border-bottom: 1px solid @table-border-color;
83                         i {
84                                 font-weight: normal;
85                         }
86                 }
87         }
88
89         .btn {
90                 .btn-sm();
91                 color: #333;
92                 background-color: darken(@table-bg-accent, 10%);
93                 border-color: darken(@table-bg-accent, 20%);
94                 margin-top: -2px;
95                 margin-bottom: -2px;
96
97                 &:hover {
98                         border-color: darken(@table-bg-accent, 30%);
99                         background-color: darken(@table-bg-accent, 20%);
100                 }
101                 .t3-icon {
102                         margin: 0;
103                 }
104                 &.btn-danger {
105                         .btn-danger();
106                 }
107                 &.btn-success {
108                         .btn-success();
109                 }
110                 &.btn-warning {
111                         .btn-warning();
112                 }
113                 &.btn-info {
114                         .btn-info();
115                 }
116                 &.btn-default {
117                         .btn-default();
118                 }
119                 &.btn-primary {
120                         .btn-primary();
121                 }
122         }
123
124         .btn-group {
125                 font-size: 0;
126
127                 .btn {
128                         font-size: 12px;
129                         float: none;
130                 }
131         }
132
133         .btn-checkbox-holder {
134                 position: relative;
135                 display: inline-block;
136
137                 .btn-checkbox {
138                         position: absolute;
139                         top: 0;
140                         height: 100%;
141                         width: 100%;
142                         opacity: 0;
143                         z-index: 10;
144                 }
145                 input[type=checkbox] + .btn {
146                         .t3-icon:before {
147                                 content: "\f096";
148                         }
149                 }
150                 input[type=checkbox]:checked + .btn {
151                         .btn-primary();
152                         .t3-icon:before {
153                                 content: "\f00c";
154                         }
155                 }
156         }
157
158         .btn-group {
159                 .btn + .btn-checkbox-holder {
160                         margin-left: -1px;
161                         border-top-left-radius: 0;
162                         border-bottom-left-radius: 0;
163                 }
164         }
165
166         .pagination {
167                 margin: 0;
168         }
169
170         .col-icon {
171                 .t3-icon {
172                         margin: 0;
173                 }
174                 text-align: center;
175         }
176
177         .col-title {
178                 width: 95%;
179         }
180
181         .col-control,
182         .col-clipboard {
183                 white-space: nowrap;
184                 text-align: right;
185         }
186 }
187
188 /**
189  * Copy table stylings from bootstrap
190  **/
191 .t3-table {
192         .table();
193         .table-striped();
194         .table-hover();
195
196         // .active
197         > thead > tr,
198         > tbody > tr,
199         > tfoot > tr {
200                 > td.active,
201                 > th.active,
202                 &.active > td,
203                 &.active > th {
204                         background-color: @table-bg-active;
205                 }
206         }
207         > tbody > tr {
208         > td.active:hover,
209         > th.active:hover,
210                 &.active:hover > td,
211                 &:hover > .active,
212                 &.active:hover > th {
213                         background-color: darken(@table-bg-active, 5%);
214                 }
215         }
216
217     // .success
218         > thead > tr,
219         > tbody > tr,
220         > tfoot > tr {
221                 > td.success,
222                 > th.success,
223                 &.success > td,
224                 &.success > th {
225                         background-color: @state-success-bg;
226                 }
227         }
228         > tbody > tr {
229                 > td.success:hover,
230                 > th.success:hover,
231                 &.success:hover > td,
232                 &:hover > .success,
233                 &.success:hover > th {
234                         background-color: darken(@state-success-bg, 5%);
235                 }
236         }
237
238         // .info
239         > thead > tr,
240         > tbody > tr,
241         > tfoot > tr {
242                 > td.info,
243                 > th.info,
244                 &.info > td,
245                 &.info > th {
246                         background-color: @state-info-bg;
247                 }
248         }
249         > tbody > tr {
250                 > td.info:hover,
251                 > th.info:hover,
252                 &.info:hover > td,
253                 &:hover > .info,
254                 &.info:hover > th {
255                         background-color: darken(@state-info-bg, 5%);
256                 }
257         }
258
259         // .warning
260         > thead > tr,
261         > tbody > tr,
262         > tfoot > tr {
263                 > td.warning,
264                 > th.warning,
265                 &.warning > td,
266                 &.warning > th {
267                         background-color: @state-warning-bg;
268                 }
269         }
270         > tbody > tr {
271                 > td.warning:hover,
272                 > th.warning:hover,
273                 &.warning:hover > td,
274                 &:hover > .warning,
275                 &.warning:hover > th {
276                         background-color: darken(@state-warning-bg, 5%);
277                 }
278         }
279
280         // .danger
281         > thead > tr,
282         > tbody > tr,
283         > tfoot > tr {
284                 > td.danger,
285                 > th.danger,
286                 &.danger > td,
287                 &.danger > th {
288                         background-color: @state-danger-bg;
289                 }
290         }
291
292         > tbody > tr {
293                 > td.danger:hover,
294                 > th.danger:hover,
295                 &.danger:hover > td,
296                 &:hover > .danger,
297                 &.danger:hover > th {
298                         background-color: darken(@state-danger-bg, 5%);
299                 }
300         }
301 }
302
303 /**
304  * Fits the table in the viewport and makes overflow possible
305  **/
306 .table-fit {
307         width: 100%;
308         margin-bottom: 1.5em;
309         overflow-x: auto;
310         overflow-y: hidden;
311         -webkit-overflow-scrolling: touch;
312         -ms-overflow-style: -ms-autohiding-scrollbar;
313         border: 1px solid #ddd;
314
315         > .table,
316         > .t3-table {
317                 margin-top: 0;
318                 margin-bottom: 0;
319                 border: 0;
320
321                 > thead > tr > th,
322                 > tbody > tr > th,
323                 > tfoot > tr > th,
324                 > thead > tr > td,
325                 > tbody > tr > td,
326                 > tfoot > tr > td {
327                         white-space: nowrap;
328                 }
329         }
330 }