Merge branch 'replace-bootstrap-caret' into 'master'

Replace bootstrap caret with fontawesome caret

## What does this MR do?

1. Replaces all occurrences of `.caret` with fontawesome's caret (`fa-caret-down` for most cases)
2. Remove `.caret` from CSS
3. Refactored pipeline graph toggle to display the correct fontawesome caret (Had to change some JavaScript for this)  

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

*  Need to check if I missed any pages :disappointed_relieved: or for any side effects

## Why was this MR needed?
Resolves UI inconsistency

## Screenshots (if relevant)
Before (1 example out of many):
![Screen_Shot_2016-09-12_at_3.49.58_PM](/uploads/5eb93bbcc00412a5875e39302f4d8ba0/Screen_Shot_2016-09-12_at_3.49.58_PM.png)

After:
![Screen_Shot_2016-09-12_at_3.49.48_PM](/uploads/9259a9ebfb0bd09b4cfd55674e9b8be4/Screen_Shot_2016-09-12_at_3.49.48_PM.png)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- Tests
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #21169

See merge request !6314

6 files changed, 26 insertions, 32 deletions

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index ce489f7c3de..d11b2fe7ec2 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -194,10 +194,17 @@
     pointer-events: none !important;
   }
 
-  .caret {
+  .fa-caret-down,
+  .fa-caret-up {
     margin-left: 5px;
   }
 
+  &.dropdown-toggle {
+    .fa-caret-down {
+      margin-left: 3px;
+    }
+  }
+
   svg {
     height: 15px;
     width: 15px;
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 4a87a73a68a..baa95711329 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -1,20 +1,3 @@
-.caret {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  margin-left: 2px;
-  vertical-align: middle;
-  border-top: $caret-width-base dashed;
-  border-right: $caret-width-base solid transparent;
-  border-left: $caret-width-base solid transparent;
-}
-
-.btn-group {
-  .caret {
-    margin-left: 0;
-  }
-}
-
 .dropdown {
   position: relative;
 
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 37ff7e22ed1..a67d31de2f7 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -81,10 +81,10 @@ label {
 .select-wrapper {
   position: relative;
 
-  .caret {
+  .fa-caret-down {
     position: absolute;
     right: 10px;
-    top: $gl-padding;
+    top: 10px;
     color: $gray-darkest;
     pointer-events: none;
   }
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index c748f856501..9823abdde1f 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -57,6 +57,10 @@ header {
         &:hover, &:focus, &:active {
           background-color: $background-color;
         }
+
+        .fa-caret-down {
+          font-size: 15px;
+        }
       }
 
       .navbar-toggle {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index c75dacf95d9..bcd60391543 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -21,7 +21,14 @@
       padding-right: 10px;
 
       b {
-        @extend .caret;
+        display: inline-block;
+        width: 0;
+        height: 0;
+        margin-left: 2px;
+        vertical-align: middle;
+        border-top: $caret-width-base dashed;
+        border-right: $caret-width-base solid transparent;
+        border-left: $caret-width-base solid transparent;
         color: $gray-darkest;
       }
     }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 68fc6da6c1b..a2779704eff 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -229,9 +229,12 @@
 
       .fa {
         color: $table-text-gray;
-        margin-right: 6px;
         font-size: 14px;
       }
+
+      svg, .fa {
+        margin-right: 0;
+      }
     }
 
     .btn-remove {
@@ -272,18 +275,8 @@
 .toggle-pipeline-btn {
   background-color: $gray-dark;
 
-  .caret {
-    border-top: none;
-    border-bottom: 4px solid;
-  }
-
   &.graph-collapsed {
     background-color: $white-light;
-
-    .caret {
-      border-bottom: none;
-      border-top: 4px solid;
-    }
   }
 }