diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js index e929e96..311326e 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/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; } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 623762b..e762738 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/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%} +} \ No newline at end of file