Merge pull request #44 from mcclatchy/PE-559-ad-close-button

PE-559 ad close button

Author: gabrielakhanna

layouts/partials/breaking-news-banner.html

@@ -1,13 +1,12 @@
 <!-- breaking news banner (for demo purposes) -->
-<div class="breaking-news-organism impact" id="primary-content">
+<div class="breaking-news-organism" id="primary-content">
   <div class="breaking-news-macro">
-      <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">
-        <div class="icon-wrap">
-          <span class="glyphicon glyphicon-times close-breaking-news"></span>
-        </div>
-      </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 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/cards/breaking-news-banner.css

@@ -5,8 +5,10 @@
  */
 
  .breaking-news-organism {
-  background-color: var(--red);
   color: var(--white);
+  background-color: var(--red);
+  --text-color: var(--white);
+  --fill-color: var(--text-color);
   max-width: 100%;
   height: 41px;
 }
@@ -24,27 +26,22 @@
 }
 
 .breaking-news-macro h3 {
+  font-weight: 400;
   margin: 0;
 }
 
-.breaking-news-macro div.breaking-title {
-  font-weight: bold;
+.breaking-title {
+  font-weight: 700;
 }
 
-.breaking-news-macro div.close-breaking-news {
+.close-breaking-news {
+  flex: none;
+  align-content: center;
   opacity: 1;
   transition: all .6s ease;
   min-width: 10px;
 }
 
-.breaking-news-macro .icon-wrap {
-  margin-bottom: 0;
-}
-
-.breaking-news-macro .icon-wrap .close-breaking-news::before {
-  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="9" viewBox="0 0 8 9" fill="none"%3E%3Cpath d="M7.59049 1.05497C7.81823 0.781777 7.78195 0.376006 7.50786 0.149016C7.23376 -0.0779743 6.82664 -0.0418166 6.5989 0.231375L3.87 3.49562L1.1411 0.231375C0.91336 -0.0418166 0.506242 -0.0779743 0.232143 0.149016C-0.0419554 0.376006 -0.0782332 0.781777 0.149511 1.05497L3.02956 4.5L0.149511 7.94503C-0.0782332 8.21822 -0.0419554 8.62399 0.232143 8.85098C0.506242 9.07797 0.91336 9.04182 1.1411 8.76862L3.87 5.50438L6.5989 8.76862C6.82664 9.04182 7.23376 9.07797 7.50786 8.85098C7.78195 8.62399 7.81823 8.21822 7.59049 7.94503L4.71044 4.5L7.59049 1.05497Z" fill="white"/%3E%3C/svg%3E');
-}
-
 /*
  * Mobile CLS fix
  */

static/css/cards/zones.css

@@ -114,4 +114,12 @@
   #zone-el-2.sticky-leaderboard {
     height: 66px;
   }
+}
+
+#sticky_ad_close {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  cursor: pointer;
+  --fill-color: var(--black);
 }