From a2ec00a2310e33ba2e51c997bc8424eb0b0bac35 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Tue, 22 Jun 2021 12:26:10 +0000
Subject: [PATCH] [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
---
 .../static/src/core/dropdown/dropdown.scss    | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/addons/web/static/src/core/dropdown/dropdown.scss b/addons/web/static/src/core/dropdown/dropdown.scss
index 5c2732ef6cd..c13d3ad5051 100644
--- a/addons/web/static/src/core/dropdown/dropdown.scss
+++ b/addons/web/static/src/core/dropdown/dropdown.scss
@@ -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;
+      }
     }
   }