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

Styles for Cumulocity IoT applications

.split-view {
  &__list,
  &__detail {
    display: flex;
    flex-direction: column;
    background-color: @component-background-default;
  }
  &__list {
    .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);
    }
  }
}