[FIX] web: highlight '.active' dropdown entries on :focus/:hover

Previous to this commit our custom bg-color for '.active' dropdown
entries (transparent) was overriding the default :focus/:hover highlight
behavior.

This is normal in bootstrap default, 'cause the framework uses accent
colors (eg $primary) for .active' entries bg.
Since these colors are normally more catchy than the :focus/:hover
ones, we can assume that the behavior is intentional but it doesn't
match our design chooses.

This commit will reinforce :focus/:hover rules for '.active' entries too
, allowing keyboard navigation and making it clear to the user that an
'.active' entry may be eventually toggled.

task-2579123
This commit is contained in:
stefanorigano (SRI)
2021-07-23 06:54:18 +00:00
committed by Aaron Bohy
parent dfc0c15cfb
commit a2ec00a231
@@ -13,12 +13,22 @@
position: relative;
@extend .font-weight-bold;
&:not(.o_dropdown_item_active_noarrow):before {
@include o-position-absolute(0);
transform: translate(-1.5em, 90%);
font: .7em/1em FontAwesome;
color: $primary;
content: "\f00c";
&:focus, &:hover {
background-color: $dropdown-link-hover-bg;
}
&:not(.o_dropdown_item_active_noarrow) {
&:before {
@include o-position-absolute(0);
transform: translate(-1.5em, 90%);
font: .7em/1em FontAwesome;
color: $primary;
content: "\f00c";
}
&.disabled:before {
color: $dropdown-link-disabled-color;
}
}
}
@@ -72,6 +82,9 @@
&.selected > :first-child {
@extend .active;
}
&.disabled > :first-child {
@extend .disabled;
}
}
}