1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/static/less/tables.less Fri Dec 20 22:30:44 2013 +0100
1.3 @@ -0,0 +1,231 @@
1.4 +//
1.5 +// Tables
1.6 +// --------------------------------------------------
1.7 +
1.8 +
1.9 +table {
1.10 + max-width: 100%;
1.11 + background-color: @table-bg;
1.12 +}
1.13 +th {
1.14 + text-align: left;
1.15 +}
1.16 +
1.17 +
1.18 +// Baseline styles
1.19 +
1.20 +.table {
1.21 + width: 100%;
1.22 + margin-bottom: @line-height-computed;
1.23 + // Cells
1.24 + > thead,
1.25 + > tbody,
1.26 + > tfoot {
1.27 + > tr {
1.28 + > th,
1.29 + > td {
1.30 + padding: @table-cell-padding;
1.31 + line-height: @line-height-base;
1.32 + vertical-align: top;
1.33 + border-top: 1px solid @table-border-color;
1.34 + }
1.35 + }
1.36 + }
1.37 + // Bottom align for column headings
1.38 + > thead > tr > th {
1.39 + vertical-align: bottom;
1.40 + border-bottom: 2px solid @table-border-color;
1.41 + }
1.42 + // Remove top border from thead by default
1.43 + > caption + thead,
1.44 + > colgroup + thead,
1.45 + > thead:first-child {
1.46 + > tr:first-child {
1.47 + > th,
1.48 + > td {
1.49 + border-top: 0;
1.50 + }
1.51 + }
1.52 + }
1.53 + // Account for multiple tbody instances
1.54 + > tbody + tbody {
1.55 + border-top: 2px solid @table-border-color;
1.56 + }
1.57 +
1.58 + // Nesting
1.59 + .table {
1.60 + background-color: @body-bg;
1.61 + }
1.62 +}
1.63 +
1.64 +
1.65 +// Condensed table w/ half padding
1.66 +
1.67 +.table-condensed {
1.68 + > thead,
1.69 + > tbody,
1.70 + > tfoot {
1.71 + > tr {
1.72 + > th,
1.73 + > td {
1.74 + padding: @table-condensed-cell-padding;
1.75 + }
1.76 + }
1.77 + }
1.78 +}
1.79 +
1.80 +
1.81 +// Bordered version
1.82 +//
1.83 +// Add borders all around the table and between all the columns.
1.84 +
1.85 +.table-bordered {
1.86 + border: 1px solid @table-border-color;
1.87 + > thead,
1.88 + > tbody,
1.89 + > tfoot {
1.90 + > tr {
1.91 + > th,
1.92 + > td {
1.93 + border: 1px solid @table-border-color;
1.94 + }
1.95 + }
1.96 + }
1.97 + > thead > tr {
1.98 + > th,
1.99 + > td {
1.100 + border-bottom-width: 2px;
1.101 + }
1.102 + }
1.103 +}
1.104 +
1.105 +
1.106 +// Zebra-striping
1.107 +//
1.108 +// Default zebra-stripe styles (alternating gray and transparent backgrounds)
1.109 +
1.110 +.table-striped {
1.111 + > tbody > tr:nth-child(odd) {
1.112 + > td,
1.113 + > th {
1.114 + background-color: @table-bg-accent;
1.115 + }
1.116 + }
1.117 +}
1.118 +
1.119 +
1.120 +// Hover effect
1.121 +//
1.122 +// Placed here since it has to come after the potential zebra striping
1.123 +
1.124 +.table-hover {
1.125 + > tbody > tr:hover {
1.126 + > td,
1.127 + > th {
1.128 + background-color: @table-bg-hover;
1.129 + }
1.130 + }
1.131 +}
1.132 +
1.133 +
1.134 +// Table cell sizing
1.135 +//
1.136 +// Reset default table behavior
1.137 +
1.138 +table col[class*="col-"] {
1.139 + position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
1.140 + float: none;
1.141 + display: table-column;
1.142 +}
1.143 +table {
1.144 + td,
1.145 + th {
1.146 + &[class*="col-"] {
1.147 + float: none;
1.148 + display: table-cell;
1.149 + }
1.150 + }
1.151 +}
1.152 +
1.153 +
1.154 +// Table backgrounds
1.155 +//
1.156 +// Exact selectors below required to override `.table-striped` and prevent
1.157 +// inheritance to nested tables.
1.158 +
1.159 +// Generate the contextual variants
1.160 +.table-row-variant(active; @table-bg-active);
1.161 +.table-row-variant(success; @state-success-bg);
1.162 +.table-row-variant(danger; @state-danger-bg);
1.163 +.table-row-variant(warning; @state-warning-bg);
1.164 +
1.165 +
1.166 +// Responsive tables
1.167 +//
1.168 +// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
1.169 +// by enabling horizontal scrolling. Only applies <768px. Everything above that
1.170 +// will display normally.
1.171 +
1.172 +@media (max-width: @screen-xs-max) {
1.173 + .table-responsive {
1.174 + width: 100%;
1.175 + margin-bottom: (@line-height-computed * 0.75);
1.176 + overflow-y: hidden;
1.177 + overflow-x: scroll;
1.178 + -ms-overflow-style: -ms-autohiding-scrollbar;
1.179 + border: 1px solid @table-border-color;
1.180 + -webkit-overflow-scrolling: touch;
1.181 +
1.182 + // Tighten up spacing
1.183 + > .table {
1.184 + margin-bottom: 0;
1.185 +
1.186 + // Ensure the content doesn't wrap
1.187 + > thead,
1.188 + > tbody,
1.189 + > tfoot {
1.190 + > tr {
1.191 + > th,
1.192 + > td {
1.193 + white-space: nowrap;
1.194 + }
1.195 + }
1.196 + }
1.197 + }
1.198 +
1.199 + // Special overrides for the bordered tables
1.200 + > .table-bordered {
1.201 + border: 0;
1.202 +
1.203 + // Nuke the appropriate borders so that the parent can handle them
1.204 + > thead,
1.205 + > tbody,
1.206 + > tfoot {
1.207 + > tr {
1.208 + > th:first-child,
1.209 + > td:first-child {
1.210 + border-left: 0;
1.211 + }
1.212 + > th:last-child,
1.213 + > td:last-child {
1.214 + border-right: 0;
1.215 + }
1.216 + }
1.217 + }
1.218 +
1.219 + // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
1.220 + // chances are there will be only one `tr` in a `thead` and that would
1.221 + // remove the border altogether.
1.222 + > tbody,
1.223 + > tfoot {
1.224 + > tr:last-child {
1.225 + > th,
1.226 + > td {
1.227 + border-bottom: 0;
1.228 + }
1.229 + }
1.230 + }
1.231 +
1.232 + }
1.233 + }
1.234 +}