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

Styles for Cumulocity IoT applications

// TODO: Remove this after updating the opcua-address-space.component

.split-scroll {
  position: relative;
  display: flex;
  width: 100%;
  height: calc(~'100vh - 80px');
}

.scroll-column {
  display: flex;
  flex-flow: column nowrap;
  max-height: 100%;

  > .card,
  .scroll-column-nested-content {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    max-height: 100%;
  }
  .card-header,
  .card-footer,
  .scroll-column-footer {
    flex: 0;
  }
  .inner-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 100%;
  }

  .scroll-column-footer {
    padding: @margin-16 0 0 0;
    .btn-add-block {
      margin-bottom: 0;
    }
  }
}

@media (max-width: @screen-sm-max) {
  .split-scroll {
    .scroll-column + .scroll-column {
      position: absolute;
      top: 0;
      bottom: calc(@margin-16 * -1);
      left: 0;
      z-index: 10;
      padding: 0;
      width: 100%;
      .card:not(.flex-scroll) {
        min-height: 100%;
      }
    }
    .c8y-nav-stacked .c8y-stacked-item {
      margin-right: 0;
      &:after {
        display: none;
      }
    }
  }
}

@media (min-width: @screen-sm-min) {
  .split-scroll {
    height: calc(~'100vh - 118px');
    .has-tabs.horizontal-tabs & {
      height: calc(~'100vh - 165px');
    }
    .has-action-bar & {
      height: calc(~'100vh - 150px');
    }
  }
}

.split-scroll {
  .input-group-search {
    margin: -8px 0 !important;
  }
  .split-row-2 {
    height: 50%;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .split-row-3 {
    height: 33.3333333%;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .split-row-4 {
    height: 25%;
    &:last-child {
      margin-bottom: 0;
    }
  }
}