_o-table.scss

/* ============================================================================
   @OBJECTS -> TABLE
   ========================================================================= */


/**
 * A table object that provides very common table styles which can be
 * extended with a number of modifiers.
 *
 * The objects block class, its modifier class(s), and its element class(s)
 * (available as silent placeholder selectors also):
 *
   .o-table
   .o-table--striped
   .o-table--border
   .o-table--fixed
   .o-table--cell-padding-small
   .o-table--cell-padding-large
   .o-table--no-cell-padding
 *
 * @markup
   <table class="o-table [modifier(s)]" cellspacing="0">
     <tr>
       <td>Lorem</td>
       <td>Aliquam</td>
       <td>Vestibulum</td>
     </tr>
   </table>
 */


/**
 * Settings.
 */

/**
 * Apply at these breakpoints (turned off by default).
 */

$o-table-apply-at-breakpoints:                         $default-breakpoints !default;

// From the above breakpoints choose what you wish to apply it too
$o-table-apply-at-breakpoints-for-default:             false !default;

$o-table-apply-at-breakpoints-for-striped:             false !default;

$o-table-apply-at-breakpoints-for-border:              false !default;

$o-table-apply-at-breakpoints-for-fixed:               false !default;

$o-table-apply-at-breakpoints-for-cell-padding-small:  false !default;

$o-table-apply-at-breakpoints-for-cell-padding-large:  false !default;

$o-table-apply-at-breakpoints-for-cell-padding-none:   false !default;

/**
 * Cell padding.
 */

$o-table-cell-padding-base:                            $spacing-half !default;

$o-table-cell-padding-small:                           $spacing-quarter !default;

$o-table-cell-padding-large:                           $spacing-base !default;

/**
 * Cosmetics.
 */

$o-table-border-color:                                 darken($color-white, 10%) !default;

$o-table-border-thickness:                             1 !default;

$o-table-border-style:                                 solid !default;

$o-table-striped-background-cell-color:                $o-table-border-color !default;


%o-table,
.o-table {
  // Stretch to full width of it's parent
  width: 100%;

  // Some sensible defaults
  caption,
  th {
    text-align: left;
  }

  // Cell padding
  th,
  td {
    @include to-rem(padding, $o-table-cell-padding-base);
  }
}

@if $o-table-apply-at-breakpoints-for-default {
  @include generate-at-breakpoints('.o-table', $o-table-apply-at-breakpoints) {
    width: 100%;

    caption,
    th {
      text-align: left;
    }

    th,
    td {
      @include to-rem(padding, $o-table-cell-padding-base);
    }
  }
}


/**
 * Modifier: striped.
 *
 * Applies a background colour to every odd row.
 */

%o-table--striped,
.o-table--striped {
  tr:nth-of-type(odd) td {
    background-color: $o-table-striped-background-cell-color;
  }
}

@if $o-table-apply-at-breakpoints-for-striped {
  @include generate-at-breakpoints('.o-table--striped',
    $o-table-apply-at-breakpoints) {
    tr:nth-of-type(odd) td {
      background-color: $o-table-striped-background-cell-color;
    }
  }
}


/**
 * Modifier: border.
 */

%o-table--border,
.o-table--border {
  th,
  td {
    border: strip-unit($o-table-border-thickness) * 1px $o-table-border-style
      $o-table-border-color;

    // No borders for empty cells
    &:empty {
      border: 0;
    }
  }
}

@if $o-table-apply-at-breakpoints-for-border {
  @include generate-at-breakpoints('.o-table--border',
    $o-table-apply-at-breakpoints) {
    th,
    td {
      border: strip-unit($o-table-border-thickness) * 1px $o-table-border-style
        $o-table-border-color;

      &:empty {
        border: 0;
      }
    }
  }
}


/**
 * Modifier: layout fixed, force tables into having equal-width columns.
 */

%o-table--fixed,
.o-table--fixed {
  table-layout: fixed;
}

@if $o-table-apply-at-breakpoints-for-fixed {
  @include generate-at-breakpoints('.o-table--fixed', $o-table-apply-at-breakpoints) {
    table-layout: fixed;
  }
}


/**
 * Modifiers: cell padding.
 */

// Small padding
%o-table--cell-padding-small,
.o-table--cell-padding-small {
  th,
  td {
    @include to-rem(padding, $o-table-cell-padding-small);
  }
}

@if $o-table-apply-at-breakpoints-for-cell-padding-small {
  @include generate-at-breakpoints('.o-table--cell-padding-small',
    $o-table-apply-at-breakpoints) {
    th,
    td {
      @include to-rem(padding, $o-table-cell-padding-small);
    }
  }
}


// Large padding
%o-table--cell-padding-large,
.o-table--cell-padding-large {
  th,
  td {
    @include to-rem(padding, $o-table-cell-padding-large);
  }
}

@if $o-table-apply-at-breakpoints-for-cell-padding-large {
  @include generate-at-breakpoints('.o-table--cell-padding-large',
    $o-table-apply-at-breakpoints) {
    th,
    td {
      @include to-rem(padding, $o-table-cell-padding-large);
    }
  }
}


// No padding
%o-table--no-cell-padding,
.o-table--no-cell-padding {
  th,
  td {
    padding: 0;
  }
}

@if $o-table-apply-at-breakpoints-for-cell-padding-none {
  @include generate-at-breakpoints('.o-table--no-cell-padding',
    $o-table-apply-at-breakpoints) {
    th,
    td {
      padding: 0;
    }
  }
}