@c8y/style/styles/components/data-display-and-visualization/tables/_responsive-grid-table.less

Styles for Cumulocity IoT applications

// Base grid + column span utilities
.responsive-grid-table {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 background: inherit;

 &-wrapper--striped{
  .responsive-grid-table:nth-child(even) {
    background: @component-background-odd;
  }
 }

 &__header{
  box-shadow: inset 0 -1px 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color));

  > [class^="col-"],
  > [class*=" col-"] {
      padding: calc(@size-base + @size-10) @component-padding;
      color: var(--c8y-component-form-label-color, var(--c8y-form-label-color));
      vertical-align: bottom;
      text-transform: uppercase;
      font-size: var(--c8y-font-size-small);
      font-weight: bold;
      line-height: calc(var(--c8y-unit-base) * 2.5);
    }
    .inner-scroll &{
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--c8y-page-sticky-header-background-default);
    }
  }
  &__body{
    > [class^="col-"],
    > [class*=" col-"] {
        display: flex;
        align-items: center;
        padding-top: calc(@size-base + @size-10);
        padding-bottom: calc(@size-base + @size-10);
        &.align-right {
          justify-content: flex-end;
          text-align: right;
        }
      }
  }
  &--separator{
    box-shadow: inset 0 -1px 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color));
    &:last-child {
      box-shadow: none;
    }
  }
  // Padding modifiers — -x (horizontal), -y (vertical), shorthand (both)
  &--padded-x {
    &.responsive-grid-table__header > [class^="col-"],
    &.responsive-grid-table__header > [class*=" col-"],
    &.responsive-grid-table__body > [class^="col-"],
    &.responsive-grid-table__body > [class*=" col-"] {
      padding-left: @component-padding;
      padding-right: @component-padding;
    }
  }
  &--padded-y {
    &.responsive-grid-table__header > [class^="col-"],
    &.responsive-grid-table__header > [class*=" col-"],
    &.responsive-grid-table__body > [class^="col-"],
    &.responsive-grid-table__body > [class*=" col-"] {
      padding-top: @component-padding;
      padding-bottom: @component-padding;
    }
  }
  &--padded {
    &.responsive-grid-table__header > [class^="col-"],
    &.responsive-grid-table__header > [class*=" col-"],
    &.responsive-grid-table__body > [class^="col-"],
    &.responsive-grid-table__body > [class*=" col-"] {
      padding-left: @component-padding;
      padding-right: @component-padding;
      padding-top: @component-padding;
      padding-bottom: @component-padding;
    }
  }

  // Condensed modifiers — -x (horizontal), -y (vertical + font-size), shorthand (both)
  &--condensed-x {
    &.responsive-grid-table__header > [class^="col-"],
    &.responsive-grid-table__header > [class*=" col-"],
    &.responsive-grid-table__body > [class^="col-"],
    &.responsive-grid-table__body > [class*=" col-"] {
      padding-left: var(--c8y-table-cell-padding-condensed);
      padding-right: var(--c8y-table-cell-padding-condensed);
    }
  }
  &--condensed-y {
    &.responsive-grid-table__header > [class^="col-"],
    &.responsive-grid-table__header > [class*=" col-"] {
      padding-top: var(--c8y-table-cell-padding-condensed);
      padding-bottom: var(--c8y-table-cell-padding-condensed);
      font-size: calc(var(--c8y-unit-base) * 1.25);
    }
    &.responsive-grid-table__body > [class^="col-"],
    &.responsive-grid-table__body > [class*=" col-"] {
      padding-top: calc(var(--c8y-table-cell-padding-condensed) - 1px);
      padding-bottom: calc(var(--c8y-table-cell-padding-condensed) - 1px);
      font-size: var(--c8y-font-size-small);
    }
  }
  &--condensed {
    &.responsive-grid-table__header > [class^="col-"],
    &.responsive-grid-table__header > [class*=" col-"] {
      padding-top: var(--c8y-table-cell-padding-condensed);
      padding-bottom: var(--c8y-table-cell-padding-condensed);
      padding-left: var(--c8y-table-cell-padding-condensed);
      padding-right: var(--c8y-table-cell-padding-condensed);
      font-size: calc(var(--c8y-unit-base) * 1.25);
    }
    &.responsive-grid-table__body > [class^="col-"],
    &.responsive-grid-table__body > [class*=" col-"] {
      padding-top: calc(var(--c8y-table-cell-padding-condensed) - 1px);
      padding-bottom: calc(var(--c8y-table-cell-padding-condensed) - 1px);
      padding-left: var(--c8y-table-cell-padding-condensed);
      padding-right: var(--c8y-table-cell-padding-condensed);
      font-size: var(--c8y-font-size-small);
    }
  }

  .col-actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

// Replaces SCSS: @for $i from 1 through 12
.generate-col-spans(@i) when (@i > 0) {
  .col-@{i} {
    grid-column: span @i;
  }
  .generate-col-spans((@i - 1));
}
.generate-col-spans(12);

// Mixin to create a wrapper + container query pair
// @name  -> suffix for class/container name and width
.responsive-grid-table-wrapper(@name) {
  @cq-name: ~"responsive-grid-table-wrapper--@{name}";

  .responsive-grid-table-wrapper--@{name} {
    container-type: inline-size;
    container-name: @cq-name;
    width: 100%;

    // When a header is present, inline labels are redundant — hide them
    &:has(.responsive-grid-table__header) .text-label-small {
      display: none;
    }
  }

  @container @cq-name (max-width: unit(@name, px)) {
    .responsive-grid-table {
      grid-template-columns: 1fr; // stack
      &__header {
        display: none;
      }
      .col-actions {
        justify-content: flex-start;
      }
    }
    // Header is hidden when stacked — show inline labels so values stay identifiable
    .text-label-small {
      display: block !important;
    }
    // hover-only element that becomes visible when stacked
    .showOnHover {
      opacity: 1 !important;
    }
    // Any class that contains "col-" becomes full-width when stacked
    .responsive-grid-table > [class^="col-"],
    .responsive-grid-table > [class*=" col-"] {
      grid-column: span 1;
    }
  }
}

// Replaces SCSS: @for $w from 600 through 200 (step -50)
.generate-wrappers(@w) when (@w >= 200) {
  .responsive-grid-table-wrapper(@w);
  .generate-wrappers((@w - 50));
}
.generate-wrappers(600);