add background color with padding by utilizing pseudo element

Author: gabrielakhanna

layouts/partials/breaking-news-banner.html

@@ -7,7 +7,6 @@ <h3 class="h4">
         <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 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>
   </div>
 </div>

static/css/atoms.css

@@ -278,13 +278,20 @@ hr {
 }
 
 .button-close {
-  align-self: center;
+  background-color: var(--media-background-color);
+  padding: 10px;
+}
+
+.button-close::before {
+  content: "";
+  display: block;
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
   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;
+  mask-size: cover;
 }
 
 /**

static/css/cards/zones.css

@@ -106,7 +106,7 @@
   overflow: hidden;
 }
 
-#zone-el-2.sticky-leaderboard > * {
+#zone-el-2.sticky-leaderboard > div {
   padding: 8px 0;
 }
 
@@ -119,8 +119,6 @@
 
 #sticky_ad_close {
   position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 99;
-  padding: 0;
+  top: 0;
+  right: 0;
 }