_substructure.less

//
// Substructure
// ------------------------------------
html,body {
  margin:0;
  padding:0;
}

.layout-pf-alt.layout-pf-alt-fixed body {
  padding-top: 0;
}
.console-os {
  background-color: @body-bg;
  .top-header {
    .flex-display(@display: flex);
    position:relative;
    height: @navbar-os-header-height-mobile;
  }
  .wrap {
    height:100vh;
    margin-top:-@navbar-os-header-height-mobile; /* top offset height */
    padding-top:@navbar-os-header-height-mobile; /* top offset height */
    position:relative;
    width:100%;
    .backface-visibility(hidden);
    .flex-direction(@direction: column);
    .flex-display(@display: flex);
    &.no-sidebar {
      .container {
        padding-bottom: @grid-gutter-width; // add spacing so content isn't next to bottom edge
        h1 {
          margin: 10px 0 20px;
        }
      }
      .middle {
        padding-top: 30px;
      }
    }
  }
  .sidebar-left,.middle,.sidebar-right {
    .flex(@columns: 0 0 auto);
    width: 100%;
    position: relative;
  }
  .sidebar-left {
    background: @sidebar-os-bg;
    padding: 0;
    position:relative;
    @media (max-width: @screen-xs-max) {
      border-top: 0;
      padding-left: 0;
      padding-right: 0;
    }
  }
  .sidebar-right {
    background-color: @panel-light;
    display: none;
  }
  .middle {
    height: 100%; // full height at mobile
    .middle-section {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      .middle-container {
        .flex-display(@display: flex);
        .flex-direction(@direction: column);
        height: 100%;
        .middle-header {
          .flex(@columns: 0 0 auto);
        }
        .middle-content {
          .flex(@columns: 1 1 auto);
          position: relative;
          width: 100%;
        }
      }
    }
  }
}
.header-toolbar {
  background-color: @panel-light;
  border-bottom: 1px solid @page-header-border-color;
}
.surface-shaded {
  background-color: @panel-shaded;
}

@media (min-width: @screen-sm-min) {
  .layout-pf-alt-fixed .nav-pf-vertical-alt {
    position: fixed;
    bottom:0;
    overflow: visible;
    /* width: inherit; used if parent is using width: can't use 100% or auto */
  }
  .console-os {
    .wrap {
      margin-top:-@navbar-os-header-height-desktop; /* top offset height */
      padding-top:@navbar-os-header-height-desktop; /* top offset height */
      .flex-direction(@direction: row);
      overflow:hidden;
      &.no-sidebar {
        .sidebar-left {
          display: none !important;
        }
      }
      &.show-sidebar-right {
        .sidebar-right {
          display: block;
          .dl-horizontal {
            margin: 0 0 @line-height-computed;
            dt {
              text-align: left;
            }
            dd {
              .word-break();
            }
          }
          .sidebar-help {
            color: @gray-light;
          }
        }
      }
    }
    .top-header {
      height: @navbar-os-header-height-desktop; /* top offset height */
    }
    .sidebar-left,.middle,.sidebar-right {
      -webkit-overflow-scrolling:touch;
    }
    .sidebar-left {
      .flex(@columns: 0 0 @sidebar-left-width-md);
      overflow-y: visible;
    }
    .middle{
      .flex(@columns: 1 1 0%);
      position: relative;
      // make scrollable
      overflow-x: hidden;
      overflow-y: auto;
    }
    .sidebar-right {
      border-left: 1px solid #dadada;
      .flex(@columns: 0 0 @sidebar-right-width-sm);
      position: relative;
    }
  }
  // scrollable panels within sections
  // ---------------------------------
  .middle-section {
    .middle-container {
      .flex-display(@display: flex);
      .flex-direction(@direction: column);
      .flex-wrap(@wrap: nowrap);
      .align-items(@align: flex-start);
      .justify-content(@justify: flex-start);
      // remove ie prefixes when PostCSS Autoprefixer is included for github issue #7559
      -ms-flex-align: start;
      -ms-flex-pack: start;

      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      .middle-header {
        .flex(@columns: 0 0 auto);
        width: 100%;
      }
      .middle-content {
        .flex(@columns: 1 1 auto);
        position: relative;
        width: 100%;
      }
    }
  }
  .right-section {
    position: absolute;
    top: 0;
    right: 0;
    width: @sidebar-right-width-sm;
    height: 100%;
    .right-container {
      .flex-display(@display: flex);
      .flex-direction(@direction: column);
      .flex-wrap(@wrap: nowrap);
      .align-items(@align: flex-start);
      .justify-content(@justify: flex-start);
      // remove ie prefixes when PostCSS Autoprefixer is included for github issue #7559
      -ms-flex-align: start;
      -ms-flex-pack: start;

      height: 100%;
      position: absolute;
      overflow: hidden;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      .right-header  {
        .flex(@columns: 0 0 auto);
        width: 100%;
      }
      .right-content {
        .flex(@columns: 1 1 auto);
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
        width: 100%;
      }
    }
  }
}


@media (min-width: @screen-md-min) {
  .console-os {
    .sidebar-right {
      .flex(@columns: 0 0 @sidebar-right-width-md);
      .right-section {
        width: @sidebar-right-width-md;
      }
    }
  }
}

@media (min-width: @screen-lg-min) {
  .console-os {
    .sidebar-left {
      .flex(@columns: 0 0 @sidebar-left-width-md);
      .navbar-sidebar {
        width: @sidebar-left-width-md;
      }
    }
    .wrap.show-sidebar-right {
      .sidebar-right {
        .flex(@columns: 0 0 @sidebar-right-width-lg);
        .right-section {
          width: @sidebar-right-width-lg;
        }
      }
    }
  }
}

@media (min-width: @screen-xlg-min) {
  .console-os {
    .sidebar-left {
      .flex(@columns: 0 0 @sidebar-left-width-lg);
      .navbar-sidebar {
        width: @sidebar-left-width-lg;
      }
    }
    .wrap.show-sidebar-right {
      .sidebar-right {
        .flex(@columns: 0 0 @sidebar-right-width-xlg);
        .right-section {
          width: @sidebar-right-width-xlg;
        }
      }
    }
  }
}