From ac33beeba9872cde19b5003d9079778fd1627c41 Mon Sep 17 00:00:00 2001
From: Emma Garland <emmagarland77@gmail.com>
Date: Mon, 5 Jun 2017 16:13:34 +0100
Subject: [PATCH] Smooth transitions and styling for additions and deletions

---
 .../src/scss/sections/_contributors.scss      | 25 +++++++++++++++++--
 .../Partials/Home/GitHubContributors.cshtml   |  9 ++++---
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/OurUmbraco.Client/src/scss/sections/_contributors.scss b/OurUmbraco.Client/src/scss/sections/_contributors.scss
index 92ae84a2..0ff0f496 100644
--- a/OurUmbraco.Client/src/scss/sections/_contributors.scss
+++ b/OurUmbraco.Client/src/scss/sections/_contributors.scss
@@ -32,8 +32,7 @@
     }
 }
 
-.github-contributors small.link-list
-{
+.github-contributors small.link-list {
     font-style: italic;
     font-weight: normal;
     text-transform: none;
@@ -59,6 +58,27 @@
         }
     }
 
+    .counts {
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        right: 2px;
+        text-align: center;
+        color: #fff;
+        font-size: 12px;
+        line-height: 12px;
+        background: rgba(0,0,0,0.25);
+        border-radius: 50%;
+        bottom: 6px;
+        padding-top: 23px;
+        opacity: 0;
+        transition: opacity 0.25s;
+    }
+
+    &:hover .counts {
+        opacity: 1;
+    }
+
     .contrib-count {
         position: absolute;
         left: 25px;
@@ -69,5 +89,6 @@
         font-weight: bold;
         background: darken($color-our, 4%);
         border-radius: 15px;
+        z-index: 5;
     }
 }
diff --git a/OurUmbraco.Site/Views/Partials/Home/GitHubContributors.cshtml b/OurUmbraco.Site/Views/Partials/Home/GitHubContributors.cshtml
index 5db11f31..ebb8469a 100644
--- a/OurUmbraco.Site/Views/Partials/Home/GitHubContributors.cshtml
+++ b/OurUmbraco.Site/Views/Partials/Home/GitHubContributors.cshtml
@@ -11,9 +11,12 @@
                 <div class="avatar">
                     <img alt="@author.Login" src="@author.AvatarUrl&s=112" title="@author.Login" />
                     <span class="contrib-count" title="@(contributor.TotalCommits + " contributions")">@contributor.TotalCommits</span>
-                    <div>
-                        Additions: @contributor.TotalAdditions
-                        <br />Deletions: @contributor.TotalDeletions
+                    <div class="counts">
+                        Additions<br />
+                        <strong>@contributor.TotalAdditions</strong><br />
+                        <br />
+                        Deletions<br />
+                        <strong>@contributor.TotalDeletions</strong>
                     </div>
                 </div>
             </a>