1//
2// Tables
3// --------------------------------------------------
4
5
6// BASE TABLES
7// -----------------
8
9table {
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/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  tbody:first-child tr:first-child > th:first-child {
100    .border-top-left-radius(@baseBorderRadius);
101  }
102  // For last th/td in the first row in the first thead or tbody
103  thead:first-child tr:first-child > th:last-child,
104  tbody:first-child tr:first-child > td:last-child,
105  tbody:first-child tr:first-child > th:last-child {
106    .border-top-right-radius(@baseBorderRadius);
107  }
108  // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
109  thead:last-child tr:last-child > th:first-child,
110  tbody:last-child tr:last-child > td:first-child,
111  tbody:last-child tr:last-child > th:first-child,
112  tfoot:last-child tr:last-child > td:first-child,
113  tfoot:last-child tr:last-child > th:first-child {
114    .border-bottom-left-radius(@baseBorderRadius);
115  }
116  // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
117  thead:last-child tr:last-child > th:last-child,
118  tbody:last-child tr:last-child > td:last-child,
119  tbody:last-child tr:last-child > th:last-child,
120  tfoot:last-child tr:last-child > td:last-child,
121  tfoot:last-child tr:last-child > th:last-child {
122    .border-bottom-right-radius(@baseBorderRadius);
123  }
124
125  // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
126  tfoot + tbody:last-child tr:last-child td:first-child {
127    .border-bottom-left-radius(0);
128  }
129  tfoot + tbody:last-child tr:last-child td:last-child {
130    .border-bottom-right-radius(0);
131  }
132
133  // Special fixes to round the left border on the first td/th
134  caption + thead tr:first-child th:first-child,
135  caption + tbody tr:first-child td:first-child,
136  colgroup + thead tr:first-child th:first-child,
137  colgroup + tbody tr:first-child td:first-child {
138    .border-top-left-radius(@baseBorderRadius);
139  }
140  caption + thead tr:first-child th:last-child,
141  caption + tbody tr:first-child td:last-child,
142  colgroup + thead tr:first-child th:last-child,
143  colgroup + tbody tr:first-child td:last-child {
144    .border-top-right-radius(@baseBorderRadius);
145  }
146
147}
148
149
150
151
152// ZEBRA-STRIPING
153// --------------
154
155// Default zebra-stripe styles (alternating gray and transparent backgrounds)
156.table-striped {
157  tbody {
158    > tr:nth-child(odd) > td,
159    > tr:nth-child(odd) > th {
160      background-color: @tableBackgroundAccent;
161    }
162  }
163}
164
165
166// HOVER EFFECT
167// ------------
168// Placed here since it has to come after the potential zebra striping
169.table-hover {
170  tbody {
171    tr:hover > td,
172    tr:hover > th {
173      background-color: @tableBackgroundHover;
174    }
175  }
176}
177
178
179// TABLE CELL SIZING
180// -----------------
181
182// Reset default grid behavior
183table td[class*="span"],
184table th[class*="span"],
185.row-fluid table td[class*="span"],
186.row-fluid table th[class*="span"] {
187  display: table-cell;
188  float: none; // undo default grid column styles
189  margin-left: 0; // undo default grid column styles
190}
191
192// Change the column widths to account for td/th padding
193.table td,
194.table th {
195  &.span1     { .tableColumns(1); }
196  &.span2     { .tableColumns(2); }
197  &.span3     { .tableColumns(3); }
198  &.span4     { .tableColumns(4); }
199  &.span5     { .tableColumns(5); }
200  &.span6     { .tableColumns(6); }
201  &.span7     { .tableColumns(7); }
202  &.span8     { .tableColumns(8); }
203  &.span9     { .tableColumns(9); }
204  &.span10    { .tableColumns(10); }
205  &.span11    { .tableColumns(11); }
206  &.span12    { .tableColumns(12); }
207}
208
209
210
211// TABLE BACKGROUNDS
212// -----------------
213// Exact selectors below required to override .table-striped
214
215.table tbody tr {
216  &.success > td {
217    background-color: @successBackground;
218  }
219  &.error > td {
220    background-color: @errorBackground;
221  }
222  &.warning > td {
223    background-color: @warningBackground;
224  }
225  &.info > td {
226    background-color: @infoBackground;
227  }
228}
229
230// Hover states for .table-hover
231.table-hover tbody tr {
232  &.success:hover > td {
233    background-color: darken(@successBackground, 5%);
234  }
235  &.error:hover > td {
236    background-color: darken(@errorBackground, 5%);
237  }
238  &.warning:hover > td {
239    background-color: darken(@warningBackground, 5%);
240  }
241  &.info:hover > td {
242    background-color: darken(@infoBackground, 5%);
243  }
244}
245