diff --git a/Makefile b/Makefile index c0f780b3a..5b6bf304e 100644 --- a/Makefile +++ b/Makefile @@ -30,14 +30,14 @@ clean: $(RM_CMD) extensions/odoo_theme/static/style.css @echo "Cleaning finished." -#edi: SPHINXOPTS += -A collapse_menu=True # If needed, comment rather than setting False -edi: VERSIONS += 12.0,13.0,14.0 +# edi: SPHINXOPTS += -A collapse_menu=True # If needed, comment rather than setting False +edi: VERSIONS += 12.0,13.0,14.0,master edi: CANONICAL_VERSION += 14.0 edi: LANGUAGES += en,fr,es edi: CURRENT_LANG += fr edi: clean html -static: extensions/odoo_theme/static extensions/odoo_theme/static/style.css +static: extensions/odoo_theme/static/style.css cp -r extensions/odoo_theme/static/* _build/html/_static/ html: extensions/odoo_theme/static/style.css @@ -48,7 +48,7 @@ html: extensions/odoo_theme/static/style.css fast: SPHINXOPTS += -A collapse_menu=True fast: html -extensions/odoo_theme/static/style.css: extensions/odoo_theme/static/*.scss +extensions/odoo_theme/static/style.css: extensions/odoo_theme/static/style.scss extensions/odoo_theme/static/scss/*.scss @echo "Compiling stylesheets..." pysassc $(subst .css,.scss,$@) $@ @echo "Compilation finished." diff --git a/extensions/odoo_theme/static/fonts/icomoon.eot b/extensions/odoo_theme/static/fonts/icomoon.eot index 0f830ea74..46b76f911 100644 Binary files a/extensions/odoo_theme/static/fonts/icomoon.eot and b/extensions/odoo_theme/static/fonts/icomoon.eot differ diff --git a/extensions/odoo_theme/static/fonts/icomoon.svg b/extensions/odoo_theme/static/fonts/icomoon.svg index 9ae126b59..e9ba92415 100644 --- a/extensions/odoo_theme/static/fonts/icomoon.svg +++ b/extensions/odoo_theme/static/fonts/icomoon.svg @@ -84,7 +84,7 @@ - + diff --git a/extensions/odoo_theme/static/fonts/icomoon.ttf b/extensions/odoo_theme/static/fonts/icomoon.ttf index 7734fd524..15fff3aaf 100644 Binary files a/extensions/odoo_theme/static/fonts/icomoon.ttf and b/extensions/odoo_theme/static/fonts/icomoon.ttf differ diff --git a/extensions/odoo_theme/static/fonts/icomoon.woff b/extensions/odoo_theme/static/fonts/icomoon.woff index c69e2012d..73f450283 100644 Binary files a/extensions/odoo_theme/static/fonts/icomoon.woff and b/extensions/odoo_theme/static/fonts/icomoon.woff differ diff --git a/extensions/odoo_theme/static/js/menu.js b/extensions/odoo_theme/static/js/menu.js index 516bd655a..47b23f92e 100644 --- a/extensions/odoo_theme/static/js/menu.js +++ b/extensions/odoo_theme/static/js/menu.js @@ -16,8 +16,9 @@ * * TOC entries (
  • elements) that are on the path of the displayed page receive the * `o_active_toc_entry` class, and their related (parent) TOC entry list (
      elements) receive - * the `show` (Bootstrap) class. The child TOC entry list of the deepest TOC entry also - * receives the `show` class. + * the `show` (Bootstrap) class. + * Also, the deepest TOC entry receives the `o_deepest_active_toc_entry` class, and its child + * TOC entry list receives the `show` class. */ const _flagActiveTocEntriesAndLists = () => { let deepestTocEntry = undefined; @@ -35,7 +36,10 @@ const childTocEntryList = deepestTocEntry.querySelector('ul'); if (childTocEntryList) { childTocEntryList.classList.add('show'); + } else { // If the toc entry is not a TOC, add the class to its closest ancestor entry + deepestTocEntry = deepestTocEntry.parentElement.parentElement; } + deepestTocEntry.classList.add('o_deepest_active_toc_entry'); } }; diff --git a/extensions/odoo_theme/static/scss/_mixins.scss b/extensions/odoo_theme/static/scss/_mixins.scss index 918b5e2ac..79221bfbf 100644 --- a/extensions/odoo_theme/static/scss/_mixins.scss +++ b/extensions/odoo_theme/static/scss/_mixins.scss @@ -85,39 +85,29 @@ transform : $args; } -//-- Material Design Icons -@mixin mdi-icon($content){ - font-family: 'Material-Design-Icons'; - content: $content; - display: inline-block; - text-rendering: geometricPrecision; - font-size: 1em; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -@mixin inline-icon($img-url, $size, $margin){ - content: ''; - display: inline-block; - width: $size; - height: $size; - vertical-align: middle; - background-size: contain; - background-repeat: no-repeat; - background-image: url($img-url); - margin: $margin; - -} +//-- add icon @mixin inline-icomoon($icon-content, $margin) { content: '#{$icon-content}'; font-family: '#{$icomoon-font-family}' !important; - font-size: 1.5rem; + @include font-size(1.5rem); font-weight: $fw_regular; vertical-align: middle; margin: $margin; } +//-- fix scroll issue + +@mixin scroll-padding() { + content: ''; + display: block; + width: 0; + height: 0; + padding-top: $o-header-height + 10px; + margin-top: -$o-header-height - 10px; +} + + //-- has_col @mixin pseudo-col(){ @@ -130,7 +120,7 @@ } @mixin code-col(){ - content: ""; + /* content: ""; Deactivating has_code_col background */ background: $doc_code-bg; /* @include box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3)); */ @include o-position-absolute($top: 3rem, $right:0); diff --git a/extensions/odoo_theme/static/scss/_sphinx_basic.scss b/extensions/odoo_theme/static/scss/_sphinx_basic.scss index 56253baab..b17ef4eac 100644 --- a/extensions/odoo_theme/static/scss/_sphinx_basic.scss +++ b/extensions/odoo_theme/static/scss/_sphinx_basic.scss @@ -625,9 +625,9 @@ pre { overflow-y: hidden; /* fixes display issues on Chrome browsers */ } -pre, div[class*="highlight-"] { +/* pre, div[class*="highlight-"] { clear: both; -} +} */ span.pre { -moz-hyphens: none; @@ -636,9 +636,9 @@ span.pre { hyphens: none; } -div[class*="highlight-"] { +/* div[class*="highlight-"] { margin: 1em 0; -} +} */ td.linenos pre { border: 0; diff --git a/extensions/odoo_theme/static/scss/_typography.scss b/extensions/odoo_theme/static/scss/_typography.scss index aebcce169..0c3e389dc 100644 --- a/extensions/odoo_theme/static/scss/_typography.scss +++ b/extensions/odoo_theme/static/scss/_typography.scss @@ -5,6 +5,7 @@ //------------------------------------------------------------------------------ // Fonts //------------------------------------------------------------------------------ +@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap'); @font-face { font-family: '#{$icomoon-font-family}'; @@ -47,10 +48,8 @@ html body{ //------------------------------------------------------------------------------ // Font weight //------------------------------------------------------------------------------ -// "fw_extralight and fw_medium" classes -// are kept for backward compatibility b, strong{ - font-weight: $fw_extrabold; + font-weight: $fw_bold; } a { diff --git a/extensions/odoo_theme/static/scss/_variables.scss b/extensions/odoo_theme/static/scss/_variables.scss index a6b795129..37093a440 100644 --- a/extensions/odoo_theme/static/scss/_variables.scss +++ b/extensions/odoo_theme/static/scss/_variables.scss @@ -59,93 +59,7 @@ $color-epsilon-lightest : #FF8D63; // Typography // =============================================== -$fw_extralight : 200; -$fw_light : 300; -$fw_regular : 400; -$fw_medium : 500; -$fw_semibold : 600; -$fw_bold : 800; -$fw_extrabold : 900; - -// Fonts -// =============================================== -// As a base font, we use bts4 native font stack: -// website/static/src/scss/primary_variables.scss - -$font-family-serif: Georgia, "Times New Roman", Times, serif; - -$o-website-values-palettes: ( - ( - "font-number": 1, - "headings-font-number": 2, - "navbar-font-number": 1, - "buttons-font-number": 1, - ), -); - -//------------------------------------------------------------------------------ -// Website customizations -//------------------------------------------------------------------------------ - -$o-website-values-palettes: ( - ( - // Font - 'font': 'Inter', - 'headings-font': 'Inter', - 'navbar-font': 'Inter', - 'buttons-font': 'Inter', - - 'font-size-base': 0.875rem, - - 'link-underline': 'never', - - 'btn-ripple': true, - - // Buttons - 'btn-padding-y': 0.375rem, - 'btn-padding-x': 0.75rem, - 'btn-font-size': 0.875rem, - 'btn-padding-y-sm': 0.25rem, - 'btn-padding-x-sm': 0.375rem, - 'btn-font-size-sm': .75rem, - 'btn-padding-y-lg': 0.625rem, - 'btn-padding-x-lg': 1rem, - 'btn-font-size-lg': 1rem, - - 'btn-border-radius': 0.125rem, - 'btn-border-radius-sm': 0.125rem, - 'btn-border-radius-lg': 0.125rem, - - // Inputs - 'input-padding-y': 0.375rem, - 'input-padding-x': 0.75rem, - 'input-font-size': 0.875rem, - 'input-padding-y-sm': 0.25rem, - 'input-padding-x-sm': 0.375rem, - 'input-font-size-sm': 0.75rem, - 'input-padding-y-lg': 0.625rem, - 'input-padding-x-lg': 1rem, - 'input-font-size-lg': 1rem, - - 'input-border-radius': 0.125rem, - 'input-border-radius-sm': 0.125rem, - 'input-border-radius-lg': 0.125rem, - - // Footer - 'footer-effect': 'slideout_slide_hover', - ), -); - -//------------------------------------------------------------------------------ -// Fonts -//------------------------------------------------------------------------------ - -$o-theme-font-configs: ( - 'Inter': ( - 'family': ('Inter', sans-serif), - 'url': 'Inter:200,300,400,500,600,700,800,900', - ) -); +$font-family-serif: 'Roboto Slab', Georgia, "Times New Roman", Times, serif; $fw_extralight: 200; $fw_light: 300; @@ -156,91 +70,7 @@ $fw_bold: 700; $fw_extrabold: 800; $fw_black: 900; - -//------------------------------------------------------------------------------ -// Colors -//------------------------------------------------------------------------------ - -$o-violet: #875a7b; -$o-violet-dark: #7A436B; -$o-violet-darkest: #64305E; - -$o-inverse-lightest: #98a6b0; -$o-inverse-light: #8b979f; -$o-inverse: #47738f; -$o-inverse-dark: #5b7687; -$o-inverse-darker: #485761; - -$color-alpha: #00A19B; -$color-alpha-dark: #00807D; -$color-alpha-light: #26d1af; -$color-alpha-lightest: #2aebc4; - -$color-beta: #5b899e; -$color-beta-dark: #3d5d6b; -$color-beta-light: #699fb8; -$color-beta-lightest: #77b5d1; - -$color-gamma: #e46f78; -$color-gamma-dark: #b0565c; -$color-gamma-light: #fc7c84; -$color-gamma-lightest: #fc959c; - -$color-delta: #5c5b80; -$color-delta-dark: #37364d; -$color-delta-light: #6e6d99; -$color-delta-lightest: #807fb3; - -$color-epsilon: #d5653e; -$color-epsilon-dark: #a34e2f; -$color-epsilon-light: #f07346; -$color-epsilon-lightest: #ff8d63; - -$header-link-normal: #343a40; - -$gray-lightest: #F9F9F9; -$gray-lighter: #F2F2F2; -$gray-light: #d5d5d5; -$gray: #888888; -$gray-dark: #707070; -$gray-darker: #282F33; -$gray-darkest: shade-color($gray-darker, 30%); - - -$primary: $color-alpha-dark; -$secondary: $o-violet-dark; - -$brand-primary : $o-violet; -$brand-success : #50AF51; -$brand-info: #4B9EB6; -$brand-warning : #f39c1e; -$brand-danger : #D9534F; - -$doc_paper_dark: $gray-lighter; -$doc_paper: #ffffff; -$doc_exercise: #938E94; -$doc_code-bg: #F8F8F8; -$doc_lime: #CDDC39; -$doc_orange: #FF5722; -$doc_cyan: $color-alpha; - -//------------------------------------------------------------------------------ -// Misc -//------------------------------------------------------------------------------ - -// Header -$o-header-height: 90px; -$o-side-nav-width: 350px; -$o-on-page-width: 25%; -$o-header-white: #ffffff; - -// Paths and Prefixes -$website-img-base-url: "../img/"; -$website-2x-prefix: "2x_"; - -// Animations and Transitions -$o-ease: cubic-bezier(.55,0,.1,1); - +$font-size-secondary: .875rem; //------------------------------------------------------------------------------ // icomoon icons //------------------------------------------------------------------------------ @@ -331,3 +161,89 @@ $i-lightbulb: "\e921"; $i-check: "\e909"; $i-edit: "\e932"; + +//------------------------------------------------------------------------------ +// Colors +//------------------------------------------------------------------------------ + +$o-violet: #875a7b; +$o-violet-dark: #7A436B; +$o-violet-darkest: #64305E; + +$o-inverse-lightest: #98a6b0; +$o-inverse-light: #8b979f; +$o-inverse: #47738f; +$o-inverse-dark: #5b7687; +$o-inverse-darker: #485761; + +$color-alpha: #00A19B; +$color-alpha-dark: #00807D; +$color-alpha-light: #26d1af; +$color-alpha-lightest: #2aebc4; + +$color-beta: #5b899e; +$color-beta-dark: #3d5d6b; +$color-beta-light: #699fb8; +$color-beta-lightest: #77b5d1; + +$color-gamma: #e46f78; +$color-gamma-dark: #b0565c; +$color-gamma-light: #fc7c84; +$color-gamma-lightest: #fc959c; + +$color-delta: #5c5b80; +$color-delta-dark: #37364d; +$color-delta-light: #6e6d99; +$color-delta-lightest: #807fb3; + +$color-epsilon: #d5653e; +$color-epsilon-dark: #a34e2f; +$color-epsilon-light: #f07346; +$color-epsilon-lightest: #ff8d63; + +$header-link-normal: #343a40; + +$gray-lightest: #F9F9F9; +$gray-lighter: #F2F2F2; +$gray-light: #d5d5d5; +$gray: #888888; +$gray-dark: #707070; +$gray-darker: #282F33; +$gray-darkest: shade-color($gray-darker, 30%); + + +$primary: $color-alpha-dark; +$secondary: $o-violet-dark; + +$brand-primary : $o-violet; +$brand-success : #50AF51; +$brand-info: #4B9EB6; +$brand-warning : #f39c1e; +$brand-danger : #D9534F; + +$doc_paper_dark: $gray-lighter; +$doc_paper: #ffffff; +$doc_exercise: #938E94; +$doc_code-bg: #F8F8F8; +$doc_lime: #CDDC39; +$doc_orange: #FF5722; +$doc_cyan: $color-alpha; + +//------------------------------------------------------------------------------ +// Misc +//------------------------------------------------------------------------------ + +// Header +$o-header-height: 90px; +$o-side-nav-width: 350px; +$o-on-page-width: 25%; +$o-header-white: #ffffff; + +// Paths and Prefixes +$website-img-base-url: "../img/"; +$website-2x-prefix: "2x_"; + +// Animations and Transitions +$o-ease: cubic-bezier(.55,0,.1,1); + + diff --git a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss index 6ddb6c608..ff4743552 100644 --- a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss +++ b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss @@ -9,46 +9,16 @@ $enable-shadows : true; // Define common padding and border radius sizes and more. -$line-height-lg: 1.3333333 !default; // extra decimals for Win 8.1 Chrome -$line-height-sm: 1.3 !default; - -$border-radius: 2rem / 16 !default; -$border-radius-lg: 2rem / 16 !default; -$border-radius-sm: 1rem / 16 !default; - // Fonts // // Font, line-height, and color for body text, headings, and more. -$font-size-base: 0.875rem; -$line-height-base: 1.45 !default; - - -$h1-font-size: $font-size-base * 2.5 !default; -$h2-font-size: $font-size-base * 2 !default; -$h3-font-size: $font-size-base * 1.75 !default; -$h4-font-size: $font-size-base * 1.5 !default; -$h5-font-size: $font-size-base * 1.25 !default; -$h6-font-size: $font-size-base !default; - -/* $h1-font-size: $font-size-base * (39 / 15) !default; -$h2-font-size: $font-size-base * (32 / 15) !default; -$h3-font-size: $font-size-base * (26 / 15) !default; -$h4-font-size: $font-size-base * (19 / 15) !default; -$h5-font-size: $font-size-base * (15 / 15) !default; -$h6-font-size: $font-size-base * (13 / 15) !default; */ - -/* $headings-font-weight: $fw_semibold !default; */ - -/* $display1-size: 5.5rem * 10 / 16 !default; -$display2-size: 4.5rem * 10 / 16 !default; -$display3-size: 3.5rem * 10 / 16 !default; -$display4-size: 3rem * 10 / 16 !default; - -$display1-weight: $fw_semibold !default; -$display2-weight: $fw_semibold !default; -$display3-weight: $fw_semibold !default; -$display4-weight: $fw_semibold !default; */ +$h1-font-size: 1.875rem; +$h2-font-size: 1.5rem; +$h3-font-size: 1.125rem; +$h4-font-size: 1rem; +$h5-font-size: 1rem; +$h6-font-size: $font-size-secondary; $display-line-height: 1; diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss index dacb370f0..77fea187e 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/extensions/odoo_theme/static/style.scss @@ -11,7 +11,6 @@ div[aria-label="related navigation"] { } body { - font-size: $font-size-base; a { text-decoration: none !important; } @@ -19,6 +18,12 @@ body { margin-left: 1rem; } } + +.hidden { + visibility: hidden !important; + display: none !important; + opacity: 0 !important; +} //------------------------------------------------------------------------------ // Header with logo, searchbar and switchers //------------------------------------------------------------------------------ @@ -82,41 +87,52 @@ header.o_main_header{ left:0; } @include o-transition($duration:.3s); - padding-top: 3rem; + padding-top: 2rem; padding-left: 3rem; background-color: lighten($o-violet-dark, 70%) ; z-index: 10; + @include font-size($font-size-secondary); - > ul { - padding-left: 30px !important; - > li { - padding: .5rem 0; - } + color: $o-violet-dark; + + .toctree-l1 { + padding-top: .5rem; + padding-bottom: .5rem; + } + + .toctree-l1 > ul { + padding-left: 1.5rem; } ul { - padding-left: 1rem; - list-style: none; - li { - a{ - display: block; - padding: .5rem 0; - color: $o-violet-dark; - text-decoration: none; - opacity: .75; - &.current, &:hover { + + li.o_active_toc_entry{ + &:not(.toctree-l1) > .o_toc_entry_wrapper { + i[class^="i-"]:not(.collapsed) { + @include transform(rotate(90deg)); + } + } + > .o_toc_entry_wrapper { + i[class^="i-"]:not(.collapsed), a.reference { + font-weight: $fw_bold; opacity: 1; } } } - li.current > a { - font-weight: $fw_bold; - opacity: 1; + + .o_deepest_active_toc_entry { + background-color: $gray-lightest; } > .toctree-l1 { - &[class^="o_menu_"] > .o_toc_entry_wrapper > i:before { - @include inline-icomoon($i-doc-apps, 0 1rem 0 -30px); + + &[class*="o_menu_"] > .o_toc_entry_wrapper > i { + opacity: .75; + &:before { + @include inline-icomoon($i-doc-apps, 0 1rem 0 0); + color: $o-violet-dark; + margin-right: 0.5rem; + } } &.o_menu_applications > .o_toc_entry_wrapper > i:before{ content:'#{$i-doc-apps}'; @@ -134,25 +150,7 @@ header.o_main_header{ content:'#{$i-doc-contribute}'; } - .o_toc_entry_wrapper { - display: flex; - align-items: center; - } - } - > .toctree-l2 { - .o_toc_entry_wrapper { - > i[class^="i-"] { - transition: rotate .3s; - - &[aria-expanded="true"]{ - transform: rotate(90deg); - } - - } - } - } - } scrollbar-width: thin; scrollbar-color: $o-violet-darker transparent; @@ -168,6 +166,97 @@ header.o_main_header{ } } +.o_side_nav, .o_page_toc_nav { + ul { // all uls in toc + list-style: none; + padding-left: 1rem; + + li { + padding-left: .2rem; + > a.reference { + padding-left: 1.2rem; + } + + a { + display: inline-block; + padding: .5rem 0; + color: inherit; + opacity: .75; + &.current, &:hover { + opacity: 1; + } + } + + &:not(.toctree-l1) { + .o_toc_entry_wrapper { + > i[class^="i-"] { + display: inline-block; + margin-right: .2rem; + @include o-transition(rotate, .3s); + font-weight: $fw_bold; + color: inherit; + + &[aria-expanded="true"] { + @include transform(rotate(90deg)); + } + } + } + } + .o_active_toc_entry { + > a , > .o_toc_entry_wrapper a{ + font-weight: $fw_bold; + opacity: 1; + } + } + } + } + > ul { //is first ul in toc + padding-left: 0; + } +} +//------------------------------------------------------------------------------ +// On this page local toctree +//------------------------------------------------------------------------------ + + aside.o_page_toc { + display: none; + @include font-size($font-size-secondary); + @include media-breakpoint-up(lg) { + display: block; + position: -webkit-sticky; + position: sticky; + top: $o-header-height; + right: 0; + width: $o-on-page-width; + height: calc(100% - #{$o-header-height}); + padding: 3rem 3rem 3rem 0; + } + + h3 { + text-transform: uppercase; + font-weight: $fw_bold; + color: $gray-darker; + padding-left: .5rem; + margin-bottom: 0; + } + + a { + font-weight: $fw_regular; + color: $gray-darkest; + } + + .o_page_toc_title { + display:none; + + ul { + padding-left: 0; + } + } + + .o_active_toc_entry > a { + font-weight: $fw_bold; + } + } + //------------------------------------------------------------------------------ // Main page content //------------------------------------------------------------------------------ @@ -205,7 +294,7 @@ header.o_main_header{ &:before { @include inline-icomoon($i-o-services , 0 1rem 0 0); display: block; - font-size: 50px; + @include font-size(50px); margin: 0 auto 20px; } &.o_title_start:before { @@ -239,8 +328,11 @@ header.o_main_header{ } } + // "in between" pages (Applications / Contributing) + &.doc-toc { .toctree-wrapper { + margin-top: 1.5rem; > ul { display: flex; flex-wrap: wrap; @@ -262,7 +354,7 @@ header.o_main_header{ .toctree-l1 > a { display: block; color: $gray-darker; - font-size: 1.2rem; + @include font-size($h2-font-size); padding-bottom: .5rem; border-bottom: 1px solid $gray-light; margin-bottom: 1rem; @@ -296,7 +388,7 @@ header.o_main_header{ > * { width: 54.633333%; - max-width: 600px; + /* max-width: 600px; */ float: left; clear: left; } @@ -313,12 +405,7 @@ header.o_main_header{ margin-left: 57%; padding: 1rem; - p, blockquote, tr, th, li { - color: $gray-light; - } - blockquote { - color: $gray-light; font-family: $font-family-serif; font-weight: $fw_semibold; font-style: italic; @@ -331,16 +418,24 @@ header.o_main_header{ pre { font-size: 12px; } + } - .content-switcher { - margin-top:0; + .content-switcher { - > ul { - margin-bottom: 0; - } + .nav-tabs .nav-link.active { + background-color: #f8f8f8; + border-color: #dee2e6 #dee2e6 #f8f8f8; + font-weight: $fw_semibold; + } - > ul > li { - color: $gray-lightest; + .tab-content { + display:flex; + background: $doc_code-bg; + border: 1px $gray-300 solid; + border-top: 0; + + div[class^="highlight"] { + margin: 0; } } } @@ -357,27 +452,31 @@ header.o_main_header{ position: relative; .o_git_link { - color: $gray; - @include o-position-absolute($top: 0, $right: 1rem); + @include font-size($font-size-secondary); + @include o-position-absolute($top: 1rem, $right: 1rem); i { - font-size: 1.2rem; margin-right: .2rem; } } dt { - padding-top: $o-header-height; - margin-top: -$o-header-height; + &:before { + @include scroll-padding() + } } section { - // This fixes the scroll position - padding-top: $o-header-height; - margin-top: -$o-header-height; + // This fixes the scroll position // BUT creates issues when buttons or links from the previous section are behind it + // padding-top: $o-header-height; + // margin-top: -$o-header-height; */ + // adding a :before works better; + &:before { + @include scroll-padding() + } > h1 { color: $o-violet-dark; - font-weight: $fw_semibold; + font-weight: $fw_bold; max-width: calc(100% - 120px); } @@ -387,15 +486,23 @@ header.o_main_header{ border-bottom: 1px solid $gray-light; } + > h3 { + color: $gray-darkest; + font-weight: $fw_extrabold; + } + a.headerlink { visibility: hidden !important; &:after { - @include inline-icomoon($i-link, 0 1rem 0 0); + content: '#{$i-link}'; + font-family: $icomoon-font-family !important; + @include font-size($font-size-base); + vertical-align: middle; + margin: 0 1rem 0 0; visibility: hidden; - font-size: 1rem; color: $gray-light; opacity: 0; - transition: .1s + @include o-transition(all, .1s) } } // This makes permalinks only visible on hover. @@ -408,21 +515,15 @@ header.o_main_header{ } .img-fluid { - @include box-shadow(0 3px 6px rgba(0, 0, 0, .16)); - margin-bottom: 2rem; + margin-bottom: 1rem; } } - &:not(.has_code_col) { - div[class^="highlight"] { - border: 1px solid $gray-light; - } - } - div[class^="highlight"] { // This styles the consoles like read-the-doc's consoles overflow-x: auto; + border: 1px solid $gray-light; margin: 1px 0 24px 0; div[class^="highlight"] { @@ -460,7 +561,6 @@ header.o_main_header{ } > h3, > .alert-title { - font-size: 1.642857143em; line-height: 1em; margin: 0 0 10px 0; font-size: 1rem; @@ -589,70 +689,16 @@ header.o_main_header{ } } } - -//------------------------------------------------------------------------------ -// On this page toc -//------------------------------------------------------------------------------ - - aside.o_page_toc { - display: none; - - @include media-breakpoint-up(lg) { - display: block; - position: -webkit-sticky; - position: sticky; - top: $o-header-height; - right: 0; - width: $o-on-page-width; - height: calc(100% - #{$o-header-height}); - padding: 3rem 3rem 3rem 1rem; - font-size: .9rem; - } - - .o_page_toc_nav > ul { - padding-left: 0; - } - - h3 { - text-transform: uppercase; - font-weight: $fw_bold; - font-size: 1rem; - color: $gray-darker; - } - - ul { - list-style: none; - - a { - display: block; - padding: .5rem 0; - font-weight: $fw_regular; - color: $gray-darker; - - &.o_page_toc_title { - display:none; - + ul { - padding-left: 0; - } - } - } - } - .o_active_toc_entry > a { - font-weight: $fw_bold; - } - } } - //------------------------------------------------------------------------------ // Footer //------------------------------------------------------------------------------ -footer{ +footer { > div { padding: 3rem; @include media-breakpoint-up(lg) { - padding-left: calc(#{$o-side-nav-width} + 3rem) } } @@ -668,35 +714,4 @@ footer{ } } - - .o_footer_nav { - display: flex; - - .o_footer_nav_title { - font-weight: $fw_regular; - text-transform: uppercase; - padding: 0 1rem; - } - - .accordion { - - .accordion-collapse { - border: none; - } - - .accordion-body { - background: $gray-100; - > li > a { - font-weight: $fw-regular; - } - - } - - .accordion-button::after { - background-size: .8rem; - width: .8rem; - height: .8rem; - } - } - } -} +} \ No newline at end of file