04903e150f5353ed1b65e61135b91c4cf661ca5d
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / 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: 0px 0px 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 background-color: @table-bg;
54 border: 1px solid @table-border-color;
55 * {
56 box-sizing: border-box;
57 }
58 > thead,
59 > tbody,
60 > tfoot {
61 > tr {
62 > th {
63 white-space: nowrap;
64 vertical-align: middle;
65 }
66 > td {
67 vertical-align: middle!important; // @todo important needs to be removed as soon as .typo3-TCEforms .c-tablayer td is gone
68 }
69 }
70 }
71 > thead > tr {
72 background-color: darken(@table-bg, 5%);
73 th,
74 td {
75 border-bottom: 1px solid @table-border-color;
76 i {
77 font-weight: normal;
78 }
79 }
80 }
81 .btn-group {
82 > .btn-group,
83 > .btn {
84 float: none;
85 }
86 }
87 .btn-default {
88 .button-variant(@btn-default-color; darken(@table-bg-accent, 10%); darken(@table-bg-accent, 20%));
89 }
90 .pagination {
91 margin: 0;
92 }
93 .col-icon {
94 text-align: center;
95 .t3-icon {
96 margin: 0;
97 }
98 img {
99 margin: 0;
100 display: block;
101 height: 16px;
102 width: 16px;
103 }
104 }
105 .col-icon,
106 .col-checkbox {
107 padding-right: 0;
108 }
109 .col-title {
110 width: 99%;
111 }
112 .col-control,
113 .col-clipboard {
114 white-space: nowrap;
115 text-align: right;
116 }
117 .col-control {
118 padding: 4px 6px;
119 }
120 .col-border-left {
121 border-left: 1px solid @table-border-color;
122 }
123 }
124
125 //
126 // Sets the background to white
127 //
128 .table-white {
129 background-color: #fff;
130 }
131
132
133 //
134 // Sets the background to transparent
135 //
136 .table-transparent {
137 background-color: transparent;
138 }
139
140 //
141 // Centers the text in all cells of the table
142 //
143 .table-center {
144 th,
145 td {
146 text-align: center
147 }
148 }
149
150 //
151 // Sets a rudimentary table styling
152 //
153 .table-basic {
154 width: 100%;
155 th,
156 td {
157 vertical-align: middle;
158 }
159 }
160
161 //
162 // Fits the table in the viewport and makes overflow possible
163 //
164 .table-fit {
165 width: 100%;
166 margin-bottom: 1.5em;
167 overflow-x: auto;
168 overflow-y: hidden;
169 -webkit-overflow-scrolling: touch;
170 -ms-overflow-style: -ms-autohiding-scrollbar;
171 border: 1px solid #ddd;
172
173 > .table {
174 margin-top: 0;
175 margin-bottom: 0;
176 border: 0;
177 tbody:first-child {
178 tr:first-child {
179 th,
180 td {
181 border-top: 0;
182 }
183 }
184 }
185 tr {
186 > th,
187 > td {
188 white-space: nowrap;
189 }
190 > th:first-child,
191 > td:first-child {
192 border-left: 0;
193 }
194 > th:last-child,
195 > td:last-child {
196 border-right: 0;
197 }
198 &:last-child {
199 th,
200 td {
201 border-bottom: 0;
202 }
203 }
204 }
205 }
206 }
207 .table-fit-wrap {
208 > .table {
209 tr {
210 > th,
211 > td {
212 white-space: normal;
213 }
214 }
215 }
216 }
217 .table-fit-inline-block {
218 max-width: 100%;
219 width: auto;
220 display: inline-block;
221 margin: 0;
222 > .table {
223 width: auto;
224 }
225 }