@c8y/style/styles/_card-grid.less

Styles for Cumulocity IoT applications

.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: 4px solid @component-background-default;
}

.card--grid__separator-top {
  border-top: 4px 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;
    }
  }
}