_data-table-expandable.scss

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

@use '../action';
@use '../../../config' as *;
@use '../../../motion' as *;
@use '../../../spacing' as *;
@use '../../../theme' as *;
@use '../../../utilities/button-reset';
@use '../../../utilities/convert';
@use '../../../utilities/focus-outline' as *;
@use '../../../utilities/high-contrast-mode' as *;

/// Data table expandable styles
/// @access public
/// @group data-table
@mixin data-table-expandable {
  //----------------------------------------------------------------------------
  // Parent row
  //----------------------------------------------------------------------------
  //first row top border
  .#{$prefix}--data-table tr.#{$prefix}--parent-row:first-of-type td {
    border-block-start: 1px solid $border-subtle;
  }

  //----------------------------------------------------------------------------
  // Child row
  //----------------------------------------------------------------------------
  // default styles
  .#{$prefix}--expandable-row--hidden td {
    padding: $spacing-05;
    border-block-start: 0;
    inline-size: auto;
  }

  //child row hidden
  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row)
    + tr[data-child-row] {
    block-size: 0;
    transition: height $duration-moderate-01 motion(standard, productive);
  }

  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row)
    + tr[data-child-row]
    td {
    border: 0;
    background-color: $layer-hover;
    padding-block: 0;
    transition:
      padding $duration-moderate-01 motion(standard, productive),
      background-color $duration-fast-01 motion(standard, productive);
  }

  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row)
    + tr[data-child-row]
    td
    .#{$prefix}--child-row-inner-container {
    overflow: hidden;
    max-block-size: 0;
  }

  //child row visible
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
    transition:
      height $duration-moderate-01 motion(standard, productive),
      background-color $duration-fast-01 motion(standard, productive);
  }

  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
    border-block-end: 1px solid $border-subtle;
    padding-inline-start: 3.5rem;
    transition:
      padding-bottom $duration-moderate-01 motion(standard, productive),
      transform $duration-moderate-01 motion(standard, productive);
  }

  // Increase padding inside expandable row when only a slug OR checkbox is present in row
  tbody:has(> tr.#{$prefix}--data-table--slug-row)
    > tr.#{$prefix}--expandable-row[data-child-row]
    td,
  tbody:has(> tr.#{$prefix}--data-table--ai-label-row)
    > tr.#{$prefix}--expandable-row[data-child-row]
    td,
  tbody:has(td.#{$prefix}--table-column-checkbox)
    > tr.#{$prefix}--expandable-row[data-child-row]
    td {
    padding-inline-start: convert.to-rem(88px);
  }

  // Increase padding inside expandable row when slug AND checkbox is present in row
  tbody:has(> tr.#{$prefix}--data-table--ai-label-row):has(
      td.#{$prefix}--table-column-checkbox
    )
    > tr.#{$prefix}--expandable-row[data-child-row]
    td {
    padding-inline-start: convert.to-rem(120px);
  }

  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
    + tr[data-child-row]
    td
    .#{$prefix}--child-row-inner-container {
    max-block-size: 100%;
    padding-block: 1rem;
    padding-block-end: 1.5rem;
  }

  // bottom border overrides
  .#{$prefix}--parent-row.#{$prefix}--expandable-row > td,
  .#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] > td {
    border-block-end: 1px solid $border-subtle;
    box-shadow: 0 1px $border-subtle;
  }

  .#{$prefix}--parent-row:not(.#{$prefix}--expandable-row)
    + tr[data-child-row]
    > td {
    box-shadow: none;
  }

  .#{$prefix}--parent-row.#{$prefix}--expandable-row > td:first-of-type {
    // First td doesn't have a visible border
    box-shadow: none;
  }

  //----------------------------------------------------------------------------
  // Hover styles
  //----------------------------------------------------------------------------
  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) td,
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row td,
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row {
    transition:
      height $duration-moderate-01 motion(standard, productive),
      background-color $duration-fast-01 motion(standard, productive),
      border-color $duration-fast-01 motion(standard, productive);
  }

  // hovering on collapsed parent
  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row):first-of-type:hover
    td {
    border-block-end: 1px solid $border-subtle;
    border-block-start: 1px solid $border-subtle;
  }

  // hovering on expanded parent
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td {
    background-color: $layer-hover;
    border-block-end: 1px solid $border-subtle;
    border-block-start: 1px solid $border-subtle;
    color: $text-primary;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td:first-of-type {
    // First td doesn't have a visible border
    border-block-end: 1px solid $layer-hover;
  }

  // Child row when hovering on expanded parent
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
    + tr[data-child-row]
    td {
    background-color: $layer-hover;
    border-block-end: 1px solid $border-subtle;
    color: $text-primary;
  }

  //hovering on expanded child row
  tr.#{$prefix}--expandable-row--hover + tr[data-child-row] td {
    border-block-end: 1px solid $border-subtle;
  }

  //hovering on expanded child row (class added to parent)
  tr.#{$prefix}--expandable-row--hover {
    background-color: $layer-hover;
  }

  tr.#{$prefix}--expandable-row--hover td {
    background-color: $layer-hover;
    border-block-end: 1px solid $border-subtle;
    border-block-start: 1px solid $border-subtle;
    color: $text-primary;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover
    td:first-of-type {
    // First parent td doesn't have visible bottom border
    border-block-end: 1px solid transparent;
  }

  //----------------------------------------------------------------------------
  // Expand icon column
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table td.#{$prefix}--table-expand {
    border-block-end: 1px solid $border-subtle-01;
  }

  .#{$prefix}--layer-two .#{$prefix}--data-table td.#{$prefix}--table-expand {
    border-block-end: 1px solid $border-subtle-02;
  }

  .#{$prefix}--layer-three .#{$prefix}--data-table td.#{$prefix}--table-expand {
    border-block-end: 1px solid $border-subtle-03;
  }

  .#{$prefix}--data-table
    th.#{$prefix}--table-expand
    + .#{$prefix}--table-column-checkbox,
  .#{$prefix}--data-table
    td.#{$prefix}--table-expand
    + .#{$prefix}--table-column-checkbox {
    padding-inline: convert.to-rem(6px) convert.to-rem(6px);
  }

  // Hide bottom border of checkbox column when expanded
  .#{$prefix}--data-table
    td.#{$prefix}--table-expand[data-previous-value='collapsed']
    + .#{$prefix}--table-column-checkbox {
    border-block-end: 1px solid transparent;
    box-shadow: none;
  }

  .#{$prefix}--data-table
    th.#{$prefix}--table-expand
    + .#{$prefix}--table-column-checkbox
    + th,
  .#{$prefix}--data-table
    td.#{$prefix}--table-expand
    + .#{$prefix}--table-column-checkbox
    + td {
    padding-inline-start: convert.to-rem(8px);
  }

  .#{$prefix}--data-table td.#{$prefix}--table-expand,
  .#{$prefix}--data-table th.#{$prefix}--table-expand {
    padding: 0.5rem;
    padding-inline-end: 0;
  }

  .#{$prefix}--data-table
    td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
    border-block-end: 1px solid transparent;
  }

  .#{$prefix}--table-expand[data-previous-value='collapsed']
    .#{$prefix}--table-expand__svg {
    transform: rotate(270deg);
    transition: transform $duration-moderate-01 motion(standard, productive);
  }

  .#{$prefix}--table-expand__button {
    @include button-reset.reset('false');

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 $spacing-03;
    // Account for the border in `.cds--table-expand`
    block-size: calc(100% + 1px);
    inline-size: 100%;
    vertical-align: inherit;
  }

  .#{$prefix}--data-table--top-aligned-body
    td
    .#{$prefix}--table-expand__button,
  .#{$prefix}--data-table--top-aligned-header
    th
    .#{$prefix}--table-expand__button {
    align-items: start;
    block-size: convert.to-rem(32px);
    padding-block-start: $spacing-03;
  }

  .#{$prefix}--data-table--top-aligned-body.#{$prefix}--data-table--xs
    td
    .#{$prefix}--table-expand__button,
  .#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--xs
    th
    .#{$prefix}--table-expand__button {
    block-size: convert.to-rem(24px);
    padding-block-start: $spacing-02;
  }

  .#{$prefix}--data-table--top-aligned-body.#{$prefix}--data-table--md
    td
    .#{$prefix}--table-expand__button,
  .#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--md
    th
    .#{$prefix}--table-expand__button {
    margin-block-start: -$spacing-02;
    padding-block-start: $spacing-03;
  }

  .#{$prefix}--table-expand__button:focus {
    box-shadow: inset 0 0 0 2px $focus;
    outline: none;
  }

  .#{$prefix}--table-expand__svg {
    fill: $layer-selected-inverse;
    transform: rotate(90deg);
    transition: transform $duration-moderate-01 motion(standard, productive);
  }

  .#{$prefix}--data-table--xl .#{$prefix}--table-expand__button {
    inline-size: convert.to-rem(32px);
  }

  // fix expanded parent separating border length
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
    td.#{$prefix}--table-expand
    + td::after {
    position: absolute;
    background-color: $layer-accent;
    block-size: convert.to-rem(1px);
    content: '';
    inline-size: convert.to-rem(8px);
    inset-block-end: convert.to-rem(-1px);
    inset-inline-start: 0;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
    td.#{$prefix}--table-expand
    + td::after,
  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover
    td.#{$prefix}--table-expand
    + td::after {
    background-color: $layer-hover;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected
    td.#{$prefix}--table-expand
    + td::after {
    display: none;
  }

  //----------------------------------------------------------------------------
  //ZEBRA
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 3) td,
  .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 4) td {
    border-block-end: 1px solid $layer;
  }

  .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td,
  .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 2) td {
    background-color: $layer-accent;
    border-block-end: 1px solid $layer-accent;
    border-block-start: 1px solid $layer-accent;
  }

  .#{$prefix}--data-table--zebra tr.#{$prefix}--parent-row td,
  .#{$prefix}--data-table--zebra
    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
    + tr[data-child-row]
    td {
    transition:
      transform $duration-moderate-01 motion(standard, productive),
      border-bottom $duration-fast-01 motion(standard, productive),
      border-top $duration-fast-01 motion(standard, productive);
  }

  .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:hover td,
  .#{$prefix}--data-table--zebra
    tbody
    tr[data-parent-row]:hover
    + tr[data-child-row]
    td,
  .#{$prefix}--data-table--zebra tbody tr[data-child-row]:hover td {
    background-color: $layer-hover;
    border-block-end: 1px solid $layer-hover;
    border-block-start: 1px solid $layer-hover;
  }

  .#{$prefix}--data-table--zebra
    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover
    td {
    background-color: $layer-hover;
    border-block-end: 1px solid $layer-hover;
    border-block-start: 1px solid $layer-hover;
  }

  //----------------------------------------------------------------------------
  // Selected
  //----------------------------------------------------------------------------
  // Parent collapsed

  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected {
    background-color: $layer-selected;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:first-of-type td {
    border-block-start: 1px solid $layer-active;
    box-shadow: 0 1px $layer-active;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected td {
    border-block-end: 1px solid $layer-active;
    box-shadow: 0 1px $layer-active;
    color: $text-primary;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:last-of-type td {
    border-block-end: 1px solid transparent;
    box-shadow: 0 1px $border-subtle;
  }

  // Parent collapsed hover
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(
      .#{$prefix}--expandable-row
    ):hover
    td {
    background-color: $layer-selected-hover;
    border-block-end: 1px solid $border-subtle;
    border-block-start: 1px solid $layer-selected-hover;
    box-shadow: 0 1px $layer-selected-hover;
  }

  // Parent expanded
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
    td,
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
    td:first-of-type {
    border-block-end: 1px solid transparent;
    // No visible border when expanded
    box-shadow: 0 1px $layer-selected;
  }

  // Parent expanded hover
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
    td,
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
    td:first-of-type,
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
    td,
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
    td:first-of-type {
    background-color: $layer-selected-hover;
    border-block-end: 1px solid transparent;
    border-block-start: 1px solid $layer-selected-hover;
    box-shadow: 0 1px $layer-selected-hover;
  }

  // Child row expanded
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
    + tr[data-child-row]
    td {
    background-color: $layer-hover;
    border-block-end: 1px solid $border-subtle;
    border-block-start: 1px solid $layer-active;
    box-shadow: 0 1px $layer-active;
    color: $text-primary;
  }

  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
    + tr[data-child-row]:last-of-type
    td {
    box-shadow: inset 0 -1px $layer-active;
    padding-block-end: convert.to-rem(24px);
  }

  // Child row expanded hover
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
    + tr[data-child-row]
    td,
  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
    + tr[data-child-row]
    td {
    background-color: $layer-selected;
  }

  // Slug styles
  .#{$prefix}--parent-row .#{$prefix}--table-column-slug,
  .#{$prefix}--parent-row
    .#{$prefix}--table-column-slug
    + td.#{$prefix}--table-expand[data-previous-value='collapsed'],
  .#{$prefix}--parent-row .#{$prefix}--table-column-decorator,
  .#{$prefix}--parent-row
    .#{$prefix}--table-column-decorator
    + td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
    box-shadow: none;
  }

  .#{$prefix}--parent-row.#{$prefix}--expandable-row
    .#{$prefix}--table-column-slug,
  .#{$prefix}--parent-row.#{$prefix}--expandable-row
    .#{$prefix}--table-column-slug
    + td.#{$prefix}--table-expand[data-previous-value='collapsed'],
  .#{$prefix}--parent-row.#{$prefix}--expandable-row
    .#{$prefix}--table-column-decorator,
  .#{$prefix}--parent-row.#{$prefix}--expandable-row
    .#{$prefix}--table-column-decorator
    + td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
    border-block-end: 1px solid transparent;
  }

  .#{$prefix}--data-table--slug-row td,
  .#{$prefix}--data-table tr.#{$prefix}--data-table--slug-row:hover td,
  .#{$prefix}--data-table--ai-label-row td,
  .#{$prefix}--data-table tr.#{$prefix}--data-table--ai-label-row:hover td {
    border-block-start: 1px solid transparent;
  }

  // Windows HCM fix
  .#{$prefix}--table-expand__button:focus .#{$prefix}--table-expand__svg {
    @include high-contrast-mode('focus');
  }

  .#{$prefix}--table-expand__svg {
    @include high-contrast-mode('icon-fill');
  }
}