@c8y/style/styles/layout/_layouts.less

Styles for Cumulocity IoT applications

@import "../mixins/_c8y-scrollbar.less";
@import "../mixins/_create-grid.less";

/**
 * Layout Utilities - Grid, scrolling containers, and sticky positioning
 *
 * Note: Uses @size-* tokens for spacing and design tokens for colors/fonts.
 *
 * Intentionally hardcoded values:
 * - Layout heights (64px, 112px, 160px, 208px, 365px, etc.): Header/tab/actionbar heights
 * - Grid fractions (4fr, 8fr, etc.): CSS grid fractional units
 * - Specific widths (300px, 360px, 500px, 560px): Breakpoint-specific column widths
 * - Transition duration (0.35s): Animation timing
 * - Z-index values: Stacking order
 * - Percentages: Relative sizing
 * - 12px margin: Off-grid legacy value for card-group spacing
 * - -2px box-shadow: Border effect
 */

body {
  .c8y-scrollbar();
}

// unset overflow to ensure position sticky works
.mcontainer {
  overflow: unset;
}

.inner-scroll {
  overflow: auto;
  height: 100%;
  background-color: inherit;
  overscroll-behavior: contain;
  .c8y-scrollbar();
  > .list-group:last-child {
    margin-bottom: 0;
  }
}
pre.inner-scroll {
  background-color: var(--c8y-pre-background);
}

/* Mixin that generate classes for setting two columns on a 12 column grid
 * example:
 * `grid__col-4-6`
 * sets two columns with 40% and 60% of the available width
 */
.createGridCols(11);

// spans all columns
.grid__col--fullspan {
  grid-column-start: 1;
  grid-column-end: -1;
}

@media screen and (min-width: @screen-sm-min) {
  .grid__col--auto-360 {
    grid-template-columns: minmax(0, 9fr) 360px;
  }
  .grid__col--360-auto {
    grid-template-columns: 360px minmax(0, 1fr);
  }
}

@media screen and (min-width: @screen-md-min) {
  .grid__col--500-auto {
    grid-template-columns: 500px minmax(0, 1fr);
  }
}
@media screen and (min-width: @screen-md-min) {
  .grid__col--560-auto {
    grid-template-columns: minmax(560px, 4fr) minmax(0, 8fr);
  }
}

.grid__col--auto-300 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Mixin that generate classes for setting three columns on a 12 column grid
 * example:
 * `grid__col-3-6-3`
 * sets three columns with 33% and 66% and 33% of the available width
 */
.createGridCols3(5);

// grid with 3 columns collapsed with the last column collapsed
.grid__col--8-4-0 {
  @media (min-width: @screen-md-min) {
    transition: 0.35s;
    grid-template-columns: 8fr 4fr 0fr;
  }
}

.grid__col--5-7-0 {
  @media (min-width: @screen-md-min) {
    transition: 0.35s;
    grid-template-columns: 5fr 7fr 0fr;
  }
}

.grid__col--6-6-0 {
  @media (min-width: @screen-md-min) {
    transition: 0.35s;
    grid-template-columns: 6fr 6fr 0fr;
  }
}
// grid with 3 columns collapsed with the first column collapsed
.grid__col--0-4-8 {
  @media (min-width: @screen-md-min) {
    transition: 0.35s;
    grid-template-columns: 0fr 4fr 8fr;
  }
}

.grid__col--0-7-5 {
  @media (min-width: @screen-md-min) {
    transition: 0.35s;
    grid-template-columns: 0fr 7fr 5fr;
  }
}

.grid__col--0-6-6 {
  @media (min-width: @screen-md-min) {
    transition: 0.35s;
    grid-template-columns: 0fr 6fr 6fr;
  }
}

/* Mixin that generate classes for setting two rows on a 12 rows grid
 * example:
 * `grid__row-4-6`
 * sets two rows with 40% and 60% of the available height
 */
.createGridRows(11);

// create Gaps for grid and flex containers
.gap-4 {
  gap: @size-4;
}
.createGapClasses(5);

// Auto rows except the first row
.grid__row--fit-auto {
  grid-auto-rows: min-content auto min-content !important;
}
// expands the first row, keeps 2nd row fit
.grid__row--auto-min-content {
  grid-auto-rows: auto min-content;
}

// single row
.grid__row--1 {
  grid-template-rows: minmax(0, auto) !important;
}

//CONTAINERS
.content-fullpage,
.content-fullpage--md,
.content-fullpage--sm {
  margin-bottom: 0;
}

.card--grid,
.card.card--grid {
  display: grid;
}

// STICKY HEADERS
// for tables
.table-responsive.full-page thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: @component-background-default;
}

