Mercurial > wikked

comparison static/bootstrap/less/tables.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Tables 2 // Tables
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 4
5 5
6 // BASE TABLES
7 // -----------------
8
9 table { 6 table {
10 max-width: 100%; 7 max-width: 100%;
11 background-color: @tableBackground; 8 background-color: @table-bg;
12 border-collapse: collapse; 9 }
13 border-spacing: 0; 10 th {
14 } 11 text-align: left;
15 12 }
16 // BASELINE STYLES 13
17 // --------------- 14
15 // Baseline styles
18 16
19 .table { 17 .table {
20 width: 100%; 18 width: 100%;
21 margin-bottom: @baseLineHeight; 19 margin-bottom: @line-height-computed;
22 // Cells 20 // Cells
23 th, 21 > thead,
24 td { 22 > tbody,
25 padding: 8px; 23 > tfoot {
26 line-height: @baseLineHeight; 24 > tr {
27 text-align: left; 25 > th,
28 vertical-align: top; 26 > td {
29 border-top: 1px solid @tableBorder; 27 padding: @table-cell-padding;
30 } 28 line-height: @line-height-base;
31 th { 29 vertical-align: top;
32 font-weight: bold; 30 border-top: 1px solid @table-border-color;
31 }
32 }
33 } 33 }
34 // Bottom align for column headings 34 // Bottom align for column headings
35 thead th { 35 > thead > tr > th {
36 vertical-align: bottom; 36 vertical-align: bottom;
37 border-bottom: 2px solid @table-border-color;
37 } 38 }
38 // Remove top border from thead by default 39 // Remove top border from thead by default
39 caption + thead tr:first-child th, 40 > caption + thead,
40 caption + thead tr:first-child td, 41 > colgroup + thead,
41 colgroup + thead tr:first-child th, 42 > thead:first-child {
42 colgroup + thead tr:first-child td, 43 > tr:first-child {
43 thead:first-child tr:first-child th, 44 > th,
44 thead:first-child tr:first-child td { 45 > td {
45 border-top: 0; 46 border-top: 0;
47 }
48 }
46 } 49 }
47 // Account for multiple tbody instances 50 // Account for multiple tbody instances
48 tbody + tbody { 51 > tbody + tbody {
49 border-top: 2px solid @tableBorder; 52 border-top: 2px solid @table-border-color;
50 } 53 }
51 54
52 // Nesting 55 // Nesting
53 .table { 56 .table {
54 background-color: @bodyBackground; 57 background-color: @body-bg;
55 } 58 }
56 } 59 }
57 60
58 61
59 62 // Condensed table w/ half padding
60 // CONDENSED TABLE W/ HALF PADDING
61 // -------------------------------
62 63
63 .table-condensed { 64 .table-condensed {
64 th, 65 > thead,
65 td { 66 > tbody,
66 padding: 4px 5px; 67 > tfoot {
67 } 68 > tr {
68 } 69 > th,
69 70 > td {
70 71 padding: @table-condensed-cell-padding;
71 // BORDERED VERSION 72 }
72 // ---------------- 73 }
74 }
75 }
76
77
78 // Bordered version
79 //
80 // Add borders all around the table and between all the columns.
73 81
74 .table-bordered { 82 .table-bordered {
75 border: 1px solid @tableBorder; 83 border: 1px solid @table-border-color;
76 border-collapse: separate; // Done so we can round those corners! 84 > thead,
77 *border-collapse: collapse; // IE7 can't round corners anyway 85 > tbody,
78 border-left: 0; 86 > tfoot {
79 .border-radius(@baseBorderRadius); 87 > tr {
80 th, 88 > th,
81 td { 89 > td {
82 border-left: 1px solid @tableBorder; 90 border: 1px solid @table-border-color;
83 } 91 }
84 // Prevent a double border 92 }
85 caption + thead tr:first-child th, 93 }
86 caption + tbody tr:first-child th, 94 > thead > tr {
87 caption + tbody tr:first-child td, 95 > th,
88 colgroup + thead tr:first-child th, 96 > td {
89 colgroup + tbody tr:first-child th, 97 border-bottom-width: 2px;
90 colgroup + tbody tr:first-child td, 98 }
91 thead:first-child tr:first-child th, 99 }
92 tbody:first-child tr:first-child th, 100 }
93 tbody:first-child tr:first-child td { 101
94 border-top: 0; 102
95 } 103 // Zebra-striping
96 // For first th/td in the first row in the first thead or tbody 104 //
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) 105 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
106
156 .table-striped { 107 .table-striped {
157 tbody { 108 > tbody > tr:nth-child(odd) {
158 > tr:nth-child(odd) > td, 109 > td,
159 > tr:nth-child(odd) > th { 110 > th {
160 background-color: @tableBackgroundAccent; 111 background-color: @table-bg-accent;
161 } 112 }
162 } 113 }
163 } 114 }
164 115
165 116
166 // HOVER EFFECT 117 // Hover effect
167 // ------------ 118 //
168 // Placed here since it has to come after the potential zebra striping 119 // Placed here since it has to come after the potential zebra striping
120
169 .table-hover { 121 .table-hover {
170 tbody { 122 > tbody > tr:hover {
171 tr:hover > td, 123 > td,
172 tr:hover > th { 124 > th {
173 background-color: @tableBackgroundHover; 125 background-color: @table-bg-hover;
174 } 126 }
175 } 127 }
176 } 128 }
177 129
178 130
179 // TABLE CELL SIZING 131 // Table cell sizing
180 // ----------------- 132 //
181 133 // Reset default table behavior
182 // Reset default grid behavior 134
183 table td[class*="span"], 135 table col[class*="col-"] {
184 table th[class*="span"], 136 position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
185 .row-fluid table td[class*="span"], 137 float: none;
186 .row-fluid table th[class*="span"] { 138 display: table-column;
187 display: table-cell; 139 }
188 float: none; // undo default grid column styles 140 table {
189 margin-left: 0; // undo default grid column styles 141 td,
190 } 142 th {
191 143 &[class*="col-"] {
192 // Change the column widths to account for td/th padding 144 float: none;
193 .table td, 145 display: table-cell;
194 .table th { 146 }
195 &.span1 { .tableColumns(1); } 147 }
196 &.span2 { .tableColumns(2); } 148 }
197 &.span3 { .tableColumns(3); } 149
198 &.span4 { .tableColumns(4); } 150
199 &.span5 { .tableColumns(5); } 151 // Table backgrounds
200 &.span6 { .tableColumns(6); } 152 //
201 &.span7 { .tableColumns(7); } 153 // Exact selectors below required to override `.table-striped` and prevent
202 &.span8 { .tableColumns(8); } 154 // inheritance to nested tables.
203 &.span9 { .tableColumns(9); } 155
204 &.span10 { .tableColumns(10); } 156 // Generate the contextual variants
205 &.span11 { .tableColumns(11); } 157 .table-row-variant(active; @table-bg-active);
206 &.span12 { .tableColumns(12); } 158 .table-row-variant(success; @state-success-bg);
207 } 159 .table-row-variant(danger; @state-danger-bg);
208 160 .table-row-variant(warning; @state-warning-bg);
209 161
210 162
211 // TABLE BACKGROUNDS 163 // Responsive tables
212 // ----------------- 164 //
213 // Exact selectors below required to override .table-striped 165 // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
214 166 // by enabling horizontal scrolling. Only applies <768px. Everything above that
215 .table tbody tr { 167 // will display normally.
216 &.success > td { 168
217 background-color: @successBackground; 169 @media (max-width: @screen-xs-max) {
218 } 170 .table-responsive {
219 &.error > td { 171 width: 100%;
220 background-color: @errorBackground; 172 margin-bottom: (@line-height-computed * 0.75);
221 } 173 overflow-y: hidden;
222 &.warning > td { 174 overflow-x: scroll;
223 background-color: @warningBackground; 175 -ms-overflow-style: -ms-autohiding-scrollbar;
224 } 176 border: 1px solid @table-border-color;
225 &.info > td { 177 -webkit-overflow-scrolling: touch;
226 background-color: @infoBackground; 178
227 } 179 // Tighten up spacing
228 } 180 > .table {
229 181 margin-bottom: 0;
230 // Hover states for .table-hover 182
231 .table-hover tbody tr { 183 // Ensure the content doesn't wrap
232 &.success:hover > td { 184 > thead,
233 background-color: darken(@successBackground, 5%); 185 > tbody,
234 } 186 > tfoot {
235 &.error:hover > td { 187 > tr {
236 background-color: darken(@errorBackground, 5%); 188 > th,
237 } 189 > td {
238 &.warning:hover > td { 190 white-space: nowrap;
239 background-color: darken(@warningBackground, 5%); 191 }
240 } 192 }
241 &.info:hover > td { 193 }
242 background-color: darken(@infoBackground, 5%); 194 }
243 } 195
244 } 196 // Special overrides for the bordered tables
197 > .table-bordered {
198 border: 0;
199
200 // Nuke the appropriate borders so that the parent can handle them
201 > thead,
202 > tbody,
203 > tfoot {
204 > tr {
205 > th:first-child,
206 > td:first-child {
207 border-left: 0;
208 }
209 > th:last-child,
210 > td:last-child {
211 border-right: 0;
212 }
213 }
214 }
215
216 // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
217 // chances are there will be only one `tr` in a `thead` and that would
218 // remove the border altogether.
219 > tbody,
220 > tfoot {
221 > tr:last-child {
222 > th,
223 > td {
224 border-bottom: 0;
225 }
226 }
227 }
228
229 }
230 }
231 }