]>
Commit | Line | Data |
---|---|---|
7b869721 S |
1 | // |
2 | // Tables | |
3 | // -------------------------------------------------- | |
4 | ||
5 | ||
6 | table { | |
7 | max-width: 100%; | |
8 | background-color: @table-bg; | |
9 | } | |
10 | th { | |
11 | text-align: left; | |
12 | } | |
13 | ||
14 | ||
15 | // Baseline styles | |
16 | ||
17 | .table { | |
18 | width: 100%; | |
19 | margin-bottom: @line-height-computed; | |
20 | // Cells | |
21 | > thead, | |
22 | > tbody, | |
23 | > tfoot { | |
24 | > tr { | |
25 | > th, | |
26 | > td { | |
27 | padding: @table-cell-padding; | |
28 | line-height: @line-height-base; | |
29 | vertical-align: top; | |
30 | border-top: 1px solid @table-border-color; | |
31 | } | |
32 | } | |
33 | } | |
34 | // Bottom align for column headings | |
35 | > thead > tr > th { | |
36 | vertical-align: bottom; | |
37 | border-bottom: 2px solid @table-border-color; | |
38 | } | |
39 | // Remove top border from thead by default | |
40 | > caption + thead, | |
41 | > colgroup + thead, | |
42 | > thead:first-child { | |
43 | > tr:first-child { | |
44 | > th, | |
45 | > td { | |
46 | border-top: 0; | |
47 | } | |
48 | } | |
49 | } | |
50 | // Account for multiple tbody instances | |
51 | > tbody + tbody { | |
52 | border-top: 2px solid @table-border-color; | |
53 | } | |
54 | ||
55 | // Nesting | |
56 | .table { | |
57 | background-color: @body-bg; | |
58 | } | |
59 | } | |
60 | ||
61 | ||
62 | // Condensed table w/ half padding | |
63 | ||
64 | .table-condensed { | |
65 | > thead, | |
66 | > tbody, | |
67 | > tfoot { | |
68 | > tr { | |
69 | > th, | |
70 | > td { | |
71 | padding: @table-condensed-cell-padding; | |
72 | } | |
73 | } | |
74 | } | |
75 | } | |
76 | ||
77 | ||
78 | // Bordered version | |
79 | // | |
80 | // Add borders all around the table and between all the columns. | |
81 | ||
82 | .table-bordered { | |
83 | border: 1px solid @table-border-color; | |
84 | > thead, | |
85 | > tbody, | |
86 | > tfoot { | |
87 | > tr { | |
88 | > th, | |
89 | > td { | |
90 | border: 1px solid @table-border-color; | |
91 | } | |
92 | } | |
93 | } | |
94 | > thead > tr { | |
95 | > th, | |
96 | > td { | |
97 | border-bottom-width: 2px; | |
98 | } | |
99 | } | |
100 | } | |
101 | ||
102 | ||
103 | // Zebra-striping | |
104 | // | |
105 | // Default zebra-stripe styles (alternating gray and transparent backgrounds) | |
106 | ||
107 | .table-striped > tbody > tr:nth-child(odd) { | |
108 | > td, | |
109 | > th { | |
110 | background-color: @table-bg-accent; | |
111 | } | |
112 | } | |
113 | ||
114 | ||
115 | // Hover effect | |
116 | // | |
117 | // Placed here since it has to come after the potential zebra striping | |
118 | ||
119 | .table-hover > tbody > tr:hover { | |
120 | > td, | |
121 | > th { | |
122 | background-color: @table-bg-hover; | |
123 | } | |
124 | } | |
125 | ||
126 | ||
127 | // Table cell sizing | |
128 | // | |
129 | // Reset default table behavior | |
130 | ||
131 | table col[class*="col-"] { | |
132 | float: none; | |
133 | display: table-column; | |
134 | } | |
135 | table { | |
136 | td, | |
137 | th { | |
138 | &[class*="col-"] { | |
139 | float: none; | |
140 | display: table-cell; | |
141 | } | |
142 | } | |
143 | } | |
144 | ||
145 | ||
146 | // Table backgrounds | |
147 | // | |
148 | // Exact selectors below required to override `.table-striped` and prevent | |
149 | // inheritance to nested tables. | |
150 | ||
151 | .table > thead > tr, | |
152 | .table > tbody > tr, | |
153 | .table > tfoot > tr { | |
154 | > td.active, | |
155 | > th.active, | |
156 | &.active > td, | |
157 | &.active > th { | |
158 | background-color: @table-bg-active; | |
159 | } | |
160 | } | |
161 | ||
162 | // Generate the contextual variants | |
163 | .table-row-variant(success; @state-success-bg; @state-success-border); | |
164 | .table-row-variant(danger; @state-danger-bg; @state-danger-border); | |
165 | .table-row-variant(warning; @state-warning-bg; @state-warning-border); | |
166 | ||
167 | ||
168 | // Responsive tables | |
169 | // | |
170 | // Wrap your tables in `.table-responsive` and we'll make them mobile friendly | |
171 | // by enabling horizontal scrolling. Only applies <768px. Everything above that | |
172 | // will display normally. | |
173 | ||
174 | @media (max-width: @screen-xs-max) { | |
175 | .table-responsive { | |
176 | width: 100%; | |
177 | margin-bottom: (@line-height-computed * 0.75); | |
178 | overflow-y: hidden; | |
179 | overflow-x: scroll; | |
180 | -ms-overflow-style: -ms-autohiding-scrollbar; | |
181 | border: 1px solid @table-border-color; | |
182 | -webkit-overflow-scrolling: touch; | |
183 | ||
184 | // Tighten up spacing | |
185 | > .table { | |
186 | margin-bottom: 0; | |
187 | ||
188 | // Ensure the content doesn't wrap | |
189 | > thead, | |
190 | > tbody, | |
191 | > tfoot { | |
192 | > tr { | |
193 | > th, | |
194 | > td { | |
195 | white-space: nowrap; | |
196 | } | |
197 | } | |
198 | } | |
199 | } | |
200 | ||
201 | // Special overrides for the bordered tables | |
202 | > .table-bordered { | |
203 | border: 0; | |
204 | ||
205 | // Nuke the appropriate borders so that the parent can handle them | |
206 | > thead, | |
207 | > tbody, | |
208 | > tfoot { | |
209 | > tr { | |
210 | > th:first-child, | |
211 | > td:first-child { | |
212 | border-left: 0; | |
213 | } | |
214 | > th:last-child, | |
215 | > td:last-child { | |
216 | border-right: 0; | |
217 | } | |
218 | } | |
219 | } | |
220 | ||
221 | // Only nuke the last row's bottom-border in `tbody` and `tfoot` since | |
222 | // chances are there will be only one `tr` in a `thead` and that would | |
223 | // remove the border altogether. | |
224 | > tbody, | |
225 | > tfoot { | |
226 | > tr:last-child { | |
227 | > th, | |
228 | > td { | |
229 | border-bottom: 0; | |
230 | } | |
231 | } | |
232 | } | |
233 | ||
234 | } | |
235 | } | |
236 | } |