// generic
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: inherit;
  // Removed unused state modifier class - verified 0 usages: .has-sticky-card-header
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background-color: inherit;
}

// SMALL SCREENS
@media screen and (min-width: @screen-sm-min) {
  .inner-scroll--sm {
    overflow: auto;
    overscroll-behavior: contain;
    height: 100%;
    background-color: inherit;

    .c8y-scrollbar();
    > .list-group:last-child {
      margin-bottom: 0;
    }
  }

  .page-sticky-header,
  .page-sticky-header.c8y-list__item {
    position: sticky !important;
    top: 64px;
    z-index: 20;
    min-height: @page-sticky-header-height !important;
    width: 100%;
    background: @page-sticky-header-background-default !important;
    box-shadow: inset 0 -2px 0 @component-border-color !important;
    color: @page-sticky-header-color-default;
    text-transform: @form-label-text-transform;
    font-weight: @form-label-font-weight;
    font-size: @form-label-font-size;

    &.c8y-list--timeline {
      margin-bottom: @size-base !important;
    }
    .c8y-list--timeline__item__date {
      display: flex;
      align-items: center;
      justify-content: center;
      color: @page-sticky-header-color-default;
      font-size: @font-size-base;
    }
    // for hidding when inside collapsible containers
    .collapse &,
    .collapsible &,
    .card & {
      display: none !important;
    }

    &.c8y-list--timeline {
      margin-bottom: @size-8;
    }
    label,
    p {
      margin: 0;
    }
    .card-group.interact-grid & {
      display: none !important;
    }
    .card-group.interact-list & {
      margin: 0 calc(@size-base * 1.5);
      background-color: @component-background-default;
    }

    .has-tabs.horizontal-tabs & {
      top: 127px;
    }
    .has-action-bar & {
      top: 110px;
    }
    .has-tabs.horizontal-tabs.has-action-bar & {
      top: 176px;
    }
  }

  .content-fullpage--sm,
  .content-fullpage--md {
    margin-bottom: 0 !important;
    height: calc(100vh - 112px);
    .has-tabs.horizontal-tabs & {
      height: calc(100vh - 160px);
    }
    .has-action-bar & {
      height: calc(100vh - 160px);
    }
    .has-tabs.horizontal-tabs.has-action-bar & {
      height: calc(100vh - 208px);
    }
  }

  .card.card--fullpage {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 112px);

    > .card-header,
    > .card-block,
    > .inner-scroll > .card-block,
    > .card-footer {
      padding-right: @size-24;
      padding-left: @size-24;
    }
    .c8y-scrollbar();

    .has-tabs.horizontal-tabs & {
      max-height: calc(100vh - 160px);
    }
    .has-action-bar & {
      max-height: calc(100vh - 160px);
    }
    .has-tabs.horizontal-tabs.has-action-bar & {
      max-height: calc(100vh - 208px);
    }
  }
}

@media screen and (min-width: @screen-md-min) {
  .content-fullpage,
  .content-fullpage--md {
    margin-bottom: 0 !important;
    height: calc(100vh - 112px);
    .has-tabs.horizontal-tabs & {
      height: calc(100vh - 160px);
    }
    .has-action-bar & {
      height: calc(100vh - 160px);
    }
    .has-tabs.horizontal-tabs.has-action-bar & {
      height: calc(100vh - 208px);
    }
  }
  .inner-scroll--md {
    &,
    &.overflow-visible-sm {
      overflow: auto !important;
      overscroll-behavior: contain;
      height: 100%;
      background-color: inherit;

      .c8y-scrollbar();
      > .list-group:last-child {
        margin-bottom: 0;
      }
    }
  }
}

/* LARGE SCREENS */
@media screen and (min-width: @screen-lg-min) {
  .page-sticky-header,
  .page-sticky-header.c8y-list__item {
    position: sticky !important;
    top: 64px;
    .has-tabs.horizontal-tabs & {
      top: 112px;
    }
    .has-tabs.horizontal-tabs.has-action-bar & {
      top: 160px;
    }
  }

  .content-fullpage,
  .content-fullpage--sm,
  .content-fullpage--md {
    margin-bottom: 0 !important;
    height: calc(100vh - 112px);
    .has-tabs.horizontal-tabs & {
      height: calc(100vh - 160px);
    }
    .has-action-bar & {
      height: calc(100vh - 160px);
    }
    .has-tabs.horizontal-tabs.has-action-bar & {
      height: calc(100vh - 208px);
    }
  }
}

// for the application setup
c8y-plugin-setup-stepper {
  .content-fullpage {
    height: calc(100vh - 365px);
  }
}