create separate global close button styles with background image url for svg

Author: gabrielakhanna

layouts/partials/breaking-news-banner.html

@@ -1,12 +1,13 @@
 <!-- breaking news banner (for demo purposes) -->
 <div class="breaking-news-organism" id="primary-content">
   <div class="breaking-news-macro">
-    <h3 class="h4">
-      <span class="breaking-title">BREAKING NEWS:  </span> 
-      <a href="https://alpha.montrealgazette.com/site-services/Newsletters/montreal-sports-newsletter/article54991.html"> Cricket is treated as the celebration in India </a>
-    </h3>  
-    <div class="close-breaking-news">
-      <svg xmlns="http://www.w3.org/2000/svg" height="13.19px" viewBox="5.41 5.41 13.18 13.18" width="13.19px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/></svg>
+    <div>
+      <h3 class="h4">
+        <span class="breaking-title">BREAKING NEWS:  </span> 
+        <a href="https://alpha.montrealgazette.com/site-services/Newsletters/montreal-sports-newsletter/article54991.html"> Cricket is treated as the celebration in India </a>
+      </h3>
+    </div>
+    <div class="close-breaking-news button-close">
     </div>
   </div>
 </div>

static/css/atoms.css

@@ -277,6 +277,16 @@ hr {
   display: block;
 }
 
+.button-close {
+  align-self: center;
+  background-color: var(--text-color);
+  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13.19px" height="13.19px" viewBox="0 0 13.18 13.18"><path d="M12.89 0.3c-.39-.39-1.02-.39-1.41 0L6.59 5.18 1.7 0.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L5.18 6.59 0.29 11.48c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L6.59 8l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L8 6.59l4.89-4.89c.38-.38.38-1.02 0-1.4z"/></svg>');
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13.19px" height="13.19px" viewBox="0 0 13.18 13.18"><path d="M12.89 0.3c-.39-.39-1.02-.39-1.41 0L6.59 5.18 1.7 0.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L5.18 6.59 0.29 11.48c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L6.59 8l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L8 6.59l4.89-4.89c.38-.38.38-1.02 0-1.4z"/></svg>');
+  width: 13.19px;
+  height: 13.19px;
+  cursor: pointer;
+}
+
 /**
  * Color schemes
  */

static/css/cards/zones.css

@@ -101,7 +101,7 @@
 #zone-el-2.sticky-leaderboard {
   position: fixed;
   z-index: 98;
-  width: 100vw;
+  width: 100%;
   height: 106px;
   overflow: hidden;
 }
@@ -118,12 +118,9 @@
 }
 
 #sticky_ad_close {
-  position: fixed;
-  right: 0;
+  position: absolute;
+  top: 10px;
+  right: 10px;
   z-index: 99;
-  width: 20px;
-  padding-left: 10px;
-  background-color: var(--media-background-color);
-  cursor: pointer;
-  --fill-color: var(--black);
+  padding: 0;
 }