_mixins.scss

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

@import '~@react-md/divider/dist/mixins';
@import '~@react-md/theme/dist/mixins';
@import '~@react-md/typography/dist/mixins';
@import '~@react-md/transition/dist/mixins';
@import '~@react-md/utils/dist/mixins';
@import './functions';
@import './variables';

/// Creates the styles for one of the table's theme values. This is mostly going
/// to be an internal helper mixin util.
///
/// @param {String} property - The property to set a `rmd-table-theme-values`
/// value to.
/// @param {String} theme-style - One of the keys of `rmd-table-theme-values` to
/// extract a value from.
/// @param {Color|String|Number} fallback [null] - A fallback value to use if
/// the css variable isn't set somehow. This will default to automatically
/// retrieving the default value from the `rmd-table-theme-values` map when
/// `null`.
@mixin rmd-table-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-table-theme-values,
    table
  );
}

/// Updates one of the table's theme variables with the new value for the
/// section of your app.
///
/// @param {String} theme-style - The table theme style type to update. This
/// should be one of the `$rmd-table-theme-values` keys.
/// @param {Color|String|Number} value - The new value to use.
@mixin rmd-table-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-table-theme-values,
    table
  );
}

/// Creates the base styles for the `<table>` element.
/// @access private
@mixin rmd-table {
  border-collapse: collapse;
  max-width: 100%;

  &--dense {
    @include rmd-table-theme-update-var(
      cell-height,
      rmd-table-theme-var(cell-dense-height)
    );
  }

  &--full-width {
    width: 100%;
  }
}

/// @access private
@mixin rmd-thead {
  @if $rmd-table-cell-height != $rmd-table-header-cell-height {
    @include rmd-table-theme-update-var(
      cell-height,
      $rmd-table-header-cell-height
    );
  }

  @if $rmd-table-cell-dense-height != $rmd-table-header-cell-dense-height {
    // TODO: Look into a better way to do this since it makes overrides more difficult.
    .rmd-table--dense & {
      @include rmd-table-theme-update-var(
        cell-height,
        $rmd-table-header-cell-dense-height
      );
    }
  }
}

/// @access private
@mixin rmd-table-cell-horizontal-alignments {
  @each $alignment in $rmd-table-cell-horizontal-alignments {
    &--#{$alignment} {
      @include rmd-utils-rtl {
        @if $alignment == left {
          text-align: right;
        } @else if $alignment == right {
          text-align: left;
        }
      }

      text-align: $alignment;
    }
  }
}

/// @access private
@mixin rmd-table-cell-vertical-alignments {
  @if $rmd-table-cell-vertical-alignments {
    @each $alignment in $rmd-table-cell-vertical-alignments {
      &--#{$alignment} {
        vertical-align: $alignment;
      }
    }

    &--vertical {
      @include rmd-table-theme(padding-top, cell-v-padding);
      @include rmd-table-theme(padding-bottom, cell-v-padding);
    }
  }
}

