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

Styles for Cumulocity IoT applications

/**
 * Split Scroll - DEPRECATED split-column scrolling layout
 *
 * Note: DEPRECATED - Remove after updating opcua-address-space.component. Still used in 2 places.
 * Uses @size-16 and @size-8 for spacing.
 *
 * Intentionally hardcoded values:
 * - Layout heights (80px, 118px, 150px, 165px): Viewport calculations
 * - Percentages (50%, 33.33%, 25%): Fractional row heights
 * - Z-index values: Stacking order
 */

.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: @size-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(@size-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: calc(@size-8 * -1) 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;
    }
  }
}