carbon-components/scss/components/data-table-v2/_data-table-v2-core.scss

//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import '../../globals/scss/css--typography';
@import '../../globals/scss/functions';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../../globals/scss/vars';

@mixin data-table-v2-core {
  .#{$prefix}--data-table-v2-container {
    width: 100%;
    min-width: rem(500px);
    overflow-x: auto;
    padding-top: $spacing-3xs; // allow space for focus styles
  }

  .#{$prefix}--data-table-v2 {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border-bottom: 1px solid $ui-03;

    @if feature-flag-enabled('breaking-changes-x') {
      min-width: rem(500px);
    }

    thead {
      @include typescale('zeta');
      background-color: $ui-02;
      font-weight: 700;
      border-right: 1px solid $ui-03;
    }

    tbody {
      @include typescale('zeta');
      background-color: $ui-01;
      border-right: 1px solid $ui-03;
    }

    tr {
      height: rem(48px);

      &:hover {
        td {
          background-color: rgba($brand-02, 0.1);
          border-top: 1px solid $brand-01;
          border-bottom: 1px solid $brand-01;

          &:first-of-type {
            border-left: 1px solid $brand-01;
          }

          &:last-of-type {
            border-right: 1px solid $brand-01;
          }
        }

        .#{$prefix}--overflow-menu {
          opacity: 1;
        }
      }
    }

    th {
      border-top: 1px solid $ui-03;
    }

    th,
    td {
      @include typescale('zeta');
      border-top: 1px solid $ui-03;
      padding-left: $spacing-sm;
      vertical-align: middle;
      text-align: left;
      color: $text-01;

      &:first-of-type {
        padding-left: rem(24px);
        border-left: 1px solid $ui-03;
      }

      &:last-of-type {
        padding-right: $spacing-lg;
      }
    }

    // Overrrides
    .#{$prefix}--checkbox-label {
      padding-left: rem(28px);
    }

    .#{$prefix}--overflow-menu {
      opacity: 0;

      &:focus {
        outline: 0;
        opacity: 1;
        box-shadow: none;

        .#{$prefix}--overflow-menu__icon {
          box-shadow: inset 0px 0px 0px 1px $brand-01;
        }
      }
    }

    .#{$prefix}--overflow-menu__icon {
      transform: rotate(90deg);
    }
  }

  // Options

  .#{$prefix}--data-table-v2-header {
    margin-bottom: $spacing-xs;
    color: $text-01;
  }

  .#{$prefix}--data-table-v2--zebra {
    tbody tr:nth-child(even) {
      background-color: $ui-02;
    }
  }

  .#{$prefix}--data-table-v2--no-border {
    & {
      border-bottom-color: transparent;
    }

    thead,
    tbody {
      border-right-color: transparent;
    }

    th,
    td {
      &:first-of-type {
        border-left-color: transparent;
      }
    }
  }

  .#{$prefix}--data-table-v2--compact {
    tbody tr {
      height: rem(24px);
    }
  }

  .#{$prefix}--data-table-v2--short {
    tbody tr {
      height: rem(32px);
    }
  }

  .#{$prefix}--data-table-v2--tall {
    tbody tr {
      height: rem(64px);
    }
  }

  .#{$prefix}--data-table-v2--static {
    width: auto;
  }

  .#{$prefix}--data-table-v2--zebra tbody tr.#{$prefix}--data-table-v2--selected,
  tbody tr.#{$prefix}--data-table-v2--selected {
    background-color: rgba($brand-02, 0.1);
  }
}

