@c8y/style/styles/components/navigation-and-layout/cards/_card-grid.less

Styles for Cumulocity IoT applications

@import "../../../mixins/_shadows-helper.less";

/**
 * Card Grid - Grid layout card variant
 *
 * Note: Uses @size-* tokens; @component-padding, and component color variables.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions (118px, 150px, 165px): Layout-specific heights for fullpage mode
 * - Percentages (100%, 100vh): Layout
 * - Z-index values (15, 90): Stacking order for sticky elements
 * - Negative offsets (-1px): Fine-tuning for shadow borders
 * - Calc expressions: Complex computed values with string.unquote
 */

.card--grid,
.card.card--grid {
  display: grid;

  .c8y-list__item__block.sticky-top {
    z-index: 90;
    background-color: inherit;

    .shadow-border(-1px; @component-border-color);
  }

  .c8y-list__item__collapse--container {
    padding: @component-padding;
  }

  .expanded {
    .c8y-list__item__block.sticky-top {
      background-color: @component-background-active !important;

      .shadow-border(-1px; @component-border-color);
    }

    .c8y-list__item__collapse--container {
      padding: @component-padding;
    }
  }
}

.card--grid__separator-top--white {
  border-top: @size-4 solid @component-background-default;
}

.card--grid__separator-top {
  border-top: @size-4 solid @component-border-color;
}

.card--grid--fullpage {
  margin-bottom: 0 !important;

  @media (min-width: @screen-md-min) {
    height: calc(~'100vh - 118px');

    .has-tabs.horizontal-tabs & {
      height: calc(~'100vh - 165px');
    }

    .has-action-bar & {
      height: calc(~'100vh - 150px');
    }
  }
}

.card--grid__inner-scroll {
  position: relative;
  overflow: auto;
  height: 100%;

  .card-header {
    position: sticky;
    top: 0;
    z-index: 15;
    background-color: inherit;
  }

  .card-footer {
    position: sticky;
    bottom: 0;
    z-index: 15;
    background-color: inherit;
  }

  .card-block {
    .legend:first-child {
      margin-top: 0;
    }
  }
}