Make open and hovered dropdown toggles look the same

The chevron now has the same darker shade when the dropdown is opened it
had when hovered on.

Signed-off-by: David Wagner <david@marvid.fr>

1 files changed, 11 insertions, 8 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index d7df1d91afc..de6e154dfe6 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -8,6 +8,12 @@
   }
 }
 
+@mixin chevron-active {
+  .fa-chevron-down {
+    color: $dropdown-toggle-hover-icon-color;
+  }
+}
+
 .open {
   .dropdown-menu,
   .dropdown-menu-nav {
@@ -19,7 +25,10 @@
     }
   }
 
+  .dropdown-toggle,
   .dropdown-menu-toggle {
+    @include chevron-active;
+
     border-color: $dropdown-toggle-hover-border-color;
   }
 }
@@ -70,20 +79,14 @@
     margin-left: 5px;
   }
 
-  @mixin chevron-hover {
-    .fa-chevron-down {
-      color: $dropdown-toggle-hover-icon-color;
-    }
-  }
-
   &:hover {
-    @include chevron-hover;
+    @include chevron-active;
 
     border-color: $dropdown-toggle-hover-border-color;
   }
 
   &:focus:active {
-    @include chevron-hover;
+    @include chevron-active;
 
     border-color: $dropdown-toggle-active-border-color;
   }