@mixin data-table-v2-core--x {
  //----------------------------------------------------------------------------
  // Container
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table-v2-container {
    min-width: rem(500px);
    overflow-x: auto;
    padding-top: $spacing-01; // allow space for focus styles
  }

  //----------------------------------------------------------------------------
  // Table title text
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table-v2-header {
    background: $ui-01;
    height: rem(88px);
    padding: rem(22px) 0 0 $spacing-05;
  }

  .#{$prefix}--data-table-v2-header__title {
    @include type-style('productive-heading-03');
    color: $text-01;
  }

  .#{$prefix}--data-table-v2-header__description {
    @include type-style('body-short-01');
    color: $text-02;
  }

  //----------------------------------------------------------------------------
  // Data table
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table-v2 {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
  }

  .#{$prefix}--data-table-v2 thead {
    @include type-style('heading-01');
    background-color: $ui-03;
  }

  .#{$prefix}--data-table-v2 tbody {
    @include type-style('body-short-01');
    background-color: $ui-01;
    width: 100%;
  }

  .#{$prefix}--data-table-v2 tr {
    border: none;
    height: $layout-04;
    width: 100%;
  }

  .#{$prefix}--data-table-v2 tbody tr:hover {
    background: $hover-field;
  }

  .#{$prefix}--data-table-v2 tbody tr:hover td {
    color: $text-01;
    background: $hover-field;
    border-bottom: 1px solid $hover-field;
    border-top: 1px solid $hover-field;
  }

  .#{$prefix}--data-table-v2 th,
  .#{$prefix}--data-table-v2 td {
    padding-left: $spacing-04;
    padding-right: $spacing-04;
    vertical-align: top;
    text-align: left;
  }

  .#{$prefix}--data-table-v2 th {
    color: $text-01;
    background-color: $ui-03;
    border-top: 1px solid $ui-03;
    border-bottom: 1px solid $ui-03;
  }

  .#{$prefix}--data-table-v2 th:first-of-type {
    padding-left: $spacing-05;
  }

  .#{$prefix}--data-table-v2 .#{$prefix}--table-header-label {
    display: block;
    padding: rem(14px) 0;
  }

  .#{$prefix}--data-table-v2 td {
    background: $ui-01;
    color: $text-02;
    border-top: 1px solid $ui-01;
    border-bottom: 1px solid $ui-03;
    padding: rem(14px) $spacing-04;
    padding-bottom: rem(13px);
  }

  .#{$prefix}--data-table-v2 td:first-of-type {
    padding-left: $spacing-05;
  }

  .#{$prefix}--data-table-v2 td:last-of-type {
    padding-right: $spacing-05;
  }

  // specific padding for overflow menu columns
  .#{$prefix}--data-table-v2 .#{$prefix}--table-column-menu,
  .#{$prefix}--data-table-v2 .#{$prefix}--table-column-menu:last-of-type {
    padding-top: $spacing-03;
    padding-right: $spacing-03;
  }

  .#{$prefix}--data-table-v2 td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='false']:hover {
    background: $ui-03;
  }

  // Overflow Menu Overrides
  .#{$prefix}--data-table-v2 td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='false']:focus {
    @include focus-outline('outline');
  }

  .#{$prefix}--data-table-v2 td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='true']:focus {
    outline: none;
  }

  .#{$prefix}--data-table-v2 td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu .#{$prefix}--overflow-menu__icon {
    opacity: 0;
  }

  .#{$prefix}--data-table-v2 td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu:hover .#{$prefix}--overflow-menu__icon,
  .#{$prefix}--data-table-v2 td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu:focus .#{$prefix}--overflow-menu__icon,
  .#{$prefix}--data-table-v2
    tr:hover
    td.#{$prefix}--table-column-menu
    .#{$prefix}--overflow-menu
    .#{$prefix}--overflow-menu__icon {
    opacity: 1;
  }

  //----------------------------------------------------------------------------
  // Select
  //----------------------------------------------------------------------------
  .#{$prefix}--table-column-checkbox .#{$prefix}--checkbox-label {
    padding-left: $spacing-05;
  }

  .#{$prefix}--data-table-v2 th.#{$prefix}--table-column-checkbox {
    padding: rem(12px) $spacing-03 0 $spacing-05;
    width: rem(44px); // 16px padding left + 8px padding right + 20px checkbox width
  }

  th.#{$prefix}--table-column-checkbox:hover {
    background: $data-table-column-hover;
  }

  // default selected row
  tr.#{$prefix}--data-table-v2--selected td {
    background-color: $ui-03;
    border-top: 1px solid $ui-03;
    border-bottom: 1px solid $active-01; //bottom border acts as separator from other rows
  }

  // first row
  tr.#{$prefix}--data-table-v2--selected:first-of-type td {
    border-top: 1px solid $active-01; //top border acts as separator from thead
  }

  // last row
  tr.#{$prefix}--data-table-v2--selected:last-of-type td {
    border-top: 1px solid $ui-03; // doesn't need separators
    border-bottom: 1px solid $ui-03;
  }

  // hover
  .#{$prefix}--data-table-v2 tbody .#{$prefix}--data-table-v2--selected:hover td {
    color: $text-01;
    background: $data-table-column-hover;
    border-top: 1px solid $data-table-column-hover;
    border-bottom: 1px solid $data-table-column-hover;
  }

  // selected overflow menu
  .#{$prefix}--data-table-v2--selected .#{$prefix}--overflow-menu .#{$prefix}--overflow-menu__icon {
    opacity: 1;
  }
}

@include exports('data-table-v2-core') {
  @if feature-flag-enabled('components-x') {
    @include data-table-v2-core--x;
  } @else {
    @include data-table-v2-core;
  }
}