Merge pull request #530 from WWWPiramalFinanceCOM/feature/bugfixes-dev

Feature/bugfixes dev
WWWPiramalFinanceCOM · Oct 9, 2024 · 2728524 · 2728524
2 parents a4c4d6a + b35451a
commit 2728524
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 6 deletions.
diff --git a/blocks/carousel/embed-banner-carousel.css b/blocks/carousel/embed-banner-carousel.css
@@ -244,7 +244,8 @@
 
 @media (min-width:1025px) and (max-width:1300px) {
   .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background {
-    /* height: 380px; */
+    height: 529px;
+    min-height: 529px;
     background-size: cover;
     background-position: center top;
   }
@@ -265,11 +266,11 @@
     padding: 0 14px;
   }
 
-  .sectio .carousel-wrapper .teaser.blockn.video-component-carousel .background .foreground,
-  .sectio .carousel-wrapper .teaser.blockn.video-component-carousel {
-    min-height: 380px;
-    height: 380px;
-  }
+  /* .section .carousel-wrapper .teaser.block.video-component-carousel .background .foreground,
+  .section .carousel-wrapper .teaser.block.video-component-carousel {
+    height: 529px;
+    min-height: 529px;
+  } */
   .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel.teaser .background .foreground{
     margin: calc((100% - 1025px) / 2);
   }

diff --git a/icons/headset.svg b/icons/headset.svg
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -779,6 +779,7 @@ async function loadingCustomCss() {
     `${window.hlx.codeBasePath}/styles/e-nach-registration/e-nach-registration.css`,
     `${window.hlx.codeBasePath}/styles/support-faq/support-faq.css`,
     `${window.hlx.codeBasePath}/styles/embed-carousel-wrapper/embed-carousel-wrapper.css`,
+    `${window.hlx.codeBasePath}/styles/fixed-headset/fixed-headset.css`,
   ];
 
   loadCssArray.forEach(async (eachCss) => {

diff --git a/styles/fixed-headset/fixed-headset.css b/styles/fixed-headset/fixed-headset.css
@@ -0,0 +1,93 @@
+.section.fixed-headset-wrapper .default-content-wrapper {
+    display: flex;
+    align-items: center;
+    position: fixed;
+    bottom: 40px;
+    right: 40px;
+    height: 56px;
+    width: 56px;
+    overflow: hidden;
+    transition: width .1s;
+    background-color: #20303f;
+    border-radius: 100px;
+    cursor: pointer;
+    z-index: 1;
+}
+
+.section.fixed-headset-wrapper .default-content-wrapper p {
+    background-color: #20303f;
+    height: 56px;
+    width: 56px;
+    border-radius: 100px;
+    text-align: center;
+    align-content: center;
+}
+.section.fixed-headset-wrapper .default-content-wrapper p span{
+    display: contents;
+}
+.section.fixed-headset-wrapper .default-content-wrapper p span img{
+    width: 32px;
+    height: 32px;
+}
+.section.fixed-headset-wrapper .default-content-wrapper:hover p {
+    border: 1px solid #999;
+}
+
+.section.fixed-headset-wrapper .default-content-wrapper ul {
+    display: none;
+    justify-content: center;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.section.fixed-headset-wrapper .default-content-wrapper ul li {
+    font-size: 14px;
+    padding-left: 12px;
+    font-weight: 700;
+    color: #fff;
+    font-family: Nunito-Regular, 'sans-serif';
+}
+
+.section.fixed-headset-wrapper .default-content-wrapper ul li a {
+    color: #f58667;
+    text-decoration: underline;
+    font-family: Nunito-Bold, 'sans-serif';
+}
+
+.section.fixed-headset-wrapper .default-content-wrapper:hover {
+    width: 180px;
+    transition: width .1s;
+}
+
+.section.fixed-headset-wrapper:hover .default-content-wrapper ul {
+    display: flex;
+    background-color: #20303f;
+}
+
+@media screen and (max-width: 768px) {
+    .section.fixed-headset-wrapper .default-content-wrapper {
+        bottom: 16px;
+        right: 16px;
+        width: 48px;
+        height: 48px;
+    }
+
+    .section.fixed-headset-wrapper .default-content-wrapper:hover {
+        width: 158px;
+        cursor: pointer;
+        transition: width .1s;
+    }
+
+    .section.fixed-headset-wrapper .default-content-wrapper p {
+        height: 48px;
+        width: 48px;
+    }
+    .section.fixed-headset-wrapper .default-content-wrapper ul li{
+        font-size: 12px;
+        padding-left: 9px;
+    }
+    .section.fixed-headset-wrapper .default-content-wrapper p span img{
+        width: 26px;
+        height: 26px;
+    }
+}