_patterns_table-mobile-card.scss

@import 'settings';

@mixin vf-p-table-mobile-card {
  .p-table--mobile-card {
    td::before,
    tbody th::before {
      @extend %muted-heading;
    }

    @media screen and (max-width: $breakpoint-medium) {
      thead {
        display: none;
      }

      tbody {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      tr {
        border: $border;
        border-radius: $border-radius;
        display: flex;
        flex-direction: column;
        margin-bottom: $spv-outer--scaleable;
        overflow: auto; // prevent overflow of child margins
        padding: 0 $sph-inner--large calc(#{$spv-inner--large} - 1px);
        width: calc(50% - #{0.5 * map-get($grid-gutter-widths, medium)});
      }

      // stylelint-disable selector-no-qualifying-type
      td,
      tbody th {
        display: flex;
        min-width: 100%;
        overflow: hidden;
        padding-bottom: $spv-nudge-compensation;
        padding-left: calc(50% + #{0.5 * $sph-inner});
        padding-right: 0;
        padding-top: $spv-nudge;
        position: relative;
        text-align: left !important;
        text-overflow: ellipsis;
        width: 100%;
        word-break: break-word;

        &[aria-label] {
          text-align: right;
        }

        &[aria-label]::before {
          content: attr(aria-label);
          display: block;
          flex: 0 0 auto;
          margin-bottom: $spv-inner--small - map-get($nudges, nudge--small);
          margin-left: -100%;
          overflow: hidden;
          padding-right: #{$sph-inner};
          padding-top: $sp-unit - map-get($nudges, nudge--small);
          text-align: right;
          text-overflow: ellipsis;
          width: 100%;
        }

        &.u-align--right {
          justify-content: unset !important;
        }
      }
      // stylelint-enable selector-no-qualifying-type

      // Styles contextual menus differently within mobile-card tables
      .p-contextual-menu {
        width: 100%;

        // Initial menu item for actions should be hidden
        [role='menuitem'] {
          display: none;
        }
      }

      .p-contextual-menu__dropdown {
        box-shadow: none;
        display: block;
        max-width: 100%;
        position: relative;

        &::before {
          display: none;
        }
      }

      .p-contextual-menu__group {
        padding: 0;

        + .p-contextual-menu__group {
          margin-top: $sp-small;
          padding-top: $sp-small;
        }
      }

      // Any link items should be styled as a button element
      .p-contextual-menu__link {
        border: {
          color: $color-mid-light;
          radius: 0.125rem;
          style: solid;
          width: 1px;
        }

        box-sizing: border-box;
        color: $color-x-dark;
        cursor: pointer;
        display: block;
        line-height: $sp-medium;
        outline: none;
        padding: $sp-small $sp-large;
        text-align: center;
        text-decoration: none;
        width: 100%;

        + .p-contextual-menu__link {
          margin-top: $sp-x-small;
        }
      }
    }

    @media screen and (max-width: $breakpoint-small) {
      tr {
        width: 100%;
      }
    }
  }
}