/// Creates all the styles for the `<th>` and `<td>` elements.
/// @access private
@mixin rmd-table-cell {
  @include rmd-typography(body-2);
  @include rmd-table-theme(color, cell-color);
  @include rmd-table-theme(height, cell-height);
  @include rmd-table-theme(padding-left, cell-h-padding);
  @include rmd-table-theme(padding-right, cell-h-padding);
  @include rmd-table-cell-vertical-alignments;

  &--header {
    @if $rmd-table-cell-color != $rmd-table-header-cell-color {
      @include rmd-table-theme-update-var(
        cell-color,
        $rmd-table-header-cell-color
      );
    }
    @include rmd-typography-value(
      subtitle-2,
      font-weight,
      letter-spacing,
      line-height
    );
    @include rmd-utils-rtl {
      text-align: right;
    }

    text-align: left;
  }

  // stylelint-disable order/order
  // want this to come after the header since the "default" should be
  // `text-align: left` but browser have `<th>` defaulted to `text-align:
  // center`. If this is included before the `--header` state, it won't be
  // applied
  @include rmd-table-cell-horizontal-alignments;

  &--grow {
    width: 100%;
  }

  &--no-wrap {
    @include rmd-typography-text-overflow-ellipsis;
  }

  &--checkbox {
    @include rmd-table-theme-update-var(
      cell-h-padding,
      $rmd-table-checkbox-padding
    );
  }

  &--sticky {
    // need to set a background color so the other rows/cells can be scrolled
    // underneath.
    @include rmd-theme(background-color, background);
    @include rmd-utils-mouse-only {
      &::after {
        @include rmd-transition(standard);

        transition: background-color $rmd-transition-standard-time;
      }
    }

    // see the `::after` selector for info about border and background color,
    // but this _should_ inherit the border from the `<tr>` only when the
    // `--bordered` class is also enabled
    border: inherit;
    position: sticky;
    will-change: transform;
    z-index: $rmd-table-cell-sticky-z-index;

    &::after {
      // ok. fun stuff. if position sticky is set on a table that has
      // `border-collapse: collapse`, borders will not visible on these cells.
      // to re-enable the borders (and hover color), we can create a full-sized
      // `::after` pseudo element that will gain the border and background-color
      // when hovered. this probably isn't the best solution, but it works for
      // these use-cases.
      @include rmd-utils-full-screen(absolute);

      // the border should inherit the parent border... which is inherited from
      // the `<tr>` only when the `--bordered` class has been enabled.. Woo!...
      border: inherit;
      content: '';
      pointer-events: none;
    }
  }

  &--sticky-header {
    @include rmd-table-theme(top, sticky-header);
  }

  &--sticky-cell {
    @include rmd-utils-rtl {
      @include rmd-table-theme(right, sticky-cell);

      left: auto;
    }
    @include rmd-table-theme(left, sticky-cell);
  }

  &--sticky-above {
    // need to increase by one more so it can cover other sticky cells
    z-index: $rmd-table-cell-sticky-z-index + 1;
  }

  &--sticky-footer {
    @include rmd-table-theme(bottom, sticky-footer);
  }

  &--padded {
    @include rmd-table-theme(padding-bottom, cell-v-padding);
    @include rmd-table-theme(padding-top, cell-v-padding);
  }

  &--no-padding {
    // this is used with the `__size` to make a parent element
    // (usually clickable) be the full size and height of the cell
    padding: 0;
  }

  &__child {
    @include rmd-table-theme(padding-left, cell-h-padding);
    @include rmd-table-theme(padding-right, cell-h-padding);

    align-items: center;
    color: inherit;
    font: inherit;
    height: 100%;
    width: 100%;

    @each $alignment in $rmd-table-cell-horizontal-alignments {
      &--#{$alignment} {
        @include rmd-utils-rtl {
          @if $alignment == left {
            justify-content: right;
          } @else if $alignment == right {
            justify-content: left;
          }
        }

        @if $alignment != left {
          justify-content: $alignment;
        }
      }
    }
  }
}

/// Creates the styles for the `<tr>` element.
///
/// Note: The base class actually has no styles.
/// @access private
@mixin rmd-table-row {
  &--selected {
    @include rmd-table-theme(background-color, selected-color);

    .rmd-table-cell--sticky-cell::after {
      @include rmd-table-theme(background-color, selected-color);
    }
  }

  &--clickable:hover {
    cursor: pointer;
  }

  &--bordered {
    border-bottom: rmd-divider-theme-var(size) solid
      rmd-table-theme-var(border-color);

    // this is actually pretty nice since it'll also NOT create a border on the
    // header row (which we want)
    &:last-child {
      border-bottom-width: 0;
    }
  }

  &--hoverable {
    @include rmd-utils-mouse-only {
      @include rmd-transition(standard);

      transition: background-color $rmd-transition-standard-time;

      &:hover {
        @include rmd-table-theme(background-color, hover-color);

        // see the `.rmd-table-cell--sticky` selector for more info :/
        .rmd-table-cell--sticky-cell::after {
          @include rmd-table-theme(background-color, hover-color);
        }
      }
    }
  }
}

/// Creates all the styles for the table package.
@mixin react-md-table {
  @include rmd-theme-create-root-theme($rmd-table-theme-values, table);

  .rmd-table-container {
    @include rmd-utils-scroll;
  }

  .rmd-table {
    @include rmd-table;
  }

  .rmd-thead {
    @include rmd-thead;
  }

  .rmd-table-cell {
    @include rmd-table-cell;
  }

  .rmd-tr {
    @include rmd-table-row;
  }

  .rmd-caption {
    @include rmd-typography(caption);
  }
}