Improved circle - no longer shows above header

guardian · Nov 3, 2017 · 21eba57 · 21eba57
1 parent 0c056b2
commit 21eba57
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git 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
@@ -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;
     }
 }