spawntree
/
ihk24
4
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

components, sections and refactoring slider tabs

master
FlorianEisenmenger 1 tydzień temu
rodzic
201378fcbe
commit
83a2903633
14 zmienionych plików z 241 dodań i 295 usunięć
Widok podzielony
Opcje porównania
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania
  1. +15
    -0
      gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabs.stories.js
  2. +16
    -0
      gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabsComponent.js
  3. +120
    -0
      gfi-ihk-2024/stories/atoms/slider-tabs/slider-tabs.scss
  4. +3
    -2
      gfi-ihk-2024/stories/components/teaser/teaser.scss
  5. +7
    -5
      gfi-ihk-2024/stories/components/testimonial/testimonial.scss
  6. +5
    -5
      gfi-ihk-2024/stories/components/topic-teaser/topic-teaser.scss
  7. +1
    -1
      gfi-ihk-2024/stories/components/video/video.scss
  8. +1
    -1
      gfi-ihk-2024/stories/sections/card-slider/CardSliderComponent.js
  9. +2
    -117
      gfi-ihk-2024/stories/sections/card-slider/card-slider.scss
  10. +3
    -3
      gfi-ihk-2024/stories/sections/election-detail/ElectionDetailComponent.js
  11. +15
    -10
      gfi-ihk-2024/stories/sections/election-detail/election-detail.scss
  12. +51
    -99
      gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss
  13. +1
    -51
      gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss
  14. +1
    -1
      gfi-ihk-2024/stories/sections/timeline/Timeline.stories.js

+ 15
- 0
gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabs.stories.js Wyświetl plik

@@ -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 = {};

+ 16
- 0
gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabsComponent.js Wyświetl plik

@@ -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;
}

+ 120
- 0
gfi-ihk-2024/stories/atoms/slider-tabs/slider-tabs.scss Wyświetl plik

@@ -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);
}
}
}

+ 3
- 2
gfi-ihk-2024/stories/components/teaser/teaser.scss Wyświetl plik

@@ -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);


+ 7
- 5
gfi-ihk-2024/stories/components/testimonial/testimonial.scss Wyświetl plik

@@ -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;


+ 5
- 5
gfi-ihk-2024/stories/components/topic-teaser/topic-teaser.scss Wyświetl plik

@@ -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;


+ 1
- 1
gfi-ihk-2024/stories/components/video/video.scss Wyświetl plik

@@ -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);
}
}
}

+ 1
- 1
gfi-ihk-2024/stories/sections/card-slider/CardSliderComponent.js Wyświetl plik

@@ -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');
}


+ 2
- 117
gfi-ihk-2024/stories/sections/card-slider/card-slider.scss Wyświetl plik

@@ -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);


+ 3
- 3
gfi-ihk-2024/stories/sections/election-detail/ElectionDetailComponent.js Wyświetl plik

@@ -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);



+ 15
- 10
gfi-ihk-2024/stories/sections/election-detail/election-detail.scss Wyświetl plik

@@ -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;
}
}
}

+ 51
- 99
gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss Wyświetl plik

@@ -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;


+ 1
- 51
gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss Wyświetl plik

@@ -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 {


+ 1
- 1
gfi-ihk-2024/stories/sections/timeline/Timeline.stories.js Wyświetl plik

@@ -1,7 +1,7 @@
import {createTimeline} from "./TimelineComponent";

export default {
title: 'Components/Timeline',
title: 'Sections/Timeline',
parameters: {
layout: 'fullscreen',
},


Napisz Podgląd
Ładowanie…
Anuluj
Zapisz