@c8y/style/styles/_mcontainer.less

Styles for Cumulocity IoT applications

.mcontainer {
  margin: 0;
  padding-top: 70px;
  min-height: calc(100vh - @margin-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: -24px calc(@margin-16 * -1) 0;
      padding: 24px calc(@margin-base * 2) 12px;
      min-height: calc(~'100vh - 58px');
      max-width: 100vw;
    }
    @media (min-width: @screen-sm-min) {
      .dashboard {
        margin: -24px calc(@margin-base * -3);
        padding: 24px calc(@margin-base * 3);
        min-height: calc(~'100vh - 112px');
      }
    }
    @media (min-width: @screen-lg) {
      .dashboard {
        margin-top: -24px;
        margin-bottom: -24px;
        padding-top: 24px;
        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: 16px;
    @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: 16px;
        &.has-action-bar {
          padding-top: 66px;
        }
      }
      
    }
  }
}