diff options
| author | qsm-odoo <qsm@odoo.com> | 2018-09-19 11:53:31 +0200 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2018-09-19 14:09:12 +0200 |
| commit | c12b472dba5cf293075be2dc0d58eb77940b111f (patch) | |
| tree | c0cbd857c84607f56ebce8ef24d15f0f3b8024a3 /addons/website/static/src | |
| parent | 2ca2b8948534f7c891a6bb826ef2566dd7a0b839 (diff) | |
[FIX] website, *: review navbar color system
* web_editor, website_slides
Current system is styling all navbars with the user color. This was not
the expected behavior but it is in fact quite nice, so we decided to
keep it. There was however a problem: choosing the menu text color only
applied to the main navbar (as it was an xpath toggling the navbar-dark
class).
This commit solves the problem by forcing navbar-light to behave as
navbar-dark automatically if the menu background is dark, and this
without any JS or extra CSS rules. This allows to get rid of the menu
text color option.
This commit also reviews the light and dark colors which are used when
website is not installed.
Diffstat (limited to 'addons/website/static/src')
| -rw-r--r-- | addons/website/static/src/scss/website.scss | 11 | ||||
| -rw-r--r-- | addons/website/static/src/xml/website.editor.xml | 2 |
2 files changed, 10 insertions, 3 deletions
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index ffbb01e7e68..c926dfe6df7 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -32,8 +32,15 @@ $-theme-font: nth($o-theme-font-urls, $o-theme-font-number); } } -.navbar { - @include o-bg-color(color('menu')); +.navbar-light { + // Style only navbar-light which Odoo is only supposed to use in standard + // anyway. Automatically mimic navbar-dark if the user's menu color is dark. + // Note: this only works because navbar-light is defined before navbar-dark, + // we may want to use a safest way when possible. + background-color: color('menu') !important; + @if (color-yiq(color('menu')) != $yiq-text-dark) { + @extend .navbar-dark; + } .nav-item { transition: opacity 1000ms ease 0s; diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml index 5b3f456caf9..46174daaf72 100644 --- a/addons/website/static/src/xml/website.editor.xml +++ b/addons/website/static/src/xml/website.editor.xml @@ -37,7 +37,7 @@ </div> <div> <h6>Background colors</h6> - <t t-foreach="{'body': _t('Body'), 'menu': _t('Menu'), 'footer': _t('Footer')}" t-as="color"> + <t t-foreach="{'body': _t('Body'), 'menu': _t('Menus'), 'footer': _t('Footer')}" t-as="color"> <t t-call="website.theme_customize_color_palette_button"/> </t> </div> |