X-Git-Url: http://git.ieval.ro/?a=blobdiff_plain;f=mindcoding-template%2Fless%2Ftables.less;fp=mindcoding-template%2Fless%2Ftables.less;h=0deadc7820854248ab89c3045586cd226ad3fa92;hb=7b8697217dd7b910c8600a1290d0a9590437afc0;hp=0000000000000000000000000000000000000000;hpb=db540dc1ec5c2e5a5856e1ba9f25eb1ae6e7548d;p=mindcoding-template-patches.git diff --git a/mindcoding-template/less/tables.less b/mindcoding-template/less/tables.less new file mode 100755 index 0000000..0deadc7 --- /dev/null +++ b/mindcoding-template/less/tables.less @@ -0,0 +1,236 @@ +// +// Tables +// -------------------------------------------------- + + +table { + max-width: 100%; + background-color: @table-bg; +} +th { + text-align: left; +} + + +// Baseline styles + +.table { + width: 100%; + margin-bottom: @line-height-computed; + // Cells + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: @table-cell-padding; + line-height: @line-height-base; + vertical-align: top; + border-top: 1px solid @table-border-color; + } + } + } + // Bottom align for column headings + > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid @table-border-color; + } + // Remove top border from thead by default + > caption + thead, + > colgroup + thead, + > thead:first-child { + > tr:first-child { + > th, + > td { + border-top: 0; + } + } + } + // Account for multiple tbody instances + > tbody + tbody { + border-top: 2px solid @table-border-color; + } + + // Nesting + .table { + background-color: @body-bg; + } +} + + +// Condensed table w/ half padding + +.table-condensed { + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: @table-condensed-cell-padding; + } + } + } +} + + +// Bordered version +// +// Add borders all around the table and between all the columns. + +.table-bordered { + border: 1px solid @table-border-color; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + border: 1px solid @table-border-color; + } + } + } + > thead > tr { + > th, + > td { + border-bottom-width: 2px; + } + } +} + + +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) + +.table-striped > tbody > tr:nth-child(odd) { + > td, + > th { + background-color: @table-bg-accent; + } +} + + +// Hover effect +// +// Placed here since it has to come after the potential zebra striping + +.table-hover > tbody > tr:hover { + > td, + > th { + background-color: @table-bg-hover; + } +} + + +// Table cell sizing +// +// Reset default table behavior + +table col[class*="col-"] { + float: none; + display: table-column; +} +table { + td, + th { + &[class*="col-"] { + float: none; + display: table-cell; + } + } +} + + +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. + +.table > thead > tr, +.table > tbody > tr, +.table > tfoot > tr { + > td.active, + > th.active, + &.active > td, + &.active > th { + background-color: @table-bg-active; + } +} + +// Generate the contextual variants +.table-row-variant(success; @state-success-bg; @state-success-border); +.table-row-variant(danger; @state-danger-bg; @state-danger-border); +.table-row-variant(warning; @state-warning-bg; @state-warning-border); + + +// Responsive tables +// +// Wrap your tables in `.table-responsive` and we'll make them mobile friendly +// by enabling horizontal scrolling. Only applies <768px. Everything above that +// will display normally. + +@media (max-width: @screen-xs-max) { + .table-responsive { + width: 100%; + margin-bottom: (@line-height-computed * 0.75); + overflow-y: hidden; + overflow-x: scroll; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid @table-border-color; + -webkit-overflow-scrolling: touch; + + // Tighten up spacing + > .table { + margin-bottom: 0; + + // Ensure the content doesn't wrap + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + white-space: nowrap; + } + } + } + } + + // Special overrides for the bordered tables + > .table-bordered { + border: 0; + + // Nuke the appropriate borders so that the parent can handle them + > thead, + > tbody, + > tfoot { + > tr { + > th:first-child, + > td:first-child { + border-left: 0; + } + > th:last-child, + > td:last-child { + border-right: 0; + } + } + } + + // Only nuke the last row's bottom-border in `tbody` and `tfoot` since + // chances are there will be only one `tr` in a `thead` and that would + // remove the border altogether. + > tbody, + > tfoot { + > tr:last-child { + > th, + > td { + border-bottom: 0; + } + } + } + + } + } +}