Merge branch 'fix-wiki-anchor-interaction' into 'master'

Fix markdown anchor icon interaction

## What does this MR do?
Fixes and improves the markdown anchor icon interaction so that hovering over any headers (generated through markdown) will have an anchor icon that's easily accessible (won't hide from you on edge cases), replaced the icon with fontAwesome icon and added more padding for the anchor icon.

## Are there points in the code the reviewer needs to double check?
1.  Need to check if it's okay to replace the icon-link.png with fontAwesome
2. Need to check if it's okay for the additional view padding on views that render markdown to compensate for anchor link space
3. Need to check if there are any other views that render markdown that did not have it's padding re-adjusted

## Why was this MR needed?
Improve markdown rendered anchor links so that they are more user friendly

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

## Screenshots (if relevant)
Before:
![Screen_Shot_2016-07-30_at_2.31.43_PM](/uploads/12b2aad7f130d26a709ff28083ecc2e3/Screen_Shot_2016-07-30_at_2.31.43_PM.png)

After:
![Screen_Shot_2016-08-08_at_10.25.06_AM](/uploads/caac1985cfbd305b8c8665d86e30ab24/Screen_Shot_2016-08-08_at_10.25.06_AM.png)

Before:
![https://gitlab.com/gitlab-org/gitlab-ce/uploads/45e6d0aee7abbdb42a4c781ae0ba1961/ws7MBrK70g.gif](https://gitlab.com/gitlab-org/gitlab-ce/uploads/45e6d0aee7abbdb42a4c781ae0ba1961/ws7MBrK70g.gif)

After:
![nLQOMn9RUO](/uploads/3905ceac2d591399d14cec1b3319f46b/nLQOMn9RUO.gif)

## 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 [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)

See merge request !5577

3 files changed, 11 insertions, 17 deletions

diff --git a/app/assets/images/icon-link.png b/app/assets/images/icon-link.png
deleted file mode 100644
index 5b55e12571c..00000000000
--- a/app/assets/images/icon-link.png
+++ /dev/null
diff --git a/app/assets/images/icon_anchor.svg b/app/assets/images/icon_anchor.svg
new file mode 100644
index 00000000000..7e242586bad
--- /dev/null
+++ b/app/assets/images/icon_anchor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#333" fill-rule="evenodd" d="M9.683 6.676l-.047-.048C8.27 5.26 6.07 5.243 4.726 6.588l-2.29 2.29c-1.344 1.344-1.328 3.544.04 4.91 1.366 1.368 3.564 1.385 4.908.04l1.753-1.752c-.695.074-1.457-.078-2.176-.444L5.934 12.66c-.634.634-1.67.625-2.312-.017-.642-.643-.65-1.677-.017-2.312L6.035 7.9c.634-.634 1.67-.625 2.312.017.024.024.048.05.07.075l.003-.002c.36.36.943.366 1.3.01.355-.356.35-.938-.01-1.3l-.027-.024zM6.58 9.586l.048.05c1.367 1.366 3.565 1.384 4.91.04l2.29-2.292c1.344-1.343 1.328-3.542-.04-4.91-1.366-1.366-3.564-1.384-4.908-.04L7.127 4.187c.695-.074 1.457.078 2.176.444l1.028-1.027c.635-.634 1.67-.624 2.313.017.643.644.652 1.678.018 2.312l-2.43 2.432c-.635.634-1.67.624-2.313-.018-.024-.024-.048-.05-.07-.075l-.003.004c-.36-.362-.943-.367-1.3-.01-.355.355-.35.937.01 1.3.01.007.018.015.027.023z"/></svg>
\ No newline at end of file
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 06874a993fa..3f8433a0e7f 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -159,25 +159,18 @@
     position: relative;
 
     a.anchor {
-      // Setting `display: none` would prevent the anchor being scrolled to, so
-      // instead we set the height to 0 and it gets updated on hover.
-      height: 0;
+      left: -16px;
+      position: absolute;
+      text-decoration: none;
+
+      &:after {
+        content: url('icon_anchor.svg');
+        visibility: hidden;
+      }
     }
 
-    &:hover > a.anchor {
-      $size: 14px;
-      position: absolute;
-      right: 100%;
-      top: 50%;
-      margin-top: -11px;
-      margin-right: 0;
-      padding-right: 15px;
-      display: inline-block;
-      width: $size;
-      height: $size;
-      background-image: image-url("icon-link.png");
-      background-size: contain;
-      background-repeat: no-repeat;
+    &:hover > a.anchor:after {
+      visibility: visible;
     }
   }
 }