diff options
Diffstat (limited to 'doc/_extensions/odoo_ext/static/layout.less')
| -rw-r--r-- | doc/_extensions/odoo_ext/static/layout.less | 298 |
1 files changed, 126 insertions, 172 deletions
diff --git a/doc/_extensions/odoo_ext/static/layout.less b/doc/_extensions/odoo_ext/static/layout.less index 033468afa4e..c826e769544 100644 --- a/doc/_extensions/odoo_ext/static/layout.less +++ b/doc/_extensions/odoo_ext/static/layout.less @@ -1,210 +1,164 @@ -.pseudo-col(){ - position: relative; - min-height: 1px; - padding-right: 15px; - padding-left: 15px; - float: left; - width: 100%; +// ================================================ +// ================ Layout ======================= +// ================================================ + + +// Bootrstrap adaptations +// ------------------------------------------------------------------ +body, header { + position: relative; +} + +.container .container { + max-width: 100%; + padding: 0; + margin: 0; } -.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%; - top: 0; - right: 0; +.img-responsive { + display: inline-block; } +.img-responsive.center-block { + display: block; +} -body, header { - position: relative; +article.doc-content *[class*="col-"] { + padding: 0; } -// Index layout + +// Main Components +// ------------------------------------------------------------------ #wrap { - > .container.index { - background-color: @gray-lightest; - width: 100%; + z-index: 1; + position: relative; + background: @gray-lightest; + padding-bottom: 40px; +} + +main { position: relative; + display: block; + + .o_content { + background-color: @doc_paper; + .deep-1; - > .index { - .container; + @media (min-width: @screen-sm-min) { + margin: -40px auto 0; + border-radius: 2px; + } } - } -} -#main_title { - margin: 10px; - @media (min-width:@screen-md-min) { - margin: 0 0 9px 0; - } -} + article.doc-body { + .pseudo-col(); + padding: 15px; + @media (min-width: @screen-sm-min) { + padding: 15px 30px; + } -.container .container { - max-width: 100%; - padding:0; - margin:0; -} + @media (min-width: @screen-md-min) { + max-width: 700px; + } -article.doc-content *[class^="col-"] { - padding:0; -} + @media (min-width: @screen-lg-min) { + margin-left: 7%; + margin-top: 20px; + } -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:@screen-md-min) { - display: none; - } - } - article.doc-body { - background: @doc_paper; - border-left: 1px solid @gray-lighter; - padding: 15px 30px; - @media (min-width: @screen-md-min) { - width: 75%; - &.doc-toc { - width: 100%; - } + > * { + max-width: 100%; + } } - > *{ - max-width: 100%; +} + +main.o_aside_removed, main.o_slim_page { + max-width: 700px; + + @media (min-width: @screen-lg-min) { + max-width: 760px; } - } + article.doc-body { + @media (min-width: @screen-md-min) { + padding-left: 30px; + } + } } -main.has_code_col{ - .container; +main.has_code_col { + max-width: 700px; - aside { - display: none; - } + @media (min-width: @screen-lg-min) { + max-width: @container-lg; + } - article.doc-body { - width: 100%; + .doc-aside, .doc-content { + .pseudo-col(); - > *{ - max-width: 100%; + @media (max-width: @screen-md-max) { + padding: 0; + } } - > section { - position: relative; - display:block; - float: left; - width: 100%; + + aside { + display: none; } - @media (min-width: @screen-lg-min) { - width: 100%; - padding-right: 0; - &:before { - .code-col(); - } - > section { - > * { - width: 54.633333%; - max-width: 600px; - float: left; - clear: left; + article.doc-body { + > section { + max-width: 100%; } - > 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: 57%; - - .content-switcher{ - margin-top:0; - > ul { - margin-bottom: 0; + + @media (min-width: @screen-lg-min) { + width: 100%; + max-width: none; + margin:0; + + &:before { + .code-col(); } - > ul > li { - color: @gray-light; + > section { + position: relative; + display: block; + float: left; + width: 100%; + + > * { + width: 48%; + float: left; + clear: left; + } + + > h2, > h3, > h4, > h5, > h6, > h1 { + width: 48%; + float: none; + clear: none; + } + + .doc-aside { + width: 49%; + float: none; + clear: none; + margin-left: 51%; + color: @gray-light; + font-size: 14px; + line-height: 1.45; + + pre { + font-size: 12px; + } + } } - } + } - } } - } -} - -main.index .toctree-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - - > .row { - flex: 1 0 100%; - } - @media screen and(min-width: @screen-md){ - // display these 2 as 2x2 squares - > .row.tutorials, .row.api { - flex: 0 0 50%; - - display: flex; - flex-wrap: wrap; - > div { - flex: 0 0 50%; - } - } - - // FIXME: reimplement a single big box (.toc-single-entry) - } } article.doc-toc .toctree-wrapper > ul > li > span { - display: block; - font-size: 28px; -} - -.code-fields{ - display: table; - width: 100%; - .code-field{ - display: table-row; - } - .code-field-body{ display: block; - padding-left: 15px; - @media screen and (min-width: @screen-md-min){ - display: table-cell; - padding-left: 0; - } - } - .code-field-name{ - width:auto; - display:block; - @media screen and (min-width: @screen-md-min){ - width:20%; - padding-right: 20px; - display: table-cell; - } - } - ul { - margin: .2em 0; - padding: 0; - } + font-size: 28px; } |