[FIX] web: restore some dropdown styles in the backend

Steps to reproduce the bug (in 16.0 and above only):
- Go in the backend
- Focus the searchbar
- Type something and use the arrow to navigate the search dropdown
=> You cannot see what you are highlighting anymore

This occurs since [1] (its forward-ported version) which removed rules
that were targeting the frontend dropdowns by mistake while they were
indicated as wanting to target OWL dropdowns only. It appears that those
rules were actually used by chance in 16.0: to style the searchbar which
is not using OWL dropdowns and whose specific 15.0 styles were removed,
fallbacking on those erroneous rules. On top of that, the wanted style
here concerns a rule about the `focus` class... which is actually not
part of Bootstrap 5 anymore but that our old searchbar still uses.

There is a high chance that the problem is only confined to the 16.0
searchbar and not anything else. But as a precaution this commit fixes
the issue by restoring all the rules that were removed (well, rather
moved to be more specific to OWL dropdowns) but inside a backend file
only. The legacy/dropdown.scss file seemed very suitable for this
purpose. Obviously, those rules should be removed as soon as possible
once it will be judged ok in master after a searchbar adaptation.

[1]: https://github.com/odoo/odoo/commit/e24bff699190bc511b357c200f4494a177be5b77

closes odoo/odoo#113944

X-original-commit: 77537678d6b6f3533eb0c9d9d37d8fe679ef9580
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2023-03-01 11:07:58 +01:00
parent d9215a766a
commit 468096cb6b
@@ -78,3 +78,36 @@
}
}
}
// TODO probably remove those next rules that target dropdown main classes once
// the backend searchbar has been refactored to use OWL dropdown components and
// to stop using the BS4 "focus" class which is not part of BS5 anymore.
// See the commit that introduced this comment for more details.
.dropdown-menu {
.dropdown-toggle:focus, .dropdown-item:focus {
background-color: transparent;
outline: none;
}
.dropdown-toggle.focus, .dropdown-item.focus {
background-color: $dropdown-link-hover-bg;
}
}
.dropdown-item:not(.disabled):not(:disabled) {
cursor: pointer;
}
button.dropdown-toggle {
&.active, &:hover, &:focus, &:active {
outline: none;
box-shadow: none !important;
}
&.dropdown-item {
&::after, &::before {
// Changes the placement of bootstrap dropdown carets for subdropdowns
@include o-position-absolute($right: 0, $top: 0);
transform: translate(-.6em, .6em) #{"/*rtl:translate(.6em, .6em) scaleX(-1)*/"};
}
}
}