Homogenize dropdowns on Issue page

Make sort and filter dropdowns look the same and tweak their icon and
colors according to #24150.

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

1 files changed, 57 insertions, 30 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 583c17e4a83..d7df1d91afc 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -21,51 +21,23 @@
 
   .dropdown-menu-toggle {
     border-color: $dropdown-toggle-hover-border-color;
-
-    .fa {
-      color: $dropdown-toggle-hover-icon-color;
-    }
   }
 }
 
-.dropdown-menu-toggle {
-  position: relative;
-  width: 160px;
-  padding: 6px 20px 6px 10px;
+.dropdown-toggle {
+  padding: 6px 8px 6px 10px;
   background-color: $dropdown-toggle-bg;
   color: $dropdown-toggle-color;
   font-size: 15px;
   text-align: left;
   border: 1px solid $border-color;
   border-radius: $border-radius-base;
-  text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
-
-  .fa {
-    position: absolute;
-    top: 10px;
-    right: 8px;
-    color: $dropdown-toggle-icon-color;
-
-    &.fa-spinner {
-      font-size: 16px;
-      margin-top: -8px;
-    }
-  }
 
   &.no-outline {
     outline: 0;
   }
 
-  &:hover, {
-    border-color: $dropdown-toggle-hover-border-color;
-
-    .fa {
-      color: $dropdown-toggle-hover-icon-color;
-    }
-  }
-
   &.large {
     width: 200px;
   }
@@ -86,6 +58,61 @@
     max-width: 100%;
     padding-right: 25px;
   }
+
+  .fa {
+    color: $dropdown-toggle-icon-color;
+  }
+
+  .fa-chevron-down {
+    font-size: $dropdown-chevron-size;
+    position: relative;
+    top: -3px;
+    margin-left: 5px;
+  }
+
+  @mixin chevron-hover {
+    .fa-chevron-down {
+      color: $dropdown-toggle-hover-icon-color;
+    }
+  }
+
+  &:hover {
+    @include chevron-hover;
+
+    border-color: $dropdown-toggle-hover-border-color;
+  }
+
+  &:focus:active {
+    @include chevron-hover;
+
+    border-color: $dropdown-toggle-active-border-color;
+  }
+}
+
+.dropdown-menu-toggle {
+  @extend .dropdown-toggle;
+
+  padding-right: 20px;
+
+  position: relative;
+  width: 160px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  .fa {
+    position: absolute;
+
+    &.fa-spinner {
+      font-size: 16px;
+      margin-top: -8px;
+    }
+  }
+
+  .fa-chevron-down {
+    position: absolute;
+    top: 11px;
+    right: 8px;
+  }
 }
 
 .dropdown-menu,