Synnefo » snf-cloudcms

/*

 * Tables.less

 * Tables for, you guessed it, tabular data

 * ---------------------------------------- */

// BASELINE STYLES

// ---------------

table {

  width: 100%;

  margin-bottom: @baseline;

  padding: 0;

  font-size: @basefont;

  border-collapse: collapse;

  th,

  td {

    padding: 10px 10px 9px;

    line-height: @baseline;

    text-align: left;

  }

  th {

    padding-top: 9px;

    font-weight: bold;

    vertical-align: middle;

  }

  td {

    vertical-align: top;

    border-top: 1px solid #ddd;

  }

  // When scoped to row, fix th in tbody

  tbody th {

    border-top: 1px solid #ddd;

    vertical-align: top;

  }

}

// CONDENSED VERSION

// -----------------

.condensed-table {

  th,

  td {

    padding: 5px 5px 4px;

  }

}

// BORDERED VERSION

// ----------------

.bordered-table {

  border: 1px solid #ddd;

  border-collapse: separate; // Done so we can round those corners!

  *border-collapse: collapse; /* IE7, collapse table to remove spacing */

  .border-radius(4px);

  th + th,

  td + td,

  th + td {

    border-left: 1px solid #ddd;

  }

  thead tr:first-child th:first-child,

  tbody tr:first-child td:first-child {

    .border-radius(4px 0 0 0);

  }

  thead tr:first-child th:last-child,

  tbody tr:first-child td:last-child {

    .border-radius(0 4px 0 0);

  }

  tbody tr:last-child td:first-child {

    .border-radius(0 0 0 4px);

  }

  tbody tr:last-child td:last-child {

    .border-radius(0 0 4px 0);

  }

}

// TABLE CELL SIZES

// ----------------

// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border

.tableColumns(@columnSpan: 1) {

  width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));

}

table {

  // Default columns

  .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); }

}

// ZEBRA-STRIPING

// --------------

// Default zebra-stripe styles (alternating gray and transparent backgrounds)

.zebra-striped {

  tbody {

    tr:nth-child(odd) td,

    tr:nth-child(odd) th {

      background-color: #f9f9f9;

    }

    tr:hover td,

    tr:hover th {

      background-color: #f5f5f5;

    }

  }

}

table {

  // Tablesorting styles w/ jQuery plugin

  .header {

    cursor: pointer;

    &:after {

      content: "";

      float: right;

      margin-top: 7px;

      border-width: 0 4px 4px;

      border-style: solid;

      border-color: #000 transparent;

      visibility: hidden;

    }

  }

  // Style the sorted column headers (THs)

  .headerSortUp,

  .headerSortDown {

    background-color: rgba(141,192,219,.25);

    text-shadow: 0 1px 1px rgba(255,255,255,.75);

  }

  // Style the ascending (reverse alphabetical) column header

  .header:hover {

    &:after {

      visibility:visible;

    }

  }

  // Style the descending (alphabetical) column header

  .headerSortDown,

  .headerSortDown:hover {

    &:after {

      visibility:visible;

      .opacity(60);

    }

  }

  // Style the ascending (reverse alphabetical) column header

  .headerSortUp {

    &:after {

      border-bottom: none;

      border-left: 4px solid transparent;

      border-right: 4px solid transparent;

      border-top: 4px solid #000;

      visibility:visible;

      .box-shadow(none); //can't add boxshadow to downward facing arrow :(

      .opacity(60);

    }

  }

  // Blue Table Headings

  .blue {

    color: @blue;

    border-bottom-color: @blue;

  }

  .headerSortUp.blue,

  .headerSortDown.blue {

    background-color: lighten(@blue, 40%);

  }

  // Green Table Headings

  .green {

    color: @green;

    border-bottom-color: @green;

  }

  .headerSortUp.green,

  .headerSortDown.green {

    background-color: lighten(@green, 40%);

  }

  // Red Table Headings

  .red {

    color: @red;

    border-bottom-color: @red;

  }

  .headerSortUp.red,

  .headerSortDown.red {

    background-color: lighten(@red, 50%);

  }

  // Yellow Table Headings

  .yellow {

    color: @yellow;

    border-bottom-color: @yellow;

  }

  .headerSortUp.yellow,

  .headerSortDown.yellow {

    background-color: lighten(@yellow, 40%);

  }

  // Orange Table Headings

  .orange {

    color: @orange;

    border-bottom-color: @orange;

  }

  .headerSortUp.orange,

  .headerSortDown.orange {

    background-color: lighten(@orange, 40%);

  }

  // Purple Table Headings

  .purple {

    color: @purple;

    border-bottom-color: @purple;

  }

  .headerSortUp.purple,

  .headerSortDown.purple {

    background-color: lighten(@purple, 40%);

  }

}