[Summary view] [Print] [Text view]

   1  //
   2  // Tables
   3  // --------------------------------------------------
   4  
   5  
   6  // BASE TABLES
   7  // -----------------
   8  
   9  table {
  10    max-width: 100%;
  11    background-color: @tableBackground;
  12    border-collapse: collapse;
  13    border-spacing: 0;
  14  }
  15  
  16  // BASELINE STYLES
  17  // ---------------
  18  
  19  .table {
  20    width: 100%;
  21    margin-bottom: @baseLineHeight;
  22    // Cells
  23    th,
  24    td {
  25      padding: 8px;
  26      line-height: @baseLineHeight;
  27      text-align: left;
  28      vertical-align: top;
  29      border-top: 1px solid @tableBorder;
  30    }
  31    th {
  32      font-weight: bold;
  33    }
  34    // Bottom align for column headings
  35    thead th {
  36      vertical-align: bottom;
  37    }
  38    // Remove top border from thead by default
  39    caption + thead tr:first-child th,
  40    caption + thead tr:first-child td,
  41    colgroup + thead tr:first-child th,
  42    colgroup + thead tr:first-child td,
  43    thead:first-child tr:first-child th,
  44    thead:first-child tr:first-child td {
  45      border-top: 0;
  46    }
  47    // Account for multiple tbody instances
  48    tbody + tbody {
  49      border-top: 2px solid @tableBorder;
  50    }
  51  
  52    // Nesting
  53    .table {
  54      background-color: @bodyBackground;
  55    }
  56  }
  57  
  58  
  59  
  60  // CONDENSED TABLE W/ HALF PADDING
  61  // -------------------------------
  62  
  63  .table-condensed {
  64    th,
  65    td {
  66      padding: 4px 5px;
  67    }
  68  }
  69  
  70  
  71  // BORDERED VERSION
  72  // ----------------
  73  
  74  .table-bordered {
  75    border: 1px solid @tableBorder;
  76    border-collapse: separate; // Done so we can round those corners!
  77    *border-collapse: collapse; // IE7 can't round corners anyway
  78    border-left: 0;
  79    .border-radius(@baseBorderRadius);
  80    th,
  81    td {
  82      border-left: 1px solid @tableBorder;
  83    }
  84    // Prevent a double border
  85    caption + thead tr:first-child th,
  86    caption + tbody tr:first-child th,
  87    caption + tbody tr:first-child td,
  88    colgroup + thead tr:first-child th,
  89    colgroup + tbody tr:first-child th,
  90    colgroup + tbody tr:first-child td,
  91    thead:first-child tr:first-child th,
  92    tbody:first-child tr:first-child th,
  93    tbody:first-child tr:first-child td {
  94      border-top: 0;
  95    }
  96    // For first th/td in the first row in the first thead or tbody
  97    thead:first-child tr:first-child > th:first-child,
  98    tbody:first-child tr:first-child > td:first-child,
  99    tbody:first-child tr:first-child > th:first-child {
 100      .border-top-left-radius(@baseBorderRadius);
 101    }
 102    // For last th/td in the first row in the first thead or tbody
 103    thead:first-child tr:first-child > th:last-child,
 104    tbody:first-child tr:first-child > td:last-child,
 105    tbody:first-child tr:first-child > th:last-child {
 106      .border-top-right-radius(@baseBorderRadius);
 107    }
 108    // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
 109    thead:last-child tr:last-child > th:first-child,
 110    tbody:last-child tr:last-child > td:first-child,
 111    tbody:last-child tr:last-child > th:first-child,
 112    tfoot:last-child tr:last-child > td:first-child,
 113    tfoot:last-child tr:last-child > th:first-child {
 114      .border-bottom-left-radius(@baseBorderRadius);
 115    }
 116    // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
 117    thead:last-child tr:last-child > th:last-child,
 118    tbody:last-child tr:last-child > td:last-child,
 119    tbody:last-child tr:last-child > th:last-child,
 120    tfoot:last-child tr:last-child > td:last-child,
 121    tfoot:last-child tr:last-child > th:last-child {
 122      .border-bottom-right-radius(@baseBorderRadius);
 123    }
 124  
 125    // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
 126    tfoot + tbody:last-child tr:last-child td:first-child {
 127      .border-bottom-left-radius(0);
 128    }
 129    tfoot + tbody:last-child tr:last-child td:last-child {
 130      .border-bottom-right-radius(0);
 131    }
 132  
 133    // Special fixes to round the left border on the first td/th
 134    caption + thead tr:first-child th:first-child,
 135    caption + tbody tr:first-child td:first-child,
 136    colgroup + thead tr:first-child th:first-child,
 137    colgroup + tbody tr:first-child td:first-child {
 138      .border-top-left-radius(@baseBorderRadius);
 139    }
 140    caption + thead tr:first-child th:last-child,
 141    caption + tbody tr:first-child td:last-child,
 142    colgroup + thead tr:first-child th:last-child,
 143    colgroup + tbody tr:first-child td:last-child {
 144      .border-top-right-radius(@baseBorderRadius);
 145    }
 146  
 147  }
 148  
 149  
 150  
 151  
 152  // ZEBRA-STRIPING
 153  // --------------
 154  
 155  // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 156  .table-striped {
 157    tbody {
 158      > tr:nth-child(odd) > td,
 159      > tr:nth-child(odd) > th {
 160        background-color: @tableBackgroundAccent;
 161      }
 162    }
 163  }
 164  
 165  
 166  // HOVER EFFECT
 167  // ------------
 168  // Placed here since it has to come after the potential zebra striping
 169  .table-hover {
 170    tbody {
 171      tr:hover > td,
 172      tr:hover > th {
 173        background-color: @tableBackgroundHover;
 174      }
 175    }
 176  }
 177  
 178  
 179  // TABLE CELL SIZING
 180  // -----------------
 181  
 182  // Reset default grid behavior
 183  table td[class*="span"],
 184  table th[class*="span"],
 185  .row-fluid table td[class*="span"],
 186  .row-fluid table th[class*="span"] {
 187    display: table-cell;
 188    float: none; // undo default grid column styles
 189    margin-left: 0; // undo default grid column styles
 190  }
 191  
 192  // Change the column widths to account for td/th padding
 193  .table td,
 194  .table th {
 195    &.span1     { .tableColumns(1); }
 196    &.span2     { .tableColumns(2); }
 197    &.span3     { .tableColumns(3); }
 198    &.span4     { .tableColumns(4); }
 199    &.span5     { .tableColumns(5); }
 200    &.span6     { .tableColumns(6); }
 201    &.span7     { .tableColumns(7); }
 202    &.span8     { .tableColumns(8); }
 203    &.span9     { .tableColumns(9); }
 204    &.span10    { .tableColumns(10); }
 205    &.span11    { .tableColumns(11); }
 206    &.span12    { .tableColumns(12); }
 207  }
 208  
 209  
 210  
 211  // TABLE BACKGROUNDS
 212  // -----------------
 213  // Exact selectors below required to override .table-striped
 214  
 215  .table tbody tr {
 216    &.success > td {
 217      background-color: @successBackground;
 218    }
 219    &.error > td {
 220      background-color: @errorBackground;
 221    }
 222    &.warning > td {
 223      background-color: @warningBackground;
 224    }
 225    &.info > td {
 226      background-color: @infoBackground;
 227    }
 228  }
 229  
 230  // Hover states for .table-hover
 231  .table-hover tbody tr {
 232    &.success:hover > td {
 233      background-color: darken(@successBackground, 5%);
 234    }
 235    &.error:hover > td {
 236      background-color: darken(@errorBackground, 5%);
 237    }
 238    &.warning:hover > td {
 239      background-color: darken(@warningBackground, 5%);
 240    }
 241    &.info:hover > td {
 242      background-color: darken(@infoBackground, 5%);
 243    }
 244  }