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;
}