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

Styles for Cumulocity IoT applications

/**
 * Main Container (mcontainer) - Primary application content container
 *
 * Note: Uses design tokens for spacing (@size-*; @grid-gutter-width, etc.) and layout vars.
 *
 * Intentionally hardcoded values:
 * - Layout padding-tops (70px, 88px, 136px, 152px, 200px, etc.): Header/tab/actionbar heights
 * - Min-height calc expressions (58px, 112px, 176px, 160px): Layout-specific heights
 * - 16.6666666667%: 1/6 of grid (CSS grid calculation)
 * - 12px: Off-grid padding for specific dashboard layout
 * - 100vw/100vh: Full viewport dimensions
 */

.mcontainer {
  margin: 0;
  padding-top: 70px;
  min-height: calc(100vh - @size-16);

  transition: margin-left @open-menu-time-type;
  @media (min-width: @screen-sm-min) {
    padding-top: 88px;
    padding-right: @grid-gutter-width;
    padding-left: @grid-gutter-width;
    &.has-action-bar {
      padding-top: 136px;
    }
    &.has-tabs.horizontal-tabs {
      padding-top: 152px;
      &.has-action-bar {
        padding-top: 200px;
      }
    }
    &.has-tabs.vertical-tabs {
      padding-top: 88px;
      padding-left: calc(@nav-tabs-vertical-width + @grid-gutter-width);
      &.has-action-bar {
        padding-top: 136px;
      }
    }
  }
  @media (min-width: @grid-float-breakpoint) {
    &.has-tabs.horizontal-tabs {
      padding-top: 136px;
      &.has-action-bar {
        padding-top: 184px;
      }
    }
  }

  &.open {
    @media (min-width: @grid-float-breakpoint) {
      margin-left: @navigatorWidth;
    }
  }

  > .container-fluid {
    @media (min-width: @screen-sm-min) {
      padding-right: 0;
      padding-left: 0;
    }
    .grid-stack > .grid-stack-item {
      min-width: 16.6666666667%;
      > .grid-stack-item-content {
        right: calc(@grid-gutter-width / 2);
        bottom: calc(@grid-gutter-width / 2);
        left: calc(@grid-gutter-width / 2);
      }
    }
    .dashboard {
      margin: calc(@size-24 * -1) calc(@size-16 * -1) 0;
      padding: @size-24 calc(@size-base * 2) calc(@size-base * 1.5);
      min-height: calc(~'100vh - 58px');
      max-width: 100vw;
    }
    @media (min-width: @screen-sm-min) {
      .dashboard {
        margin: calc(@size-24 * -1) calc(@size-base * -3);
        padding: @size-24 calc(@size-base * 3);
        min-height: calc(~'100vh - 112px');
      }
    }
    @media (min-width: @screen-lg) {
      .dashboard {
        margin-top: calc(@size-24 * -1);
        margin-bottom: calc(@size-24 * -1);
        padding-top: @size-24;
        min-height: calc(~'100vh - 112px');
      }
    }
  }

  &.has-tabs > .container-fluid .dashboard {
    @media (min-width: @screen-sm-min) {
      min-height: calc(~'100vh - 176px');
    }
    @media (min-width: @screen-lg) {
      min-height: calc(~'100vh - 160px');
    }
  }

  &.no-apps-margin {
    margin-left: 0;
  }
}

body:not(:has(.app-main-header)) {
  .mcontainer {
    padding-top: @size-16;
    @media (max-width: @screen-xs-max) {
      &.has-tabs {
        padding-top: 56px;
      }
    }
    @media (min-width: @screen-sm-min) {
      &.has-action-bar {
        padding-top: 66px;
      }
      &.has-tabs.horizontal-tabs {
        padding-top: 66px;
        &.has-action-bar {
          padding-top: 114px;
        }
      }
      &.has-tabs.vertical-tabs {
        padding-top: @size-16;
        &.has-action-bar {
          padding-top: 66px;
        }
      }
    }
  }
}