1 | // stylelint-disable selector-max-type, selector-max-compound-selectors, selector-no-qualifying-type
|
---|
2 |
|
---|
3 | //
|
---|
4 | // Tables
|
---|
5 | // --------------------------------------------------
|
---|
6 |
|
---|
7 |
|
---|
8 | table {
|
---|
9 | background-color: @table-bg;
|
---|
10 |
|
---|
11 | // Table cell sizing
|
---|
12 | //
|
---|
13 | // Reset default table behavior
|
---|
14 |
|
---|
15 | col[class*="col-"] {
|
---|
16 | position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
|
---|
17 | display: table-column;
|
---|
18 | float: none;
|
---|
19 | }
|
---|
20 |
|
---|
21 | td,
|
---|
22 | th {
|
---|
23 | &[class*="col-"] {
|
---|
24 | position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
|
---|
25 | display: table-cell;
|
---|
26 | float: none;
|
---|
27 | }
|
---|
28 | }
|
---|
29 | }
|
---|
30 |
|
---|
31 | caption {
|
---|
32 | padding-top: @table-cell-padding;
|
---|
33 | padding-bottom: @table-cell-padding;
|
---|
34 | color: @text-muted;
|
---|
35 | text-align: left;
|
---|
36 | }
|
---|
37 |
|
---|
38 | th {
|
---|
39 | text-align: left;
|
---|
40 | }
|
---|
41 |
|
---|
42 |
|
---|
43 | // Baseline styles
|
---|
44 |
|
---|
45 | .table {
|
---|
46 | width: 100%;
|
---|
47 | max-width: 100%;
|
---|
48 | margin-bottom: @line-height-computed;
|
---|
49 | // Cells
|
---|
50 | > thead,
|
---|
51 | > tbody,
|
---|
52 | > tfoot {
|
---|
53 | > tr {
|
---|
54 | > th,
|
---|
55 | > td {
|
---|
56 | padding: @table-cell-padding;
|
---|
57 | line-height: @line-height-base;
|
---|
58 | vertical-align: top;
|
---|
59 | border-top: 1px solid @table-border-color;
|
---|
60 | }
|
---|
61 | }
|
---|
62 | }
|
---|
63 | // Bottom align for column headings
|
---|
64 | > thead > tr > th {
|
---|
65 | vertical-align: bottom;
|
---|
66 | border-bottom: 2px solid @table-border-color;
|
---|
67 | }
|
---|
68 | // Remove top border from thead by default
|
---|
69 | > caption + thead,
|
---|
70 | > colgroup + thead,
|
---|
71 | > thead:first-child {
|
---|
72 | > tr:first-child {
|
---|
73 | > th,
|
---|
74 | > td {
|
---|
75 | border-top: 0;
|
---|
76 | }
|
---|
77 | }
|
---|
78 | }
|
---|
79 | // Account for multiple tbody instances
|
---|
80 | > tbody + tbody {
|
---|
81 | border-top: 2px solid @table-border-color;
|
---|
82 | }
|
---|
83 |
|
---|
84 | // Nesting
|
---|
85 | .table {
|
---|
86 | background-color: @body-bg;
|
---|
87 | }
|
---|
88 | }
|
---|
89 |
|
---|
90 |
|
---|
91 | // Condensed table w/ half padding
|
---|
92 |
|
---|
93 | .table-condensed {
|
---|
94 | > thead,
|
---|
95 | > tbody,
|
---|
96 | > tfoot {
|
---|
97 | > tr {
|
---|
98 | > th,
|
---|
99 | > td {
|
---|
100 | padding: @table-condensed-cell-padding;
|
---|
101 | }
|
---|
102 | }
|
---|
103 | }
|
---|
104 | }
|
---|
105 |
|
---|
106 |
|
---|
107 | // Bordered version
|
---|
108 | //
|
---|
109 | // Add borders all around the table and between all the columns.
|
---|
110 |
|
---|
111 | .table-bordered {
|
---|
112 | border: 1px solid @table-border-color;
|
---|
113 | > thead,
|
---|
114 | > tbody,
|
---|
115 | > tfoot {
|
---|
116 | > tr {
|
---|
117 | > th,
|
---|
118 | > td {
|
---|
119 | border: 1px solid @table-border-color;
|
---|
120 | }
|
---|
121 | }
|
---|
122 | }
|
---|
123 | > thead > tr {
|
---|
124 | > th,
|
---|
125 | > td {
|
---|
126 | border-bottom-width: 2px;
|
---|
127 | }
|
---|
128 | }
|
---|
129 | }
|
---|
130 |
|
---|
131 |
|
---|
132 | // Zebra-striping
|
---|
133 | //
|
---|
134 | // Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
---|
135 |
|
---|
136 | .table-striped {
|
---|
137 | > tbody > tr:nth-of-type(odd) {
|
---|
138 | background-color: @table-bg-accent;
|
---|
139 | }
|
---|
140 | }
|
---|
141 |
|
---|
142 |
|
---|
143 | // Hover effect
|
---|
144 | //
|
---|
145 | // Placed here since it has to come after the potential zebra striping
|
---|
146 |
|
---|
147 | .table-hover {
|
---|
148 | > tbody > tr:hover {
|
---|
149 | background-color: @table-bg-hover;
|
---|
150 | }
|
---|
151 | }
|
---|
152 |
|
---|
153 |
|
---|
154 | // Table backgrounds
|
---|
155 | //
|
---|
156 | // Exact selectors below required to override `.table-striped` and prevent
|
---|
157 | // inheritance to nested tables.
|
---|
158 |
|
---|
159 | // Generate the contextual variants
|
---|
160 | .table-row-variant(active; @table-bg-active);
|
---|
161 | .table-row-variant(success; @state-success-bg);
|
---|
162 | .table-row-variant(info; @state-info-bg);
|
---|
163 | .table-row-variant(warning; @state-warning-bg);
|
---|
164 | .table-row-variant(danger; @state-danger-bg);
|
---|
165 |
|
---|
166 |
|
---|
167 | // Responsive tables
|
---|
168 | //
|
---|
169 | // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
|
---|
170 | // by enabling horizontal scrolling. Only applies <768px. Everything above that
|
---|
171 | // will display normally.
|
---|
172 |
|
---|
173 | .table-responsive {
|
---|
174 | min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
|
---|
175 | overflow-x: auto;
|
---|
176 |
|
---|
177 | @media screen and (max-width: @screen-xs-max) {
|
---|
178 | width: 100%;
|
---|
179 | margin-bottom: (@line-height-computed * .75);
|
---|
180 | overflow-y: hidden;
|
---|
181 | -ms-overflow-style: -ms-autohiding-scrollbar;
|
---|
182 | border: 1px solid @table-border-color;
|
---|
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 | }
|
---|