diff --git a/extensions/odoo_theme/static/scss/_mixins.scss b/extensions/odoo_theme/static/scss/_mixins.scss index f2d583b77..b10838e03 100644 --- a/extensions/odoo_theme/static/scss/_mixins.scss +++ b/extensions/odoo_theme/static/scss/_mixins.scss @@ -8,9 +8,9 @@ @mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto){ position: absolute; top: $top; - left: $left; - bottom: $bottom; right: $right; + bottom: $bottom; + left: $left; } @mixin o-transform-origin($x: 50%, $y: 50%, $z: 0){ @@ -49,13 +49,13 @@ //-- add icon -@mixin o-inline-icon($icon-content, $margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $fw_regular) { +@mixin o-inline-icon($icon-content, $margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $o-fw-regular) { content: '#{$icon-content}'; - font-family: 'icomoon' !important; - @include font-size($font-size); - font-weight: $font-weight; vertical-align: $v-align; margin: $margin; + @include font-size($font-size); + font-family: 'icomoon' !important; + font-weight: $font-weight; } //-- fix scroll issue @@ -65,8 +65,8 @@ display: block; width: 0; height: 0; - padding-top: calc(#{$o-headers-height} + 10px); margin-top: -$o-headers-height - 10px; + padding-top: calc(#{$o-headers-height} + 10px); } @mixin o-easter-egg($width: 100%, $height: 100%, $img: 'img/poule.svg' ){ @@ -74,10 +74,10 @@ // Easter Egg on hover 5s &:after { content: ''; + @include o-position-absolute(auto, 0, 0, 0); display: block; width: $width; height: $height; - @include o-position-absolute(auto, 0, 0, 0); background-image: url('#{$img}'); background-color: $white; background-repeat: no-repeat; @@ -93,19 +93,19 @@ } @mixin o-content-tab-selected { - font-weight: $fw_bold; - background: $white; + font-weight: $o-fw-bold; border-bottom: 1px solid $white; border-left: 1px solid $o-gray-border; border-right: 1px solid $o-gray-border; + background: $white; } @mixin o-code { display: inline-block; - color: inherit; overflow-wrap: anywhere; background: $o-literals-bg; font-size: 0.875rem; font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace; - font-weight: $fw_regular; + font-weight: $o-fw-regular; + color: inherit; } diff --git a/extensions/odoo_theme/static/scss/_typography.scss b/extensions/odoo_theme/static/scss/_typography.scss index e41ff2b6f..64e4b433b 100644 --- a/extensions/odoo_theme/static/scss/_typography.scss +++ b/extensions/odoo_theme/static/scss/_typography.scss @@ -35,47 +35,47 @@ html body{ // Font weight //------------------------------------------------------------------------------ b, strong{ - font-weight: $fw_bold; + font-weight: $o-fw-bold; } a { - font-weight: $fw_semibold; + font-weight: $o-fw-semibold; } .fw_extralight { - font-weight: $fw_extralight; + font-weight: $o-fw-extralight; } .fw_light { - font-weight: $fw_light; + font-weight: $o-fw-light; } .fw_extralight, .fw_light{ label, b, strong, a { - font-weight: $fw_regular; + font-weight: $o-fw-regular; } } .fw_regular { - font-weight: $fw_regular; + font-weight: $o-fw-regular; } .fw_medium { - font-weight: $fw_medium; + font-weight: $o-fw-medium; } .fw_semibold { - font-weight: $fw_semibold; + font-weight: $o-fw-semibold; } .fw_bold { - font-weight: $fw_bold; + font-weight: $o-fw-bold; } .fw_extrabold { - font-weight: $fw_extrabold; + font-weight: $o-fw-extrabold; } .fw_black { - font-weight: $fw_black; + font-weight: $o-fw-black; } diff --git a/extensions/odoo_theme/static/scss/_variables.scss b/extensions/odoo_theme/static/scss/_variables.scss index f8436b8e8..061f900e3 100644 --- a/extensions/odoo_theme/static/scss/_variables.scss +++ b/extensions/odoo_theme/static/scss/_variables.scss @@ -1,21 +1,21 @@ -$grid-breakpoint-xxl: 1400px; -$grid-breakpoint-xxxl: 1680px; +$o-grid-breakpoint-xxl: 1400px; +$o-grid-breakpoint-xxxl: 1680px; -$container-max-width-xxl:1380px; -$container-max-width-xxxl: 1560px; +$o-container-max-width-xxl:1380px; +$o-container-max-width-xxxl: 1560px; // Typography // =============================================== -$font-family-serif: 'Roboto Slab', Georgia, "Times New Roman", Times, serif; +$o-font-family-serif: 'Roboto Slab', Georgia, "Times New Roman", Times, serif; -$fw_extralight: 200; -$fw_light: 300; -$fw_regular: 400; -$fw_medium: 500; -$fw_semibold: 600; -$fw_bold: 700; -$fw_extrabold: 800; -$fw_black: 900; +$o-fw_extralight: 200; +$o-fw_light: 300; +$o-fw-regular: 400; +$o-fw-medium: 500; +$o-fw-semibold: 600; +$o-fw-bold: 700; +$o-fw-extrabold: 800; +$o-fw_black: 900; //------------------------------------------------------------------------------ // icomoon icons @@ -169,13 +169,13 @@ $o-halfpage-width: 54%; $o-codecol-width: 43%; // Paddings and margins -$padding-xs: .5rem; -$padding-s: 1rem; -$padding-m: 2rem; -$padding-l: 3rem; -$margin-s: $padding-s; -$margin-m: $padding-m; -$margin-l: $padding-l; +$o-padding-xs: .5rem; +$o-padding-s: 1rem; +$o-padding-m: 2rem; +$o-padding-l: 3rem; +$o-margin-s: $o-padding-s; +$o-margin-m: $o-padding-m; +$o-margin-l: $o-padding-l; $o-icon-margin: .2em; //------------------------------------------------------------------------------ diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss index c21b47253..a4222feb5 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/extensions/odoo_theme/static/style.scss @@ -29,9 +29,9 @@ body { &.external { &:not(.image-reference):after { content: '#{$i-external-link}'; + margin: 0 $o-icon-margin; font-family: icomoon, sans-serif !important; @include font-size($font-size-base/1.3); - margin: 0 $o-icon-margin; } } } @@ -52,9 +52,9 @@ body { } .hidden { - visibility: hidden !important; display: none !important; opacity: 0 !important; + visibility: hidden !important; } span.viewcode-link { @@ -66,42 +66,46 @@ span.viewcode-link { //------------------------------------------------------------------------------ header { - width: 100%; position: fixed; + width: 100%; top: 0; left: 0; right: 0; z-index: 10; .o_main_header { height: $o-header-mobile-height; + padding: 0 $o-padding-s; background-color: $o-header-bg; - padding: 0 $padding-s; + @include media-breakpoint-up(lg) { height: $o-header-height; - padding: 0 $padding-m; + padding: 0 $o-padding-m; } + @include media-breakpoint-up(xl) { - padding: 0 $padding-l 0 $padding-m; + padding: 0 $o-padding-l 0 $o-padding-m; } .o_logo_wrapper { - margin-right: $margin-s; + margin-right: $o-margin-s; + @include media-breakpoint-up(xl) { - width: calc(#{$o-side-nav-width} - #{$padding-m}); + width: calc(#{$o-side-nav-width} - #{$o-padding-m}); } + @include media-breakpoint-up(lg) { - margin-right: $margin-l; + margin-right: $o-margin-l; } > .o_logo { img { - margin-bottom: -2px; vertical-align: baseline; + margin-bottom: -2px; } span { - @include font-size($font-size-base); color: $o-violet; + @include font-size($font-size-base); @include o-easter-egg($img:'img/ducky.svg'); } } @@ -123,17 +127,18 @@ header { position: relative; @include media-breakpoint-up(lg) { - margin-right: $padding-m; + margin-right: $o-padding-m; } .o_search { position: relative; width: 100%; + .btn { @include o-position-absolute($top: 50%, $right: .5rem); @include o-transform (translateY(-50%)) ; - padding: 0 $padding-xs; + padding: 0 $o-padding-xs; font-size: 1.2rem; color: $o-gray; } @@ -148,11 +153,13 @@ header { } .highlight-link { - @include font-size(0); margin-bottom: 0; + @include font-size(0); + a { text-decoration: none; color: $o-gray; + &:before { @include o-position-absolute($top: 50%, $right: 3rem); @include o-transform (translateY(-50%)) ; @@ -164,23 +171,27 @@ header { } .o_subheader { - background: $o-gray-bg; height: $o-subheader-height; - padding-right: $padding-s; + padding-right: $o-padding-s; + background: $o-gray-bg; + @include media-breakpoint-up(lg) { - padding: 0 $padding-m; + padding: 0 $o-padding-m; } + @include media-breakpoint-up(xl) { - padding: 0 $padding-l 0 0; + padding: 0 $o-padding-l 0 0; } .o_side_nav_toggler_wrapper { height: 100%; + button { &:focus, &:focus-visible{ - box-shadow: none; - outline:none; + box-shadow: none; + outline:none; } + &[aria-expanded="true"]{ background-color: rgba(0,0,0, .2); } @@ -195,32 +206,33 @@ header { .o_side_nav { .o_mobile-overlay { - background-color: rgba(0,0,0,.3); @include o-position-absolute($top: 0, $bottom: 0, $left: 0, $right:0); + z-index: -100; opacity: 0; transition: opacity .2s linear; - z-index: -100; + background-color: rgba(0,0,0,.3); } .o_side_nav-inner { + position: fixed; + left: -100%; + z-index: 10; width: 90%; height: calc(100% - #{$o-headers-mobile-height}); overflow-y: auto; - position: fixed; - left: -100%; - @include o-transition(all, .3s); - padding-left: $padding-s; + padding-left: $o-padding-s; background-color: lighten($o-violet, 70%) ; - z-index: 10; - @include font-size($font-size-sm); color: $o-violet; - font-weight: $fw_regular; + font-weight: $o-fw-regular; + + @include o-transition(all, .3s); + @include font-size($font-size-sm); @include media-breakpoint-up(lg) { width: $o-side-nav-width; height: calc(100vh - #{$o-headers-height}); left: 0; - padding-top: $padding-m; - padding-left: $padding-m; + padding-top: $o-padding-m; + padding-left: $o-padding-m; } &::-webkit-scrollbar { width: 5px; @@ -248,7 +260,7 @@ header { } .toctree-l1 { - padding-bottom: $padding-xs; + padding-bottom: $o-padding-xs; > .o_toc_entry_wrapper a { color: $o-violet; @@ -314,7 +326,7 @@ header { .o_main_toc, .o_page_toc_nav { ul { // all uls in toc list-style: none; - padding-left: $padding-s; + padding-left: $o-padding-s; li { > a.reference { @@ -325,7 +337,7 @@ header { display: inline-block; padding: .4rem 0; color: $o-gray-color; - font-weight: $fw_regular; + font-weight: $o-fw-regular; } &:not(.toctree-l1) { @@ -354,7 +366,7 @@ header { } } > a , > .o_toc_entry_wrapper a, > .o_toc_entry_wrapper i { - font-weight: $fw_bold; + font-weight: $o-fw-bold; } } } @@ -377,7 +389,7 @@ header { display: block; grid-area: toc; top: $o-headers-height; - padding: $padding-m $padding-s $padding-m 0; + padding: $o-padding-m $o-padding-s $o-padding-m 0; overflow-y: auto; } position: -webkit-sticky; @@ -394,14 +406,14 @@ header { h5 { text-transform: uppercase; - font-weight: $fw_bold; + font-weight: $o-fw-bold; color: $o-gray-color; - padding-left: $padding-xs; - margin-bottom: $padding-xs; + padding-left: $o-padding-xs; + margin-bottom: $o-padding-xs; } a { - font-weight: $fw_regular; + font-weight: $o-fw-regular; color: $o-gray-color } @@ -438,7 +450,7 @@ header { padding: 0 .3rem; &.file { font-family: $font-family-base; - font-weight: $fw_medium; + font-weight: $o-fw-medium; font-style: italic; padding-right: .4rem; color: $blue-700; @@ -465,8 +477,8 @@ header { > dd { border-left: 3px solid $o-literals-border; margin-top: -0.075rem; - padding-left: $padding-s; - padding-top: $padding-xs; + padding-left: $o-padding-s; + padding-top: $o-padding-xs; } &.class em.property { font-size: $font-size-sm; @@ -476,9 +488,6 @@ header { &:not(:first-child) { @include o_code; padding: 0 .3rem; - // &:last-of-type { - // padding-right: .3rem; - // } } } } @@ -500,7 +509,7 @@ header { padding-left: 0; li:not(:last-child) { - padding-bottom: $padding-xs; + padding-bottom: $o-padding-xs; } } } @@ -512,9 +521,9 @@ header { main { position: relative; grid-area: main; - padding-bottom: $padding-l; + padding-bottom: $o-padding-l; @include media-breakpoint-up(lg) { - padding: $padding-m $padding-l; + padding: $o-padding-m $o-padding-l; margin: 0; grid-column-end: toc; } @@ -530,17 +539,17 @@ header { &.o_index { .o_content_fw_banner { - margin: 0 -0.75rem $margin-m; - padding: $padding-m $padding-s; + margin: 0 -0.75rem $o-margin-m; + padding: $o-padding-m $o-padding-s; align-items: center; @include o-gradient(); @include media-breakpoint-up(lg) { - margin: -#{$margin-m} -#{$margin-l} $margin-m; - padding: $padding-m $padding-m; + margin: -#{$o-margin-m} -#{$o-margin-l} $o-margin-m; + padding: $o-padding-m $o-padding-m; } @include media-breakpoint-up(xl) { - margin: -#{$margin-m} -#{$margin-l} $margin-l; - padding: $padding-l $padding-l; + margin: -#{$o-margin-m} -#{$o-margin-l} $o-margin-l; + padding: $o-padding-l $o-padding-l; } } .row:first-of-type h2.border-top { @@ -556,7 +565,7 @@ header { ul { > li { position: relative; - padding-bottom: $padding-xs; + padding-bottom: $o-padding-xs; display: flex; align-items: center; @@ -586,7 +595,7 @@ header { @include media-breakpoint-up(lg) { width: 33%; &:not(:nth-of-type(3n)){ - padding-right: $padding-m; + padding-right: $o-padding-m; } } @@ -599,7 +608,7 @@ header { article.doc-body { @include media-breakpoint-up(xl) { .o_git_link { - right: calc(#{$o-codecol-width} + #{$padding-l}); + right: calc(#{$o-codecol-width} + #{$o-padding-l}); } section { @@ -623,10 +632,10 @@ header { float: none; clear: none; margin-left: 57%; - padding: $padding-s; + padding: $o-padding-s; blockquote { - font-weight: $fw_semibold; + font-weight: $o-fw-semibold; font-style: italic; } @@ -658,10 +667,10 @@ header { .toctree-l1 > a { display: block; @include font-size($h2-font-size); - margin-top: $padding-m; - padding-bottom: $padding-xs; + margin-top: $o-padding-m; + padding-bottom: $o-padding-xs; border-bottom: 1px solid $o-gray-border; - margin-bottom: $margin-s; + margin-bottom: $o-margin-s; font-size: 1.2rem; font-weight: 600; } @@ -679,19 +688,19 @@ header { pointer-events: none; cursor: default; color: $o-gray-color; - font-weight: $fw_semibold; + font-weight: $o-fw-semibold; } } article.doc-body { - padding-top: $padding-s; + padding-top: $o-padding-s; position: relative; .o_git_link { @include font-size($font-size-sm); - @include o-position-absolute($top: 0px, $right: $margin-s); + @include o-position-absolute($top: 0px, $right: $o-margin-s); @include media-breakpoint-up(lg) { - @include o-position-absolute($top: 10px, $right: $margin-s); + @include o-position-absolute($top: 10px, $right: $o-margin-s); } i { margin-right: .2rem; @@ -704,12 +713,12 @@ header { } section { - margin-bottom: $margin-m; + margin-bottom: $o-margin-m; > h1 { color: $o-violet; - font-weight: $fw_bold; - margin-bottom: $margin-s; + font-weight: $o-fw-bold; + margin-bottom: $o-margin-s; @include media-breakpoint-up(lg) { max-width: calc(100% - 120px); @@ -717,24 +726,24 @@ header { } > h2 { - font-family: $font-family-serif; + font-family: $o-font-family-serif; color: $o-gray-color; - margin-bottom: $margin-s; + margin-bottom: $o-margin-s; padding-bottom: .3rem; border-bottom: 1px solid $o-gray-border; } > h3 { - font-weight: $fw_bold; + font-weight: $o-fw-bold; } > h4, > h5, > h6 { - font-weight: $fw_semibold; + font-weight: $o-fw-semibold; } img { - margin-bottom: $margin-s; + margin-bottom: $o-margin-s; } img:not(.o-no-modal) { @@ -742,7 +751,7 @@ header { } iframe { - margin-bottom: $margin-s; + margin-bottom: $o-margin-s; } p > img { @@ -754,7 +763,7 @@ header { .figure { .caption, .caption-text { - font-weight: $fw_semibold; + font-weight: $o-fw-semibold; color: $o-gray; } @@ -831,14 +840,14 @@ header { } .guilabel, .menuselection { - font-weight: $fw_semibold; + font-weight: $o-fw-semibold; } .dfn{ @include font-size($font-size-sm); line-height: 1; color: $blue-600; - font-weight: $fw_semibold; + font-weight: $o-fw-semibold; &:before { content:'?'; display: inline-block; @@ -849,7 +858,7 @@ header { text-align: center; color: $blue-600; font-size: 12px; - font-weight: $fw_extrabold; + font-weight: $o-fw-extrabold; font-style: normal; margin: 0 .1rem; } @@ -899,7 +908,7 @@ header { line-height: 1em; margin: 0 0 10px 0; @include font-size($font-size-base); - font-weight: $fw_bold; + font-weight: $o-fw-bold; &:before { @include o-inline-icon($i-info, 0 $o-icon-margin 0 0, baseline, $font-size-base, inherit); @@ -1025,7 +1034,7 @@ header { .accordion-body { #wrap & { // FIXME: Temporary workaround to take priority over pre-existing rules. > *:first-child { - margin-top: $margin-s; + margin-top: $o-margin-s; } code, div[class^="highlight"] { @@ -1045,7 +1054,7 @@ header { .sphinx-tabs { padding: 0; - margin-bottom: $margin-s; + margin-bottom: $o-margin-s; div[role="tablist"] { border-color: $o-gray-border; @@ -1072,7 +1081,7 @@ header { color: $o-gray-color; border: 0; border-top: solid 1px $o-gray-border; - padding: $padding-xs $padding-s; + padding: $o-padding-xs $o-padding-s; &:hover { &:not([aria-selected="true"]) { @@ -1115,7 +1124,7 @@ header { background: $white; color: $o-gray-color; border: 1px solid $o-gray-border; - padding: $padding-s; + padding: $o-padding-s; &:focus { outline: none; @@ -1136,17 +1145,17 @@ header { //------------------------------------------------------------------------------ footer { .o_get_help { - padding-top: $padding-l; - padding-bottom: $padding-l; + padding-top: $o-padding-l; + padding-bottom: $o-padding-l; background: $o-gray-bg; @include media-breakpoint-up(lg) { - padding-left: calc(#{$o-side-nav-width} + #{$padding-l}) + padding-left: calc(#{$o-side-nav-width} + #{$o-padding-l}) } h4 { color: $secondary; - font-weight: $fw_bold; - margin-bottom: $margin-s; + font-weight: $o-fw-bold; + margin-bottom: $o-margin-s; } }