From f485880b115b9f1960090a123d0f9c19d2eec082 Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 14 Mar 2024 10:59:34 +0100 Subject: [PATCH 01/22] MH Position Close-Button --- .../stories/sections/marketingheader/marketingheader.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 23acb27..780250c 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -37,6 +37,10 @@ section.marketingheader{ .sc.container{ position: absolute; top: 0; + left: 0; + right: 0; + width: 100%; + max-width: 100%; @media (max-width:767px){ position: relative; .close-search{ @@ -55,7 +59,7 @@ section.marketingheader{ left:auto; cursor: pointer; transition: 0.3s ease; - border: 2px solid var(--theme-color-primary-dimmed-04); + border: 1px solid var(--theme-color-primary-dimmed-04); border-radius: 10px; height:34px; width:34px; From 8824c24d47f31149d554e8be08c5ca123a471dcc Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 14 Mar 2024 11:29:27 +0100 Subject: [PATCH 02/22] Infobanner jetzt Stories ohne Icon und mit BgImage --- .../mini-teaser/MiniTeaser.stories.js | 6 +++ .../mini-teaser/MiniTeaserComponent.js | 20 +++++++--- .../components/mini-teaser/miniteaser.scss | 40 ++++++++++++++++++- 3 files changed, 58 insertions(+), 8 deletions(-) diff --git a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js index 9b1dc6c..ee97014 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js +++ b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js @@ -42,3 +42,9 @@ StandardMiniTeaser.args = {}; export const infobanner = MiniTeaser.bind({}); infobanner.args = {type:'infoteaser'}; + +export const infobannerWithoutIcon = MiniTeaser.bind({}); +infobannerWithoutIcon.args = {type:'infoteaser', icon: null}; + +export const infobannerBackground = MiniTeaser.bind({}); +infobannerBackground.args = {type:'infoteaser', backgroundImage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648'}; diff --git a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js index 80827c4..70cd288 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js +++ b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js @@ -8,6 +8,7 @@ export const createMiniTeaser = ({ link = '#', icon = 'Roboter', buttonlabel = 'IHK-Newsletter sichern', + backgroundImage = null, }) => { if (type === 'standard') { @@ -19,13 +20,20 @@ export const createMiniTeaser = ({ return tile; }else{ const tile = createElement('div', ['tile', 'mini-teaser', type], null); + if (backgroundImage && backgroundImage.length > 0) { + tile.style = 'background-image: url(' + backgroundImage + ');'; + tile.classList.add('background-image'); + } const textBox = createElement('div', ['text-box'], null, tile); - createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox); - createElement('h4', ['title'], title, textBox); - textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null})) + if (icon && icon.length > 0) { + createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox); + createElement('h4', ['title'], title, textBox); + textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null})) + }else{ + createElement('h4', ['title', 'noicon'], title, textBox); + textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null})) + } + return tile; } - - - } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss index eae215b..fada232 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss +++ b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss @@ -35,8 +35,12 @@ h4{ font-size: 22px; } + .text-box{ + position: relative; + } &.infoteaser{ background: linear-gradient(161deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%); + position: relative; &:after{ content:""; position:absolute; @@ -47,6 +51,26 @@ z-index:-1; background: linear-gradient(161deg, var(--theme-color-gradient-01) 40%, var(--theme-color-gradient-02) 80%, var(--theme-color-gradient-03) 120%); } + &.background-image{ + background-size:cover; + &:after{ + position:absolute; + top:0; + left:0; + bottom:0; + right:0; + z-index: 0; + content:""; + opacity: 0.6; + background: linear-gradient(87deg, #036 12.55%, rgba(1, 40, 81, 0.86) 56.52%, rgba(0, 51, 102, 0.00) 94.05%); + background-blend-mode: overlay; + + } + .text-box{ + position: relative; + z-index: 1; + } + } .title, .category, .btn{ color:white; } @@ -57,6 +81,14 @@ text-align: left; line-height: 24px; margin-bottom: 19px; + width: 100%; + &.noicon{ + padding-left: 0; + min-height: 0; + + .btn{ + margin-left: 0; + } + } } .btn{ background-color: transparent; @@ -69,14 +101,18 @@ --button-padding: 8px 10px; min-height: 0; font-size: 22px; + &:after{ + border-radius:16px; + } } .icon-box{ margin-bottom: 19px; margin-top: 0; padding-top: 0; position: absolute; - top: 16px; - left: 12px; + top: 0; + left: 0; + } .text-box{ padding: 0; From 89dd44d13d9e765412d5973dd0bdbdcd8ad73f4c Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 14 Mar 2024 11:47:30 +0100 Subject: [PATCH 03/22] MH border-radius --- .../sections/marketingheader/marketingheader.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 780250c..495526b 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -4,6 +4,10 @@ section.marketingheader{ margin-top:0; .rotation .slider{ border-bottom:0; + //border-radius: 4px; + .slide-overflow{ + border-radius: 4px; + } .slider-tabs{ li:first-child:last-child{ display:none; @@ -22,6 +26,11 @@ section.marketingheader{ } } } + .text-only{ + .text-box{ + color:white; + } + } } .search { position: relative; @@ -459,7 +468,6 @@ section.marketingheader{ } } &.infoteaser{ - max-height:427px; outer{ max-height:427px; height:427px; From b0e2f1434842507489ade4c8610a1d1f55144abf Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 14 Mar 2024 11:59:10 +0100 Subject: [PATCH 04/22] MH border-radius --- .../stories/sections/marketingheader/marketingheader.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 495526b..665b338 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -4,7 +4,7 @@ section.marketingheader{ margin-top:0; .rotation .slider{ border-bottom:0; - //border-radius: 4px; + border-radius: 4px; .slide-overflow{ border-radius: 4px; } From 9d819d01522325270430336c30719f1af1b43357 Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 14 Mar 2024 14:20:40 +0100 Subject: [PATCH 05/22] MH: diverses --- .../MarketingHeaderComponent.js | 2 +- .../marketingheader/marketingheader.scss | 161 +++++++++++++----- 2 files changed, 117 insertions(+), 46 deletions(-) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js index da08d84..e929e96 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js @@ -124,7 +124,7 @@ export const createMarketingHeader = if (slideData.cta && slideData.link) { const buttonP = createElement('p', [], '', textBox); const btn = createButton({ - color: 'white', icon: 'pfeil-simple-rechts', iconPosition: 'icon-right', label: slideData.cta + color: 'white', icon: 'pfeil-simple-rechts', iconPosition: 'icon-right', label: slideData.cta, size: 'small', }); buttonP.appendChild(btn); } diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 665b338..c607394 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -2,36 +2,6 @@ @import '../../_global/styles/vars'; section.marketingheader{ margin-top:0; - .rotation .slider{ - border-bottom:0; - border-radius: 4px; - .slide-overflow{ - border-radius: 4px; - } - .slider-tabs{ - li:first-child:last-child{ - display:none; - } - } - .text-box{ - color:var(--theme-color-primary); - &:not(:first-child)::before { - background-color: var(--theme-color-primary-dimmed-04); - } - .btn{ - background-color: var(--theme-color-primary); - color:white; - &:hover:after{ - box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--theme-color-primary); - } - } - } - .text-only{ - .text-box{ - color:white; - } - } - } .search { position: relative; overflow: hidden; @@ -575,8 +545,8 @@ section.marketingheader{ } } - .slide.text-only.current { - background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%); + .slide.text-only.current{ + background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%); } } @@ -658,34 +628,96 @@ section.marketingheader{ } } } + .rotation .slider{ + border-bottom:0; + border-radius: 4px; + background-color: white; + h3{ + margin-top: 4px; + margin-bottom: 8px; + } + .kicker{ + margin-bottom:0; + } + p{ + margin-bottom:0.4em; + } + .btn{ + margin-top:0.4em; + } + .slide-overflow{ + border-radius: 4px; + } + .slider-tabs{ + li:first-child:last-child{ + display:none; + } + } + .slide.text-only.current{ + background: none; + outer{ + background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%); + .text-box{ + justify-content: center; + } + } + } + .text-box{ + color:var(--theme-color-primary); + padding: 30px 36px 24px 36px; + display: flex; + flex-flow: column; + justify-content: end; + min-width: 324px; + &:not(:first-child)::before { + background-color: var(--theme-color-primary-dimmed-04); + } + .btn{ + background-color: var(--theme-color-primary); + color:white; + &:hover:after{ + box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--theme-color-primary); + } + } + } + .text-only{ + .text-box{ + color:white; + } + } + } .rotation{ margin:0; - @media screen and (max-width:900px){ + @media (max-width: 1339px) { + .rotation .slider .text-box { + min-width: 324px; + } + } + @media (min-width: 1001px) { + .slider .text-box:not(:first-child)::before { + border-top-right-radius: 16% 50% !important; + border-bottom-right-radius: 16% 50% !important; + margin: -15% -8% -15% 20px; + } + } + @media (max-width:1000px){ .slider{ - background-color: transparent; + background-color: white; .slider-tabs{ top:0; height: auto; bottom: auto; margin-top:15px; - @media screen and (max-width:767px){ - .btn{ - --button-icon-padding: 30px; - --button-icon-offset: 5px; - --button-padding: 5px 10px; - --button-min-size: 30px; - margin: 2.5px; - } - } } - .text-box{ - padding: var(--container-padding); + .slide:not(.text-only) .text-box{ + padding: 16px 0; } .text-box:not(:first-child)::before{ display: none; } .image-box{ order: 0; + &:before{ display: none; } @@ -696,6 +728,33 @@ section.marketingheader{ } } } + @media screen and (max-width:900px){ + .slider{ + margin-bottom:20px; + .slide:not(.text-only){ + .text-box{ + padding: 16px var(--container-padding) 0; + } + } + .slide.text-only{ + padding-left: var(--container-padding); + padding-right: var(--container-padding); + } + .image-box{ + padding-left: var(--container-padding); + padding-right: var(--container-padding); + } + .slider-tabs{ + right: calc(var(--container-padding) + 10px); + top: 15px; + padding: 0; + margin: 0; + .btn{ + margin-top:0 !important; + } + } + } + } @media screen and (max-width:767px){ .slider{ .image-box{ @@ -703,6 +762,18 @@ section.marketingheader{ height:250px; } } + .slide:not(.text-only) .text-box{ + padding: 16px var(--container-padding); + } + .slider-tabs{ + .btn{ + --button-icon-padding: 30px; + --button-icon-offset: 5px; + --button-padding: 5px 10px; + --button-min-size: 30px; + margin: 2.5px; + } + } } } @media screen and (max-width:567px) { From 7f3b6398f50ab243a591bb49992bc43a233df7ad Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 14 Mar 2024 15:34:57 +0100 Subject: [PATCH 06/22] MH Verbesserungen --- .../marketingheader/marketingheader.scss | 87 +++++++++++-------- 1 file changed, 53 insertions(+), 34 deletions(-) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index c607394..71bf895 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -438,6 +438,10 @@ section.marketingheader{ } } &.infoteaser{ + border-radius: 4px; + .slide-overflow{ + border-radius: 4px; + } outer{ max-height:427px; height:427px; @@ -447,16 +451,41 @@ section.marketingheader{ } } .rotation { - @media screen and (max-width:900px){ - .slider .text-box:first-child::after { - display: none; + padding:0; + @media screen and (max-width: 1000px) { + .slide:not(.text-only) .text-box{ + padding: 16px 0; + } + .slide .image-box img{ + position: static; + height:300px; + } + .slider-tabs{ + top:0; + height: auto; + bottom: auto; + margin-top:15px; } - padding:0; } + @media screen and (max-width: 900px) { + .slider .image-box { + padding-left: var(--container-padding); + padding-right: var(--container-padding); + } + .slider .text-box:first-child::after { + display: none; + } + } .text-box{ min-height: 0; } } + outer{ + border-radius: 4px; + .image-box img{ + border-radius: 4px; + } + } .image-box{ max-height:427px; min-height: 0; @@ -503,6 +532,14 @@ section.marketingheader{ padding: 8px 0; .mini-teaser{ height: 100%; + .text-box{ + height: 100%; + flex-flow: column; + justify-content: space-between; + .btn{ + height: fit-content; + } + } } } } @@ -535,10 +572,10 @@ section.marketingheader{ } .slider{ background-color: transparent; - .image-box img { @media screen and (max-width:900px) { height: 300px; + } @media screen and (max-width:767px) { height: 300px; @@ -630,7 +667,7 @@ section.marketingheader{ } .rotation .slider{ border-bottom:0; - border-radius: 4px; + background-color: white; h3{ margin-top: 4px; @@ -645,9 +682,7 @@ section.marketingheader{ .btn{ margin-top:0.4em; } - .slide-overflow{ - border-radius: 4px; - } + .slider-tabs{ li:first-child:last-child{ display:none; @@ -703,27 +738,25 @@ section.marketingheader{ @media (max-width:1000px){ .slider{ background-color: white; - .slider-tabs{ - top:0; - height: auto; - bottom: auto; - margin-top:15px; - } - .slide:not(.text-only) .text-box{ - padding: 16px 0; - } + + .text-box:not(:first-child)::before{ display: none; } .image-box{ order: 0; - + img{ + aspect-ratio: 16 / 9; + height: auto !important; + max-height:none !important; + min-height: 177px !important; + } &:before{ display: none; } img{ position: static; - height:300px; + //height:300px; } } } @@ -740,10 +773,6 @@ section.marketingheader{ padding-left: var(--container-padding); padding-right: var(--container-padding); } - .image-box{ - padding-left: var(--container-padding); - padding-right: var(--container-padding); - } .slider-tabs{ right: calc(var(--container-padding) + 10px); top: 15px; @@ -757,11 +786,6 @@ section.marketingheader{ } @media screen and (max-width:767px){ .slider{ - .image-box{ - img{ - height:250px; - } - } .slide:not(.text-only) .text-box{ padding: 16px var(--container-padding); } @@ -779,11 +803,6 @@ section.marketingheader{ @media screen and (max-width:567px) { .slider { margin: 0; - .image-box{ - img{ - height:177px; - } - } } } .context-box{ From 29f5c6196f5b74424a65a38730f7febc77223142 Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 14 Mar 2024 15:40:49 +0100 Subject: [PATCH 07/22] height-Anpassung --- .../stories/sections/marketingheader/marketingheader.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 71bf895..3c37e81 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -743,8 +743,13 @@ section.marketingheader{ .text-box:not(:first-child)::before{ display: none; } + .btn{ + display:none; + } .image-box{ order: 0; + height:auto; + max-height:none !important; img{ aspect-ratio: 16 / 9; height: auto !important; From 05be956794c2dbf9b83b0132227493b0175cc8e3 Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 14 Mar 2024 16:29:46 +0100 Subject: [PATCH 08/22] WIP Slider autoplay --- .../sections/marketingheader/marketingheaderslider.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js b/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js index 1ff8a98..cb4fd8c 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js @@ -8,7 +8,14 @@ class IHKMHSlider { this.slides = section.children(); this.slider = new Slider(section); this.stringLength = 0; - + this.settings = { + loop: true, + autoplay: true, + infinite: true, + autoplaySpeed: 1000, + animationSpeed: 600, + startSlide: 1, + }; this.slider.section.on('in-viewport slide-change', () => { const curr = this.slider.currentSlide; if (this.slides[curr].hasCounter) { From 3562c7cbf2fbbee4a818e88def5eea3158c0c08d Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 14 Mar 2024 16:34:56 +0100 Subject: [PATCH 09/22] Fix Buttons --- .../stories/sections/marketingheader/marketingheader.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 3c37e81..15d9e88 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -743,7 +743,7 @@ section.marketingheader{ .text-box:not(:first-child)::before{ display: none; } - .btn{ + .text-box .btn{ display:none; } .image-box{ From 303350e46cd0eecda1f59fd3d7770cda0021d2c5 Mon Sep 17 00:00:00 2001 From: Florian Eisenmenger Date: Thu, 14 Mar 2024 16:46:50 +0100 Subject: [PATCH 10/22] fix slider auto animation --- .../marketingheader/marketingheaderslider.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js b/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js index cb4fd8c..d4fad0e 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js @@ -5,23 +5,15 @@ import Slider from "../slider/slider"; class IHKMHSlider { constructor(section) { this.section = section.addClass('initiated'); - this.slides = section.children(); this.slider = new Slider(section); - this.stringLength = 0; - this.settings = { + this.slider.settings = { loop: true, autoplay: true, infinite: true, - autoplaySpeed: 1000, + autoplaySpeed: 7000, animationSpeed: 600, startSlide: 1, }; - this.slider.section.on('in-viewport slide-change', () => { - const curr = this.slider.currentSlide; - if (this.slides[curr].hasCounter) { - this.startCounter(curr); - } - }) } } From 6e1caaca9262ada785aaac5c45466db60cc302c7 Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 14 Mar 2024 16:55:53 +0100 Subject: [PATCH 11/22] Infobanner komplett klickbar --- .../stories/components/mini-teaser/MiniTeaserComponent.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js index 70cd288..c949172 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js +++ b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js @@ -19,7 +19,8 @@ export const createMiniTeaser = ({ createElement('h4', ['title'], title, textBox); return tile; }else{ - const tile = createElement('div', ['tile', 'mini-teaser', type], null); + const tile = createElement('a', ['tile', 'mini-teaser', type], null); + tile.href = link; if (backgroundImage && backgroundImage.length > 0) { tile.style = 'background-image: url(' + backgroundImage + ');'; tile.classList.add('background-image'); @@ -28,10 +29,10 @@ export const createMiniTeaser = ({ if (icon && icon.length > 0) { createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox); createElement('h4', ['title'], title, textBox); - textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null})) + textBox.appendChild(createButton({elementType: 'span',color: 'white', label: buttonlabel,iconPosition: 'icon-right', icon: null, preventClick: false})) }else{ createElement('h4', ['title', 'noicon'], title, textBox); - textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null})) + textBox.appendChild(createButton({elementType: 'span',color: 'white', label: buttonlabel, iconPosition: 'icon-right', icon: null, preventClick: false})) } return tile; From d3507db967e7200c2eccc43e4dff6abc0872b7fe Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 14 Mar 2024 16:58:53 +0100 Subject: [PATCH 12/22] Fix margin bottom slider --- .../stories/sections/marketingheader/marketingheader.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 15d9e88..bc733eb 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -808,6 +808,7 @@ section.marketingheader{ @media screen and (max-width:567px) { .slider { margin: 0; + margin-bottom: 20px; } } .context-box{ From 214183a0a4ac0ca1fbc6c1b689b14831c9d7b153 Mon Sep 17 00:00:00 2001 From: Florian Eisenmenger Date: Thu, 14 Mar 2024 17:02:41 +0100 Subject: [PATCH 13/22] easing --- .../stories/sections/marketingheader/marketingheader.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 15d9e88..0f28f68 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -195,7 +195,7 @@ section.marketingheader{ display: flex; flex-wrap: wrap; font-family: "Korb", sans-serif; - transition: all 0.25s ease-in; + transition: all 0.4s ease-in; padding-bottom: 0; @media(max-width: 767px) { //margin-left: -6px; From 3cc04b3cf3db15e8ba1dbe22f4732bfa20492304 Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 14 Mar 2024 17:03:42 +0100 Subject: [PATCH 14/22] FINAL --- .../stories/sections/marketingheader/marketingheader.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index bc733eb..d4a2fd4 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -808,7 +808,7 @@ section.marketingheader{ @media screen and (max-width:567px) { .slider { margin: 0; - margin-bottom: 20px; + margin-bottom: 8px; } } .context-box{ From 7b61e38c0c4b25e0aed390bc304192d16acbb051 Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 14 Mar 2024 17:07:19 +0100 Subject: [PATCH 15/22] MH MIniteaser Abstand mobil --- .../stories/sections/marketingheader/marketingheader.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index c107a05..623762b 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -530,6 +530,9 @@ section.marketingheader{ .mt{ height: 100%; padding: 8px 0; + @media screen and (max-width:575px){ + padding: 4px 0; + } .mini-teaser{ height: 100%; .text-box{ From 3a06aee7e18d72953681196caee118f0d520cb18 Mon Sep 17 00:00:00 2001 From: Florian Eisenmenger Date: Thu, 14 Mar 2024 17:09:32 +0100 Subject: [PATCH 16/22] static --- ...nts-mini-teaser-MiniTeaser-stories.a1d8595a.iframe.bundle.js | 1 + ...nts-mini-teaser-MiniTeaser-stories.d5d2a12c.iframe.bundle.js | 1 - gfi-ihk-2024/storybook-static/iframe.html | 2 +- gfi-ihk-2024/storybook-static/index.json | 2 +- gfi-ihk-2024/storybook-static/project.json | 2 +- ....iframe.bundle.js => runtime~main.e5127b1b.iframe.bundle.js} | 2 +- ...tingheader-MarketingHeader-stories.75136b5d.iframe.bundle.js | 1 - ...tingheader-MarketingHeader-stories.efdc18d5.iframe.bundle.js | 1 + gfi-ihk-2024/storybook-static/stories.json | 2 +- 9 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 gfi-ihk-2024/storybook-static/components-mini-teaser-MiniTeaser-stories.a1d8595a.iframe.bundle.js delete mode 100644 gfi-ihk-2024/storybook-static/components-mini-teaser-MiniTeaser-stories.d5d2a12c.iframe.bundle.js rename gfi-ihk-2024/storybook-static/{runtime~main.009b7c48.iframe.bundle.js => runtime~main.e5127b1b.iframe.bundle.js} (98%) delete mode 100644 gfi-ihk-2024/storybook-static/sections-marketingheader-MarketingHeader-stories.75136b5d.iframe.bundle.js create mode 100644 gfi-ihk-2024/storybook-static/sections-marketingheader-MarketingHeader-stories.efdc18d5.iframe.bundle.js diff --git a/gfi-ihk-2024/storybook-static/components-mini-teaser-MiniTeaser-stories.a1d8595a.iframe.bundle.js b/gfi-ihk-2024/storybook-static/components-mini-teaser-MiniTeaser-stories.a1d8595a.iframe.bundle.js new file mode 100644 index 0000000..32935f5 --- /dev/null +++ b/gfi-ihk-2024/storybook-static/components-mini-teaser-MiniTeaser-stories.a1d8595a.iframe.bundle.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_ihk24_storybook=self.webpackChunk_ihk24_storybook||[]).push([[3407],{"./stories/components/mini-teaser/MiniTeaserComponent.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Y:()=>createMiniTeaser});__webpack_require__("./node_modules/core-js/modules/es.string.link.js"),__webpack_require__("./node_modules/core-js/modules/es.array.join.js"),__webpack_require__("./node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("./node_modules/core-js/modules/es.string.split.js");var injectStylesIntoStyleTag=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),miniteaser=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./stories/components/mini-teaser/miniteaser.scss"),options={insert:"head",singleton:!1};injectStylesIntoStyleTag_default()(miniteaser.Z,options);miniteaser.Z.locals;var helpers=__webpack_require__("./stories/_global/scripts/helpers.js"),ButtonComponent=__webpack_require__("./stories/atoms/button/ButtonComponent.js"),createMiniTeaser=function createMiniTeaser(_ref){var _ref$type=_ref.type,type=void 0===_ref$type?"standard":_ref$type,_ref$category=_ref.category,category=void 0===_ref$category?"IHK Mitgliedschaft":_ref$category,_ref$title=_ref.title,title=void 0===_ref$title?"Werden Sie Teil unseres Netzwerks!":_ref$title,_ref$link=_ref.link,link=void 0===_ref$link?"#":_ref$link,_ref$icon=_ref.icon,icon=void 0===_ref$icon?"Roboter":_ref$icon,_ref$buttonlabel=_ref.buttonlabel,buttonlabel=void 0===_ref$buttonlabel?"IHK-Newsletter sichern":_ref$buttonlabel,_ref$backgroundImage=_ref.backgroundImage,backgroundImage=void 0===_ref$backgroundImage?null:_ref$backgroundImage;if("standard"===type){var tile=(0,helpers.az)("a",["tile","mini-teaser",type],null);tile.href=link;var textBox=(0,helpers.az)("div",["text-box"],null,tile);return(0,helpers.az)("h5",["category"],category,textBox),(0,helpers.az)("h4",["title"],title,textBox),tile}var _tile=(0,helpers.az)("a",["tile","mini-teaser",type],null);_tile.href=link,backgroundImage&&backgroundImage.length>0&&(_tile.style="background-image: url("+backgroundImage+");",_tile.classList.add("background-image"));var _textBox=(0,helpers.az)("div",["text-box"],null,_tile);return icon&&icon.length>0?((0,helpers.az)("div",["icon-box","pictogram-"+icon.toLowerCase().split(" ").join("-")],null,_textBox),(0,helpers.az)("h4",["title"],title,_textBox),_textBox.appendChild((0,ButtonComponent.a)({elementType:"span",color:"white",label:buttonlabel,iconPosition:"icon-right",icon:null,preventClick:!1}))):((0,helpers.az)("h4",["title","noicon"],title,_textBox),_textBox.appendChild((0,ButtonComponent.a)({elementType:"span",color:"white",label:buttonlabel,iconPosition:"icon-right",icon:null,preventClick:!1}))),_tile}},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./stories/components/mini-teaser/miniteaser.scss":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/cssWithMappingToString.js"),_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,'.mini-teaser{position:relative;background-color:#fff;overflow:hidden;width:100%;border-radius:4px;padding:16px 12px;transition:.25s ease;line-height:1.2;text-align:center;text-decoration:none;background-color:var(--theme-grey-light);display:block}.mini-teaser .title{font-size:22px}.mini-teaser.standard::before{content:"";position:absolute;display:block;top:0;left:0;right:0;height:4px;background-color:var(--theme-color-secondary);transition:.2s ease}.mini-teaser.standard:hover::before{height:8px}.mini-teaser h4{font-size:22px}.mini-teaser .text-box{position:relative}.mini-teaser.infoteaser{background:linear-gradient(161deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%);position:relative}.mini-teaser.infoteaser:after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;background:linear-gradient(161deg, var(--theme-color-gradient-01) 40%, var(--theme-color-gradient-02) 80%, var(--theme-color-gradient-03) 120%)}.mini-teaser.infoteaser.background-image{background-size:cover}.mini-teaser.infoteaser.background-image:after{position:absolute;top:0;left:0;bottom:0;right:0;z-index:0;content:"";opacity:.6;background:linear-gradient(87deg, #036 12.55%, rgba(1, 40, 81, 0.86) 56.52%, rgba(0, 51, 102, 0) 94.05%);background-blend-mode:overlay}.mini-teaser.infoteaser.background-image .text-box{position:relative;z-index:1}.mini-teaser.infoteaser .title,.mini-teaser.infoteaser .category,.mini-teaser.infoteaser .btn{color:#fff}.mini-teaser.infoteaser .title{margin-top:0;padding-left:54px;min-height:48px;text-align:left;line-height:24px;margin-bottom:19px;width:100%}.mini-teaser.infoteaser .title.noicon{padding-left:0;min-height:0}.mini-teaser.infoteaser .title.noicon+.btn{margin-left:0}.mini-teaser.infoteaser .btn{background-color:rgba(0,0,0,0);border:1px solid #fff;margin-left:54px;display:inline-block;padding:8px 10px;line-height:22px;border-radius:16px;--button-padding: 8px 10px;min-height:0;font-size:22px}.mini-teaser.infoteaser .btn:after{border-radius:16px}.mini-teaser.infoteaser .icon-box{margin-bottom:19px;margin-top:0;padding-top:0;position:absolute;top:0;left:0}.mini-teaser.infoteaser .text-box{padding:0;display:flex;flex-wrap:wrap}.mini-teaser .icon-box{font-family:"Pictograms",sans-serif;line-height:1;color:#fff;font-size:48px}.mini-teaser .category{text-align:left;padding:0;margin:0;margin-bottom:8px;font-size:16px;text-transform:uppercase;line-height:18px}.mini-teaser .title{text-align:left;padding:0;margin:0}',"",{version:3,sources:["webpack://./stories/components/mini-teaser/miniteaser.scss"],names:[],mappings:"AAGA,aACE,iBAAA,CACA,qBAAA,CACA,eAAA,CACA,UAAA,CAEA,iBAAA,CACA,iBAAA,CACA,oBAAA,CACA,eAAA,CACA,iBAAA,CACA,oBAAA,CACA,wCAAA,CACA,aAAA,CACA,oBACE,cAAA,CAEF,8BACE,UAAA,CACA,iBAAA,CACA,aAAA,CACA,KAAA,CACA,MAAA,CACA,OAAA,CACA,UAAA,CACA,6CAAA,CACA,mBAAA,CAEF,oCACE,UAAA,CAEF,gBACE,cAAA,CAEF,uBACE,iBAAA,CAEF,wBACE,8HAAA,CACA,iBAAA,CACA,8BACE,UAAA,CACA,iBAAA,CACA,MAAA,CACA,OAAA,CACA,KAAA,CACA,QAAA,CACA,UAAA,CACA,+IAAA,CAEF,yCACE,qBAAA,CACA,+CACE,iBAAA,CACA,KAAA,CACA,MAAA,CACA,QAAA,CACA,OAAA,CACA,SAAA,CACA,UAAA,CACA,UAAA,CACA,wGAAA,CACA,6BAAA,CAGF,mDACE,iBAAA,CACA,SAAA,CAGJ,8FACE,UAAA,CAEF,+BACE,YAAA,CACA,iBAAA,CACA,eAAA,CACA,eAAA,CACA,gBAAA,CACA,kBAAA,CACA,UAAA,CACA,sCACE,cAAA,CACA,YAAA,CACA,2CACE,aAAA,CAIN,6BACE,8BAAA,CACA,qBAAA,CACA,gBAAA,CACA,oBAAA,CACA,gBAAA,CACA,gBAAA,CACA,kBAAA,CACA,0BAAA,CACA,YAAA,CACA,cAAA,CACA,mCACE,kBAAA,CAGJ,kCACE,kBAAA,CACA,YAAA,CACA,aAAA,CACA,iBAAA,CACA,KAAA,CACA,MAAA,CAGF,kCACE,SAAA,CACA,YAAA,CACA,cAAA,CAIJ,uBACE,mCAAA,CACA,aAAA,CACA,UAAA,CACA,cAAA,CAEF,uBACE,eAAA,CACA,SAAA,CACA,QAAA,CACA,iBAAA,CACA,cAAA,CACA,wBAAA,CACA,gBAAA,CAEF,oBACE,eAAA,CACA,SAAA,CACA,QAAA",sourcesContent:["@import '../../_global/styles/mixins';\n@import '../../_global/styles/vars';\n\n.mini-teaser {\n position: relative;\n background-color: white;\n overflow: hidden;\n width: 100%;\n //max-width: 420px;\n border-radius: 4px;\n padding: 16px 12px;\n transition: 0.25s ease;\n line-height: 1.2;\n text-align: center;\n text-decoration: none;\n background-color: var(--theme-grey-light);\n display: block;\n .title{\n font-size: 22px;\n }\n &.standard::before {\n content: \"\";\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background-color: var(--theme-color-secondary);\n transition: 0.2s ease;\n }\n &.standard:hover::before {\n height: 8px;\n }\n h4{\n font-size: 22px;\n }\n .text-box{\n position: relative;\n }\n &.infoteaser{\n background: linear-gradient(161deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%);\n position: relative;\n &:after{\n content:\"\";\n position:absolute;\n left:0;\n right:0;\n top:0;\n bottom:0;\n z-index:-1;\n background: linear-gradient(161deg, var(--theme-color-gradient-01) 40%, var(--theme-color-gradient-02) 80%, var(--theme-color-gradient-03) 120%);\n }\n &.background-image{\n background-size:cover;\n &:after{\n position:absolute;\n top:0;\n left:0;\n bottom:0;\n right:0;\n z-index: 0;\n content:\"\";\n opacity: 0.6;\n background: linear-gradient(87deg, #036 12.55%, rgba(1, 40, 81, 0.86) 56.52%, rgba(0, 51, 102, 0.00) 94.05%);\n background-blend-mode: overlay;\n \n }\n .text-box{\n position: relative;\n z-index: 1;\n }\n }\n .title, .category, .btn{\n color:white;\n }\n .title{\n margin-top: 0;\n padding-left: 54px;\n min-height: 48px;\n text-align: left;\n line-height: 24px;\n margin-bottom: 19px;\n width: 100%;\n &.noicon{\n padding-left: 0;\n min-height: 0;\n + .btn{\n margin-left: 0;\n }\n }\n }\n .btn{\n background-color: transparent;\n border: 1px solid white;\n margin-left: 54px;\n display: inline-block;\n padding:8px 10px;\n line-height: 22px;\n border-radius:16px;\n --button-padding: 8px 10px;\n min-height: 0;\n font-size: 22px;\n &:after{\n border-radius:16px;\n }\n }\n .icon-box{\n margin-bottom: 19px;\n margin-top: 0;\n padding-top: 0;\n position: absolute;\n top: 0;\n left: 0;\n \n }\n .text-box{\n padding: 0;\n display: flex;\n flex-wrap: wrap;\n }\n }\n\n .icon-box {\n font-family: 'Pictograms', sans-serif;\n line-height: 1;\n color: white;\n font-size:48px\n }\n .category{\n text-align: left;\n padding:0;\n margin:0;\n margin-bottom:8px;\n font-size:16px;\n text-transform: uppercase;\n line-height: 18px;\n }\n .title{\n text-align: left;\n padding:0;\n margin:0;\n }\n}\n\n\n\n\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./stories/components/mini-teaser/MiniTeaser.stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{StandardMiniTeaser:()=>StandardMiniTeaser,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__,infobanner:()=>infobanner,infobannerBackground:()=>infobannerBackground,infobannerWithoutIcon:()=>infobannerWithoutIcon});__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("./node_modules/core-js/modules/es.error.cause.js"),__webpack_require__("./node_modules/core-js/modules/es.error.to-string.js");var _MiniTeaserComponent__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./stories/components/mini-teaser/MiniTeaserComponent.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i {\n return createMiniTeaser({\n ...args\n });\n}",...StandardMiniTeaser.parameters?.docs?.source}}},infobanner.parameters={...infobanner.parameters,docs:{...infobanner.parameters?.docs,source:{originalSource:"({\n ...args\n}) => {\n return createMiniTeaser({\n ...args\n });\n}",...infobanner.parameters?.docs?.source}}},infobannerWithoutIcon.parameters={...infobannerWithoutIcon.parameters,docs:{...infobannerWithoutIcon.parameters?.docs,source:{originalSource:"({\n ...args\n}) => {\n return createMiniTeaser({\n ...args\n });\n}",...infobannerWithoutIcon.parameters?.docs?.source}}},infobannerBackground.parameters={...infobannerBackground.parameters,docs:{...infobannerBackground.parameters?.docs,source:{originalSource:"({\n ...args\n}) => {\n return createMiniTeaser({\n ...args\n });\n}",...infobannerBackground.parameters?.docs?.source}}}}}]); \ No newline at end of file diff --git a/gfi-ihk-2024/storybook-static/components-mini-teaser-MiniTeaser-stories.d5d2a12c.iframe.bundle.js b/gfi-ihk-2024/storybook-static/components-mini-teaser-MiniTeaser-stories.d5d2a12c.iframe.bundle.js deleted file mode 100644 index bf20d62..0000000 --- a/gfi-ihk-2024/storybook-static/components-mini-teaser-MiniTeaser-stories.d5d2a12c.iframe.bundle.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_ihk24_storybook=self.webpackChunk_ihk24_storybook||[]).push([[3407],{"./stories/components/mini-teaser/MiniTeaserComponent.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Y:()=>createMiniTeaser});__webpack_require__("./node_modules/core-js/modules/es.string.link.js"),__webpack_require__("./node_modules/core-js/modules/es.array.join.js"),__webpack_require__("./node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("./node_modules/core-js/modules/es.string.split.js");var injectStylesIntoStyleTag=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),miniteaser=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./stories/components/mini-teaser/miniteaser.scss"),options={insert:"head",singleton:!1};injectStylesIntoStyleTag_default()(miniteaser.Z,options);miniteaser.Z.locals;var helpers=__webpack_require__("./stories/_global/scripts/helpers.js"),ButtonComponent=__webpack_require__("./stories/atoms/button/ButtonComponent.js"),createMiniTeaser=function createMiniTeaser(_ref){var _ref$type=_ref.type,type=void 0===_ref$type?"standard":_ref$type,_ref$category=_ref.category,category=void 0===_ref$category?"IHK Mitgliedschaft":_ref$category,_ref$title=_ref.title,title=void 0===_ref$title?"Werden Sie Teil unseres Netzwerks!":_ref$title,_ref$link=_ref.link,link=void 0===_ref$link?"#":_ref$link,_ref$icon=_ref.icon,icon=void 0===_ref$icon?"Roboter":_ref$icon,_ref$buttonlabel=_ref.buttonlabel,buttonlabel=void 0===_ref$buttonlabel?"IHK-Newsletter sichern":_ref$buttonlabel;if("standard"===type){var tile=(0,helpers.az)("a",["tile","mini-teaser",type],null);tile.href=link;var textBox=(0,helpers.az)("div",["text-box"],null,tile);return(0,helpers.az)("h5",["category"],category,textBox),(0,helpers.az)("h4",["title"],title,textBox),tile}var _tile=(0,helpers.az)("div",["tile","mini-teaser",type],null),_textBox=(0,helpers.az)("div",["text-box"],null,_tile);return(0,helpers.az)("div",["icon-box","pictogram-"+icon.toLowerCase().split(" ").join("-")],null,_textBox),(0,helpers.az)("h4",["title"],title,_textBox),_textBox.appendChild((0,ButtonComponent.a)({color:"white",label:buttonlabel,link,iconPosition:"icon-right",icon:null})),_tile}},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./stories/components/mini-teaser/miniteaser.scss":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/cssWithMappingToString.js"),_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,'.mini-teaser{position:relative;background-color:#fff;overflow:hidden;width:100%;border-radius:4px;padding:16px 12px;transition:.25s ease;line-height:1.2;text-align:center;text-decoration:none;background-color:var(--theme-grey-light);display:block}.mini-teaser .title{font-size:22px}.mini-teaser.standard::before{content:"";position:absolute;display:block;top:0;left:0;right:0;height:4px;background-color:var(--theme-color-secondary);transition:.2s ease}.mini-teaser.standard:hover::before{height:8px}.mini-teaser h4{font-size:22px}.mini-teaser.infoteaser{background:linear-gradient(161deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%)}.mini-teaser.infoteaser:after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;background:linear-gradient(161deg, var(--theme-color-gradient-01) 40%, var(--theme-color-gradient-02) 80%, var(--theme-color-gradient-03) 120%)}.mini-teaser.infoteaser .title,.mini-teaser.infoteaser .category,.mini-teaser.infoteaser .btn{color:#fff}.mini-teaser.infoteaser .title{margin-top:0;padding-left:54px;min-height:48px;text-align:left;line-height:24px;margin-bottom:19px}.mini-teaser.infoteaser .btn{background-color:rgba(0,0,0,0);border:1px solid #fff;margin-left:54px;display:inline-block;padding:8px 10px;line-height:22px;border-radius:16px;--button-padding: 8px 10px;min-height:0;font-size:22px}.mini-teaser.infoteaser .icon-box{margin-bottom:19px;margin-top:0;padding-top:0;position:absolute;top:16px;left:12px}.mini-teaser.infoteaser .text-box{padding:0;display:flex;flex-wrap:wrap}.mini-teaser .icon-box{font-family:"Pictograms",sans-serif;line-height:1;color:#fff;font-size:48px}.mini-teaser .category{text-align:left;padding:0;margin:0;margin-bottom:8px;font-size:16px;text-transform:uppercase;line-height:18px}.mini-teaser .title{text-align:left;padding:0;margin:0}',"",{version:3,sources:["webpack://./stories/components/mini-teaser/miniteaser.scss"],names:[],mappings:"AAGA,aACE,iBAAA,CACA,qBAAA,CACA,eAAA,CACA,UAAA,CAEA,iBAAA,CACA,iBAAA,CACA,oBAAA,CACA,eAAA,CACA,iBAAA,CACA,oBAAA,CACA,wCAAA,CACA,aAAA,CACA,oBACE,cAAA,CAEF,8BACE,UAAA,CACA,iBAAA,CACA,aAAA,CACA,KAAA,CACA,MAAA,CACA,OAAA,CACA,UAAA,CACA,6CAAA,CACA,mBAAA,CAEF,oCACE,UAAA,CAEF,gBACE,cAAA,CAEF,wBACE,8HAAA,CACA,8BACE,UAAA,CACA,iBAAA,CACA,MAAA,CACA,OAAA,CACA,KAAA,CACA,QAAA,CACA,UAAA,CACA,+IAAA,CAEF,8FACE,UAAA,CAEF,+BACE,YAAA,CACA,iBAAA,CACA,eAAA,CACA,eAAA,CACA,gBAAA,CACA,kBAAA,CAEF,6BACE,8BAAA,CACA,qBAAA,CACA,gBAAA,CACA,oBAAA,CACA,gBAAA,CACA,gBAAA,CACA,kBAAA,CACA,0BAAA,CACA,YAAA,CACA,cAAA,CAEF,kCACE,kBAAA,CACA,YAAA,CACA,aAAA,CACA,iBAAA,CACA,QAAA,CACA,SAAA,CAEF,kCACE,SAAA,CACA,YAAA,CACA,cAAA,CAIJ,uBACE,mCAAA,CACA,aAAA,CACA,UAAA,CACA,cAAA,CAEF,uBACE,eAAA,CACA,SAAA,CACA,QAAA,CACA,iBAAA,CACA,cAAA,CACA,wBAAA,CACA,gBAAA,CAEF,oBACE,eAAA,CACA,SAAA,CACA,QAAA",sourcesContent:["@import '../../_global/styles/mixins';\n@import '../../_global/styles/vars';\n\n.mini-teaser {\n position: relative;\n background-color: white;\n overflow: hidden;\n width: 100%;\n //max-width: 420px;\n border-radius: 4px;\n padding: 16px 12px;\n transition: 0.25s ease;\n line-height: 1.2;\n text-align: center;\n text-decoration: none;\n background-color: var(--theme-grey-light);\n display: block;\n .title{\n font-size: 22px;\n }\n &.standard::before {\n content: \"\";\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background-color: var(--theme-color-secondary);\n transition: 0.2s ease;\n }\n &.standard:hover::before {\n height: 8px;\n }\n h4{\n font-size: 22px;\n }\n &.infoteaser{\n background: linear-gradient(161deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%);\n &:after{\n content:\"\";\n position:absolute;\n left:0;\n right:0;\n top:0;\n bottom:0;\n z-index:-1;\n background: linear-gradient(161deg, var(--theme-color-gradient-01) 40%, var(--theme-color-gradient-02) 80%, var(--theme-color-gradient-03) 120%);\n }\n .title, .category, .btn{\n color:white;\n }\n .title{\n margin-top: 0;\n padding-left: 54px;\n min-height: 48px;\n text-align: left;\n line-height: 24px;\n margin-bottom: 19px;\n }\n .btn{\n background-color: transparent;\n border: 1px solid white;\n margin-left: 54px;\n display: inline-block;\n padding:8px 10px;\n line-height: 22px;\n border-radius:16px;\n --button-padding: 8px 10px;\n min-height: 0;\n font-size: 22px;\n }\n .icon-box{\n margin-bottom: 19px;\n margin-top: 0;\n padding-top: 0;\n position: absolute;\n top: 16px;\n left: 12px;\n }\n .text-box{\n padding: 0;\n display: flex;\n flex-wrap: wrap;\n }\n }\n\n .icon-box {\n font-family: 'Pictograms', sans-serif;\n line-height: 1;\n color: white;\n font-size:48px\n }\n .category{\n text-align: left;\n padding:0;\n margin:0;\n margin-bottom:8px;\n font-size:16px;\n text-transform: uppercase;\n line-height: 18px;\n }\n .title{\n text-align: left;\n padding:0;\n margin:0;\n }\n}\n\n\n\n\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./stories/components/mini-teaser/MiniTeaser.stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{StandardMiniTeaser:()=>StandardMiniTeaser,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__,infobanner:()=>infobanner});__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("./node_modules/core-js/modules/es.error.cause.js"),__webpack_require__("./node_modules/core-js/modules/es.error.to-string.js");var _MiniTeaserComponent__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./stories/components/mini-teaser/MiniTeaserComponent.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i {\n return createMiniTeaser({\n ...args\n });\n}",...StandardMiniTeaser.parameters?.docs?.source}}},infobanner.parameters={...infobanner.parameters,docs:{...infobanner.parameters?.docs,source:{originalSource:"({\n ...args\n}) => {\n return createMiniTeaser({\n ...args\n });\n}",...infobanner.parameters?.docs?.source}}}}}]); \ No newline at end of file diff --git a/gfi-ihk-2024/storybook-static/iframe.html b/gfi-ihk-2024/storybook-static/iframe.html index cc20ce4..dc14540 100644 --- a/gfi-ihk-2024/storybook-static/iframe.html +++ b/gfi-ihk-2024/storybook-static/iframe.html @@ -354,7 +354,7 @@ window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};