From 83a29036330a2e22af1675ac58afec055d7abca1 Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Fri, 29 May 2026 12:51:27 +0200 Subject: [PATCH] components, sections and refactoring slider tabs --- .../atoms/slider-tabs/SliderTabs.stories.js | 15 ++ .../atoms/slider-tabs/SliderTabsComponent.js | 16 ++ .../atoms/slider-tabs/slider-tabs.scss | 120 ++++++++++++++ .../stories/components/teaser/teaser.scss | 5 +- .../components/testimonial/testimonial.scss | 12 +- .../components/topic-teaser/topic-teaser.scss | 10 +- .../stories/components/video/video.scss | 2 +- .../card-slider/CardSliderComponent.js | 2 +- .../sections/card-slider/card-slider.scss | 119 +------------- .../ElectionDetailComponent.js | 6 +- .../election-detail/election-detail.scss | 25 +-- .../eventteaserlargeslider.scss | 150 ++++++------------ .../sections/quick-facts/quick-facts.scss | 52 +----- .../sections/timeline/Timeline.stories.js | 2 +- 14 files changed, 241 insertions(+), 295 deletions(-) create mode 100644 gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabs.stories.js create mode 100644 gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabsComponent.js create mode 100644 gfi-ihk-2024/stories/atoms/slider-tabs/slider-tabs.scss diff --git a/gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabs.stories.js b/gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabs.stories.js new file mode 100644 index 0000000..8651d05 --- /dev/null +++ b/gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabs.stories.js @@ -0,0 +1,15 @@ +import {createSliderTabs} from "./SliderTabsComponent"; + +export default { + title: 'Atoms/Slider-Tabs', + args: { + count: 3 + }, + argTypes: {} +} +const Template = ({...args}) => { + return createSliderTabs({...args}); +} + +export const SliderTabs = Template.bind({}); +SliderTabs.args = {}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabsComponent.js b/gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabsComponent.js new file mode 100644 index 0000000..5c9bec7 --- /dev/null +++ b/gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabsComponent.js @@ -0,0 +1,16 @@ +import './slider-tabs.scss'; +import {createElement} from "../../_global/scripts/helpers"; + +export const createSliderTabs = ({ + count = 3 +}) => { + const myControls = createElement('div', ['controls'], null); + const ul = createElement('ul', ['slider-tabs'], null, myControls); + for (let i = 0; i < count; i++) { + const li = createElement('li', [], null, ul); + const btn = createElement('button', ['btn'], null, li); + createElement('span', [], String(i + 1), btn); + if (i === 0) btn.classList.add('active'); + } + return myControls; +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/atoms/slider-tabs/slider-tabs.scss b/gfi-ihk-2024/stories/atoms/slider-tabs/slider-tabs.scss new file mode 100644 index 0000000..19cf337 --- /dev/null +++ b/gfi-ihk-2024/stories/atoms/slider-tabs/slider-tabs.scss @@ -0,0 +1,120 @@ +@use '../../_global/styles/mixins' as *; +@use '../../_global/styles/vars' as *; + +.controls, .rotationslider { + .count { + display: none; + } + + .slider-tabs, .tabs { + position: absolute; + bottom: 1.8rem; + left: 50%; + right: 0; + padding: 0; + list-style: none; + transform: translate(-50%, 0); + text-align: center; + font-size: 0; + line-height: 0; + margin: 0; + + li { + display: inline-block; + vertical-align: top; + + &.active button:before { + background-color: var(--color-text); + box-shadow: 0 0 0 2px var(--color-text); + } + } + + .btn { + --button-min-size: 24px; + font-size: 0; + line-height: 0; + display: flex; + align-items: center; + justify-content: center; + + &::before { + content: ""; + position: relative; + display: block; + width: 10px; + height: 10px; + border: 2px solid var(--color-text); + border-radius: 5px; + transition: 0.2s ease; + } + + &::after { + display: none; + } + + &:hover { + background-color: transparent; + + &::before { + background-color: var(--color-text); + } + } + } + } + + button { + border: 0; + background-color: transparent; + padding: 0; + cursor: pointer; + + &.prev, &.next { + position: absolute; + top: -89px; + width: 60px; + height: 60px; + text-align: center; + line-height: 60px; + right: 0; + color: var(--color-text); + border-radius: 24px; + background: var(--swatches-neutrals-white); + --button-hover-shadow-opacity: 0.4; + --button-hover-shadow-size: 6px; + @media(max-width: 768px) { + display: none; + } + + &:before { + @include icon-small-arrow-right-simple; + font-family: "Icons", sans-serif; + font-size: 30px; + content: "\e825"; + } + + &:after { + content: ""; + position: absolute; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: var(--border-radius-lg); + box-shadow: 0 0 0 2px var(--color-surface-inset); + opacity: 0; + transition: 0.3s ease; + } + + &:hover:after { + opacity: 0.4; + box-shadow: 0 0 0 6px var(--color-surface-inset); + } + } + + &.prev { + right: 70px; + transform: rotate(180deg); + } + } +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/teaser/teaser.scss b/gfi-ihk-2024/stories/components/teaser/teaser.scss index b2afddd..d1ebe4e 100644 --- a/gfi-ihk-2024/stories/components/teaser/teaser.scss +++ b/gfi-ihk-2024/stories/components/teaser/teaser.scss @@ -2,7 +2,7 @@ @use '../../_global/styles/vars' as *; .teaser { - --hero-background: var(--swatches-neutrals-white); + //--hero-background: var(--swatches-neutrals-white); position: relative; display: flex; flex-direction: column; @@ -239,6 +239,7 @@ bottom: 100%; z-index: 1; background-color: var(--swatches-neutrals-white); + //background-color: var(--hero-background); margin-right: 40px; padding-top: 0.4em; padding-right: 0.8em; @@ -407,7 +408,7 @@ } [data-background='lightblue'] .teaser { - --hero-background: var(--theme-color-primary-dimmed-04); + //--hero-background: var(--swatches-primary-100); .image-box { background-color: rgba(#fff, 0.4); diff --git a/gfi-ihk-2024/stories/components/testimonial/testimonial.scss b/gfi-ihk-2024/stories/components/testimonial/testimonial.scss index a20ef94..76b5842 100644 --- a/gfi-ihk-2024/stories/components/testimonial/testimonial.scss +++ b/gfi-ihk-2024/stories/components/testimonial/testimonial.scss @@ -55,7 +55,7 @@ width: 100%; display: block; height: 8px; - background-color: var(--theme-color-secondary); + background-color: var(--color-decoration); transition: 0.3s ease; z-index: 1; border-bottom-right-radius: 4px; @@ -85,8 +85,9 @@ font-family: "Korb", sans-serif; position: relative; &:before { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNyA4LjljLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yQzkgMTYgOC4zIDE4LjQgOC4zIDIxLjNjLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjNDLjcgMzAuNyAwIDI3LjYgMCAyMy41YzAtNC42IDEuMS04LjcgMy40LTEyLjJzNS44LTYuNCAxMC40LTguN0wxNyA4Ljl6bTIzIDBjLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yLTEuNCAxLjktMi4xIDQuMy0yLjEgNy4yLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjMtMS41LTIuMy0yLjItNS40LTIuMi05LjUgMC00LjYgMS4xLTguNyAzLjQtMTIuMlMzMi40IDUgMzcgMi43bDMgNi4yeiIgc3R5bGU9ImZpbGw6IzU2YmQ2NiIvPjwvc3ZnPg==); - background-size: 100%; + mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNyA4LjljLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yQzkgMTYgOC4zIDE4LjQgOC4zIDIxLjNjLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjNDLjcgMzAuNyAwIDI3LjYgMCAyMy41YzAtNC42IDEuMS04LjcgMy40LTEyLjJzNS44LTYuNCAxMC40LTguN0wxNyA4Ljl6bTIzIDBjLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yLTEuNCAxLjktMi4xIDQuMy0yLjEgNy4yLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjMtMS41LTIuMy0yLjItNS40LTIuMi05LjUgMC00LjYgMS4xLTguNyAzLjQtMTIuMlMzMi40IDUgMzcgMi43bDMgNi4yeiIgc3R5bGU9ImZpbGw6IzU2YmQ2NiIvPjwvc3ZnPg==); + mask-size: 100%; + background-color: var(--color-decoration); content: ""; display: block; height: 30px; @@ -122,8 +123,9 @@ left: 0; position: absolute; top: -36px; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNyA4LjljLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yQzkgMTYgOC4zIDE4LjQgOC4zIDIxLjNjLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjNDLjcgMzAuNyAwIDI3LjYgMCAyMy41YzAtNC42IDEuMS04LjcgMy40LTEyLjJzNS44LTYuNCAxMC40LTguN0wxNyA4Ljl6bTIzIDBjLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yLTEuNCAxLjktMi4xIDQuMy0yLjEgNy4yLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjMtMS41LTIuMy0yLjItNS40LTIuMi05LjUgMC00LjYgMS4xLTguNyAzLjQtMTIuMlMzMi40IDUgMzcgMi43bDMgNi4yeiIgc3R5bGU9ImZpbGw6IzU2YmQ2NiIvPjwvc3ZnPg==); - background-size: 100%; + mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNyA4LjljLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yQzkgMTYgOC4zIDE4LjQgOC4zIDIxLjNjLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjNDLjcgMzAuNyAwIDI3LjYgMCAyMy41YzAtNC42IDEuMS04LjcgMy40LTEyLjJzNS44LTYuNCAxMC40LTguN0wxNyA4Ljl6bTIzIDBjLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yLTEuNCAxLjktMi4xIDQuMy0yLjEgNy4yLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjMtMS41LTIuMy0yLjItNS40LTIuMi05LjUgMC00LjYgMS4xLTguNyAzLjQtMTIuMlMzMi40IDUgMzcgMi43bDMgNi4yeiIgc3R5bGU9ImZpbGw6IzU2YmQ2NiIvPjwvc3ZnPg==); + mask-size: 100%; + background-color: var(--color-decoration); content: ""; display: block; height: 30px; diff --git a/gfi-ihk-2024/stories/components/topic-teaser/topic-teaser.scss b/gfi-ihk-2024/stories/components/topic-teaser/topic-teaser.scss index ebed354..a477c6e 100644 --- a/gfi-ihk-2024/stories/components/topic-teaser/topic-teaser.scss +++ b/gfi-ihk-2024/stories/components/topic-teaser/topic-teaser.scss @@ -6,7 +6,7 @@ position: relative; display: flex; flex-direction: column; - background-color: var(--swatches-neutrals-white); + background-color: var(--color-background); overflow: hidden; width: 100%; //max-width: 420px; @@ -31,7 +31,7 @@ font-family: 'Pictograms', sans-serif; font-size: 72px; line-height: 1; - color: var(--theme-color-secondary); + color: var(--color-decoration); margin-top: 6px; @media(max-width: 567px) { @@ -58,7 +58,7 @@ a.topic-teaser, .topics:not([data-type="list"]) a.tile { left: 0; right: 0; height: var(--border-width); - background-color: var(--theme-color-secondary); + background-color: var(--color-decoration); transition: 0.2s ease; } @@ -90,8 +90,8 @@ div.topic-teaser, .topics[data-type="list"] .tile { padding: 0 var(--topic-tile-padding) 0.5em; .icon-box { - background-color: var(--theme-color-primary); - color: var(--theme-color-background); + background-color: var(--color-text); + color: var(--color-background); margin: 0 calc(var(--topic-tile-padding) * -1); padding: 10px 0; font-size: 60px; diff --git a/gfi-ihk-2024/stories/components/video/video.scss b/gfi-ihk-2024/stories/components/video/video.scss index 2badcf6..de4aa35 100644 --- a/gfi-ihk-2024/stories/components/video/video.scss +++ b/gfi-ihk-2024/stories/components/video/video.scss @@ -68,7 +68,7 @@ &:hover { .btn { - box-shadow: 0 0 0 5px rgba(var(--theme-color-primary-rgb), 0.3); + box-shadow: 0 0 0 5px rgba(var(--swatches-primary-500-rgb), 0.3); } } } diff --git a/gfi-ihk-2024/stories/sections/card-slider/CardSliderComponent.js b/gfi-ihk-2024/stories/sections/card-slider/CardSliderComponent.js index af90e33..5d3994f 100644 --- a/gfi-ihk-2024/stories/sections/card-slider/CardSliderComponent.js +++ b/gfi-ihk-2024/stories/sections/card-slider/CardSliderComponent.js @@ -12,7 +12,7 @@ export const createCardSlider = headline = 'Auch interessant', fullWidth = false, }) => { - const cardSlider = createElement('section', ['card-slider'], null); + const cardSlider = createElement('section', ['card-slider','variant-subtle-primary'], null); if (fullWidth) { cardSlider.classList.add('fullwidth'); } diff --git a/gfi-ihk-2024/stories/sections/card-slider/card-slider.scss b/gfi-ihk-2024/stories/sections/card-slider/card-slider.scss index daf1a4d..82e33a6 100644 --- a/gfi-ihk-2024/stories/sections/card-slider/card-slider.scss +++ b/gfi-ihk-2024/stories/sections/card-slider/card-slider.scss @@ -1,5 +1,6 @@ @use '../../_global/styles/mixins' as *; @use '../../_global/styles/vars' as *; +@use '../../atoms/slider-tabs/slider-tabs'; .card-slider { margin: var(--section-margin) 0 var(--section-margin) 0; @@ -9,7 +10,7 @@ } &-inner { - background: var(--theme-color-primary-dimmed-04); + background: var(--color-background); padding: 33px 30px 0 30px; @media(max-width: 645px) { padding-left: 20px; @@ -82,122 +83,6 @@ } } - .controls { - .count { - display: none; - } - - .slider-tabs, .tabs { - position: absolute; - bottom: 1.8rem; - left: 50%; - right: 0; - padding: 0; - list-style: none; - transform: translate(-50%, 0); - text-align: center; - font-size: 0; - line-height: 0; - margin: 0; - li { - display: inline-block; - vertical-align: top; - - &.active button:before { - background-color: var(--theme-color-primary); - box-shadow: 0 0 0 2px var(--theme-color-primary); - } - } - - .btn { - --button-min-size: 24px; - font-size: 0; - line-height: 0; - display: flex; - align-items: center; - justify-content: center; - - &::before { - content: ""; - position: relative; - display: block; - width: 10px; - height: 10px; - border: 2px solid var(--theme-color-primary); - border-radius: 5px; - transition: 0.2s ease; - } - - &::after { - display: none; - } - - &:hover { - background-color: transparent; - - &::before { - background-color: var(--theme-color-primary); - } - } - } - } - - button { - border: 0; - background-color: transparent; - padding: 0; - cursor: pointer; - - &.prev, &.next { - position: absolute; - top: -89px; - width: 60px; - height: 60px; - text-align: center; - line-height: 60px; - right: 0; - color: var(--theme-color-primary); - border-radius: 24px; - background: var(--swatches-neutrals-white); - --button-hover-shadow-opacity: 0.4; - --button-hover-shadow-size: 6px; - @media(max-width: 768px) { - display: none; - } - - &:before { - @include icon-small-arrow-right-simple; - font-family: "Icons", sans-serif; - font-size: 30px; - content: "\e825"; - } - - &:after { - content: ""; - position: absolute; - display: block; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: var(--border-radius-lg); - box-shadow: 0 0 0 2px var(--theme-color-primary-dimmed-02); - opacity: 0; - transition: 0.3s ease; - } - - &:hover:after { - opacity: 0.4; - box-shadow: 0 0 0 6px var(--theme-color-primary-dimmed-02); - } - } - - &.prev { - right: 70px; - transform: rotate(180deg); - } - } - } &.fullwidth { .card-slider-inner { padding-left: var(--container-padding); diff --git a/gfi-ihk-2024/stories/sections/election-detail/ElectionDetailComponent.js b/gfi-ihk-2024/stories/sections/election-detail/ElectionDetailComponent.js index 2a5f54d..20d691d 100644 --- a/gfi-ihk-2024/stories/sections/election-detail/ElectionDetailComponent.js +++ b/gfi-ihk-2024/stories/sections/election-detail/ElectionDetailComponent.js @@ -30,17 +30,17 @@ export const createElectionDetail = showSocialMedia = true, showElectionArea = true, }) => { - const electionDetail = createElement('div', ['election-detail']); + const electionDetail = createElement('div', ['election-detail','variant-subtle-primary']); const text = createElement('div', ['election-detail--text'], null, electionDetail); if (showVideo) { - const video = createElement('div', ['election-detail--video'], null, electionDetail); + const video = createElement('div', ['election-detail--video','variant-solid'], null, electionDetail); const videocontainer = createElement('div', ['video-container'], null, video); videocontainer.appendChild(createVideo({ caption: '', copyright: '', })); } - const info = createElement('div', ['election-detail--info'], null, electionDetail); + const info = createElement('div', ['election-detail--info','variant-accent'], null, electionDetail); const back = createElement('div', ['election-detail--back'], null, electionDetail); const more = createElement('div', ['election-detail--more', 'contact-wrapper'], null, electionDetail); diff --git a/gfi-ihk-2024/stories/sections/election-detail/election-detail.scss b/gfi-ihk-2024/stories/sections/election-detail/election-detail.scss index 81d15aa..676df59 100644 --- a/gfi-ihk-2024/stories/sections/election-detail/election-detail.scss +++ b/gfi-ihk-2024/stories/sections/election-detail/election-detail.scss @@ -1,5 +1,6 @@ @use '../../_global/styles/mixins' as *; @use '../../_global/styles/vars' as *; +@use '../../components/contact/contact' as *; .election-detail { margin: 0 0 80px 0; @@ -7,7 +8,7 @@ display: flex; justify-content: space-between; align-items: flex-start; - background: var(--theme-color-primary-dimmed-04); + background: var(--color-background); padding: 0 0 30px 0; @media (max-width: 1100px) { display: block; @@ -71,11 +72,11 @@ .social-icons { a { &:before { - color: var(--theme-color-primary); + color: var(--color-text); } &:hover:before { - color: var(--theme-color-secondary); + color: var(--color-decoration); } } } @@ -84,7 +85,7 @@ &--video { padding: 30px 0; - background: var(--theme-color-primary-dimmed-02); + background: var(--color-background); @media (max-width: 1100px) { background: none; } @@ -105,8 +106,8 @@ &--info { display: flex; justify-content: space-between; - background: var(--theme-color-primary); - color: var(--swatches-neutrals-white); + background: var(--color-background); + color: var(--color-text); @media (max-width: 1023px) { display: block; background: none; @@ -119,7 +120,7 @@ flex-direction: column; justify-content: space-between; @media (max-width: 1023px) { - background: var(--theme-color-primary); + background: var(--color-background); margin: 0 0 5px 0; } } @@ -145,9 +146,9 @@ } .info-box--text { cursor: pointer; - color: var(--swatches-neutrals-white); + //color: var(--swatches-neutrals-white); &:hover { - color: var(--theme-color-secondary); + //color: var(--theme-color-secondary); } font-size: 36px; line-height: 44px; @@ -161,7 +162,7 @@ } &--back { - background: var(--theme-color-primary-dimmed-04); + background: var(--color-background); display: flex; justify-content: center; padding: 30px 15px; @@ -171,5 +172,9 @@ &--more { margin: 60px 0 0 0 !important; max-width: none !important; + h3, .like-h3 { + margin-left: 0; + margin-right: 0; + } } } diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss index a862128..29f78a4 100644 --- a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss @@ -1,23 +1,26 @@ @use '../../_global/styles/mixins' as *; @use '../../_global/styles/vars' as *; @use '../../components/event-teaser-large/event-teaser-large.scss' as *; +@use '../../atoms/slider-tabs/slider-tabs'; -.right-open-container{ +.right-open-container { @media (min-width: 400px) { width: calc((var(--container-width) / 2) + 50vw - 8px); - margin-left:auto; - margin-right:0; - padding-right:0; + margin-left: auto; + margin-right: 0; + padding-right: 0; } } .eventteaserlargeslider { opacity: 0; transition: opacity 0.4s linear; + &.initiated { opacity: 1; } - .slider-tabs{ + + .slider-tabs { @media(min-width: 1471px) { width: calc(var(--container-width) - 2 * var(--container-padding)); left: 0 !important; @@ -51,15 +54,16 @@ align-items: flex-start; width: 80000px; contain: layout; - margin:0 calc(var(--col-padding) * -1); + margin: 0 calc(var(--col-padding) * -1); @media(max-width: 999px) { width: 34500px; //margin:0; } @media(max-width: 399px) { width: 10000%; - margin:0; + margin: 0; } + &.no-transition { -webkit-user-select: none; -moz-user-select: none; @@ -85,16 +89,16 @@ .slide { position: relative; - width:1%; - max-width:1%; - min-width:1%; - min-height:400px; - padding:var(--col-padding); + width: 1%; + max-width: 1%; + min-width: 1%; + min-height: 400px; + padding: var(--col-padding); @media(min-width: 1000px) { //padding:var(--col-padding); } @media(min-width: 400px) { - padding:var(--col-padding); + padding: var(--col-padding); } } @@ -113,81 +117,24 @@ } -.rotationslider{ - margin-bottom:calc(var(--section-margin) + 2rem) !important; +.rotationslider { + margin-bottom: calc(var(--section-margin) + 2rem) !important; overflow: hidden; padding-top: var(--section-margin); - margin-top:0; - h1{ + margin-top: 0; + + h1 { max-width: 50%; display: inline-block; } - .eventteaserlargeslider { - margin-bottom:2rem; + + .eventteaserlargeslider { + margin-bottom: 2rem; position: relative; display: block; - button { - border: 0; - background-color: transparent; - padding: 0; - cursor: pointer; - - } .slider-tabs, .tabs { - position: absolute; bottom: -2rem; - left: 50%; - right: 0; - padding: 0; - list-style: none; - transform: translate(-50%, 0); - text-align: center; - font-size: 0; - line-height: 0; - margin: 0; - li { - display: inline-block; - vertical-align: top; - - &.active button:before { - background-color: var(--theme-color-primary); - //box-shadow: 0 0 0 2px var(--theme-color-primary); - } - } - - .btn { - --button-min-size: 24px; - font-size: 0; - line-height: 0; - display: flex; - align-items: center; - justify-content: center; - - &::before { - content: ""; - position: relative; - display: block; - width: 15px; - height: 15px; - //border: 2px solid var(--theme-color-primary); - background-color: var(--theme-color-primary-dimmed-04); - border-radius: 15px; - transition: 0.2s ease; - } - - &::after { - display: none; - } - - &:hover { - background-color: transparent; - - &::before { - background-color: var(--theme-color-primary); - } - } - } } .prev, .next { @@ -199,45 +146,48 @@ line-height: 60px; left: calc(var(--container-width) - 2 * var(--container-padding) - 60px); color: var(--theme-color-primary); - right:auto; + right: auto; border-radius: 24px; background: var(--theme-color-primary-dimmed-04); --button-hover-shadow-opacity: 0.4; - --button-hover-shadow-size: 6px ; + --button-hover-shadow-size: 6px; @media(max-width: 1470px) { - left:auto; + left: auto; right: var(--container-padding); } @media(max-width: 1339px) { top: -90px; } @media(max-width: 399px) { - right:0px; + right: 0px; top: -80px; } @media(max-width: 767px) { } + &:before { @include icon-small-arrow-right-simple; font-family: "Icons", sans-serif; font-size: 30px; content: "\e825"; } - &:after{ + + &:after { content: ""; - position: absolute; - display: block; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: var(--border-radius-lg); - box-shadow: 0 0 0 2px var(--color-surface-inset); - opacity: 0; - transition: 0.3s ease; + position: absolute; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: var(--border-radius-lg); + box-shadow: 0 0 0 2px var(--color-surface-inset); + opacity: 0; + transition: 0.3s ease; } - &:hover:after{ + + &:hover:after { opacity: 0.4; box-shadow: 0 0 0 6px var(--color-surface-inset); } @@ -248,16 +198,18 @@ left: calc(var(--container-width) - 2 * var(--container-padding) - 140px); transform: rotate(180deg); @media(max-width: 1470px) { - left:auto; - right:calc(var(--container-padding) + 70px); + left: auto; + right: calc(var(--container-padding) + 70px); } @media(max-width: 399px) { - right:70px; + right: 70px; } } - .count{ - display:none; + + .count { + display: none; } + h2, .like-h2 { margin-top: 0.3em; margin-bottom: 0.4em; diff --git a/gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss b/gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss index 1bb7d9d..0e02a12 100644 --- a/gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss +++ b/gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss @@ -1,5 +1,6 @@ @use '../../_global/styles/mixins' as *; @use '../../_global/styles/vars' as *; +@use '../../atoms/slider-tabs/slider-tabs'; .quick-facts { position: relative; @@ -120,63 +121,12 @@ } .slider-tabs, .tabs { - position: absolute; bottom: 0; - left: 50%; - right: 0; - padding: 0; - list-style: none; - transform: translate(-50%, 0); - text-align: center; - font-size: 0; - line-height: 0; margin: 20px 0; @media(max-width: 567px) { margin-bottom: 12px; } - - li { - display: inline-block; - vertical-align: top; - - &.active button:before { - background-color: var(--theme-color-primary); - box-shadow: 0 0 0 2px var(--theme-color-primary); - } - } - - .btn { - --button-min-size: 24px; - font-size: 0; - line-height: 0; - display: flex; - align-items: center; - justify-content: center; - - &::before { - content: ""; - position: relative; - display: block; - width: 10px; - height: 10px; - border: 2px solid var(--theme-color-primary); - border-radius: 5px; - transition: 0.2s ease; - } - - &::after { - display: none; - } - - &:hover { - background-color: transparent; - - &::before { - background-color: var(--theme-color-primary); - } - } - } } .prev, .next { diff --git a/gfi-ihk-2024/stories/sections/timeline/Timeline.stories.js b/gfi-ihk-2024/stories/sections/timeline/Timeline.stories.js index 84d7dcc..0db7e7c 100644 --- a/gfi-ihk-2024/stories/sections/timeline/Timeline.stories.js +++ b/gfi-ihk-2024/stories/sections/timeline/Timeline.stories.js @@ -1,7 +1,7 @@ import {createTimeline} from "./TimelineComponent"; export default { - title: 'Components/Timeline', + title: 'Sections/Timeline', parameters: { layout: 'fullscreen', },