diff --git a/extensions/odoo_theme/static/scss/_mixins.scss b/extensions/odoo_theme/static/scss/_mixins.scss index 3ea75789a..dff9fd41e 100644 --- a/extensions/odoo_theme/static/scss/_mixins.scss +++ b/extensions/odoo_theme/static/scss/_mixins.scss @@ -85,29 +85,7 @@ 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}'; diff --git a/extensions/odoo_theme/static/scss/_variables.scss b/extensions/odoo_theme/static/scss/_variables.scss index 1484789f6..798eb5869 100644 --- a/extensions/odoo_theme/static/scss/_variables.scss +++ b/extensions/odoo_theme/static/scss/_variables.scss @@ -59,93 +59,6 @@ $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', - ) -); $fw_extralight: 200; $fw_light: 300; @@ -156,91 +69,6 @@ $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 @@ -332,3 +160,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 0f6a79ddb..ff4743552 100644 --- a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss +++ b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss @@ -9,13 +9,6 @@ $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. @@ -27,18 +20,6 @@ $h4-font-size: 1rem; $h5-font-size: 1rem; $h6-font-size: $font-size-secondary; -/* $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; */ - $display-line-height: 1; /* $blockquote-font-size: $font-size-base !default; */ diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss index 679a3d370..c72ccc129 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/extensions/odoo_theme/static/style.scss @@ -174,6 +174,49 @@ header.o_main_header{ } } +//------------------------------------------------------------------------------ +// 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 //------------------------------------------------------------------------------ @@ -268,7 +311,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; @@ -418,13 +461,15 @@ header.o_main_header{ 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. @@ -612,70 +657,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) } } @@ -691,35 +682,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