themes/default/less/tables.less

   1 //
   2 // Tables.less
   3 // Tables for, you guessed it, tabular data
   4 // ----------------------------------------
   5
   6
   7 // BASE TABLES
   8 // -----------------
   9
  10 table {
  11   max-width: 100%;
  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     position: relative;
  26     padding: 8px;
  27     line-height: @baseLineHeight;
  28     text-align: left;
  29     vertical-align: top;
  30     border-top: 1px solid darken(@grayLighter, 5%);
  31   }
  32   th {
  33     font-weight: bold;
  34   }
  35   // Bottom align for column headings
  36   thead th {
  37     vertical-align: bottom;
  38     white-space: nowrap;
  39   }
  40   // Remove top border from thead by default
  41   thead:first-child tr th,
  42   thead:first-child tr td {
  43     border-top: 0;
  44   }
  45   // Account for multiple tbody instances
  46   tbody + tbody {
  47     border-top: 2px solid #ddd;
  48   }
  49 }
  50
  51
  52
  53 // CONDENSED TABLE W/ HALF PADDING
  54 // -------------------------------
  55
  56 .table-condensed {
  57   th,
  58   td {
  59     padding: 4px 5px;
  60   }
  61 }
  62
  63
  64 // BORDERED VERSION
  65 // ----------------
  66
  67 .table-bordered {
  68   border: 1px solid #ddd;
  69   border-collapse: separate; // Done so we can round those corners!
  70   *border-collapse: collapsed; // IE7 can't round corners anyway
  71   .border-radius(4px);
  72   th + th,
  73   td + td,
  74   th + td,
  75   td + th {
  76     border-left: 1px solid #ddd;
  77   }
  78   // Prevent a double border
  79   thead:first-child tr:first-child th,
  80   tbody:first-child tr:first-child th,
  81   tbody:first-child tr:first-child td {
  82     border-top: 0;
  83   }
  84   // For first th or td in the first row in the first thead or tbody
  85   thead:first-child tr:first-child th:first-child,
  86   tbody:first-child tr:first-child td:first-child {
  87     .border-radius(4px 0 0 0);
  88   }
  89   thead:first-child tr:first-child th:last-child,
  90   tbody:first-child tr:first-child td:last-child {
  91     .border-radius(0 4px 0 0);
  92   }
  93   // For first th or td in the first row in the first thead or tbody
  94   thead:last-child tr:last-child th:first-child,
  95   tbody:last-child tr:last-child td:first-child {
  96     .border-radius(0 0 0 4px);
  97   }
  98   thead:last-child tr:last-child th:last-child,
  99   tbody:last-child tr:last-child td:last-child {
 100     .border-radius(0 0 4px 0);
 101   }
 102 }
 103
 104
 105 // ZEBRA-STRIPING
 106 // --------------
 107
 108 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 109 .table-striped {
 110   tbody {
 111     tr:nth-child(odd) td,
 112     tr:nth-child(odd) th {
 113       background-color: lighten(@grayLighter, 1%);
 114     }
 115   }
 116 }
 117
 118
 119 // HOVER EFFECT
 120 // ------------
 121 // Placed here since it has to come after the potential zebra striping
 122 .table {
 123   tbody tr:hover td,
 124   tbody tr:hover th {
 125     background-color: lighten(@warningBackground, 4%);
 126   }
 127 }
 128
 129
 130 // TABLE CELL SIZING
 131 // -----------------
 132
 133 // Change the columns
 134 .tableColumns(@columnSpan: 1) {
 135   float: none;
 136   width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16;
 137   margin-left: 0;
 138 }
 139 table {
 140   .span1     { .tableColumns(1); }
 141   .span2     { .tableColumns(2); }
 142   .span3     { .tableColumns(3); }
 143   .span4     { .tableColumns(4); }
 144   .span5     { .tableColumns(5); }
 145   .span6     { .tableColumns(6); }
 146   .span7     { .tableColumns(7); }
 147   .span8     { .tableColumns(8); }
 148   .span9     { .tableColumns(9); }
 149   .span10    { .tableColumns(10); }
 150   .span11    { .tableColumns(11); }
 151   .span12    { .tableColumns(12); }
 152 }
 153
 154 // Sugar
 155 table [class^="icon-star"] {
 156   margin: 3px 0 0 16px;
 157   .opacity(40);
 158 }
 159 #stream table [class^="icon-star"] {
 160   margin: 3px 0 0 10px;
 161   .opacity(40);
 162 }
 163 table .icon-star {
 164   .opacity(100);
 165 }
 166 .subhead table th {
 167    min-width: 55px;
 168  }
 169 table th .btn-group {
 170   margin: 0 0 0 -10px;
 171 }
 172 table th .btn input {
 173   margin: -2px 0 0 0;
 174 }
 175 table td .btn-toolbar {
 176   margin: -5px 0 -10px;
 177 }
 178 .dblclick input {
 179 width: 100% !important;
 180 }