PLANET-7635 Update images path in CSS files

This is in preparation to finally retire the plugin

assets/src/js/cookies.js

@@ -1,8 +1,8 @@
 /* global dataLayer */
 export const setupCookies = () => {
   window.dataLayer = window.dataLayer || [];
-  const ENABLE_ANALYTICAL_COOKIES = window.p4bk_vars.enable_analytical_cookies;
-  const ENABLE_GOOGLE_CONSENT_MODE = window.p4bk_vars.enable_google_consent_mode;
+  const ENABLE_ANALYTICAL_COOKIES = window.p4_vars.enable_analytical_cookies;
+  const ENABLE_GOOGLE_CONSENT_MODE = window.p4_vars.enable_google_consent_mode;
 
   // Possible cookie values
   const ONLY_NECESSARY = '1';

assets/src/scss/base/_icons.scss

@@ -23,7 +23,7 @@ a.standalone-link {
     height: .7rem;
     width: .7rem;
     background-repeat: no-repeat;
-    mask-image: url("../../images/chevron.svg");
+    mask-image: url("../../images/icons/chevron.svg");
     mask-size: contain;
     mask-repeat: no-repeat;
     mask-position: center;
@@ -40,7 +40,7 @@ a.pdf-link {
     margin-bottom: -2px;
     margin-inline-start: .2rem;
     margin-inline-end: .1rem;
-    mask-image: url("../../images/file-pdf.svg");
+    mask-image: url("../../images/icons/file-pdf.svg");
     mask-repeat: no-repeat;
     mask-position: center;
   }
@@ -55,7 +55,7 @@ a.external-link {
     width: .7rem;
     margin-inline-start: .2rem;
     margin-inline-end: .1rem;
-    mask-image: url("../../images/external-link.svg");
+    mask-image: url("../../images/icons/external-link.svg");
     mask-size: contain;
     mask-repeat: no-repeat;
     mask-position: center;

assets/src/scss/blocks/Accordion/AccordionStyle.scss

@@ -71,7 +71,7 @@
         display: inline-block;
         transition: transform 300ms linear;
         transform: rotate(90deg);
-        mask-image: url("../../images/chevron.svg");
+        mask-image: url("../../../images/icons/chevron.svg");
         mask-repeat: no-repeat;
         mask-size: contain;
         background-repeat: no-repeat;

assets/src/scss/blocks/CarouselHeader/CarouselHeaderStyle.scss

@@ -352,7 +352,7 @@ $medium-image-height: 600px;
 
     .caption-overlay {
       display: none;
-      background: url("../../images/carousel-blurred-overlay.png");
+      background: url("/images/carousel-blurred-overlay.png");
       background-position: bottom right;
       background-size: cover;
       height: 100%;
@@ -551,7 +551,7 @@ $medium-image-height: 600px;
     width: 28px;
     height: 46px;
     background-image: none;
-    mask-image: url("../../images/chevron.svg");
+    mask-image: url("../../../images/icons/chevron.svg");
     mask-size: cover;
     background-color: var(--white);
     transform: rotate(180deg);

assets/src/scss/blocks/CarouselHeader/SidebarSlidesEditor.scss

@@ -95,7 +95,7 @@
     width: 100%;
     height: 100%;
     background-size: 9px 9px;
-    background-image: url("../../images/chevron.svg");
+    background-image: url("../../../images/icons/chevron.svg");
     background-repeat: no-repeat;
     background-position: center;
     transform-origin: center;

assets/src/scss/blocks/Columns/ColumnsStyle.scss

@@ -292,7 +292,7 @@
             display: inline-block;
             transition: transform 300ms linear;
             transform: rotate(90deg);
-            mask-image: url("../../public/images/icons/chevron.svg");
+            mask-image: url("../../../images/icons/chevron.svg");
             mask-repeat: no-repeat;
             mask-size: contain;
             background-repeat: no-repeat;

assets/src/scss/blocks/Covers/layouts/CoversCarouselLayout.scss

@@ -93,7 +93,7 @@
 
     .carousel-control-prev-icon,
     .carousel-control-next-icon {
-      background-image: url("../../images/chevron.svg");
+      background-image: url("../../../../images/icons/chevron.svg");
       background-size: 11px 19px;
       width: 48px;
       height: 48px;

assets/src/scss/blocks/Gallery/styles/GalleryCarousel.scss

@@ -191,7 +191,7 @@
 
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
-    background-image: url("../../images/chevron.svg");
+    background-image: url("../../../../images/icons/chevron.svg");
     background-size: 11px 19px;
     width: 48px;
     height: 48px;

assets/src/scss/blocks/PostsList/PostsListStyle.scss

@@ -22,7 +22,7 @@
         height: .7rem;
         width: .7rem;
         background-repeat: no-repeat;
-        mask-image: url("../../images/chevron.svg");
+        mask-image: url("../../../images/icons/chevron.svg");
         mask-size: contain;
         mask-repeat: no-repeat;
         mask-position: center;

assets/src/scss/blocks/TakeActionBoxout/TakeActionBoxoutStyle.scss

@@ -174,7 +174,7 @@
 
       .not-now {
         display: block;
-        background: url("../../images/close-boxout.svg");
+        background: url("/images/close-boxout.svg");
         background-position: bottom right;
         background-size: cover;
         position: absolute;

assets/src/scss/blocks/Timeline/TimelineStyle.scss

@@ -48,7 +48,7 @@
 
   .tl-slidenav-previous {
     .tl-slidenav-icon:before {
-      background-image: url("../../images/chevron.svg");
+      background-image: url("../../../images/icons/chevron.svg");
       content: "";
       transform: rotate(180deg);
 
@@ -67,7 +67,7 @@
 
   .tl-slidenav-next {
     .tl-slidenav-icon:before {
-      background-image: url("../../images/chevron.svg");
+      background-image: url("../../../images/icons/chevron.svg");
       content: "";
 
       @include medium-and-up {

assets/src/scss/blocks/core-overrides/Heading.scss

@@ -6,7 +6,7 @@
     height: 12px;
     width: 12px;
     display: inline-block;
-    mask-image: url("../../images/chevron.svg");
+    mask-image: url("../../../images/icons/chevron.svg");
     mask-repeat: no-repeat;
     mask-size: contain;
     background-repeat: no-repeat;

assets/src/scss/layout/_breadcrumbs.scss

@@ -43,7 +43,7 @@
       margin-inline-end: $sp-1;
       height: 12px;
       width: 7px;
-      mask-image: url("../../images/chevron.svg");
+      mask-image: url("../../images/icons/chevron.svg");
       mask-repeat: no-repeat;
       mask-size: contain;
       mask-position: center;
@@ -63,7 +63,7 @@
     margin: 0 $sp-1;
     height: 12px;
     width: 7px;
-    mask-image: url("../../images/chevron.svg");
+    mask-image: url("../../images/icons/chevron.svg");
     mask-repeat: no-repeat;
     mask-size: contain;
     mask-position: center;

assets/src/scss/layout/_cookies-settings.scss

@@ -23,7 +23,7 @@
   cursor: pointer;
   height: 16px;
   width: 16px;
-  mask: url("../../images/cross.svg");
+  mask: url("/images/cross.svg");
   position: absolute;
   top: -$sp-1;
   right: -$sp-1;

assets/src/scss/layout/_country-selector.scss

@@ -74,14 +74,14 @@
   &::before {
     height: 20px;
     margin-inline-end: $sp-1x;
-    mask: url("../../images/gp-g-logo.png") 0 0/16px 20px no-repeat;
+    mask: url("/images/gp-g-logo.png") 0 0/16px 20px no-repeat;
     vertical-align: middle;
   }
 
   &::after {
     height: 12px;
     margin-inline-start: $sp-1x;
-    mask: url("../../images/chevron.svg") 0 0/16px 12px no-repeat;
+    mask: url("../../images/icons/chevron.svg") 0 0/16px 12px no-repeat;
     transform: rotate(0.25turn);
     transition: transform 300ms cubic-bezier(.86, 0, .07, 1);
   }
@@ -184,7 +184,7 @@
   display: block;
   float: right;
   height: 16px;
-  mask: url("../../images/cross.svg") 50% 50%/16px 16px no-repeat;
+  mask: url("/images/cross.svg") 50% 50%/16px 16px no-repeat;
   width: 16px;
 
   html[dir="rtl"] & {

assets/src/scss/layout/_gravity-forms.scss

@@ -32,7 +32,7 @@
 .gfield {
   select {
     appearance: none;
-    background-image: url("../../images/select-arrow.svg");
+    background-image: url("/images/select-arrow.svg");
     height: 48px;
     background-repeat: no-repeat;
     background-size: 12px;

assets/src/scss/layout/_navbar.scss

@@ -76,7 +76,7 @@
           width: 10px;
           height: 10px;
           margin-inline-start: $sp-x;
-          mask: url("../../images/chevron.svg") 0 0/10px 10px;
+          mask: url("../../images/icons/chevron.svg") 0 0/10px 10px;
           transform: rotate(90deg);
           transition: transform 150ms linear;
           background-color: currentColor;

assets/src/scss/layout/_query-loop-overrides.scss

@@ -78,7 +78,7 @@
           width: 48px;
           height: 48px;
           background-color: var(--white);
-          background-image: url("../../images/chevron.svg");
+          background-image: url("../../images/icons/chevron.svg");
           background-size: 28px 18px;
           background-repeat: no-repeat;
           background-position: center;

assets/src/scss/layout/navbar/_burger-menu.scss

@@ -192,7 +192,7 @@ $transition-duration: .2s;
     height: 12px;
     width: 8px;
     display: inline-block;
-    mask-image: url("../../images/chevron.svg");
+    mask-image: url("../../../images/icons/chevron.svg");
     mask-repeat: no-repeat;
     mask-size: contain;
     mask-position: center;
@@ -218,7 +218,7 @@ $transition-duration: .2s;
   border: none;
   height: 16px;
   width: 16px;
-  mask: url("../../images/cross.svg") 50% 50%/16px 16px no-repeat;
+  mask: url("/images/cross.svg") 50% 50%/16px 16px no-repeat;
   background-color: var(--grey-900);
   z-index: 5;
 

assets/src/scss/layout/navbar/_search.scss

@@ -150,7 +150,7 @@
   border: none;
   float: right;
   margin-inline-end: 36px;
-  mask: url("../../images/cross-circle.svg") 50% 50%/24px 24px no-repeat;
+  mask: url("/images/cross-circle.svg") 50% 50%/24px 24px no-repeat;
   width: 24px;
 
   html[dir="rtl"] & {

assets/src/scss/layout/navbar/languages.scss

@@ -18,7 +18,7 @@
       width: 10px;
       height: 10px;
       margin-inline-start: $sp-x;
-      mask: url("../../images/chevron.svg") 0 0/10px 10px;
+      mask: url("../../../images/icons/chevron.svg") 0 0/10px 10px;
       transform: rotate(90deg);
       transition: transform 150ms linear;
       background-color: currentColor;
@@ -144,7 +144,7 @@
       content: "";
       float: right;
       height: 48px;
-      mask: url("../../images/checkmark.svg") 50% 50%/16px 12px no-repeat;
+      mask: url("/images/checkmark.svg") 50% 50%/16px 12px no-repeat;
       width: 16px;
 
       html[dir="rtl"] & {

assets/src/scss/pages/_listing-page.scss

@@ -267,7 +267,7 @@
   height: 12px;
   width: 8px;
   display: inline-block;
-  mask-image: url("../../images/chevron.svg");
+  mask-image: url("../../images/icons/chevron.svg");
   mask-repeat: no-repeat;
   mask-size: contain;
   mask-position: center;

assets/src/scss/pages/_page.scss

@@ -149,7 +149,7 @@
     }
 
     &::after {
-      background-image: url("../../images/arrow_forward.svg");
+      background-image: url("/images/arrow_forward.svg");
       margin-inline-start: $sp-x;
     }
   }
@@ -158,7 +158,7 @@
     width: 50%;
 
     &::before {
-      background-image: url("../../images/arrow_back.svg");
+      background-image: url("/images/arrow_back.svg");
       margin-inline-end: $sp-x;
     }
   }

assets/src/scss/pages/post/_author-block.scss

@@ -109,7 +109,7 @@
     height: 10px;
     width: 8px;
     display: inline-block;
-    mask-image: url("../../images/chevron.svg");
+    mask-image: url("../../../images/icons/chevron.svg");
     mask-repeat: no-repeat;
     mask-size: contain;
     mask-position: center;

assets/src/scss/pages/search/_search-bar.scss

@@ -46,7 +46,7 @@
 
   .clear-search {
     background-color: var(--grey-900);
-    mask: url("../../images/cross-circle.svg") 50% 50%/24px 24px no-repeat;
+    mask: url("/images/cross-circle.svg") 50% 50%/24px 24px no-repeat;
     width: 24px;
     position: absolute;
     right: $sp-3;