odoo/doc/_extensions/odoo/static/layout.less

.pseudo-col(){
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
  width: 100%;
}

.code-col(){
  content: "";
  background: @doc_code-bg;
  .box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3));
  position: absolute;
  width: 43%;
  height: 100%;
  //z-index: 0;
  top: 0;
  right: 0;
}


body, header {
  position: relative;
}

// @screen-xs     : 480px;
// @screen-sm     : 768px;
// @screen-md     : 992px;
// @screen-lg     : 1200px;

// @w-size-small  : 480px;
// @w-size-medium : 992px;
// @w-size-large  : 1170px;
// @w-size-xlarge : 1440px;

#main_navbar{
  .container-fluid {
    // @media screen and (min-width: @w-size-medium){
    //   padding: 0;
    // }
    .navbar-header {
      li { float:left}
    }
  }
  // .navbar-nav {
  //   @media screen and (max-width: @w-size-medium){
  //     margin: 0;
  //   }
  // }
}

header{
  @media (min-width:@screen-sm) {
    margin-bottom: -50px;
  }
}

.card.top {
  height: 0;
  margin-bottom: 0;
  overflow: hidden;
  position: relative;
  padding-top: 50%;
  padding-bottom: 15%;

  @media (min-width:@screen-sm) {
    padding-top: 30%;
  }

  @media (min-width:@w-size-medium) {
    padding-top: 10%;
    padding-bottom: 15%;
  }
}


#main_title {
  margin: 10px;
  @media (min-width:@w-size-medium) {
    margin: 0 0 9px 0;
  }
}


.container .container {
  max-width: 100%;
  padding:0;
  margin:0;
}

article.doc-content *[class^="col-"] {
  padding:0;
}

main{

  aside, article.doc-body, .doc-content, .doc-aside {
    .pseudo-col();
  }
  .doc-content, .doc-aside {
    position:relative;
  }
  aside {
    width: 25%;
    max-width: 300px;
    position:static;
    padding:0;
    display:block;
    float:left;
    @media (max-width:@w-size-medium) {
      display: none;
    }
  }
  article.doc-body {
    background: @doc_paper;
    padding-right: 30px;
    padding-left: 30px;
    @media (min-width: @w-size-medium) {
      width: 75%;
      &.doc-toc {
        width: 100%;
      }
    }
    > *{
      max-width: 100%;
    }
  }

}

main.has_code_col{
  @media (max-width:@w-size-xlarge) {
    width: 100%;
  }

  aside {
    width: 16.66666667%;
    @media (max-width:@w-size-large) {
      width: 25%;
    }
  }

  article.doc-body {
    > *{
      max-width: 100%;
    }
    section {
      position: relative;
      display:block;
      float: left;
      width: 100%;
    }

    @media (min-width: @w-size-large) {
      width: 83.33333333%;
      padding-right: 0;
      &:before {
        .code-col();
      }
      section {
        > * {
          width: 55.633333%;
          float: left;
          clear: left;
        }
        > h1, > h2, > h3, > h4, > h5, > h6 {
          width: 100%;
          float: none;
          clear: none;
        }
        .doc-aside {
          width: 41%;
          float: none;
          clear: none;
          margin-right: 15px;
          margin-left: 56%;
          .content-switcher{
            margin-top:0;
          }
        }
      }
    }
  }
}

main.index .toctree-wrapper{
  @media screen and(min-width: @screen-md){

    > .row:first-child { //trigg first section
      > .col-md-3:nth-child(3), > .col-md-3:nth-child(5) { //trig cards (title + 2, title + 4)
          margin-right: 50%;
      }
    }
    position: relative;
    .toc-single-entry{
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      padding-right: floor((@grid-gutter-width / 2)); // compensate bootstrap default gutter
      > .col-md-3 {
        width: 100%;
      }
      > *[class^="col-"] {
        padding-left: 0;    //remove Bootstrap default gutter
      }
      .card {
        min-height: (@card_min-height * 2 ) + @card_margin-bottom;
      }
    }
  }
}


.code-fields{
  display: table;
  width: 100%;
  .code-field{
    display: table-row;
  }
  .code-field-body{
    display: block;
    padding-left:  15px;
    @media screen and (min-width: @w-size-medium ){
      display: table-cell;
      padding-left:  0;
    }
  }
  .code-field-name{
    width:auto;
    display:block;
    @media screen and (min-width: @w-size-medium ){
      width:20%;
      padding-right: 20px;
      display: table-cell;
    }
  }
  ul {
    margin: .2em 0;
    padding: 0;
  }
}