bulma/sass/elements/table.scss

@import "../utilities/mixins";

$table-color: getVar("text-strong") !default;
$table-background-color: getVar("scheme-main") !default;

$table-cell-border: 1px solid getVar("border") !default;
$table-cell-border-width: 0 0 1px !default;
$table-cell-padding: 0.5em 0.75em !default;
$table-cell-heading-color: getVar("text-strong") !default;
$table-cell-text-align: left !default;

$table-head-cell-border-width: 0 0 2px !default;
$table-head-cell-color: getVar("text-strong") !default;
$table-foot-cell-border-width: 2px 0 0 !default;
$table-foot-cell-color: getVar("text-strong") !default;

$table-head-background-color: transparent !default;
$table-body-background-color: transparent !default;
$table-foot-background-color: transparent !default;

$table-row-hover-background-color: getVar("scheme-main-bis") !default;

$table-row-active-background-color: getVar("primary") !default;
$table-row-active-color: getVar("primary-invert") !default;

$table-striped-row-even-background-color: getVar("scheme-main-bis") !default;
$table-striped-row-even-hover-background-color: getVar(
  "scheme-main-ter"
) !default;

$table-colors: $colors !default;

:root {
  @include register-vars(
    (
      table-color: #{$table-color},
      table-background-color: #{$table-background-color},
      table-cell-border: #{$table-cell-border},
      table-cell-border-width: #{$table-cell-border-width},
      table-cell-padding: #{$table-cell-padding},
      table-cell-heading-color: #{$table-cell-heading-color},
      table-cell-text-align: #{$table-cell-text-align},
      table-head-cell-border-width: #{$table-head-cell-border-width},
      table-head-cell-color: #{$table-head-cell-color},
      table-foot-cell-border-width: #{$table-foot-cell-border-width},
      table-foot-cell-color: #{$table-foot-cell-color},
      table-head-background-color: #{$table-head-background-color},
      table-body-background-color: #{$table-body-background-color},
      table-foot-background-color: #{$table-foot-background-color},
      table-row-hover-background-color: #{$table-row-hover-background-color},
      table-row-active-background-color: #{$table-row-active-background-color},
      table-row-active-color: #{$table-row-active-color},
      table-striped-row-even-background-color: #{$table-striped-row-even-background-color},
      table-striped-row-even-hover-background-color: #{$table-striped-row-even-hover-background-color},
    )
  );
}

.#{$class-prefix}table {
  @extend %block;

  background-color: getVar("table-background-color");
  color: getVar("table-color");

  td,
  th {
    border: getVar("table-cell-border");
    border-width: getVar("table-cell-border-width");
    padding: getVar("table-cell-padding");
    vertical-align: top;

    // Colors
    @each $name, $pair in $table-colors {
      $color: nth($pair, 1);
      $color-invert: nth($pair, 2);

      &.is-#{$name} {
        background-color: $color;
        border-color: $color;
        color: $color-invert;
      }
    }

    // Modifiers
    &.is-narrow {
      white-space: nowrap;
      width: 1%;
    }

    &.is-selected {
      background-color: getVar("table-row-active-background-color");
      color: getVar("table-row-active-color");

      a,
      strong {
        color: currentColor;
      }
    }

    &.is-vcentered {
      vertical-align: middle;
    }
  }

  th {
    color: getVar("table-cell-heading-color");

    &:not([align]) {
      text-align: getVar("table-cell-text-align");
    }
  }

  tr {
    &.is-selected {
      background-color: getVar("table-row-active-background-color");
      color: getVar("table-row-active-color");

      a,
      strong {
        color: currentColor;
      }

      td,
      th {
        border-color: getVar("table-row-active-color");
        color: currentColor;
      }
    }
  }

  thead {
    background-color: getVar("table-head-background-color");

    td,
    th {
      border-width: getVar("table-head-cell-border-width");
      color: getVar("table-head-cell-color");
    }
  }

  tfoot {
    background-color: getVar("table-foot-background-color");

    td,
    th {
      border-width: getVar("table-foot-cell-border-width");
      color: getVar("table-foot-cell-color");
    }
  }

  tbody {
    background-color: getVar("table-body-background-color");

    tr {
      &:last-child {
        td,
        th {
          border-bottom-width: 0;
        }
      }
    }
  }

  // Modifiers
  &.is-bordered {
    td,
    th {
      border-width: 1px;
    }

    tr {
      &:last-child {
        td,
        th {
          border-bottom-width: 1px;
        }
      }
    }
  }

  &.is-fullwidth {
    width: 100%;
  }

  &.is-hoverable {
    tbody {
      tr:not(.is-selected) {
        &:hover {
          background-color: getVar("table-row-hover-background-color");
        }
      }
    }

    &.is-striped {
      tbody {
        tr:not(.is-selected) {
          &:hover {
            background-color: getVar("table-row-hover-background-color");

            &:nth-child(even) {
              background-color: getVar(
                "table-striped-row-even-hover-background-color"
              );
            }
          }
        }
      }
    }
  }

  &.is-narrow {
    td,
    th {
      padding: 0.25em 0.5em;
    }
  }

  &.is-striped {
    tbody {
      tr:not(.is-selected) {
        &:nth-child(even) {
          background-color: getVar("table-striped-row-even-background-color");
        }
      }
    }
  }
}

.#{$class-prefix}table-container {
  @extend %block;
  @include overflow-touch;
  overflow: auto;
  overflow-y: hidden;
  max-width: 100%;
}