[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:
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user