[FIX] website_slides: set right text color on sub menu/navbar

Step to reproduce:

  - Install E-learning module
  - Go to any course and set `Display` to `Documentation`
  - Click on `Go to website` and open editor
  - Click on `Theme`, then in `Theme Colors` section, click on the
    palette and select the first custom colors (black-white-gray)

Issue:

  The background of the submenu (just under `Course` tab) is
  transparent (while it should be black, like main menu) and the links
  are not well displayed (white/light text color).
  (Same issue with navbar brand and toggler when reducing screen width)

Cause:

  The background of the submenu is always set to transparent but
  the text color change depending if the top main menu background
  is dark or light.
  Lines that make the issue: https://github.com/odoo/odoo/blob/693092f2c90e36735c6896b6c6e7d795406453e9/addons/website/static/src/scss/website.scss#L240-L252

Solution:

  Set the text color (and the background of the toggler) to
  `light` color if background is dark (determined with
  `has-enough-contrast($body-bg, $dark)`), otherwise use `dark` color.

opw-3086750

closes odoo/odoo#115910

X-original-commit: ee7fe74d6d839eb20b6165e475f49eeed0262fcc
Signed-off-by: Nasreddin Boulif (bon) <bon@odoo.com>
Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
This commit is contained in:
Nasreddin Boulif (bon)
2023-03-21 10:44:47 +01:00
parent eae1a0a7ab
commit 6019e26804
@@ -421,6 +421,27 @@ $line-height-truncate: 1.25em;
@include media-breakpoint-only(xs) {
margin: 0 ($grid-gutter-width * -0.5);
}
.o_wslides_lesson_nav {
.navbar {
@if ( not has-enough-contrast($body-bg, $dark) ) {
.nav-link, .navbar-brand{
color: $navbar-dark-color;
}
.navbar-toggler-icon {
background-image: $navbar-dark-toggler-icon-bg;
}
}
@else {
.nav-link, .navbar-brand{
color: $navbar-light-color;
}
.navbar-toggler-icon {
background-image: $navbar-light-toggler-icon-bg;
}
}
}
}
}
// Slides list reordering widget