Button wird nicht mehr ausgeblendet. Aufgeräumt.

gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js

@@ -147,13 +147,13 @@ export const createMarketingHeader =
     if (type === 'infoteaser') {
       const col3 = createElement('div', ['col'], null, row2);
 
-      //const teasers = createMiniTeaser({teasers.type: 'standard'});
-      //col3.appendChild(teasers);
-
       teasers.map((t, i) => {
         if (i < maxItems) {
           var typ = 'standard'; 
-          if (i == 0 && t.type == 'infoteaser') typ = 'infoteaser';
+          if (i == 0 && t.type == 'infoteaser'){
+           typ = 'infoteaser';
+           section.classList.add('miniinfoteaser');
+          }
           const col4 = createElement('div', ['mt'], null, col3);
           const tea = createMiniTeaser({
             type : typ,
@@ -162,55 +162,6 @@ export const createMarketingHeader =
         }
       })
     }
-    /*
-    const hasImage = imageSrc && imageSrc.length > 0;
-    const stage = createElement('div', ['participation', 'participation-stage'], null, section);
-    const container2 = createElement('div', ['container'], null, stage);
-    const row2 = createElement('div', ['row'], null, container2);
-    const col2 = createElement('div', ['col'], null, row2);
-    const tb2 = createElement('div', ['text-box'], null, col2);
-  
-    if (backgroundImage && backgroundImage.length > 0) {
-      //section.content('style=background: red;');
-      stage.style = 'background-image: url(' + backgroundImage + ');';
-      stage.classList.add('background-image');
-    }
-  
-    if (isFirstElement) {
-      stage.classList.add('first-element');
-    }
-  
-    if (kicker && kicker.length > 0) {
-      createElement('p', ['kicker'], kicker, tb2);
-    }
-    if (showProgress) {
-      tb2.appendChild(createProgressBar({progress}));
-    }
-    createElement('h1', ['like-h2'], headline, tb2);
-    createElement('p', [], copy, tb2);
-    if (moreCta) {
-      const more = createElement('a', [], moreCta.label, tb2);
-      more.href = moreCta.link;
-      more.target = moreCta.target;
-    }
-    if (buttonCta) {
-      const button2 = createButton({
-        elementType: 'a',
-        link: buttonCta.link,
-        color: 'white',
-        label: buttonCta.label,
-        iconPosition: 'icon-right',
-        icon: 'small-arrow-right-simple',
-      });
-      tb2.appendChild(button2);
-    }
- 
-    if (hasImage) {
-      stage.classList.add('image-stage');
-      const ib2 = createElement('div', ['image-box'], null, col2);
-      createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib2);
-    }
-     */
     return section;   
   
   }

gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss

@@ -2,6 +2,19 @@
 @import '../../_global/styles/vars';
 section.marketingheader{
   margin-top:0;
+  &.miniinfoteaser{
+    .kicker{
+      color:var(--theme-color-secondary);
+    }
+    .mini-teaser{
+      .category{
+        color:var(--theme-color-secondary);
+      }
+    }
+    .text-only .kicker{
+      color:white;
+    }
+  }
   .search {
     position: relative;
     overflow: hidden;
@@ -690,6 +703,38 @@ section.marketingheader{
       li:first-child:last-child{
         display:none;
       }
+      li.active{
+        button.btn::before{
+          animation: fillgrey 7s;
+        }
+        button.btn{
+          background-blend-mode: overlay;
+        }
+      }
+      li{
+        button.btn{
+          position: relative;
+          border-radius: var(--border-radius-lg);
+          overflow:hidden;
+          
+        }
+        button.btn::before{
+          width:0;
+          background-color:var(--theme-grey-light);
+          content: "";
+          z-index:-1;
+          height:100%;
+          position:absolute;
+          top:0;
+          bottom:0;
+          right:0;
+          left:0;
+          right:0;
+          //border-radius: var(--border-radius-lg);
+          display:block;
+          background-blend-mode: multiply;
+        }
+      }
     }
     .slide.text-only.current{
       background: none;
@@ -705,7 +750,7 @@ section.marketingheader{
         padding: 30px 36px 24px 36px;
         display: flex;
         flex-flow: column;
-        justify-content: end;
+        justify-content: center;
         min-width: 324px;
         &:not(:first-child)::before {
           background-color: var(--theme-color-primary-dimmed-04);
@@ -746,9 +791,6 @@ section.marketingheader{
         .text-box:not(:first-child)::before{
           display: none;
         }
-        .text-box .btn{
-          display:none;
-        }
         .image-box{
           order: 0;
           height:auto;
@@ -819,3 +861,7 @@ section.marketingheader{
     }
   }
 }
+@keyframes fillgrey {
+  0%{width:0;}
+  100%{width:100%}
+}