@c8y/style/styles/layout/_split-view.less

Styles for Cumulocity IoT applications

/**
 * Split View - Two-column layout component
 *
 * Note: Uses design tokens for spacing (@size-*) and colors.
 *
 * Intentionally hardcoded values:
 * - Layout heights (108px, 168px, 166px, 200px, 82px): Viewport calculations
 * - Grid fractions (4fr, 5fr, 7fr, 8fr): CSS grid fractional units
 * - Transition duration (0.35s): Animation timing
 * - Z-index values: Stacking order
 * - Percentages: Relative sizing
 */

.split-view {
  &__list,
  &__detail {
    display: flex;
    flex-direction: column;
    background-color: @component-background-default;
  }
  &__list {
    &:extend(.border-right);
  }

  @media (max-width: @screen-sm-max) {
    &--5-7,
    &--7-5,
    &--4-8,
    &--8-4 {
      position: relative;
      display: flex !important;
      overflow: hidden;
      flex-direction: column;
      margin-bottom: 0 !important;
      height: calc(100vh - 108px);
      .has-action-bar & {
        height: calc(100vh - 168px);
      }
    }

    &--5-7 {
      height: calc(100vh - 108px);
    }

    &--8-4, &--4-8 {
      height: calc(100vh - 166px);
    }

    &--7-5 {
      height: calc(100vh - 166px);
    }

    &__list {
      flex-grow: 1;
      height: auto;
    }

    &__detail {
      position: absolute;
      top: 0;
      left: 100%;
      z-index: 100;
      min-height: calc(100vh - 200px);
      width: 100%;
      transition: left 0.35s ease-in-out;

      &--selected {
        left: 0;
      }
    }
  }

  @media (max-width: @screen-xs-max) {
    &--5-7,
    &--7-5,
    &--4-8,
    &--8-4 {
      height: calc(100vh - 82px) !important;
    }
  }

  @media (min-width: @screen-md-min) {
    &--5-7,
    &--7-5,
    &--4-8,
    &--8-4 {
      display: grid !important;
      grid-template-rows: min-content auto;
    }

    &--5-7 {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    &--7-5 {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    &--4-8 {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    }
    &--8-4 {
      grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    }
  }
}

c8y-sv-details,
c8y-sv-list {
  .inner-scroll {
    >.card-header{
      min-height: @size-56;;
    }
  }
}
.card-dashboard c8y-sv-list {
  .inner-scroll {
    >.card-header{
      min-height: 0;
      padding-top: @size-4;
      padding-bottom: @size-4;
    }
  }
}