From 21eba5775ac7b7c8a14b39d7b2b686db6c44e875 Mon Sep 17 00:00:00 2001
From: Zef <zef.cherry-kynaston.casual@guardian.co.uk>
Date: Wed, 1 Nov 2017 17:29:13 +0000
Subject: [PATCH] Improved circle - no longer shows above header

---
 .../app/views/fragments/newHeader.scala.html  |  1 +
 .../layout/new-header/_top-bar.scss           | 41 ++++++++++++-------
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/common/app/views/fragments/newHeader.scala.html b/common/app/views/fragments/newHeader.scala.html
index fb4fbea0f9e3..b30cb3ede352 100644
--- a/common/app/views/fragments/newHeader.scala.html
+++ b/common/app/views/fragments/newHeader.scala.html
@@ -41,6 +41,7 @@
                               data-link-name="nav2 : supporter-cta"
                               data-edition="@{editionId}"
                               href="@getContributionOrSupporterUrl(editionId)">
+                              <span class="top-bar__item--cta--circle"></span>
                               <span class="top-bar__item--cta--text">
                                   @if(editionId == "us") {
                                      make a <br>contribution
diff --git a/static/src/stylesheets/layout/new-header/_top-bar.scss b/static/src/stylesheets/layout/new-header/_top-bar.scss
index 01178b787192..bcb079c358d2 100644
--- a/static/src/stylesheets/layout/new-header/_top-bar.scss
+++ b/static/src/stylesheets/layout/new-header/_top-bar.scss
@@ -72,28 +72,41 @@
         display: none;
     }
 
+    &:hover,
+    &:focus {
+        color: $guardian-brand-dark;
+
+        & .top-bar__item--cta--circle {
+            transform: scale(1.05);
+
+            &:before {
+                background: $highlight-blue;
+            }
+        }
+    }
+}
+
+.top-bar__item--cta--circle {
+    bottom: -$gs-baseline;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: transform 250ms ease-out;
+    transform-origin: top center;
+
     &:before {
         background: $news-main-2;
         border-radius: 50%;
-        bottom: -$gs-baseline;
+        bottom: 0;
         content: '';
         display: block;
         left: 0;
         padding-top: 100%;
         position: absolute;
-        transform: scale(1);
-        transition: transform 250ms ease-out, background-color 250ms ease-out;
-        width: 100%;
-    }
-
-    &:hover,
-    &:focus {
-        color: $guardian-brand-dark;
-
-        &:before {
-            background: $highlight-blue;
-            transform: scale(1.05);
-        }
+        right: 0;
+        transition: background-color 250ms ease-out;
     }
 }