From da072fff21f565521d3dbe1f5f4f42550ecc989e Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 2 Jul 2013 11:25:57 -0700 Subject: [PATCH] refactor tables.less to use nesting more --- docs/assets/css/bootstrap.css | 8 +-- less/tables.less | 106 ++++++++++++++++++++-------------- 2 files changed, 66 insertions(+), 48 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 87b021ee7f..a28f94f064 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1126,10 +1126,10 @@ th { } .table caption + thead tr:first-child th, -.table caption + thead tr:first-child td, .table colgroup + thead tr:first-child th, -.table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, +.table caption + thead tr:first-child td, +.table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child td { border-top: 0; } @@ -1212,15 +1212,15 @@ th { } .table-bordered > caption + thead > tr:first-child > th:first-child, -.table-bordered > caption + tbody > tr:first-child > td:first-child, .table-bordered > colgroup + thead > tr:first-child > th:first-child, +.table-bordered > caption + tbody > tr:first-child > td:first-child, .table-bordered > colgroup + tbody > tr:first-child > td:first-child { border-top-left-radius: 4px; } .table-bordered > caption + thead > tr:first-child > th:last-child, -.table-bordered > caption + tbody > tr:first-child > td:last-child, .table-bordered > colgroup + thead > tr:first-child > th:last-child, +.table-bordered > caption + tbody > tr:first-child > td:last-child, .table-bordered > colgroup + tbody > tr:first-child > td:last-child { border-top-right-radius: 4px; } diff --git a/less/tables.less b/less/tables.less index 392593902a..ebfb1c6568 100644 --- a/less/tables.less +++ b/less/tables.less @@ -19,27 +19,31 @@ th { width: 100%; margin-bottom: @line-height-computed; // Cells - thead > tr > th, - tbody > tr > th, - thead > tr > td, - tbody > tr > td { - padding: 8px; - line-height: @line-height-base; - vertical-align: top; - border-top: 1px solid @table-border-color; + thead, + tbody { + > tr { + > th, + > td { + padding: 8px; + 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; } // Remove top border from thead by default - caption + thead tr:first-child th, - caption + thead tr:first-child td, - colgroup + thead tr:first-child th, - colgroup + thead tr:first-child td, - thead:first-child tr:first-child th, - thead:first-child tr:first-child td { - border-top: 0; + caption + thead, + colgroup + thead, + thead:first-child { + tr:first-child { + th, td { + border-top: 0; + } + } } // Account for multiple tbody instances tbody + tbody { @@ -58,11 +62,14 @@ th { // ------------------------------- .table-condensed { - thead > tr > th, - tbody > tr > th, - thead > tr > td, - tbody > tr > td { - padding: 4px 5px; + thead, + tbody { + > tr { + > th, + > td { + padding: 4px 5px; + } + } } } @@ -77,11 +84,14 @@ th { border-left: 0; border-radius: @border-radius-base; - > thead > tr > th, - > tbody > tr > th, - > thead > tr > td, - > tbody > tr > td { - border-left: 1px solid @table-border-color; + > thead, + > tbody { + > tr { + > th, + > td { + border-left: 1px solid @table-border-color; + } + } } // Prevent a double border > caption + thead > tr:first-child th, @@ -131,15 +141,16 @@ th { } // Special fixes to round the left border on the first td/th - > caption + thead > tr:first-child > th, - > caption + tbody > tr:first-child > td, - > colgroup + thead > tr:first-child > th, - > colgroup + tbody > tr:first-child > td { - &:first-child{ - border-top-left-radius: @border-radius-base; - } - &:last-child{ - border-top-right-radius: @border-radius-base; + > caption, + > colgroup { + + thead > tr:first-child > th, + + tbody > tr:first-child > td { + &:first-child { + border-top-left-radius: @border-radius-base; + } + &:last-child { + border-top-right-radius: @border-radius-base; + } } } } @@ -152,9 +163,11 @@ th { // Default zebra-stripe styles (alternating gray and transparent backgrounds) .table-striped { > tbody { - > tr:nth-child(odd) > td, - > tr:nth-child(odd) > th { - background-color: @table-bg-accent; + > tr:nth-child(odd) { + > td, + > th { + background-color: @table-bg-accent; + } } } } @@ -167,9 +180,11 @@ th { // Placed here since it has to come after the potential zebra striping .table-hover { > tbody { - > tr:hover > td, - > tr:hover > th { - background-color: @table-bg-hover; + > tr:hover { + > td, + > th { + background-color: @table-bg-hover; + } } } } @@ -184,10 +199,13 @@ table col[class^="col-"] { float: none; display: table-column; } -table td[class^="col-"], -table th[class^="col-"] { - float: none; - display: table-cell; +table { + td, th { + &[class^="col-"] { + float: none; + display: table-cell; + } + } }