Merge branch '24150-consistent-dropdown-styles' into 'master'

Homogenize sort and filter dropdown toggles

## What does this MR do?

Homogenizes the style of *filter* and *sort* dropdown toggles (aka buttons) related to:
- *issues* (index, new & edit views)
- *issue boards* (index);
- *merge requests* (index, new, edit);
- *projects* (index and "explore");
- *projects admin* (index);
- *groups* (show and "explore");
- *groups admin* (index);
- *users admin* (index);
- *todos* (index);
- *branches* (index);
- *commits* (index);
- *cycle analytics*;
- *network*;
- *forks*;
- *tags* (index);
- *global search*

Some other dropdowns are incidently concerned:
- project admin (show);
- assigne/due date/milestone/label dropdowns on the issue and board sidebars;
- stage dropdown on the build sidebar;
- merge request and comparison dropdowns for choosing forks and branches;
- ref switcher (e.g. in the blob (show) view or in the graphs view);

Dropdown toggles concerned by #24150 but not covered in this MR:
- Dropdowns for selection MR versions to be compared (in the "Changes" tab of an MR);
- Dropdowns that bring up a list of actions:
  - "Settings" dropdowns (such as the one found on the upper-right corner of all project pages);
  - The download/action/notifications buttons on the main project page;
  - Dropdowns located inside of list items (on list of pipelines, users and groups, for instance);
  - The "Options" button on the commit (show) view;
  - The "+" button on the tree explorer (for creating files, branches, tags, ...)

### TODO
- [ ] Update ui.html if needed

## Are there points in the code the reviewer needs to double check?

Am I changing any other dropdown toggle than listed above?

## Why was this MR needed?

For #24150

## Screenshots (if relevant)

### Issue Index

**Before:**
![issue-index-before](/uploads/1aa358b0b9e79fd3a7467b57cd2b03ec/issue-index-before.png)

**After:**
![issue-index-after](/uploads/7a4159e8927d456ed3f4390072174e49/issue-index-after.png)

### Issue New

**Before:**
![issue-new-before](/uploads/fcfb9c39d2ff8f00827f52d60db5c114/issue-new-before.png)

**After:**
![issue-new-after](/uploads/a0b151d257d8f3e8f98a2873427362ee/issue-new-after.png)

### Merge Request Branch Selector

**Before:**
![merge-request-new-before](/uploads/8dd7b6e8ea38af7aced743386bfb83ca/merge-request-new-before.png)

**After:**
![merge-request-new-after](/uploads/38ad8f5a315344b3bab7e936a84acf7e/merge-request-new-after.png)

### Global Search
![global-search-after](/uploads/f2912b7d91fd286028cb9481d2d53a82/global-search-after.png)

### Cycle Analytics
![cycle-analytics-after](/uploads/248d5ca360bb510aa0f0bfa8a1a00aae/cycle-analytics-after.png)


## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- ~~[Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)~~
- ~~API support added~~
- Tests
  - ~~Added for this feature/bug~~
  - [ ] All builds are passing
- ~~Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)~~
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

#24150

See merge request !7583

3 files changed, 63 insertions, 36 deletions

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 2f52588dc18..36f530af685 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -205,7 +205,7 @@
   }
 
   .fa-caret-down,
-  .fa-caret-up {
+  .fa-chevron-down {
     margin-left: 5px;
   }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 583c17e4a83..6d77aadd753 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,53 +25,27 @@
     }
   }
 
+  .dropdown-toggle,
   .dropdown-menu-toggle {
+    @include chevron-active;
     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 +66,51 @@
     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;
+  }
+
+  &:hover {
+    @include chevron-active;
+    border-color: $dropdown-toggle-hover-border-color;
+  }
+
+  &:focus:active {
+    @include chevron-active;
+    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,
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index b259e7eae3e..8a9c279d124 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -220,7 +220,7 @@ $dropdown-bg: #fff;
 $dropdown-link-color: #555;
 $dropdown-link-hover-bg: $row-hover;
 $dropdown-empty-row-bg: rgba(#000, .04);
-$dropdown-border-color: rgba(#000, .1);
+$dropdown-border-color: $border-color;
 $dropdown-shadow-color: rgba(#000, .1);
 $dropdown-divider-color: rgba(#000, .1);
 $dropdown-header-color: #959494;
@@ -229,13 +229,15 @@ $dropdown-input-color: #555;
 $dropdown-input-focus-border: $focus-border-color;
 $dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
 $dropdown-loading-bg: rgba(#fff, .6);
+$dropdown-chevron-size: 10px;
 
 $dropdown-toggle-bg: #fff;
-$dropdown-toggle-color: #626262;
-$dropdown-toggle-border-color: #eaeaea;
-$dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 15%);
+$dropdown-toggle-color: #5c5c5c;
+$dropdown-toggle-border-color: #e5e5e5;
+$dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 13%);
+$dropdown-toggle-active-border-color: darken($dropdown-toggle-border-color, 14%);
 $dropdown-toggle-icon-color: #c4c4c4;
-$dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
+$dropdown-toggle-hover-icon-color: darken($dropdown-toggle-icon-color, 7%);
 
 /*
 * Buttons