@c8y/style/styles/_layouts.less

Styles for Cumulocity IoT applications

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;
  }
}

/* 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;
  }
}



/* 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);

/* 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: 4px;
}
.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;
  &.has-sticky-card-header {
    top: 48px;
  }
}

.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: @margin-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: @margin-8;
    }
    label,
    p {
      margin: 0;
    }
    .card-group.interact-grid & {
      display: none !important;
    }
    .card-group.interact-list & {
      margin: 0 12px;
      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: 24px;
      padding-left: 24px;
    }
    .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);
  }
}