/**
  * @stylesheet a2j-layout.less Layout
  * @parent styles-custom 1
  *
  * This defines some global styles that affect the layout of the overall application, specific to A2J Author.
**/

/**
  * @styles page Page
  * @parent a2j-layout.less 1
  *
  * The class `.page` is used as a wrapper class for everything inside the scrollable area of the app and adds some default spacing and gutter widths.
  *
  * ```
  * <div class="page">
  *  ...
  * </div>
  * ```
  *
**/
.page {
  padding: @grid-gutter-width;

  .page-title {
    margin-top: 0;
    margin-bottom: @grid-gutter-width;
  }
  .nav.nav-tabs {
    margin-bottom: @grid-gutter-width/2;
  }
}

/**
  * @styles has-toolbar Has Toolbar
  * @parent a2j-layout.less 2
  *
  * A wrapping container with a class of `.has-toolbar` uses some additional styles to remove the top border from the default navbar and to apply positioning rules so that it's sticky. It uses the `@header-height` variable from `a2j-header.less` and `@vert-navbar-width` from `.vertical-navbar.less` to calculate it's position by modifying the padding on `.page`.
  *
  * ```
  * <div class="panel has-toolbar">
  *  <nav class="navbar navbar-default">
  *    ...
  *  </nav>
  *  <div class="page">
  *   ...
  *  </div>
  * </div>
  * ```
  *
**/

  .has-toolbar {
    .page {
      padding-top: @grid-gutter-width+@navbar-height;
    }
    .navbar {
      margin: 0;
      border-top: none;
      padding-left: @vert-navbar-width;
      padding-right: @grid-gutter-width/2;
      position: fixed;
      top: @header-height;
      left: 0;
      width: 100%;
      z-index: @zindex-navbar;
      height: @navbar-height;

      .navbar-right {
        margin-right: 0;
      }
    }
  }
  hr {
    border: none;
    border-bottom: 1px solid @gray-lighter;
  }