From 2fd647259874399a14f1f1fac4bddb93fef714d0 Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Sat, 30 Jul 2016 14:23:46 -0500
Subject: [PATCH] Fix markdown anchor icon interaction

---
 CHANGELOG                                     |   1 +
 app/assets/images/icon-link.png               | Bin 729 -> 0 bytes
 app/assets/images/icon_anchor.svg             |   1 +
 .../stylesheets/framework/typography.scss     |  27 +++++++-----------
 4 files changed, 12 insertions(+), 17 deletions(-)
 delete mode 100644 app/assets/images/icon-link.png
 create mode 100644 app/assets/images/icon_anchor.svg

diff --git a/CHANGELOG b/CHANGELOG
index 08562b1a5a0..399a461e6d3 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -16,6 +16,7 @@ v 8.12.0 (unreleased)
   - Fix branches page dropdown sort alignment (ClemMakesApps)
   - Add white background for no readme container (ClemMakesApps)
   - API: Expose issue confidentiality flag. (Robert Schilling)
+  - Fix markdown anchor icon interaction (ClemMakesApps)
   - Optimistic locking for Issues and Merge Requests (title and description overriding prevention)
   - Add `wiki_page_events` to project hook APIs (Ben Boeckel)
   - Remove Gitorious import
diff --git a/app/assets/images/icon-link.png b/app/assets/images/icon-link.png
deleted file mode 100644
index 5b55e12571c894c5f34d3cd0d5325919d1919e6f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 729
zcmV;~0w(>5P)<h;3K|Lk000e1NJLTq002M$002M;00000j{+_N00002bW%=J0RLN&
zBDDYj0+LBYK~#7Fl+^<a9Z?X4;k|Eb+it_!wr$%+Sleb)+qR<Gwr$%}O*)&CdCj~N
z=kEUnE04@OH>p*HGIjfI`9#5)fwlP^FLA$@kpoYvy1-Iwi4?e!kyD;OH8S9GYKI$d
z2e1dhv-c=ifh*XHU;?hE|5t?SEZ#UUF$kW$kGhD6=w3DvCNp5{m(!m;62V`~fVoE@
z@goMzJqld_fbCs9Z+OF0*awA}&jC>O<4}i~(xWg}2VnPh5$r)q23i7O-ed*}h6hfL
zZBnX8)n2RKlC~2JWDW<c%I$b@dp=gq5AkUh9e7;X1(s+95pD>d6;pxh@cjslB-oj_
zeALO)pC8<C_`arayp^7*2SNHo?>$@30`_h&dB&av=rg`!K<z{ISMD5@GALjl^AIth
z_5S=nKZIQJLY{{{+6H1k?HACWJ<BC8H1ul;0qjN4djzl-LGJ-jdlu9l0KI1+pVkYY
z_m^wRU;LZa3!wL@U49YNUI4v!ENDFfdM^U@2<SZvdM|+1Kjr?n@a)g`L+=@Qk`a2M
zf$|Dvn04{g@OXO9Kvn2PfN_t&I_y!v9)bMWqX0bu=decsdjuvq-aP%&FN?W>G@un9
z*C8A&h#TxP93T~_z~_sV!`m&QI$r$#Z%7Bq@D&?L+k+Vma->e1zs(Z)#UfCbfq`Tk
z0(}`se3xL?o|}Lzj+gBb{{Is8xn=-9CDsIf|3bNX&E0+U<bMI`=QKfoe^uaR3KXn8
z1GL3Q!P+xG)0_wo)b9rl02(hs%E>1V4~c8-84v-7y$+yY?-@YB+%o_I^mc%z`0Dq=
z4$#`f!9L?5vID%Idy&NnZ~xVQAvQas@ZQdgH&<4%$yoJ`=<)ynLlAIkLR8HW00000
LNkvXXu0mjfh#gAh

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;
     }
   }
 }