[TASK] Streamline page position map
[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;
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-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 //
133 // Sets the background to white
134 //
135 .table-white {
136 background-color: #fff;
137 }
138
139
140 //
141 // Sets the background to transparent
142 //
143 .table-transparent {
144 background-color: transparent;
145 }
146
147 //
148 // Centers the text in all cells of the table
149 //
150 .table-center {
151 th,
152 td {
153 text-align: center
154 }
155 }
156
157 //
158 // Sets a rudimentary table styling
159 //
160 .table-basic {
161 width: 100%;
162 th,
163 td {
164 vertical-align: middle;
165 }
166 }
167
168 //
169 // Table cell vertical alignment
170 //
171 .table-vertical-top {
172 > thead,
173 > tbody,
174 > tfoot {
175 > tr {
176 > th,
177 > td {
178 vertical-align: top;
179 }
180 }
181 }
182 }
183 .table-vertical-bottom {
184 > thead,
185 > tbody,
186 > tfoot {
187 > tr {
188 > th,
189 > td {
190 vertical-align: bottom;
191 }
192 }
193 }
194 }
195
196 //
197 // Fits the table in the viewport and makes overflow possible
198 //
199 .table-fit {
200 width: 100%;
201 margin-bottom: 1.5em;
202 overflow-x: auto;
203 overflow-y: hidden;
204 -webkit-overflow-scrolling: touch;
205 -ms-overflow-style: -ms-autohiding-scrollbar;
206 border: 1px solid #ddd;
207
208 > .table {
209 margin-top: 0;
210 margin-bottom: 0;
211 border: 0;
212 colgroup:first-child + tbody,
213 tbody:first-child {
214 tr:first-child {
215 th,
216 td {
217 border-top: 0;
218 }
219 }
220 }
221 tr {
222 > th,
223 > td {
224 white-space: nowrap;
225 }
226 > th:first-child,
227 > td:first-child {
228 border-left: 0;
229 }
230 > th:last-child,
231 > td:last-child {
232 border-right: 0;
233 }
234 &:last-child {
235 th,
236 td {
237 border-bottom: 0;
238 }
239 }
240 }
241 }
242 }
243 .table-fit-wrap {
244 > .table {
245 tr {
246 > th,
247 > td {
248 white-space: normal;
249 }
250 }
251 }
252 }
253 .table-fit-inline-block {
254 max-width: 100%;
255 width: auto;
256 display: inline-block;
257 margin: 0;
258 > .table {
259 width: auto;
260 }
261 }