Mercurial > wikked

comparison static/bootstrap/less/tables.less @ 61:130eccd396d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Now using Boostrap with LESS.
author Ludovic Chabant <ludovic@chabant.com>
date Wed, 06 Feb 2013 08:22:31 -0800
parents
children a5a3d454eac9
comparison
equal deleted inserted replaced
60:8250c977bc50 61:130eccd396d8
1 //
2 // Tables
3 // --------------------------------------------------
4
5
6 // BASE TABLES
7 // -----------------
8
9 table {
10 max-width: 100%;
11 background-color: @tableBackground;
12 border-collapse: collapse;
13 border-spacing: 0;
14 }
15
16 // BASELINE STYLES
17 // ---------------
18
19 .table {
20 width: 100%;
21 margin-bottom: @baseLineHeight;
22 // Cells
23 th,
24 td {
25 padding: 8px;
26 line-height: @baseLineHeight;
27 text-align: left;
28 vertical-align: top;
29 border-top: 1px solid @tableBorder;
30 }
31 th {
32 font-weight: bold;
33 }
34 // Bottom align for column headings
35 thead th {
36 vertical-align: bottom;
37 }
38 // Remove top border from thead by default
39 caption + thead tr:first-child th,
40 caption + thead tr:first-child td,
41 colgroup + thead tr:first-child th,
42 colgroup + thead tr:first-child td,
43 thead:first-child tr:first-child th,
44 thead:first-child tr:first-child td {
45 border-top: 0;
46 }
47 // Account for multiple tbody instances
48 tbody + tbody {
49 border-top: 2px solid @tableBorder;
50 }
51
52 // Nesting
53 .table {
54 background-color: @bodyBackground;
55 }
56 }
57
58
59
60 // CONDENSED TABLE W/ HALF PADDING
61 // -------------------------------
62
63 .table-condensed {
64 th,
65 td {
66 padding: 4px 5px;
67 }
68 }
69
70
71 // BORDERED VERSION
72 // ----------------
73
74 .table-bordered {
75 border: 1px solid @tableBorder;
76 border-collapse: separate; // Done so we can round those corners!
77 *border-collapse: collapse; // IE7 can't round corners anyway
78 border-left: 0;
79 .border-radius(@baseBorderRadius);
80 th,
81 td {
82 border-left: 1px solid @tableBorder;
83 }
84 // Prevent a double border
85 caption + thead tr:first-child th,
86 caption + tbody tr:first-child th,
87 caption + tbody tr:first-child td,
88 colgroup + thead tr:first-child th,
89 colgroup + tbody tr:first-child th,
90 colgroup + tbody tr:first-child td,
91 thead:first-child tr:first-child th,
92 tbody:first-child tr:first-child th,
93 tbody:first-child tr:first-child td {
94 border-top: 0;
95 }
96 // For first th or td in the first row in the first thead or tbody
97 thead:first-child tr:first-child > th:first-child,
98 tbody:first-child tr:first-child > td:first-child {
99 .border-top-left-radius(@baseBorderRadius);
100 }
101 thead:first-child tr:first-child > th:last-child,
102 tbody:first-child tr:first-child > td:last-child {
103 .border-top-right-radius(@baseBorderRadius);
104 }
105 // For first th or td in the last row in the last thead or tbody
106 thead:last-child tr:last-child > th:first-child,
107 tbody:last-child tr:last-child > td:first-child,
108 tfoot:last-child tr:last-child > td:first-child {
109 .border-bottom-left-radius(@baseBorderRadius);
110 }
111 thead:last-child tr:last-child > th:last-child,
112 tbody:last-child tr:last-child > td:last-child,
113 tfoot:last-child tr:last-child > td:last-child {
114 .border-bottom-right-radius(@baseBorderRadius);
115 }
116
117 // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
118 tfoot + tbody:last-child tr:last-child td:first-child {
119 .border-bottom-left-radius(0);
120 }
121 tfoot + tbody:last-child tr:last-child td:last-child {
122 .border-bottom-right-radius(0);
123 }
124
125
126 // Special fixes to round the left border on the first td/th
127 caption + thead tr:first-child th:first-child,
128 caption + tbody tr:first-child td:first-child,
129 colgroup + thead tr:first-child th:first-child,
130 colgroup + tbody tr:first-child td:first-child {
131 .border-top-left-radius(@baseBorderRadius);
132 }
133 caption + thead tr:first-child th:last-child,
134 caption + tbody tr:first-child td:last-child,
135 colgroup + thead tr:first-child th:last-child,
136 colgroup + tbody tr:first-child td:last-child {
137 .border-top-right-radius(@baseBorderRadius);
138 }
139
140 }
141
142
143
144
145 // ZEBRA-STRIPING
146 // --------------
147
148 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
149 .table-striped {
150 tbody {
151 > tr:nth-child(odd) > td,
152 > tr:nth-child(odd) > th {
153 background-color: @tableBackgroundAccent;
154 }
155 }
156 }
157
158
159 // HOVER EFFECT
160 // ------------
161 // Placed here since it has to come after the potential zebra striping
162 .table-hover {
163 tbody {
164 tr:hover td,
165 tr:hover th {
166 background-color: @tableBackgroundHover;
167 }
168 }
169 }
170
171
172 // TABLE CELL SIZING
173 // -----------------
174
175 // Reset default grid behavior
176 table td[class*="span"],
177 table th[class*="span"],
178 .row-fluid table td[class*="span"],
179 .row-fluid table th[class*="span"] {
180 display: table-cell;
181 float: none; // undo default grid column styles
182 margin-left: 0; // undo default grid column styles
183 }
184
185 // Change the column widths to account for td/th padding
186 .table td,
187 .table th {
188 &.span1 { .tableColumns(1); }
189 &.span2 { .tableColumns(2); }
190 &.span3 { .tableColumns(3); }
191 &.span4 { .tableColumns(4); }
192 &.span5 { .tableColumns(5); }
193 &.span6 { .tableColumns(6); }
194 &.span7 { .tableColumns(7); }
195 &.span8 { .tableColumns(8); }
196 &.span9 { .tableColumns(9); }
197 &.span10 { .tableColumns(10); }
198 &.span11 { .tableColumns(11); }
199 &.span12 { .tableColumns(12); }
200 }
201
202
203
204 // TABLE BACKGROUNDS
205 // -----------------
206 // Exact selectors below required to override .table-striped
207
208 .table tbody tr {
209 &.success td {
210 background-color: @successBackground;
211 }
212 &.error td {
213 background-color: @errorBackground;
214 }
215 &.warning td {
216 background-color: @warningBackground;
217 }
218 &.info td {
219 background-color: @infoBackground;
220 }
221 }
222
223 // Hover states for .table-hover
224 .table-hover tbody tr {
225 &.success:hover td {
226 background-color: darken(@successBackground, 5%);
227 }
228 &.error:hover td {
229 background-color: darken(@errorBackground, 5%);
230 }
231 &.warning:hover td {
232 background-color: darken(@warningBackground, 5%);
233 }
234 &.info:hover td {
235 background-color: darken(@infoBackground, 5%);
236 }
237 }