foundation-sites/scss/components/_table.scss

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

// sass-lint:disable force-element-nesting, no-qualifying-elements

////
/// @group table
////

/// Default color for table background.
/// @type Color
$table-background: $white  !default;

/// Default scale for darkening the striped table rows and the table border.
/// @type Number
$table-color-scale: 5% !default;

/// Default style for table border.
/// @type List
$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;

/// Default padding for table.
/// @type Number
$table-padding: rem-calc(8 10 10) !default;

/// Default scale for darkening the table rows on hover.
/// @type Number
$table-hover-scale: 2% !default;

/// Default color of standard rows on hover.
/// @type List
$table-row-hover: darken($table-background, $table-hover-scale) !default;

/// Default color of striped rows on hover.
/// @type List
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;

/// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.
/// @type Boolean
$table-is-striped: true !default;

/// Default background color for striped rows.
/// @type Color
$table-striped-background: smart-scale($table-background, $table-color-scale) !default;

/// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.
/// @type Keyword
$table-stripe: even !default;

/// Default color for header background.
/// @type Color
$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;

/// Default color of header rows on hover.
/// @type List
$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;

/// Default color for footer background.
/// @type Color
$table-foot-background: smart-scale($table-background, $table-color-scale) !default;

/// Default color of footer rows on hover.
/// @type List
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;

/// Default font color for header.
/// @type Color
$table-head-font-color: $body-font-color !default;

/// Default font color for footer.
/// @type Color
$table-foot-font-color: $body-font-color !default;

/// Default value for showing the header when using stacked tables.
/// @type Boolean
$show-header-for-stacked: false !default;

/// Breakpoint at which stacked table switches from mobile to desktop view.
/// @type Breakpoint
$table-stack-breakpoint: medium !default;

@mixin -zf-table-stripe($stripe: $table-stripe) {
  tr {
    // If stripe is set to even, darken the even rows.
    @if $stripe == even {
      &:nth-child(even) {
        border-bottom: 0;
        background-color: $table-striped-background;
      }
    }

    // If stripe is set to odd, darken the odd rows.
    @else if $stripe == odd {
      &:nth-child(odd) {
        background-color: $table-striped-background;
      }
    }
  }
}

@mixin -zf-table-unstripe() {
  tr {
    border-bottom: 0;
    border-bottom: $table-border;
    background-color: $table-background;
  }
}

@mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) {
  thead,
  tbody,
  tfoot {
    border: $table-border;
    background-color: $table-background;
  }

  // Caption
  caption {
    padding: $table-padding;
    font-weight: $global-weight-bold;
  }

  // Table head
  thead {
    background: $table-head-background;
    color: $table-head-font-color;
  }

  // Table foot
  tfoot {
    background: $table-foot-background;
    color: $table-foot-font-color;
  }

  // Table head and foot
  thead,
  tfoot {
    // Rows within head and foot
    tr {
      background: transparent;
    }

    // Cells within head and foot
    th,
    td {
      padding: $table-padding;
      font-weight: $global-weight-bold;
      text-align: #{$global-left};
    }
  }

  // Table rows
  tbody {
    th,
    td {
      padding: $table-padding;
    }
  }

  // If tables are striped
  @if $is-striped == true {
    tbody {
      @include -zf-table-stripe($stripe);
    }

    &.unstriped {
      tbody {
        @include -zf-table-unstripe();
        background-color: $table-background;
      }
    }
  }

  // If tables are not striped
  @else if $is-striped == false {
    tbody {
      @include -zf-table-unstripe();
    }

    &.striped {
      tbody {
        @include -zf-table-stripe($stripe);
      }
    }
  }
}

/// Adds the general styles for tables.
/// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even.
@mixin table(
  $stripe: $table-stripe,
  $nest: false
) {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: $global-margin;
  border-radius: $global-radius;

  @if $nest {
    @include -zf-table-children-styles($stripe);
  }
  @else {
    @at-root {
      @include -zf-table-children-styles($stripe);
    }
  }
}

/// Adds the ability to horizontally scroll the table when the content overflows horizontally.
@mixin table-scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
}

/// Slightly darkens the table rows on hover.
@mixin table-hover {
  thead tr {
    //Darkens the table header rows on hover.
    &:hover {
      background-color: $table-head-row-hover;
    }
  }

  tfoot tr {
    //Darkens the table footer rows on hover.
    &:hover {
      background-color: $table-foot-row-hover;
    }
  }

  tbody tr {
    //Darkens the non-striped table rows on hover.
    &:hover {
      background-color: $table-row-hover;
    }
  }

  @if $table-is-striped == true {
    // Darkens the even striped table rows.
    @if($table-stripe == even) {
      &:not(.unstriped) tr:nth-of-type(even):hover {
        background-color: $table-row-stripe-hover;
      }
    }

    // Darkens the odd striped table rows.
    @elseif($table-stripe == odd) {
      &:not(.unstriped) tr:nth-of-type(odd):hover {
        background-color: $table-row-stripe-hover;
      }
    }
  }

  @else if $table-is-striped == false {
    // Darkens the even striped table rows.
    @if($table-stripe == even) {
      &.striped tr:nth-of-type(even):hover {
        background-color: $table-row-stripe-hover;
      }
    }

    // Darkens the odd striped table rows.
    @elseif($table-stripe == odd) {
      &.striped tr:nth-of-type(odd):hover {
        background-color: $table-row-stripe-hover;
      }
    }
  }
}

/// Adds styles for a stacked table. Useful for small-screen layouts.
/// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked.
@mixin table-stack($header: $show-header-for-stacked) {
  @if $header {
    thead {
      th {
        display: block;
      }
    }
  }
  @else {
    thead {
      display: none;
    }
  }

  tfoot {
    display: none;
  }

  tr,
  th,
  td {
    display: block;
  }

  td {
    border-top: 0;
  }
}

@mixin foundation-table($nest: false) {
  table {
    @include table($nest: $nest);
  }

  table.stack {
    @include breakpoint($table-stack-breakpoint down) {
      @include table-stack;
    }
  }

  table.scroll {
    @include table-scroll;
  }

  table.hover {
    @include table-hover;
  }

  .table-scroll {
    overflow-x: auto;

    table {
      width: auto;
    }
  }
}