Merge pull request #230 from hlxsites/bug/zm-impt

fixed font and padding with important
hlxsites · Dec 8, 2023 · 3ebf7c6 · 3ebf7c6
2 parents a18aafb + 76d1d76
commit 3ebf7c6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/blocks/model-image/model-image.css b/blocks/model-image/model-image.css
@@ -67,20 +67,20 @@
   outline: 0
 }
 
-#cboxClose {
+#cboxOverlay #colorbox #cboxClose {
   position: absolute;
   top: 0;
   right: 0;
   display: block;
   width: 32px;
   height: 32px;
-  padding: 0;
-  font-size: 28px;
+  padding: 0 !important;
+  font-size: 28px !important;
   font-family: Arial,Helvetica;
   line-height: 32px;
   background-color: #ec8f2d;
   color: #fff;
-  border-radius: 0;
+  border-radius: 0 !important;
   border: 0;
   margin: 0;
   overflow: visible;
@@ -90,21 +90,21 @@
   background-color: #00000050 !important
 }
 
-.model-image .icon-search {
+#cboxOverlay #colorbox .button.icon-search {
   position: absolute;
   bottom: 0;
   right: 0;
   display: block;
   width: 32px;
   height: 32px;
-  padding: 0;
+  padding: 0 !important;
   margin: 0;
   border: 0;
-  font-size: 16px;
+  font-size: 16px !important;
   line-height: 32px;
   background-color: #ec8f2d;
   color: #fff;
-  border-radius: 0
+  border-radius: 0 !important;
 }
 
 .model-image .icon-search:hover {

diff --git a/blocks/model-image/model-image.js b/blocks/model-image/model-image.js
@@ -94,6 +94,7 @@ export default function decorate(block) {
       display: 'none',
     });
     addStyles(pictureTagForZoom.querySelector('img'), { 'max-width': '100%' });
+    addStyles(cboxWrapperSecondChildCboxbtnIconSearch, { display: 'block' });
   });
   overlayDiv.addEventListener('click', (e) => {
     e.stopPropagation();
@@ -104,13 +105,16 @@ export default function decorate(block) {
       display: 'none',
     });
     addStyles(pictureTagForZoom.querySelector('img'), { 'max-width': '100%' });
+    addStyles(cboxWrapperSecondChildCboxbtnIconSearch, { display: 'block' });
   });
   pictureTagForZoom.addEventListener('click', (e) => {
     e.stopPropagation();
     addStyles(pictureTagForZoom.querySelector('img'), { 'max-width': '200%' });
+    addStyles(cboxWrapperSecondChildCboxbtnIconSearch, { display: 'none' });
   });
   block.querySelector('.button.icon-search').addEventListener('click', (e) => {
     e.stopPropagation();
     addStyles(pictureTagForZoom.querySelector('img'), { 'max-width': '200%' });
+    addStyles(cboxWrapperSecondChildCboxbtnIconSearch, { display: 'none' });
   });
 }