177 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
		
		
			
		
	
	
			177 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
|  | // | ||
|  | // Tables.less | ||
|  | // Tables for, you guessed it, tabular data | ||
|  | // ---------------------------------------- | ||
|  | 
 | ||
|  | 
 | ||
|  | // BASE TABLES | ||
|  | // ----------------- | ||
|  | 
 | ||
|  | table { | ||
|  |   max-width: 100%; | ||
|  |   background-color: @tableBackground; | ||
|  |   border-collapse: collapse; | ||
|  |   border-spacing: 0; | ||
|  | } | ||
|  | 
 | ||
|  | // BASELINE STYLES | ||
|  | // --------------- | ||
|  | 
 | ||
|  | .table { | ||
|  |   width: 100%; | ||
|  |   margin-bottom: @baseLineHeight; | ||
|  |   // Cells | ||
|  |   th, | ||
|  |   td { | ||
|  |     padding: 8px; | ||
|  |     line-height: @baseLineHeight; | ||
|  |     text-align: left; | ||
|  |     vertical-align: top; | ||
|  |     border-top: 1px solid @tableBorder; | ||
|  |   } | ||
|  |   th { | ||
|  |     font-weight: bold; | ||
|  |   } | ||
|  |   // Bottom align for column headings | ||
|  |   thead 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; | ||
|  |   } | ||
|  |   // Account for multiple tbody instances | ||
|  |   tbody + tbody { | ||
|  |     border-top: 2px solid @tableBorder; | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | 
 | ||
|  | 
 | ||
|  | // CONDENSED TABLE W/ HALF PADDING | ||
|  | // ------------------------------- | ||
|  | 
 | ||
|  | .table-condensed { | ||
|  |   th, | ||
|  |   td { | ||
|  |     padding: 4px 5px; | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | 
 | ||
|  | // BORDERED VERSION | ||
|  | // ---------------- | ||
|  | 
 | ||
|  | .table-bordered { | ||
|  |   border: 1px solid @tableBorder; | ||
|  |   border-collapse: separate; // Done so we can round those corners! | ||
|  |   *border-collapse: collapsed; // IE7 can't round corners anyway | ||
|  |   border-left: 0; | ||
|  |   .border-radius(4px); | ||
|  |   th, | ||
|  |   td { | ||
|  |     border-left: 1px solid @tableBorder; | ||
|  |   } | ||
|  |   // Prevent a double border | ||
|  |   caption + thead tr:first-child th, | ||
|  |   caption + tbody tr:first-child th, | ||
|  |   caption + tbody tr:first-child td, | ||
|  |   colgroup + thead tr:first-child th, | ||
|  |   colgroup + tbody tr:first-child th, | ||
|  |   colgroup + tbody tr:first-child td, | ||
|  |   thead:first-child tr:first-child th, | ||
|  |   tbody:first-child tr:first-child th, | ||
|  |   tbody:first-child tr:first-child td { | ||
|  |     border-top: 0; | ||
|  |   } | ||
|  |   // For first th or td in the first row in the first thead or tbody | ||
|  |   thead:first-child tr:first-child th:first-child, | ||
|  |   tbody:first-child tr:first-child td:first-child { | ||
|  |     -webkit-border-top-left-radius: 4px; | ||
|  |             border-top-left-radius: 4px; | ||
|  |         -moz-border-radius-topleft: 4px; | ||
|  |   } | ||
|  |   thead:first-child tr:first-child th:last-child, | ||
|  |   tbody:first-child tr:first-child td:last-child { | ||
|  |     -webkit-border-top-right-radius: 4px; | ||
|  |             border-top-right-radius: 4px; | ||
|  |         -moz-border-radius-topright: 4px; | ||
|  |   } | ||
|  |   // For first th or td in the first row in the first thead or tbody | ||
|  |   thead:last-child tr:last-child th:first-child, | ||
|  |   tbody:last-child tr:last-child td:first-child { | ||
|  |     .border-radius(0 0 0 4px); | ||
|  |     -webkit-border-bottom-left-radius: 4px; | ||
|  |             border-bottom-left-radius: 4px; | ||
|  |         -moz-border-radius-bottomleft: 4px; | ||
|  |   } | ||
|  |   thead:last-child tr:last-child th:last-child, | ||
|  |   tbody:last-child tr:last-child td:last-child { | ||
|  |     -webkit-border-bottom-right-radius: 4px; | ||
|  |             border-bottom-right-radius: 4px; | ||
|  |         -moz-border-radius-bottomright: 4px; | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | 
 | ||
|  | // ZEBRA-STRIPING | ||
|  | // -------------- | ||
|  | 
 | ||
|  | // Default zebra-stripe styles (alternating gray and transparent backgrounds) | ||
|  | .table-striped { | ||
|  |   tbody { | ||
|  |     tr:nth-child(odd) td, | ||
|  |     tr:nth-child(odd) th { | ||
|  |       background-color: @tableBackgroundAccent; | ||
|  |     } | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | 
 | ||
|  | // HOVER EFFECT | ||
|  | // ------------ | ||
|  | // Placed here since it has to come after the potential zebra striping | ||
|  | .table { | ||
|  |   tbody tr:hover td, | ||
|  |   tbody tr:hover th { | ||
|  |     background-color: @tableBackgroundHover; | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | 
 | ||
|  | // TABLE CELL SIZING | ||
|  | // ----------------- | ||
|  | 
 | ||
|  | // Change the columns | ||
|  | table { | ||
|  |   .span1     { .tableColumns(1); } | ||
|  |   .span2     { .tableColumns(2); } | ||
|  |   .span3     { .tableColumns(3); } | ||
|  |   .span4     { .tableColumns(4); } | ||
|  |   .span5     { .tableColumns(5); } | ||
|  |   .span6     { .tableColumns(6); } | ||
|  |   .span7     { .tableColumns(7); } | ||
|  |   .span8     { .tableColumns(8); } | ||
|  |   .span9     { .tableColumns(9); } | ||
|  |   .span10    { .tableColumns(10); } | ||
|  |   .span11    { .tableColumns(11); } | ||
|  |   .span12    { .tableColumns(12); } | ||
|  |   .span13    { .tableColumns(13); } | ||
|  |   .span14    { .tableColumns(14); } | ||
|  |   .span15    { .tableColumns(15); } | ||
|  |   .span16    { .tableColumns(16); } | ||
|  |   .span17    { .tableColumns(17); } | ||
|  |   .span18    { .tableColumns(18); } | ||
|  |   .span19    { .tableColumns(19); } | ||
|  |   .span20    { .tableColumns(20); } | ||
|  |   .span21    { .tableColumns(21); } | ||
|  |   .span22    { .tableColumns(22); } | ||
|  |   .span23    { .tableColumns(23); } | ||
|  |   .span24    { .tableColumns(24); } | ||
|  | } |