[FIX] web: model_field_selector header and contrast

In commit b47be9f254b2f7327ea3e0e92c6b1b97bff016d0 we changed the
background of the popover selector making the title unreadable in
white mode.

This commit applies the text-dark color to make sure the title is
readable. It also removes the primary background on hover behind the
btns to use a color change instead. We will later on improve this
component with the btn-link + contextual class to manage the hover
effect in another task.

When a field is selected the active class is added on the parent <li>
rather than the <button>. This commit applies it on the button to
display an active state on the selected element.

task-3577065

closes odoo/odoo#143164

X-original-commit: 3d664d6e7daedecc5e995636bfe055c9ba800bb2
Signed-off-by: Mathieu Duckerts-Antoine (dam) <dam@odoo.com>
This commit is contained in:
mano-odoo
2023-11-22 16:04:06 +00:00
parent 58479e5eab
commit d62662effc
@@ -17,7 +17,7 @@
}
.o_model_field_selector_popover_header, .o_model_field_selector_popover_footer {
color: color-contrast(map-get($theme-colors, 'primary'));
color: map-get($theme-colors, 'dark');
background: #{$o-gray-300};
font-weight: bold;
padding: 5px 0.4em;
@@ -31,6 +31,7 @@
.o_model_field_selector_popover_option {
@include o-position-absolute($top: 0);
padding: 8px;
cursor: pointer;
&.o_model_field_selector_popover_prev_page {
left: 0;
@@ -39,7 +40,7 @@
right: 0;
}
&:hover {
background: darken(map-get($theme-colors, 'primary'), 10%);
color: darken(map-get($theme-colors, 'dark'), 10%);
}
}
}
@@ -57,8 +58,9 @@
font-family: Arial;
font-size: 13px;
border-bottom: 1px solid mix($o-black, $dropdown-link-hover-bg, 8%);
&.active {
&.active button {
background: $dropdown-link-hover-bg;
border: none;
}
.o_model_field_selector_popover_item_title {
font-size: 12px;