From a9064a91d771885bfcc3aed2a5b155c72a6c9c83 Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Wed, 6 Mar 2024 08:43:53 +0100 Subject: [PATCH] Card-Slider: Abstand Tablet --- .../eventteaserlargeslider.scss | 268 +++++++++--------- 1 file changed, 137 insertions(+), 131 deletions(-) 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 11a6b74..3a39c4d 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 @@ -3,7 +3,7 @@ @import '../../components/event-teaser-large/event-teaser-large.scss'; .right-open-container{ - @media (min-width: 1000px) { + @media (min-width: 400px) { width: calc((var(--container-width) / 2) + 50vw - 8px); margin-left:auto; margin-right:0; @@ -53,6 +53,10 @@ contain: layout; margin:0 calc(var(--col-padding) * -1); @media(max-width: 999px) { + width: 34500px; + //margin:0; + } + @media(max-width: 399px) { width: 10000%; margin:0; } @@ -85,8 +89,11 @@ 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); } } @@ -105,157 +112,156 @@ } } + .rotationslider{ margin-bottom:calc(var(--section-margin) + 2rem) !important; overflow: hidden; padding-top: var(--section-margin); margin-top:0; -} - -.rotationslider h1{ - max-width: 50%; - display: inline-block; -} - -.rotationslider .eventteaserlargeslider { - margin-bottom:2rem; - position: relative; - display: block; - - button { - border: 0; - background-color: transparent; - padding: 0; - cursor: pointer; - + h1{ + max-width: 50%; + display: inline-block; } - .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; + .eventteaserlargeslider { + margin-bottom:2rem; + position: relative; + display: block; - &.active button:before { - background-color: var(--theme-color-primary); - //box-shadow: 0 0 0 2px var(--theme-color-primary); - } + button { + border: 0; + background-color: transparent; + padding: 0; + cursor: pointer; + } - - .btn { - --button-min-size: 24px; + .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; - 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; - } + margin: 0; + li { + display: inline-block; + vertical-align: top; - &::after { - display: none; + &.active button:before { + background-color: var(--theme-color-primary); + //box-shadow: 0 0 0 2px var(--theme-color-primary); + } } - &:hover { - background-color: transparent; + .btn { + --button-min-size: 24px; + font-size: 0; + line-height: 0; + display: flex; + align-items: center; + justify-content: center; &::before { - background-color: var(--theme-color-primary); + 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 { - position: absolute; - top: -94px; - width: 60px; - height: 60px; - text-align: center; - line-height: 60px; - left: calc(var(--container-width) - 2 * var(--container-padding) - 60px); - color: var(--theme-color-primary); - right:auto; - border-radius: 24px; - background: var(--theme-color-primary-dimmed-04); - --button-hover-shadow-opacity: 0.4; - --button-hover-shadow-size: 6px ; - @media(max-width: 1470px) { - left:auto; - right: var(--container-padding); - } - @media(max-width: 1339px) { - top: -90px; - } - @media(max-width: 999px) { - right:0px; - top: -80px; - } - @media(max-width: 767px) { + .prev, .next { + position: absolute; + top: -94px; + width: 60px; + height: 60px; + text-align: center; + line-height: 60px; + left: calc(var(--container-width) - 2 * var(--container-padding) - 60px); + color: var(--theme-color-primary); + right:auto; + border-radius: 24px; + background: var(--theme-color-primary-dimmed-04); + --button-hover-shadow-opacity: 0.4; + --button-hover-shadow-size: 6px ; + @media(max-width: 1470px) { + left:auto; + right: var(--container-padding); + } + @media(max-width: 1339px) { + top: -90px; + } + @media(max-width: 399px) { + 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{ + 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-04); + opacity: 0; + transition: 0.3s ease; + } + &:hover:after{ + opacity: 0.4; + box-shadow: 0 0 0 6px var(--theme-color-primary-dimmed-04); + } + } - &:before { - @include icon-small-arrow-right-simple; - font-family: "Icons", sans-serif; - font-size: 30px; - content: "\e825"; + + .prev { + 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); + } + @media(max-width: 399px) { + right:70px; + } } - &: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-04); - opacity: 0; - transition: 0.3s ease; + .count{ + display:none; } - &:hover:after{ - opacity: 0.4; - box-shadow: 0 0 0 6px var(--theme-color-primary-dimmed-04); + h2, .like-h2 { + margin-top: 0.3em; + margin-bottom: 0.4em; } - - } - .prev { - 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); - } - @media(max-width: 999px) { - right:70px; - } - } - .count{ - display:none; } - h2, .like-h2 { - margin-top: 0.3em; - margin-bottom: 0.4em; - } - -} +} \ No newline at end of file