diff --git a/extensions/odoo_theme/static/fonts/icomoon.eot b/extensions/odoo_theme/static/fonts/icomoon.eot index 43770f9da..bddd6599a 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 794b4c16c..434d39789 100644 --- a/extensions/odoo_theme/static/fonts/icomoon.svg +++ b/extensions/odoo_theme/static/fonts/icomoon.svg @@ -73,6 +73,7 @@ + diff --git a/extensions/odoo_theme/static/fonts/icomoon.ttf b/extensions/odoo_theme/static/fonts/icomoon.ttf index 80b59b567..ac360c4e0 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 1b9b700bb..8a3563c76 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/fonts/icomoon.woff2 b/extensions/odoo_theme/static/fonts/icomoon.woff2 index a07d615a8..b2df3ab85 100644 Binary files a/extensions/odoo_theme/static/fonts/icomoon.woff2 and b/extensions/odoo_theme/static/fonts/icomoon.woff2 differ diff --git a/extensions/odoo_theme/static/scss/_iconfont.scss b/extensions/odoo_theme/static/scss/_iconfont.scss index dbdca0e0b..1f4c82838 100644 --- a/extensions/odoo_theme/static/scss/_iconfont.scss +++ b/extensions/odoo_theme/static/scss/_iconfont.scss @@ -427,3 +427,8 @@ content: $i-sidepanel; } } +.i-close { + &:before { + content: $i-close; + } +} diff --git a/extensions/odoo_theme/static/scss/_mixins.scss b/extensions/odoo_theme/static/scss/_mixins.scss index 630fe125d..fc99fa9c3 100644 --- a/extensions/odoo_theme/static/scss/_mixins.scss +++ b/extensions/odoo_theme/static/scss/_mixins.scss @@ -4,18 +4,6 @@ // Utilities // ------------------------------------------------------------------ -.o-no-select { - pointer-events: none; - cursor: default; - &, & * { - &::selection { - background: transparent; - } - &::-moz-selection { - background: transparent; - } - } -} @mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto){ position: absolute; @@ -41,32 +29,6 @@ // Backgrounds // ------------------------------------------------------------------ -@mixin o-svg-bg($file_name,$file_ext,$x:50%, $y:50%, $repeat: no-repeat, $folder: ''){ - $std-url: url("img/${folder}${file_name}.${file_ext}"); - $svg-url: url("img/${folder}${file_name}.svg"); - background-image: $std-url; - background-image: $svg-url; - background-position: $x $y; - background-repeat: $repeat; -} - -@mixin o-retina-bg($img,$x:50%, $y:50%, $repeat: no-repeat, $folder: ''){ - $std-url: url("img/${folder}${img}"); - background-image: $std-url; - background-position: $x $y; - background-repeat: $repeat; - - @media - only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and ( min--moz-device-pixel-ratio: 2), - only screen and ( -o-min-device-pixel-ratio: 2/1), - only screen and ( min-device-pixel-ratio: 2), - only screen and ( min-resolution: 192dpi), - only screen and ( min-resolution: 2dppx) { - // $2x-url: url("img/${folder}${website-2x-prefix}${img}"); - background-image: url("img/${folder}${website-2x-prefix}${img}"); - } -} @mixin o-gradient($deg: 99deg , $startColor: $o-violet, $endColor: #62495B, $startOffset: 10%, $endOffset: 90%){ background: mix($startColor, $endColor); @@ -103,29 +65,8 @@ display: block; width: 0; height: 0; - padding-top: $o-header-height + 10px; - margin-top: -$o-header-height - 10px; -} - - -//-- has_col - -@mixin o-pseudo-col(){ - position: relative; - min-height: 1px; - padding-right: 15px; - padding-left: 15px; - float: left; - width: 100%; -} - -@mixin o-code-col(){ - /* content: ""; Deactivating o_has_code_column 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); - width: 43%; - height: calc(100% - 3rem); + padding-top: calc(#{$o-headers-height} + 10px); + margin-top: -$o-headers-height - 10px; } @mixin o-easter-egg($width: 100%, $height: 100%, $img: 'img/poule.svg' ){ @@ -151,14 +92,10 @@ } } -@function valid-radius($radius) { - $return: (); - @each $value in $radius { - @if type-of($value) == number { - $return: append($return, max($value, 0)); - } @else { - $return: append($return, $value); - } - } - @return $return; -} \ No newline at end of file +@mixin o-content-tab-selected { + font-weight: $fw_bold; + background: $doc-paper; + border-bottom: 1px solid $doc-paper; + border-left: 1px solid $gray-light; + border-right: 1px solid $gray-light; +} diff --git a/extensions/odoo_theme/static/scss/_variables.scss b/extensions/odoo_theme/static/scss/_variables.scss index 2ae991715..dbec98217 100644 --- a/extensions/odoo_theme/static/scss/_variables.scss +++ b/extensions/odoo_theme/static/scss/_variables.scss @@ -1,25 +1,9 @@ -$o-pagination-main-border: #d8d8d8; - $grid-breakpoint-xxl: 1400px; $grid-breakpoint-xxxl: 1680px; $container-max-width-xxl:1380px; $container-max-width-xxxl: 1560px; -// Paths and Prefixes -// ============================================== -$website-img-base-url : "../img"; -$website-loading-url : "openerp_website/static/src/img/2016/gif/ring.gif"; -$website-2x-prefix : "2x_"; - -// Animations and Transitions -// ===================== -$o-ease: cubic-bezier(.55,0,.1,1); - -// Events -// =============================================== -$country-events-list-gap : 15px; - // Odoo Colours // ============================================== $o-violet-dark : #875A7B; @@ -71,6 +55,7 @@ $fw_extrabold: 800; $fw_black: 900; $font-size-secondary: .875rem; + //------------------------------------------------------------------------------ // icomoon icons //------------------------------------------------------------------------------ @@ -158,6 +143,7 @@ $i-check: "\e909"; $i-edit: "\e932"; $i-article: "\e94e"; $i-sidepanel: "\e941"; +$i-close: "\e942"; //------------------------------------------------------------------------------ @@ -235,10 +221,10 @@ $o-header-mobile-height: 50px; $o-header-height: 80px; $o-header-white: #ffffff; -$o-subheader-height: calc(#{$o-header-height}/2.5); +$o-subheader-height: 32px; -$o-headers-mobile-height: calc(#{$o-header-mobile-height} + (#{$o-subheader-height})); -$o-headers-height: calc(#{$o-header-height} + #{$o-subheader-height}); +$o-headers-mobile-height: $o-header-mobile-height + $o-subheader-height; +$o-headers-height: $o-header-height + $o-subheader-height; // Navigation $o-side-nav-width: 350px; $o-on-page-width: 20%; @@ -247,13 +233,6 @@ $o-on-page-width: 20%; $o-halfpage-width: 54%; $o-codecol-width: 43%; -// Paths and Prefixes -$website-img-base-url: "../img/"; -$website-2x-prefix: "2x_"; - -// Animations and Transitions -$o-ease: cubic-bezier(.55,0,.1,1); - // Paddings and margins $padding-xs: .5rem; $padding-s: 1rem; diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss index d8043ba3b..91ef1c300 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/extensions/odoo_theme/static/style.scss @@ -12,15 +12,27 @@ div[aria-label="related navigation"] { body { position: relative; - a:not(:hover), a.o_logo { - text-decoration: none !important; - } + a { + @include media-breakpoint-down(lg) { + overflow-wrap: anywhere; + } - a.external:after { - content: '#{$i-external-link}'; - font-family: icomoon, sans-serif !important; - @include font-size($font-size-base/1.3); - margin: 0 .2rem; + &:not(:hover), &.o_logo { + text-decoration: none !important; + } + + &:hover { + text-underline-position: from-font; + } + + &.external { + &:not(.image-reference):after { + content: '#{$i-external-link}'; + font-family: icomoon, sans-serif !important; + @include font-size($font-size-base/1.3); + margin: 0 .2rem; + } + } } dd { @@ -34,8 +46,11 @@ body { } } - abbr[title="Pull Request"] { - @include o-easter-egg(); + abbr { + text-underline-offset: 2px; + &[title="Pull Request"] { + @include o-easter-egg(); + } } } @@ -47,6 +62,7 @@ body { span.viewcode-link { float: none; + margin-left: .3rem; } //------------------------------------------------------------------------------ // Header with logo, searchbar and switchers @@ -110,7 +126,7 @@ header { position: relative; @include media-breakpoint-up(lg) { - padding-right: $padding-m; + margin-right: $padding-m; } .o_search { @@ -120,10 +136,7 @@ header { @include o-position-absolute($top: 50%, $right: .5rem); @include o-transform (translateY(-50%)) ; - @include media-breakpoint-up(lg) { - right: 1rem; - } - padding: 0; + padding: 0 $padding-xs; font-size: 1.2rem; color: $gray; } @@ -138,14 +151,16 @@ header { } .highlight-link { - @include o-position-absolute($bottom: -4.5rem, $right: 0); - @include media-breakpoint-up(lg) { - bottom: -1.5rem; - right: $padding-m; - } + @include font-size(0); margin-bottom: 0; a { - @include font-size(12px); + text-decoration: none; + color: $gray; + &:before { + @include o-position-absolute($top: 50%, $right: 3rem); + @include o-transform (translateY(-50%)) ; + @include o-inline-icon($i-close, auto, middle, 1.2rem); + } } } } @@ -182,7 +197,6 @@ header { //------------------------------------------------------------------------------ .o_side_nav { - width: 100%; .o_mobile-overlay { background-color: rgba(0,0,0,.3); @include o-position-absolute($top: 0, $bottom: 0, $left: 0, $right:0); @@ -190,9 +204,10 @@ header { transition: opacity .2s linear; z-index: -100; } + .o_side_nav-inner { width: 90%; - height: calc(100% - (#{$o-headers-mobile-height}); + height: calc(100% - #{$o-headers-mobile-height}); overflow-y: auto; position: fixed; left: -100%; @@ -205,11 +220,23 @@ header { font-weight: $fw_regular; @include media-breakpoint-up(lg) { width: $o-side-nav-width; - height: calc(100vh - (#{$o-headers-height})); + height: calc(100vh - #{$o-headers-height}); left: 0; padding-top: $padding-m; padding-left: $padding-m; } + &::-webkit-scrollbar { + width: 5px; + } + + &::-webkit-scrollbar-track { + background: $white; + } + + &::-webkit-scrollbar-thumb { + background-color: $o-violet-darker ; + border-radius: 0; + } } &.show { @@ -224,7 +251,6 @@ header { } .toctree-l1 { - padding-top: $padding-xs; padding-bottom: $padding-xs; > .o_toc_entry_wrapper a { @@ -232,6 +258,7 @@ header { font-weight: 600; } } + .o_main_toc { > ul { li { @@ -285,19 +312,6 @@ header { } } - - &::-webkit-scrollbar { - width: 5px; - } - - &::-webkit-scrollbar-track { - background: $white; - } - - &::-webkit-scrollbar-thumb { - background-color: $o-violet-darker ; - border-radius: 0; - } } .o_main_toc, .o_page_toc_nav { @@ -364,14 +378,13 @@ header { display: none; @include media-breakpoint-up(xl) { display: block; + grid-area: toc; top: $o-headers-height; - right: 0; - padding: $padding-l $padding-s $padding-l 0; + padding: $padding-m $padding-s $padding-m 0; overflow-y: auto; } position: -webkit-sticky; position: sticky; - width: $o-on-page-width; height: 100%; max-height: calc(100vh - #{$o-headers-height}); } @@ -409,22 +422,49 @@ header { //------------------------------------------------------------------------------ #wrap { + display: grid; + grid-template-areas: "main"; + grid-template-columns: minmax(0,100%); margin-top: $o-headers-mobile-height; @include media-breakpoint-up(lg) { - display: flex; - justify-content: space-between; + grid-template-areas: "sidebar main toc"; + grid-template-columns: minmax(0,$o-side-nav-width) minmax(0,auto) minmax(0,$o-on-page-width); margin-top: $o-headers-height; } - + p { + > code { + padding: 0 .3rem; + } + } code { display: inline-block; color: inherit; - background: $doc_code-bg; - padding: 0 .3rem; - margin: 0 0.1rem; - line-height: 1.3; - border: 1px solid $gray-light; overflow-wrap: anywhere; + &:first-of-type:not(span):not(em) { + padding-left: .3rem; + } + &:last-of-type:not(em) { + padding-right: .3rem; + } + ~ .sig-paren, ~ .sig-param, ~ .optional { + @extend code; + + .sig-paren { + padding: 0 .1rem; + } + } + &.file { + font-family: $font-family-base; + font-weight: $fw_medium; + font-style: italic; + padding-right: .4rem; + color: $color-beta-dark; + background-color: lighten($color-beta-lightest, 30%); + } + + &:not(.file) { + color: inherit; + background: darken($doc_code-bg,3%); + } } iframe { @@ -433,22 +473,19 @@ header { main { position: relative; + grid-area: main; padding-bottom: $padding-l; @include media-breakpoint-up(lg) { - left: calc(#{$o-side-nav-width} - #{$padding-s}); - max-width: calc(100vw - #{$o-side-nav-width}); - padding: $padding-l; + padding: $padding-m $padding-l; margin: 0; + grid-column-end: toc; } @include media-breakpoint-up(xl) { - left: $o-side-nav-width; - max-width: calc(100vw - #{$o-side-nav-width} - #{$o-on-page-width}); + grid-column-end: main; } &.o_index, &.o_fullwidth_page, &.o_has_code_column { - @include media-breakpoint-up(xl) { - max-width: calc(100vw - #{$o-side-nav-width}); - } + grid-column-end: toc; } // Homepage @@ -460,11 +497,11 @@ header { align-items: center; @include o-gradient(); @include media-breakpoint-up(lg) { - margin: -#{$margin-m} -#{$margin-m} $margin-m; + margin: -#{$margin-m} -#{$margin-l} $margin-m; padding: $padding-m $padding-m; } @include media-breakpoint-up(xl) { - margin: -#{$margin-l} -#{$margin-l} $margin-l; + margin: -#{$margin-m} -#{$margin-l} $margin-l; padding: $padding-l $padding-l; } } @@ -522,18 +559,7 @@ header { // pages with column for code on the right &.o_has_code_column { article.doc-body { - > * { - max-width: 100%; - } - @include media-breakpoint-up(xl) { - width: 100%; - padding-right: 0; - - &:before { - @include o-code-col(); - } - .o_git_link { right: calc(#{$o-codecol-width} + #{$padding-l}); } @@ -636,6 +662,32 @@ header { .command { font-family: var(--bs-font-monospace); + font-weight: $fw_regular; + @extend code; + } + + dl.py, dl.js { + > dd { + border-left: 3px solid $gray-lighter; + margin: 0; + padding-left: $padding-s; + padding-top: $padding-xs; + } + &.class em.property { + font-size: $font-size-secondary; + &:first-child { + border-bottom: 3px solid $gray-lighter; + + [class^=sig] { + padding-left: .3rem; + } + } + &:not(:first-child) { + @extend code; + &:last-of-type { + padding-right: .3rem; + } + } + } } dl.field-list { @@ -646,8 +698,11 @@ header { display: block; } - > dt, > dd { + > dt { padding-left: 0; + } + + > dd { padding-right: 0; } @@ -739,6 +794,7 @@ header { a.headerlink { text-decoration: none; font-size: 0; + line-height: 0; visibility: hidden !important; &:before { @@ -802,21 +858,21 @@ header { .dfn{ @include font-size($font-size-secondary); line-height: 1; - color: $o-violet; + color: $color-beta; font-weight: $fw_semibold; &:before { content:'?'; display: inline-block; width: 15px; height: 15px; - background-color: $o-violet; - border: 1px solid $o-violet; + border: 2px solid $color-beta; border-radius: 20px; text-align: center; - color: $white; + color: $color-beta; + font-size: 12px; font-weight: $fw_extrabold; font-style: normal; - margin: 0 .2rem; + margin: 0 .1rem; } } @@ -851,11 +907,14 @@ header { // Alerts //------------------------------------------------------------------------------ // alert-info +// alert-note +// alert-tip // alert-warning // alert-danger -// alert-go_to +// alert-example // alert-exercise -// alert-success // removed : never used in doc +// alert-go_to + .alert { position: relative; display: inline-block; @@ -864,8 +923,10 @@ header { width: 100%; @include font-size($font-size-secondary); - code { + code, div[class^="highlight"] { background-color: $white !important; + border: 1px solid $gray-light; + color: inherit; } > p , > ul { @@ -900,6 +961,10 @@ header { content: '#{$i-info}'; } } + + code, div[class^="highlight"] { + border-color: tint-color($brand-info, 30%); + } } &.alert-note { @@ -938,6 +1003,10 @@ header { content: '#{$i-warning}'; } } + + code, div[class^="highlight"] { + border-color: tint-color($brand-warning, 50%); + } } &.alert-danger { @@ -950,6 +1019,10 @@ header { content: '#{$i-danger}'; } } + + code, div[class^="highlight"] { + border-color: tint-color($brand-danger, 50%); + } } &.alert-example { @@ -964,6 +1037,10 @@ header { > .alert-title:before, > h3:before { content: '#{$i-knowledge}'; } + + code, div[class^="highlight"] { + border-color: tint-color($doc-example, 50%); + } } &.alert-exercise { @@ -978,6 +1055,9 @@ header { > .alert-title:before, > h3:before { content: '#{$i-exercise}'; } + code, div[class^="highlight"] { + border-color: tint-color($doc-exercise, 50%); + } } &.alert-go_to { @@ -995,6 +1075,9 @@ header { > .alert-title:before, > h3:before { content: '#{$i-arrow-right}'; } + code, div[class^="highlight"] { + border-color: tint-color($o-violet, 50%); + } } } } @@ -1003,14 +1086,6 @@ header { // Content Tabs //------------------------------------------------------------------------------ -@mixin o-content-tab-selected { - font-weight: 700; - background: $doc-paper; - border-bottom: 1px solid $doc-paper; - border-left: 1px solid $gray-light; - border-right: 1px solid $gray-light; -} - .sphinx-tabs { padding: 0; margin-bottom: 1rem; @@ -1043,8 +1118,8 @@ header { &:hover { &:not([aria-selected="true"]) { cursor: pointer; - background: hsl(317deg, 16%, 90%); - color: #7A436B; + background: tint-color($o-violet-dark, 80%); + color: $o-violet-dark; transition: color .15s, background .15s; border-radius: 0; }